// ============================================================
// FOUNDING — 36-month roadmap + allocation + receive + indep + contact
// ============================================================

function ProspectusSection({ theme }) {
  const { Section, Eyebrow, Placeholder } = window;
  const { isMobile } = window.useViewport();
  const phases = [
    {
      m: "Months 0–6",
      t: "Methodology v1",
      kind: "Foundations",
      items: [
        "Trust convening and seat-fills",
        "Rubric v1 ratified after public consultation",
        "Quantitative test harness in beta",
      ],
    },
    {
      m: "Months 6–12",
      t: "First cohort",
      kind: "Launch",
      items: [
        "First cohort of evaluations (≥ 6 systems)",
        "Public leaderboard goes live",
        "First annual audit letter published",
      ],
    },
    {
      m: "Months 12–24",
      t: "Scale & certify",
      kind: "Growth",
      items: [
        "Certification tiers (Bronze / Silver / Gold) issued",
        "Second cohort + appeals process live",
        "First state-of-the-field report from the Trust",
      ],
    },
    {
      m: "Months 24–36",
      t: "Sustain",
      kind: "Sustain",
      items: [
        "Self-sustaining funding mix (certification + grants)",
        "Cross-jurisdiction adoption via submissions to regulators",
        "Trust rotation through second cohort of members",
      ],
    },
  ];
  const kindColor = (k) => ({
    Foundations: theme.progress,
    Launch: theme.accent,
    Growth: theme.success,
    Sustain: "#e98ad0",
  })[k];
  return (
    <Section id="prospectus" theme={theme} padding="120px 0 80px">
      <window.Reveal>
      <div style={{ display: "grid", gridTemplateColumns: isMobile ? "1fr" : "1fr 1.4fr", gap: isMobile ? 24 : 80, marginBottom: isMobile ? 28 : 56, alignItems: "end" }}>
        <div>
          <Eyebrow theme={theme}>What 36 months builds</Eyebrow>
          <h2
            style={{
              fontSize: "clamp(26px, 4.4vw, 56px)",
              lineHeight: 1.02,
              fontWeight: 700,
              letterSpacing: -1.3,
              margin: 0,
              color: theme.ink,
              textWrap: "balance",
            }}
          >
            Three years.
            <br />
            <span style={{ color: theme.accent, fontStyle: "italic", fontWeight: 600 }}>
              A working benchmark.
            </span>
          </h2>
        </div>
        <p style={{ fontSize: 17, lineHeight: 1.6, color: theme.sub, margin: 0, maxWidth: 540 }}>
          The 36-month plan ladders from founding rubric to sustaining operation. Dates
          and milestone counts below are working targets; final figures lock with the
          prospectus, after Trust ratification.
        </p>
      </div>
      </window.Reveal>

      <div style={{ display: "grid", gridTemplateColumns: isMobile ? "1fr" : "repeat(auto-fit, minmax(220px, 1fr))", gap: isMobile ? 12 : 16 }}>
        {phases.map((p, i) => {
          const c = kindColor(p.kind);
          return (
            <window.Reveal key={p.m} delay={i * 100} style={{ display: "flex", flexDirection: "column" }}>
            <div
              style={{
                padding: isMobile ? "20px 18px" : "26px 24px",
                background: theme.card,
                border: `1px solid ${theme.cardBorder}`,
                borderRadius: 14,
                display: "flex",
                flexDirection: "column",
                gap: 14,
                minWidth: 0,
                position: "relative",
              }}
            >
              <div style={{ display: "flex", justifyContent: "space-between", alignItems: "center" }}>
                <span
                  style={{
                    fontSize: 11.5,
                    fontFamily: "'JetBrains Mono', monospace",
                    color: theme.mute,
                    letterSpacing: 0.4,
                  }}
                >
                  {p.m}
                </span>
                <span
                  style={{
                    fontSize: 10.5,
                    padding: "3px 9px",
                    borderRadius: 999,
                    background: `${c}1a`,
                    border: `1px solid ${c}40`,
                    color: c,
                    fontFamily: "'JetBrains Mono', monospace",
                    letterSpacing: 0.4,
                  }}
                >
                  {p.kind}
                </span>
              </div>
              <h4 style={{ fontSize: 20, fontWeight: 700, letterSpacing: -0.5, margin: 0, color: theme.ink, lineHeight: 1.15 }}>
                {p.t}
              </h4>
              <ul style={{ listStyle: "none", padding: 0, margin: 0, display: "flex", flexDirection: "column", gap: 8 }}>
                {p.items.map((it) => (
                  <li key={it} style={{ fontSize: 13, lineHeight: 1.5, color: theme.sub, display: "flex", alignItems: "flex-start", gap: 10 }}>
                    <span
                      style={{
                        display: "inline-block",
                        width: 5,
                        height: 5,
                        borderRadius: "50%",
                        background: c,
                        marginTop: 7,
                        flexShrink: 0,
                      }}
                    />
                    {it}
                  </li>
                ))}
              </ul>
            </div>
            </window.Reveal>
          );
        })}
      </div>
    </Section>
  );
}

// ============================================================
// ALLOCATION & PARTNER BENEFITS
// ============================================================

function AllocationReceiveSection({ theme }) {
  const { Section, Eyebrow, Placeholder } = window;
  const { isMobile } = window.useViewport();
  const allocation = [
    ["Trust panel & lived-experience review", 42],
    ["Quantitative test harness engineering", 28],
    ["Public infrastructure & leaderboard", 18],
    ["Audit, governance, and reporting", 12],
  ];
  const benefits = [
    {
      n: "01",
      t: "Public recognition",
      d: "Named on the founding-partner roster on the homepage and in every annual report, for the lifetime of the round, not just year one.",
    },
    {
      n: "02",
      t: "Governance voice",
      d: "A standing invitation to the annual founding-partner sitting with the BRAINS Trust convenors. Input on strategic direction, no input on scoring.",
    },
    {
      n: "03",
      t: "Reporting cadence",
      d: "Quarterly progress note + the annual audit letter delivered directly. Same evidence trail the public sees, ahead of publication.",
    },
    {
      n: "04",
      t: "Early access to outputs",
      d: "Draft access to the annual state-of-the-field report and any regulatory submissions before public release. No embargo over Benchmark scores.",
    },
    {
      n: "05",
      t: "Right of co-publication",
      d: "Where a partner's mission aligns, an option to co-publish field reports or convene joint briefings, at the Trust's editorial discretion.",
    },
  ];
  return (
    <Section theme={theme} padding="40px 0 120px" style={{ background: theme.surface }}>
      <div style={{ display: "grid", gridTemplateColumns: isMobile ? "1fr" : "1.1fr 1fr", gap: isMobile ? 24 : 60, marginBottom: isMobile ? 28 : 56, alignItems: "stretch" }}>
        {/* Allocation */}
        <window.Reveal style={{ display: "flex", flexDirection: "column" }}>
        <div
          style={{
            padding: isMobile ? "22px 20px" : "32px 32px",
            background: theme.card,
            border: `1px solid ${theme.cardBorder}`,
            borderRadius: 18,
          }}
        >
          <Eyebrow theme={theme}>Where founding funding goes</Eyebrow>
          <h3 style={{ fontSize: 28, fontWeight: 700, letterSpacing: -0.7, margin: "0 0 24px 0", color: theme.ink }}>
            Indicative allocation
          </h3>
          {allocation.map(([label, pct]) => (
            <div key={label} style={{ marginBottom: 16 }}>
              <div style={{ display: "flex", justifyContent: "space-between", fontSize: 14, 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: 6,
                  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: 18,
              paddingTop: 18,
              borderTop: `1px solid ${theme.cardBorder}`,
              fontSize: 12.5,
              color: theme.mute,
              lineHeight: 1.55,
              fontFamily: "'JetBrains Mono', monospace",
            }}
          >
            Final budget publishes alongside each year's audit letter.
          </div>
        </div>
        </window.Reveal>

        {/* Independence pull-quote — moved here as a visual anchor */}
        <window.Reveal delay={140} style={{ display: "flex", flexDirection: "column" }}>
        <div
          style={{
            padding: isMobile ? "22px 20px" : "32px 32px",
            background: theme.dark
              ? `linear-gradient(135deg, #0f1a30 0%, #1a2540 100%)`
              : `linear-gradient(135deg, #fbf5e6 0%, #f1ead4 100%)`,
            border: `1px solid ${theme.accent}55`,
            borderRadius: 18,
            position: "relative",
            overflow: "hidden",
          }}
          id="independence"
        >
<div style={{ position: "relative" }}>
            <Eyebrow theme={theme}>Independence</Eyebrow>
            <svg width="32" height="32" viewBox="0 0 32 32" fill="none" style={{ marginBottom: 18 }}>
              <path d="M8 14V8a2 2 0 012-2h4M24 18v6a2 2 0 01-2 2h-4M6 8c0 4 2 6 6 6M26 24c0-4-2-6-6-6" stroke={theme.accent} strokeWidth="2.5" strokeLinecap="round" />
            </svg>
            <p
              style={{
                fontSize: isMobile ? 18 : 24,
                fontWeight: 600,
                lineHeight: 1.3,
                letterSpacing: -0.6,
                color: theme.ink,
                margin: 0,
                textWrap: "pretty",
              }}
            >
              Philanthropic funding does not influence Benchmark scores or
              certification. Methodology and the leaderboard stay public; funders do
              not get a say in results.
            </p>
            <div style={{ marginTop: 22, paddingTop: 18, borderTop: `1px solid ${theme.accent}30`, fontSize: 13, color: theme.sub, lineHeight: 1.55, fontFamily: "'JetBrains Mono', monospace" }}>
              The funding firewall is audited annually by an external party and the
              audit letter is published with each year's leaderboard.
            </div>
          </div>
        </div>
        </window.Reveal>
      </div>

      {/* What founding partners receive */}
      <window.Reveal>
      <div style={{ display: "grid", gridTemplateColumns: isMobile ? "1fr" : "1fr 1.4fr", gap: isMobile ? 24 : 80, marginTop: isMobile ? 48 : 100, marginBottom: isMobile ? 24 : 48, alignItems: "end" }}>
        <div>
          <Eyebrow theme={theme}>What a founding partner receives</Eyebrow>
          <h2
            style={{
              fontSize: "clamp(26px, 4.4vw, 52px)",
              lineHeight: 1.02,
              fontWeight: 700,
              letterSpacing: -1.3,
              margin: 0,
              color: theme.ink,
              textWrap: "balance",
            }}
          >
            Recognition, a voice,{" "}
            <span style={{ color: theme.accent, fontStyle: "italic", fontWeight: 600 }}>
              and a paper trail.
            </span>
          </h2>
        </div>
        <p style={{ fontSize: 17, lineHeight: 1.6, color: theme.sub, margin: 0, maxWidth: 540 }}>
          Founding partners are named on the public record for the lifetime of the
          round. The benefits below are real, but none of them are influence over a
          score. That's the trade we're inviting you into.
        </p>
      </div>
      </window.Reveal>

      <window.Reveal>
      <div style={{ display: "grid", gridTemplateColumns: isMobile ? "1fr" : "repeat(auto-fit, minmax(220px, 1fr))", gap: isMobile ? 12 : 16 }}>
        {benefits.map((b) => (
          <div
            key={b.n}
            style={{
              padding: isMobile ? "20px 18px" : "26px 26px 24px",
              background: theme.card,
              border: `1px solid ${theme.cardBorder}`,
              borderRadius: 14,
              display: "flex",
              flexDirection: "column",
              gap: 12,
              minHeight: isMobile ? 0 : 200,
              minWidth: 0,
            }}
          >
            <div
              style={{
                fontSize: 13,
                fontWeight: 600,
                color: theme.accent,
                fontFamily: "'JetBrains Mono', monospace",
                letterSpacing: 0.6,
              }}
            >
              {b.n}
            </div>
            <h4 style={{ fontSize: 18, fontWeight: 600, letterSpacing: -0.3, margin: 0, color: theme.ink, lineHeight: 1.2 }}>
              {b.t}
            </h4>
            <p style={{ fontSize: 14, lineHeight: 1.55, color: theme.sub, margin: 0 }}>
              {b.d}
            </p>
          </div>
        ))}
      </div>
      </window.Reveal>
    </Section>
  );
}

// ============================================================
// CONVERSATION — contact CTA
// ============================================================

function ConversationCTA({ theme }) {
  const { Section, Eyebrow, Placeholder } = window;
  const { isMobile } = window.useViewport();
  return (
    <Section id="conversation" theme={theme} padding="120px 0">
      <window.Reveal>
      <div
        style={{
          position: "relative",
          background: theme.card,
          border: `1px solid ${theme.cardBorder}`,
          borderRadius: 24,
          padding: isMobile ? "32px 22px" : "60px 56px",
          overflow: "hidden",
          display: "grid",
          gridTemplateColumns: isMobile ? "1fr" : "1.1fr 1fr",
          gap: isMobile ? 28 : 60,
        }}
      >
        <div style={{ position: "relative" }}>
          <Eyebrow theme={theme}>Start a conversation</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",
            }}
          >
            The beginning of a conversation,{" "}
            <span style={{ color: theme.accent, fontStyle: "italic", fontWeight: 600 }}>
              not a transaction.
            </span>
          </h2>
          <p style={{ fontSize: 17, lineHeight: 1.6, color: theme.sub, margin: "0 0 30px 0", maxWidth: 480 }}>
            Reach out and we'll share the full prospectus: the round size, the
            governance terms, the published audit cadence, and a short list of the
            organisations we've started conversations with. No autoresponder.
          </p>
          <div style={{ display: "flex", gap: 14, flexWrap: "wrap" }}>
            <a
              href="/contact?subject=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)",
              }}
            >
              Request the prospectus →
            </a>
            <a
              href="/benchmark#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 firewall
            </a>
          </div>
        </div>

        <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: 14,
            padding: isMobile ? "20px 20px" : "26px 28px",
            fontFamily: "'JetBrains Mono', monospace",
            display: "flex",
            flexDirection: "column",
            justifyContent: "space-between",
          }}
        >
          <div>
            <div
              style={{
                fontSize: 10.5,
                letterSpacing: 1.4,
                textTransform: "uppercase",
                color: theme.mute,
                fontWeight: 600,
                marginBottom: 10,
              }}
            >
              Founding-partner contact
            </div>
            <div style={{ fontSize: 16, color: theme.ink, fontWeight: 500, marginBottom: 18 }}>
              <a
                href="/contact?subject=founding"
                style={{ color: theme.accent, textDecoration: "none" }}
              >
                Start a conversation →
              </a>
            </div>
            <div
              style={{
                fontSize: 10.5,
                letterSpacing: 1.4,
                textTransform: "uppercase",
                color: theme.mute,
                fontWeight: 600,
                marginBottom: 10,
              }}
            >
              What we'll send
            </div>
            <ul style={{ listStyle: "none", padding: 0, margin: 0, display: "flex", flexDirection: "column", gap: 8 }}>
              {[
                "Round size and tier structure",
                "Governance terms (charter excerpt)",
                "External-audit framework",
                "Trust composition timeline",
              ].map((it) => (
                <li key={it} style={{ fontSize: 12.5, color: theme.sub, lineHeight: 1.5, display: "flex", alignItems: "flex-start", gap: 8 }}>
                  <span style={{ color: theme.accent }}>→</span>
                  {it}
                </li>
              ))}
            </ul>
          </div>
          <div
            style={{
              marginTop: 22,
              paddingTop: 18,
              borderTop: `1px solid ${theme.cardBorder}`,
              fontSize: 11,
              color: theme.mute,
              lineHeight: 1.5,
            }}
          >
            We reply personally, usually within a week. If we can't help you, we'll
            say so plainly.
          </div>
        </div>
      </div>
      </window.Reveal>
    </Section>
  );
}

window.ProspectusSection = ProspectusSection;
window.AllocationReceiveSection = AllocationReceiveSection;
window.ConversationCTA = ConversationCTA;

// ============================================================
// FOUNDING PARTNERS PAGE — orchestrator
// ============================================================

const { useState: useStateF, useEffect: useEffectF } = React;

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

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

  const [prefs, setPrefs] = useStateF(() => {
    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 };
  });
  useEffectF(() => {
    try { localStorage.setItem("brains.prefs", JSON.stringify(prefs)); } catch (e) {}
  }, [prefs]);
  const [readingOpen, setReadingOpen] = useStateF(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 };
  useEffectF(() => {
    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, FoundingHero, ProblemSection, WhyBenchmarkSection,
    ProspectusSection, AllocationReceiveSection, ConversationCTA, 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="founding" />
      <ReadingPanel open={readingOpen} onClose={() => setReadingOpen(false)} theme={theme} prefs={prefs} setPrefs={setPrefs} />

      <FoundingHero theme={theme} prefs={prefs} />
      <ProblemSection theme={theme} />
      <WhyBenchmarkSection theme={theme} />
      <ProspectusSection theme={theme} />
      <AllocationReceiveSection theme={theme} />
      <ConversationCTA 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 rootF = ReactDOM.createRoot(document.getElementById("root"));
rootF.render(<FoundingPage />);