const { useState: useStateS, useEffect: useEffectS, useRef: useRefS } = React;

function Button({ children, variant = "primary", onClick, style, disabled, ...rest }) {
  const base = {
    display: "inline-flex", alignItems: "center", gap: 10,
    padding: "14px 24px",
    fontFamily: "inherit", fontSize: 15, fontWeight: 500,
    borderRadius: 999,
    border: "1.5px solid transparent",
    textDecoration: "none",
    transition: "transform .12s ease, background .18s, color .18s, border-color .18s, box-shadow .18s",
    cursor: disabled ? "not-allowed" : "pointer",
    opacity: disabled ? 0.6 : 1,
    letterSpacing: "-0.005em",
    ...style,
  };
  const variants = {
    primary: { background: "var(--sun)", color: "var(--bark)", border: "1.5px solid var(--sun)", boxShadow: "0 2px 0 var(--sun-deep)" },
    bark:    { background: "var(--bark)", color: "var(--cream)", border: "1.5px solid var(--bark)" },
    ghost:   { background: "transparent", color: "var(--bark)", border: "1.5px solid var(--bark)" },
    cream:   { background: "var(--cream)", color: "var(--bark)", border: "1.5px solid var(--cream)" },
  };
  return (
    <button onClick={onClick} disabled={disabled} style={{ ...base, ...variants[variant] }}
      onMouseEnter={e => {
        if (disabled) return;
        if (variant === "primary") { e.currentTarget.style.background = "var(--sun-deep)"; e.currentTarget.style.borderColor = "var(--sun-deep)"; }
        if (variant === "bark") e.currentTarget.style.background = "var(--ink)";
        if (variant === "ghost") { e.currentTarget.style.background = "var(--bark)"; e.currentTarget.style.color = "var(--cream)"; }
      }}
      onMouseLeave={e => {
        if (variant === "primary") { e.currentTarget.style.background = "var(--sun)"; e.currentTarget.style.borderColor = "var(--sun)"; }
        if (variant === "bark") e.currentTarget.style.background = "var(--bark)";
        if (variant === "ghost") { e.currentTarget.style.background = "transparent"; e.currentTarget.style.color = "var(--bark)"; }
      }}
      {...rest}
    >{children}</button>
  );
}

function Reveal({ children, delay = 0, as: Tag = "div", style, ...rest }) {
  const ref = useRefS(null);
  useEffectS(() => {
    const el = ref.current;
    if (!el) return;
    const io = new IntersectionObserver(([e]) => {
      if (e.isIntersecting) {
        el.style.transitionDelay = `${delay}ms`;
        el.classList.add("in");
        io.disconnect();
      }
    }, { threshold: 0.12 });
    io.observe(el);
    return () => io.disconnect();
  }, [delay]);
  return <Tag ref={ref} className="reveal" style={style} {...rest}>{children}</Tag>;
}

function Eyebrow({ children, color = "var(--bark-3)" }) {
  return (
    <div className="mono" style={{ color, marginBottom: 36, display: "inline-flex", alignItems: "center", gap: 14 }}>
      <BranchSprig size={48}/>
      <span>{children}</span>
    </div>
  );
}

Object.assign(window, { Button, Reveal, Eyebrow });