// ============================================================
// FOUNDING PARTNERS PAGE — Hero + problem + why-benchmark
// ============================================================

function FoundingHero({ 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 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 ? 28 : 60,
          alignItems: "end",
          zIndex: 2,
        }}
      >
        <div>
          <window.Reveal>
          <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}` }} />
            An invitation
          </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",
            }}
          >
            Help build the{" "}
            <span style={{ color: theme.accent, fontStyle: "italic", fontWeight: 600 }}>
              benchmark.
            </span>
          </h1>
          </window.Reveal>
          <window.Reveal delay={180}>
          <p style={{ fontSize: 20, lineHeight: 1.55, color: theme.sub, margin: "0 0 36px 0", maxWidth: 600, textWrap: "pretty" }}>
            BRAINS is seeking founding philanthropic partners to fund{" "}
            <span style={{ color: theme.ink, fontWeight: 500 }}>BRAINS Benchmark</span>{" "}
            over its first 36 months: the methodology, the evaluations, and the
            public leaderboard.
          </p>
          </window.Reveal>
          <window.Reveal delay={260}>
          <div style={{ display: "flex", gap: 14, flexWrap: "wrap" }}>
            <a
              href="#conversation"
              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)",
              }}
            >
              Start a conversation →
            </a>
            <a
              href="#prospectus"
              style={{
                padding: "15px 22px",
                borderRadius: 999,
                background: "transparent",
                color: theme.ink,
                border: `1px solid ${theme.chipBorder}`,
                fontSize: 15,
                fontWeight: 500,
                textDecoration: "none",
              }}
            >
              See the 36-month plan
            </a>
          </div>
          </window.Reveal>
        </div>

        <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: isMobile ? "20px 20px" : "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}` }} />
            Round status
          </div>
          {[
            ["Round", "Founding · 2026–2029"],
            ["Term", "36 months"],
            ["Intake", "Rolling, open now"],
            ["Independence", "Audited annually"],
            ["Prospectus", "On request"],
          ].map(([k, v]) => (
            <div
              key={k}
              style={{
                display: "flex",
                justifyContent: "space-between",
                alignItems: "baseline",
                padding: "9px 0",
                borderBottom: `1px solid ${theme.cardBorder}`,
                fontSize: 13,
                gap: 12,
              }}
            >
              <span style={{ color: theme.sub, whiteSpace: "nowrap" }}>{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 }}>
            Funding pays the team. It does{" "}
            <span style={{ color: theme.accent }}>not</span> buy a score, a tier, or
            an embargo.
          </div>
        </div>
        </window.Reveal>
      </div>
    </section>
  );
}

// ============================================================
// PROBLEM & WHY NOW
// ============================================================

function ProblemSection({ theme }) {
  const { Section, Eyebrow } = window;
  const { isMobile } = window.useViewport();
  const fields = [
    { k: "Education" },
    { k: "Employment" },
    { k: "Clinical care" },
    { k: "Daily life" },
  ];
  return (
    <Section id="problem" theme={theme} padding="120px 0 80px">
      <div style={{ display: "grid", gridTemplateColumns: isMobile ? "1fr" : "1fr 1.4fr", gap: isMobile ? 32 : 80, alignItems: "start" }}>
        <window.Reveal>
        <div>
          <Eyebrow theme={theme}>The problem, and why now</Eyebrow>
          <h2
            style={{
              fontSize: "clamp(26px, 4.4vw, 56px)",
              lineHeight: 1.02,
              fontWeight: 700,
              letterSpacing: -1.3,
              margin: "0 0 24px 0",
              color: theme.ink,
              textWrap: "balance",
            }}
          >
            Most AI is never evaluated against{" "}
            <span style={{ color: theme.accent, fontStyle: "italic", fontWeight: 600 }}>
              neurodivergent reality.
            </span>
          </h2>
          <p style={{ fontSize: 16, lineHeight: 1.6, color: theme.sub, margin: 0, maxWidth: 380 }}>
            Then it reaches the people who depend on it (across the four fields on
            the right) without ever being tested for them.
          </p>
        </div>
        </window.Reveal>
        <div>
          <p style={{ fontSize: 18, lineHeight: 1.6, color: theme.ink, margin: "0 0 24px 0", textWrap: "pretty" }}>
            Most AI systems are never evaluated against neurodivergent reality before
            they reach the people who depend on them in education, employment,
            clinical care, and daily life. <strong style={{ color: theme.accent }}>BRAINS Benchmark exists to change that.</strong>
          </p>
          <p style={{ fontSize: 15, lineHeight: 1.6, color: theme.sub, margin: "0 0 28px 0", textWrap: "pretty" }}>
            Supporting evidence (including the prevalence figures, the access-gap
            data, and the procurement-policy precedents the Trust is reviewing) is
            being finalised; the full set publishes with the prospectus.
          </p>
          <div style={{ display: "grid", gridTemplateColumns: "repeat(auto-fit, minmax(160px, 1fr))", gap: 12 }}>
            {fields.map((f, i) => (
              <window.Reveal key={f.k} delay={i * 90}>
              <div
                style={{
                  padding: "16px 18px",
                  background: theme.card,
                  border: `1px solid ${theme.cardBorder}`,
                  borderRadius: 10,
                  minWidth: 0,
                }}
              >
                <div
                  style={{
                    fontSize: 10.5,
                    letterSpacing: 1.4,
                    textTransform: "uppercase",
                    color: theme.mute,
                    fontWeight: 600,
                    fontFamily: "'JetBrains Mono', monospace",
                    marginBottom: 6,
                  }}
                >
                  Field
                </div>
                <div style={{ fontSize: 15, color: theme.ink, fontWeight: 600 }}>
                  {f.k}
                </div>
              </div>
              </window.Reveal>
            ))}
          </div>
        </div>
      </div>
    </Section>
  );
}

// ============================================================
// WHY BENCHMARK — three stakeholders
// ============================================================

function WhyBenchmarkSection({ theme }) {
  const { Section, Eyebrow } = window;
  const { isMobile } = window.useViewport();
  const beneficiaries = [
    {
      who: "Developers",
      what: "A clear target.",
      d: "Public criteria and a public score mean teams can ship toward something specific, and demonstrate the bar to leadership without re-deriving it from research papers.",
    },
    {
      who: "Procurement & policy",
      what: "A defensible standard.",
      d: "Independent, transparent evaluation gives buyers and regulators a credential they can cite. Neither vendor self-attestation nor a closed audit.",
    },
    {
      who: "Neurodivergent community",
      what: "Real accountability.",
      d: "A public leaderboard, public methodology, and a Trust drawn from the community itself, so the score belongs to the people the score is about.",
    },
  ];
  return (
    <Section id="why-benchmark" theme={theme} padding="40px 0 120px" style={{ background: theme.surface }}>
      <window.Reveal>
      <div style={{ display: "grid", gridTemplateColumns: isMobile ? "1fr" : "1fr 1.4fr", gap: isMobile ? 24 : 80, marginBottom: isMobile ? 32 : 64, alignItems: "end" }}>
        <div>
          <Eyebrow theme={theme}>Why Benchmark</Eyebrow>
          <h2
            style={{
              fontSize: "clamp(26px, 4.4vw, 56px)",
              lineHeight: 1.02,
              fontWeight: 700,
              letterSpacing: -1.3,
              margin: 0,
              color: theme.ink,
              textWrap: "balance",
            }}
          >
            A credible benchmark{" "}
            <span style={{ color: theme.accent, fontStyle: "italic", fontWeight: 600 }}>
              raises the floor for everyone.
            </span>
          </h2>
        </div>
        <p style={{ fontSize: 17, lineHeight: 1.6, color: theme.sub, margin: 0, maxWidth: 540 }}>
          Founding support funds the methodology, the evaluations, and the public
          leaderboard: the three things every stakeholder below depends on, and the
          three things no single vendor has the standing to build alone.
        </p>
      </div>
      </window.Reveal>

      <div style={{ display: "grid", gridTemplateColumns: isMobile ? "1fr" : "1fr 1fr 1fr", gap: isMobile ? 12 : 18 }}>
        {beneficiaries.map((b, i) => (
          <window.Reveal key={b.who} delay={i * 110} style={{ display: "flex", flexDirection: "column" }}>
          <div
            style={{
              padding: isMobile ? "22px 20px" : "30px 28px",
              background: theme.card,
              border: `1px solid ${theme.cardBorder}`,
              borderRadius: 16,
              display: "flex",
              flexDirection: "column",
              gap: 14,
              minHeight: isMobile ? 0 : 280,
              minWidth: 0,
            }}
          >
            <div
              style={{
                fontSize: 13,
                fontWeight: 600,
                color: theme.accent,
                fontFamily: "'JetBrains Mono', monospace",
                letterSpacing: 0.6,
              }}
            >
              {String(i + 1).padStart(2, "0")} · {b.who}
            </div>
            <h3 style={{ fontSize: 24, fontWeight: 700, letterSpacing: -0.5, margin: 0, color: theme.ink, lineHeight: 1.15 }}>
              {b.what}
            </h3>
            <p style={{ fontSize: 14.5, lineHeight: 1.55, color: theme.sub, margin: 0 }}>
              {b.d}
            </p>
          </div>
          </window.Reveal>
        ))}
      </div>
    </Section>
  );
}

window.FoundingHero = FoundingHero;
window.ProblemSection = ProblemSection;
window.WhyBenchmarkSection = WhyBenchmarkSection;
