// ============================================================
// BENCHMARK PAGE — Fund CTA + orchestrator
// ============================================================

function BenchmarkFundCTA({ theme }) {
  const { Section, Eyebrow } = window;
  const { isMobile } = window.useViewport();
  return (
    <Section theme={theme} padding="40px 0 120px" style={{ background: theme.surface }}>
      <window.Reveal>
      <div
        style={{
          position: "relative",
          background: theme.dark
            ? `linear-gradient(135deg, #0f1a30 0%, #1a2540 100%)`
            : `linear-gradient(135deg, #fbf5e6 0%, #f1ead4 100%)`,
          border: `1px solid ${theme.accent}55`,
          borderRadius: 24,
          padding: isMobile ? "32px 22px" : "64px 56px",
          overflow: "hidden",
          display: "grid",
          gridTemplateColumns: isMobile ? "1fr" : "1.4fr 1fr",
          gap: isMobile ? 28 : 60,
          alignItems: "center",
        }}
      >
<div style={{ position: "relative" }}>
          <Eyebrow theme={theme}>Help build the benchmark</Eyebrow>
          <h2
            style={{
              fontSize: "clamp(26px, 4.2vw, 56px)",
              lineHeight: 1.02,
              fontWeight: 700,
              letterSpacing: -1.4,
              margin: "0 0 22px 0",
              color: theme.ink,
              textWrap: "balance",
            }}
          >
            Fund the benchmark's{" "}
            <span style={{ color: theme.accent, fontStyle: "italic", fontWeight: 600 }}>
              first 36 months.
            </span>
          </h2>
          <p style={{ fontSize: 17, lineHeight: 1.6, color: theme.sub, margin: "0 0 30px 0", maxWidth: 520 }}>
            The founding philanthropic-partner ask centres on BRAINS Benchmark.
            Funding pays the people who build and run it, and does{" "}
            <span style={{ color: theme.ink, fontWeight: 500 }}>not</span> influence
            scores or certification. That separation is part of the charter.
          </p>
          <div style={{ display: "flex", gap: 14, flexWrap: "wrap" }}>
            <a
              href="/#founding"
              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)",
              }}
            >
              Become a founding partner →
            </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",
              }}
            >
              How independence is kept
            </a>
          </div>
        </div>

        {/* allocation breakdown */}
        <div
          style={{
            position: "relative",
            background: theme.dark ? "rgba(0,0,0,0.3)" : "rgba(255,255,255,0.6)",
            border: `1px solid ${theme.cardBorder}`,
            borderRadius: 16,
            padding: "26px 28px",
          }}
        >
          <div
            style={{
              fontSize: 11,
              letterSpacing: 1.4,
              textTransform: "uppercase",
              color: theme.mute,
              fontWeight: 600,
              fontFamily: "'JetBrains Mono', monospace",
              marginBottom: 16,
            }}
          >
            Where founding funding goes
          </div>
          {[
            ["Trust panel & lived-experience review", 42],
            ["Quantitative test harness engineering", 28],
            ["Public infrastructure & leaderboard", 18],
            ["Audit, governance, and reporting", 12],
          ].map(([label, pct]) => (
            <div key={label} style={{ marginBottom: 14 }}>
              <div style={{ display: "flex", justifyContent: "space-between", fontSize: 13.5, color: theme.ink, marginBottom: 6 }}>
                <span>{label}</span>
                <span style={{ fontFamily: "'JetBrains Mono', monospace", color: theme.accent, fontWeight: 600 }}>
                  {pct}%
                </span>
              </div>
              <div
                style={{
                  width: "100%",
                  height: 5,
                  background: theme.dark ? "rgba(255,255,255,0.08)" : "rgba(22,26,43,0.08)",
                  borderRadius: 3,
                  overflow: "hidden",
                }}
              >
                <div style={{ width: `${pct}%`, height: "100%", background: theme.accent, borderRadius: 3 }} />
              </div>
            </div>
          ))}
          <div
            style={{
              marginTop: 14,
              paddingTop: 14,
              borderTop: `1px solid ${theme.cardBorder}`,
              fontSize: 11,
              color: theme.mute,
              lineHeight: 1.5,
              fontFamily: "'JetBrains Mono', monospace",
            }}
          >
            Indicative allocation. Final budget published with each year's audit letter.
          </div>
        </div>
      </div>
      </window.Reveal>
    </Section>
  );
}

window.BenchmarkFundCTA = BenchmarkFundCTA;

// ============================================================
// BENCHMARK PAGE — orchestrator
// ============================================================

const { useState: useStateB, useEffect: useEffectB } = React;

function BenchmarkPage() {
  const TWEAK_DEFAULTS = /*EDITMODE-BEGIN*/{
    "accent": "#f5c14e"
  }/*EDITMODE-END*/;

  const { useTweaks, TweaksPanel, TweakSection, TweakColor } = window;
  const [tweaks, setTweak] = useTweaks(TWEAK_DEFAULTS);

  const [prefs, setPrefs] = useStateB(() => {
    try {
      const saved = JSON.parse(localStorage.getItem("brains.prefs") || "null");
      if (saved) return saved;
    } catch (e) {}
    return { theme: "midnight", textSize: "M", lineSpacing: "Standard", dyslexia: false };
  });
  useEffectB(() => {
    try {
      localStorage.setItem("brains.prefs", JSON.stringify(prefs));
    } catch (e) {}
  }, [prefs]);
  const [readingOpen, setReadingOpen] = useStateB(false);

  const baseTheme = window.THEMES[prefs.dyslexia ? "light" : prefs.theme];
  const theme = { ...baseTheme, accent: tweaks.accent, rule: tweaks.accent };
  const scale = window.TEXT_SCALES[prefs.textSize];
  const lineMap = { Tight: 1.45, Standard: 1.6, Roomy: 1.8 };
  useEffectB(() => {
    document.body.style.fontSize = `${scale.base}px`;
    document.body.style.lineHeight = `${lineMap[prefs.dyslexia ? "Roomy" : prefs.lineSpacing]}`;
    document.body.style.background = theme.page;
    document.body.style.color = theme.ink;
  }, [prefs.textSize, prefs.lineSpacing, theme.page, theme.ink]);

  const {
    Nav, ReadingPanel, BenchmarkHero, CriteriaSection, MethodologyFlow,
    CertificationSection, LeaderboardSection, MethodologySection,
    BenchmarkFundCTA, Footer,
  } = window;

  return (
    <div style={{ background: theme.page, color: theme.ink, minHeight: "100vh" }}>
      <Nav
        theme={theme}
        prefs={prefs}
        setPrefs={setPrefs}
        openReading={readingOpen}
        setOpenReading={setReadingOpen}
        current="benchmark"
      />
      <ReadingPanel
        open={readingOpen}
        onClose={() => setReadingOpen(false)}
        theme={theme}
        prefs={prefs}
        setPrefs={setPrefs}
      />

      <BenchmarkHero theme={theme} prefs={prefs} />
      <CriteriaSection theme={theme} />
      <MethodologyFlow theme={theme} />
      <CertificationSection theme={theme} />
      <LeaderboardSection theme={theme} />
      <MethodologySection theme={theme} />
      <BenchmarkFundCTA theme={theme} />
      <Footer theme={theme} prefs={prefs} />

      <TweaksPanel title="Tweaks">
        <TweakSection title="Brand">
          <TweakColor
            label="Accent color"
            value={tweaks.accent}
            options={["#f5c14e", "#e2a82a", "#7aa3ff", "#5fd28a"]}
            onChange={(v) => setTweak("accent", v)}
          />
        </TweakSection>
      </TweaksPanel>
    </div>
  );
}

const rootB = ReactDOM.createRoot(document.getElementById("root"));
rootB.render(<BenchmarkPage />);