// Shared page primitives — hero, prose, reveal hook
const useReveal = () => {
  React.useEffect(() => {
    if (!window.gsap || !window.ScrollTrigger) return;
    const els = document.querySelectorAll("[data-reveal]");
    window.gsap.from(els, {
      y: 28, opacity: 0, duration: 0.9, stagger: 0.06, ease: "expo.out",
    });
    const scrollEls = document.querySelectorAll("[data-reveal-scroll]");
    scrollEls.forEach(el => {
      window.gsap.from(el, {
        scrollTrigger: { trigger: el, start: "top 85%" },
        y: 32, opacity: 0, duration: 0.9, ease: "expo.out",
      });
    });
  }, []);
};
window.useReveal = useReveal;

const PageHero = ({ eyebrow, title, lead, tint = "var(--cobalt-700)" }) => (
  <section style={{
    padding: "clamp(116px, 14vw, 180px) clamp(16px, 4vw, 48px) clamp(64px, 8vw, 96px)",
    background: "var(--paper)",
    position: "relative",
    overflow: "hidden",
  }}>
    {/* subtle brand glow */}
    <div aria-hidden style={{
      position: "absolute", top: -200, right: -200,
      width: 720, height: 720,
      background: "radial-gradient(closest-side, color-mix(in oklab, var(--brand-violet) 20%, transparent), transparent 70%)",
      filter: "blur(40px)", pointerEvents: "none",
    }}/>
    <div aria-hidden style={{
      position: "absolute", top: 80, left: -240,
      width: 640, height: 640,
      background: "radial-gradient(closest-side, color-mix(in oklab, var(--brand-cobalt) 18%, transparent), transparent 70%)",
      filter: "blur(40px)", pointerEvents: "none",
    }}/>
    <div style={{ maxWidth: 1280, margin: "0 auto", position: "relative" }}>
      <div data-reveal style={{
        fontFamily: "var(--font-mono)", fontSize: 12, fontWeight: 600,
        letterSpacing: "0.14em", textTransform: "uppercase",
        color: tint, marginBottom: 28,
      }}>{eyebrow}</div>
      <h1 data-reveal style={{
        fontFamily: "var(--font-display)", fontWeight: 400,
        fontSize: "clamp(56px, 8vw, 112px)", lineHeight: 1.02,
        letterSpacing: "-0.025em", margin: 0, maxWidth: 1100,
      }}>{title}</h1>
      {lead && (
        <p data-reveal style={{
          maxWidth: 680, marginTop: 30, fontSize: "clamp(16px, 2.4vw, 20px)", lineHeight: 1.55,
          color: "var(--fg-muted)",
        }}>{lead}</p>
      )}
    </div>
  </section>
);
window.PageHero = PageHero;

const Prose = ({ children, maxw = 760 }) => (
  <section style={{ padding: "clamp(56px, 9vw, 80px) clamp(16px, 4vw, 48px) clamp(72px, 10vw, 120px)", background: "var(--paper)" }}>
    <div style={{ maxWidth: maxw, margin: "0 auto", fontSize: 17, lineHeight: 1.7, color: "var(--fg)" }}>
      {children}
    </div>
  </section>
);
window.Prose = Prose;

const H2 = ({ children }) => (
  <h2 data-reveal-scroll style={{
    fontFamily: "var(--font-display)", fontWeight: 400,
    fontSize: "clamp(28px, 4vw, 36px)", lineHeight: 1.1, letterSpacing: "-0.02em",
    margin: "56px 0 18px", color: "var(--ink-900)",
  }}>{children}</h2>
);
window.H2 = H2;

const P = ({ children }) => (
  <p data-reveal-scroll style={{ margin: "0 0 18px", color: "var(--fg)" }}>{children}</p>
);
window.P = P;

const Meta = ({ items = [] }) => (
  <div data-reveal style={{
    margin: "0 0 26px",
    padding: "14px 16px",
    border: "1px solid var(--border)",
    borderRadius: 14,
    background: "var(--paper-raised)",
    display: "grid",
    gap: 8,
  }}>
    {items.map(([label, value]) => (
      <div key={label} style={{
        display: "grid",
        gridTemplateColumns: "120px 1fr",
        gap: 12,
        alignItems: "baseline",
      }}>
        <span style={{
          fontFamily: "var(--font-mono)",
          fontSize: 11,
          letterSpacing: "0.08em",
          textTransform: "uppercase",
          color: "var(--fg-muted)",
          fontWeight: 600,
        }}>{label}</span>
        <span style={{ fontSize: 14, color: "var(--ink-900)", fontWeight: 500 }}>{value}</span>
      </div>
    ))}
  </div>
);
window.Meta = Meta;

const UL = ({ items = [] }) => (
  <ul data-reveal-scroll style={{ margin: "0 0 20px 0", paddingLeft: 0, listStyle: "none" }}>
    {items.map((item, i) => (
      <li key={i} style={{
        display: "grid",
        gridTemplateColumns: "16px 1fr",
        gap: 10,
        marginBottom: 10,
        color: "var(--fg)",
      }}>
        <span aria-hidden style={{
          width: 8,
          height: 8,
          marginTop: 9,
          borderRadius: 999,
          background: "var(--brand-cobalt)",
        }}/>
        <span>{item}</span>
      </li>
    ))}
  </ul>
);
window.UL = UL;

// Pill button — solid + outline variants used across the site
const Btn = ({ href, children, variant = "primary", target, rel, onClick, type }) => {
  const styles = {
    primary: {
      background: "var(--ink-900)", color: "var(--paper)",
      border: "1px solid var(--ink-900)",
    },
    accent: {
      background: "var(--brand-gradient)", color: "var(--paper)",
      border: "1px solid transparent",
    },
    ghost: {
      background: "transparent", color: "var(--ink-900)",
      border: "1px solid var(--border-strong)",
    },
    invert: {
      background: "var(--paper)", color: "var(--ink-900)",
      border: "1px solid var(--paper)",
    },
  }[variant];
  const Tag = href ? "a" : "button";
  return (
    <Tag
      href={href} target={target} rel={rel} onClick={onClick} type={type}
      style={{
        ...styles,
        display: "inline-flex", alignItems: "center", gap: 8,
        padding: "14px 22px", borderRadius: 9999,
        fontSize: 15, fontWeight: 600,
        textDecoration: "none",
        cursor: "pointer",
        transition: "transform 200ms, box-shadow 200ms, opacity 200ms",
      }}
      onMouseEnter={e => { e.currentTarget.style.transform = "translateY(-1px)"; e.currentTarget.style.boxShadow = "0 10px 24px rgba(46,91,255,0.20)"; }}
      onMouseLeave={e => { e.currentTarget.style.transform = "translateY(0)"; e.currentTarget.style.boxShadow = "none"; }}
    >
      {children}
      <svg width="14" height="14" viewBox="0 0 16 16" fill="none" stroke="currentColor" strokeWidth="1.8" strokeLinecap="round" strokeLinejoin="round">
        <path d="M3 8h10M9 4l4 4-4 4"/>
      </svg>
    </Tag>
  );
};
window.Btn = Btn;