// ============================================================
// WORK SECTION — three arms, one constellation
// ============================================================

function ArmCard({ arm, theme, featured }) {
  const [hover, setHover] = React.useState(false);
  const { isMobile } = window.useViewport();
  const ref = React.useRef(null);
  const onMove = (e) => {
    const el = ref.current;
    if (!el) return;
    const r = el.getBoundingClientRect();
    el.style.setProperty("--sx", `${e.clientX - r.left}px`);
    el.style.setProperty("--sy", `${e.clientY - r.top}px`);
  };
  return (
    <a
      ref={ref}
      href={arm.href}
      onMouseEnter={() => setHover(true)}
      onMouseLeave={() => setHover(false)}
      onPointerMove={onMove}
      style={{
        position: "relative",
        display: "flex",
        flexDirection: "column",
        padding: isMobile ? "24px 22px 22px" : "32px 32px 28px",
        background: featured
          ? `linear-gradient(180deg, ${theme.accent}14, ${theme.accent}05)`
          : theme.card,
        border: `1px solid ${featured ? theme.accent + "55" : theme.cardBorder}`,
        boxShadow: "inset 0 1px 0 rgba(255,255,255,0.05)",
        borderRadius: 18,
        textDecoration: "none",
        color: theme.ink,
        minHeight: isMobile ? 0 : 360,
        overflow: "hidden",
        transition: "transform 250ms cubic-bezier(.16,1,.3,1), border-color 250ms",
        transform: hover ? "translateY(-4px)" : "translateY(0)",
      }}
    >
      {/* cursor spotlight */}
      <div
        aria-hidden
        style={{
          position: "absolute",
          inset: 0,
          opacity: hover ? 1 : 0,
          transition: "opacity .4s ease",
          background: `radial-gradient(280px circle at var(--sx, 50%) var(--sy, 50%), ${theme.accent}14, transparent 65%)`,
          pointerEvents: "none",
        }}
      />
<div
        style={{
          fontSize: 11,
          letterSpacing: 1.6,
          textTransform: "uppercase",
          color: featured ? theme.accent : theme.sub,
          fontWeight: 600,
          marginBottom: 18,
          fontFamily: "'JetBrains Mono', 'SF Mono', ui-monospace, monospace",
        }}
      >
        {arm.eyebrow}
      </div>

      <h3
        style={{
          fontSize: 30,
          fontWeight: 700,
          letterSpacing: -0.8,
          lineHeight: 1.05,
          margin: "0 0 16px 0",
          textWrap: "balance",
        }}
      >
        {arm.title}
      </h3>

      <p
        style={{
          fontSize: 16,
          lineHeight: 1.55,
          color: theme.sub,
          margin: "0 0 28px 0",
          textWrap: "pretty",
          flex: 1,
        }}
      >
        {arm.body}
      </p>

      {arm.tags && (
        <div style={{ display: "flex", flexWrap: "wrap", gap: 6, marginBottom: 22 }}>
          {arm.tags.map((t) => (
            <span
              key={t}
              style={{
                fontSize: 11,
                padding: "3px 9px",
                borderRadius: 999,
                background: theme.chip,
                color: theme.chipText,
                fontFamily: "'JetBrains Mono', 'SF Mono', ui-monospace, monospace",
                letterSpacing: 0.2,
              }}
            >
              {t}
            </span>
          ))}
        </div>
      )}

      <span
        style={{
          color: theme.accent,
          fontWeight: 600,
          fontSize: 14.5,
          display: "inline-flex",
          alignItems: "center",
          gap: 8,
          transition: "gap 200ms",
        }}
      >
        {arm.cta}
        <span style={{ transform: hover ? "translateX(4px)" : "translateX(0)", transition: "transform 200ms" }}>→</span>
      </span>
    </a>
  );
}

function WorkSection({ theme }) {
  const { Section, Eyebrow } = window;
  const { isMobile } = window.useViewport();
  const arms = [
    {
      href: "/benchmark",
      eyebrow: "Arm · Evaluating",
      title: "BRAINS Benchmark",
      body: "The independent benchmark and certification framework that evaluates AI systems against neurodivergent-led criteria. Public scoring, public methodology.",
      tags: ["Public methodology", "Live evaluations", "Open scoring"],
      cta: "Explore the Benchmark",
    },
    {
      href: "/incubator",
      eyebrow: "Arm · Building",
      title: "BRAINS Incubator",
      body: "The building arm. Houses BRAINS Benchmark, a knowledge wiki, a résumé tool for neurodivergent job seekers, and more in development.",
      tags: ["Benchmark", "Wiki", "Résumé tool", "+ more"],
      cta: "Explore the Incubator",
    },
    {
      href: "/trust",
      eyebrow: "Arm · Forming, phase 2",
      title: "BRAINS Trust",
      body: "A standing committee of neurodivergent clinicians, researchers, ethicists, educators, and policy professionals. The conscience that keeps everything honest.",
      tags: ["Clinicians", "Researchers", "Ethicists", "Educators"],
      cta: "Explore the Trust",
    },
  ];

  return (
    <Section id="work" theme={theme} padding="140px 0 100px" mobilePadding="64px 0 48px">
      <window.Reveal>
      <div style={{ display: "grid", gridTemplateColumns: isMobile ? "1fr" : "1fr 1.4fr", gap: isMobile ? 24 : 80, marginBottom: isMobile ? 36 : 64, alignItems: "end" }}>
        <div>
          <Eyebrow theme={theme}>Our work</Eyebrow>
          <h2
            style={{
              fontSize: "clamp(32px, 4.6vw, 64px)",
              lineHeight: 1,
              fontWeight: 700,
              letterSpacing: -1.4,
              margin: 0,
              color: theme.ink,
              textWrap: "balance",
            }}
          >
            Three arms.
            <br />
            <span style={{ color: theme.accent, fontStyle: "italic", fontWeight: 600 }}>One constellation.</span>
          </h2>
        </div>
        <p
          style={{
            fontSize: isMobile ? 16 : 19,
            lineHeight: 1.6,
            color: theme.sub,
            margin: 0,
            maxWidth: 560,
            textWrap: "pretty",
          }}
        >
          BRAINS works through three arms: the{" "}
          <span style={{ color: theme.ink, fontWeight: 500 }}>Benchmark</span>, which{" "}
          <em>evaluates</em>; the{" "}
          <span style={{ color: theme.ink, fontWeight: 500 }}>Incubator</span>, which{" "}
          <em>builds</em>; and the{" "}
          <span style={{ color: theme.ink, fontWeight: 500 }}>Trust</span>, which{" "}
          <em>advises</em>. One constellation, one mission.
        </p>
      </div>
      </window.Reveal>

      <div style={{ display: "grid", gridTemplateColumns: isMobile ? "1fr" : "1.1fr 1fr 1fr", gap: isMobile ? 16 : 20 }}>
        <window.Reveal delay={0} style={{ display: "flex", flexDirection: "column" }}>
          <ArmCard arm={arms[0]} theme={theme} featured />
        </window.Reveal>
        <window.Reveal delay={120} style={{ display: "flex", flexDirection: "column" }}>
          <ArmCard arm={arms[1]} theme={theme} />
        </window.Reveal>
        <window.Reveal delay={240} style={{ display: "flex", flexDirection: "column" }}>
          <ArmCard arm={arms[2]} theme={theme} />
        </window.Reveal>
      </div>

      <window.Reveal delay={120}>
      <div
        style={{
          marginTop: 40,
          padding: "20px 26px",
          borderLeft: `2px solid ${theme.accent}`,
          background: theme.card,
          borderRadius: "0 10px 10px 0",
          fontSize: 16,
          lineHeight: 1.55,
          color: theme.ink,
          maxWidth: 880,
        }}
      >
        <strong style={{ color: theme.accent, fontWeight: 600, letterSpacing: 0.2 }}>
          BRAINS Benchmark evaluates every AI system on the same criteria
        </strong>{" "}
        <span style={{ color: theme.sub }}>
          including the ones BRAINS and our partners build. No exceptions.
        </span>
      </div>
      </window.Reveal>
    </Section>
  );
}

window.WorkSection = WorkSection;