// ============================================================
// BENCHMARK PAGE — Hero + status panel + criteria
// ============================================================

function BenchmarkHero({ theme, prefs }) {
  const { Constellation } = window;
  const { isMobile } = window.useViewport();
  const motion = !prefs.dyslexia;
  return (
    <section
      style={{
        position: "relative",
        background: theme.heroBg,
        color: theme.ink,
        overflow: "hidden",
        paddingTop: isMobile ? 100 : 140,
        paddingBottom: isMobile ? 60 : 100,
      }}
    >
      <Constellation
        density={0.65}
        speed={0.8}
        accent={theme.accent}
        glow={true}
        dark={theme.dark}
        motion={motion}
      />
      <div
        aria-hidden
        style={{
          position: "absolute",
          inset: 0,
          backgroundImage: theme.dark
            ? "linear-gradient(rgba(255,255,255,0.025) 1px, transparent 1px), linear-gradient(90deg, rgba(255,255,255,0.025) 1px, transparent 1px)"
            : "linear-gradient(rgba(22,26,43,0.04) 1px, transparent 1px), linear-gradient(90deg, rgba(22,26,43,0.04) 1px, transparent 1px)",
          backgroundSize: "56px 56px",
          maskImage: "radial-gradient(ellipse at center, black 25%, transparent 75%)",
          pointerEvents: "none",
        }}
      />

      <div
        style={{
          position: "relative",
          maxWidth: 1280,
          margin: "0 auto",
          padding: isMobile ? "0 22px" : "0 48px",
          display: "grid",
          gridTemplateColumns: isMobile ? "1fr" : "1.4fr 1fr",
          gap: isMobile ? 32 : 60,
          alignItems: "end",
          zIndex: 2,
        }}
      >
        <div>
          <window.Reveal delay={0}>
          <div
            style={{
              display: "inline-flex",
              alignItems: "center",
              gap: 10,
              padding: "6px 14px",
              borderRadius: 999,
              background: theme.chip,
              border: `1px solid ${theme.chipBorder}`,
              color: theme.accent,
              fontSize: 11.5,
              letterSpacing: 1.4,
              textTransform: "uppercase",
              fontWeight: 600,
              marginBottom: 28,
              fontFamily: "'JetBrains Mono', monospace",
            }}
          >
            <span style={{ width: 6, height: 6, borderRadius: "50%", background: theme.accent, boxShadow: `0 0 10px ${theme.accent}` }} />
            Arm · Evaluating
          </div>
          </window.Reveal>

          <window.Reveal delay={90}>
          <h1
            style={{
              fontSize: "clamp(32px, 5.5vw, 84px)",
              lineHeight: 0.98,
              fontWeight: 700,
              letterSpacing: -1.5,
              margin: "0 0 28px 0",
              textWrap: "balance",
            }}
          >
            The global benchmark for{" "}
            <span style={{ color: theme.accent, fontStyle: "italic", fontWeight: 600 }}>
              neuro-affirming AI.
            </span>
          </h1>
          </window.Reveal>

          <window.Reveal delay={180}>
          <p style={{ fontSize: 20, lineHeight: 1.55, color: theme.sub, margin: "0 0 36px 0", maxWidth: 580, textWrap: "pretty" }}>
            BRAINS Benchmark evaluates AI systems against criteria set by neurodivergent
            researchers, advocates, and end-users, then publishes the results openly.
            Methodology is public. So is every score.
          </p>
          </window.Reveal>

          <window.Reveal delay={260}>
          <div style={{ display: "flex", gap: 14, flexWrap: "wrap" }}>
            <a
              href="#leaderboard"
              style={{
                padding: "15px 28px",
                borderRadius: 999,
                background: theme.accent,
                color: "#161a2b",
                fontSize: 15,
                fontWeight: 600,
                textDecoration: "none",
                boxShadow: theme.dark ? `0 10px 30px -10px ${theme.accent}aa` : "0 10px 30px -10px rgba(22,26,43,0.4)",
                display: "inline-flex",
                alignItems: "center",
                gap: 8,
              }}
            >
              See the leaderboard →
            </a>
            <a
              href="#methodology"
              style={{
                padding: "15px 22px",
                borderRadius: 999,
                background: "transparent",
                color: theme.ink,
                border: `1px solid ${theme.chipBorder}`,
                fontSize: 15,
                fontWeight: 500,
                textDecoration: "none",
              }}
            >
              Read the methodology
            </a>
          </div>
          </window.Reveal>
        </div>

        {/* Right column: live status panel + live evaluation terminal */}
        <div style={{ display: "flex", flexDirection: "column", gap: 16 }}>
        <window.Reveal delay={150}>
        <div
          style={{
            background: theme.dark ? "rgba(8,16,30,0.55)" : "rgba(250,246,234,0.7)",
            backdropFilter: "blur(10px)",
            border: `1px solid ${theme.cardBorder}`,
            borderRadius: 18,
            padding: "26px 28px",
            fontFamily: "'JetBrains Mono', monospace",
          }}
        >
          <div
            style={{
              display: "flex",
              alignItems: "center",
              gap: 8,
              marginBottom: 22,
              fontSize: 11,
              letterSpacing: 1.4,
              textTransform: "uppercase",
              color: theme.sub,
            }}
          >
            <span style={{ width: 8, height: 8, borderRadius: "50%", background: theme.success, boxShadow: `0 0 10px ${theme.success}` }} />
            Benchmark status: live
          </div>
          {[
            ["Methodology version", "v0.4 draft, public review"],
            ["Last updated", "to be confirmed"],
            ["Systems on roadmap", "12 (Q3 2026 launch)"],
            ["Open scoring", "every system, every time"],
          ].map(([k, v]) => (
            <div
              key={k}
              style={{
                display: "flex",
                justifyContent: "space-between",
                alignItems: "baseline",
                padding: "10px 0",
                borderBottom: `1px solid ${theme.cardBorder}`,
                fontSize: 13,
              }}
            >
              <span style={{ color: theme.sub }}>{k}</span>
              <span style={{ color: theme.ink, fontWeight: 500, textAlign: "right" }}>
                {v}
              </span>
            </div>
          ))}
          <div style={{ marginTop: 18, fontSize: 11, color: theme.mute, lineHeight: 1.5 }}>
            All figures on this panel are{" "}
            <span style={{ color: theme.accent }}>verified draft data</span> from the
            current methodology working group.
          </div>
        </div>
        </window.Reveal>

        <window.Reveal delay={260}>
          <window.EvalTerminal
            theme={theme}
            title="Live evaluation · neurodivergent access criteria"
            lines={[
              "evaluate(system, rubric: reliable-affirming-inclusive)",
              "reliable    consistent across reading levels    pass",
              "affirming   identity-first, no deficit framing   pass",
              "inclusive   sensory load + pacing defaults       review",
              "panel: lived-experience reviewers deliberating…",
              "result logged · transcript public · score pending",
            ]}
          />
        </window.Reveal>
        </div>
      </div>
    </section>
  );
}

// ============================================================
// CRITERIA — three pillars: Reliable / Affirming / Inclusive
// ============================================================

function CriterionCard({ letter, title, body, points, theme }) {
  const { isMobile } = window.useViewport();
  return (
    <div
      style={{
        position: "relative",
        padding: isMobile ? "28px 22px 24px" : "36px 32px 32px",
        background: theme.card,
        border: `1px solid ${theme.cardBorder}`,
        borderRadius: 18,
        overflow: "hidden",
        display: "flex",
        flexDirection: "column",
        minHeight: isMobile ? 0 : 420,
      }}
    >
      <div
        style={{
          position: "absolute",
          right: -30,
          top: -40,
          fontSize: 220,
          fontWeight: 700,
          letterSpacing: -8,
          color: theme.accent,
          opacity: theme.dark ? 0.12 : 0.18,
          lineHeight: 1,
          fontFamily: "'Inter', sans-serif",
          pointerEvents: "none",
        }}
      >
        {letter}
      </div>
      <div
        style={{
          fontSize: 13,
          letterSpacing: 1.4,
          textTransform: "uppercase",
          color: theme.accent,
          fontWeight: 600,
          fontFamily: "'JetBrains Mono', monospace",
          marginBottom: 12,
        }}
      >
        Criterion · {letter}
      </div>
      <h3 style={{ fontSize: isMobile ? 24 : 30, fontWeight: 700, letterSpacing: -0.8, margin: "0 0 14px 0", color: theme.ink }}>
        {title}
      </h3>
      <p style={{ fontSize: 16, lineHeight: 1.55, color: theme.sub, margin: "0 0 22px 0", textWrap: "pretty" }}>
        {body}
      </p>
      <div style={{ marginTop: "auto", paddingTop: 18, borderTop: `1px solid ${theme.cardBorder}` }}>
        <div
          style={{
            fontSize: 11,
            letterSpacing: 1.4,
            textTransform: "uppercase",
            color: theme.mute,
            fontWeight: 600,
            marginBottom: 10,
            fontFamily: "'JetBrains Mono', monospace",
          }}
        >
          Includes sub-tests for
        </div>
        <ul style={{ listStyle: "none", padding: 0, margin: 0, display: "flex", flexDirection: "column", gap: 8 }}>
          {points.map((p) => (
            <li key={p} style={{ fontSize: 14, color: theme.ink, display: "flex", alignItems: "flex-start", gap: 10 }}>
              <span
                style={{
                  display: "inline-block",
                  width: 5,
                  height: 5,
                  borderRadius: "50%",
                  background: theme.accent,
                  marginTop: 8,
                  flexShrink: 0,
                }}
              />
              {p}
            </li>
          ))}
        </ul>
      </div>
    </div>
  );
}

function CriteriaSection({ theme }) {
  const { Section, Eyebrow, Placeholder } = window;
  const { isMobile } = window.useViewport();
  return (
    <Section id="criteria" theme={theme} padding="120px 0 80px">
      <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}>How we score</Eyebrow>
          <h2
            style={{
              fontSize: "clamp(28px, 4.6vw, 60px)",
              lineHeight: 1.02,
              fontWeight: 700,
              letterSpacing: -1.4,
              margin: 0,
              color: theme.ink,
              textWrap: "balance",
            }}
          >
            Three criteria.
            <br />
            <span style={{ color: theme.accent, fontStyle: "italic", fontWeight: 600 }}>
              Set by lived experience.
            </span>
          </h2>
        </div>
        <p style={{ fontSize: 18, lineHeight: 1.6, color: theme.sub, margin: 0, maxWidth: 540 }}>
          Every Benchmark evaluation tests whether an AI system is{" "}
          <span style={{ color: theme.ink, fontWeight: 500 }}>reliable</span>,{" "}
          <span style={{ color: theme.ink, fontWeight: 500 }}>affirming</span>, and{" "}
          <span style={{ color: theme.ink, fontWeight: 500 }}>inclusive</span> for
          neurodivergent people. Criteria are co-designed with the BRAINS Trust, not
          designed at users from the outside.
        </p>
      </div>
      </window.Reveal>

      <div style={{ display: "grid", gridTemplateColumns: isMobile ? "1fr" : "1fr 1fr 1fr", gap: isMobile ? 16 : 20 }}>
        <window.Reveal delay={0} style={{ display: "flex", flexDirection: "column" }}>
        <CriterionCard
          letter="R"
          title="Reliable"
          body="Does the system do what it says, consistently, across different neurotypes, not just the median user it was tested against?"
          points={[
            "Cross-neurotype consistency",
            "Behaviour under stress and overload",
            "Failure modes for atypical input",
            "Long-context stability",
          ]}
          theme={theme}
        />
        </window.Reveal>
        <window.Reveal delay={110} style={{ display: "flex", flexDirection: "column" }}>
        <CriterionCard
          letter="A"
          title="Affirming"
          body="Does the system speak to neurodivergent users without pathologising them, and respect how they actually communicate?"
          points={[
            "Tone, framing, and language audits",
            "Refusal & friction analysis",
            "Stim, infodump, and special-interest handling",
            "Sensory and overwhelm response",
          ]}
          theme={theme}
        />
        </window.Reveal>
        <window.Reveal delay={220} style={{ display: "flex", flexDirection: "column" }}>
        <CriterionCard
          letter="I"
          title="Inclusive"
          body="Does the system meet real access needs (formatting, pacing, sensory load) by default, not as an opt-in?"
          points={[
            "Plain-language and structure support",
            "Pacing, length, and chunking",
            "Visual and sensory load defaults",
            "Multimodal input parity",
          ]}
          theme={theme}
        />
        </window.Reveal>
      </div>
    </Section>
  );
}

window.BenchmarkHero = BenchmarkHero;
window.CriteriaSection = CriteriaSection;