// ============================================================
// PARTNERS — Comparison table + principles + CTA + orchestrator
// ============================================================

function WhatPartnerMeans({ theme }) {
  const { Section, Eyebrow } = window;
  const { isMobile } = window.useViewport();

  const cols = [
    {
      key: "incubator",
      label: "Incubator products",
      sub: "Built under BRAINS",
      accent: theme.accent,
      tone: "primary",
    },
    {
      key: "partner",
      label: "Partner products",
      sub: "Independent, mission-aligned",
      accent: theme.progress,
      tone: "secondary",
    },
    {
      key: "other",
      label: "Other AI systems",
      sub: "No relationship",
      accent: theme.mute,
      tone: "neutral",
    },
  ];

  const rows = [
    { k: "Built by", v: ["BRAINS Incubator team", "Independent partner company", "Anyone (open intake)"] },
    { k: "Built on BRAINS Standard", v: ["Yes (every repo)", "Recommended", "Vendor choice"] },
    { k: "Evaluated by Benchmark", v: ["Yes (same terms)", "Yes (same terms)", "Yes (same terms)"] },
    { k: "Same rubric", v: ["Yes", "Yes", "Yes"] },
    { k: "Same Trust rotation", v: ["Yes", "Yes", "Yes"] },
    { k: "Same public scoring", v: ["Yes", "Yes", "Yes"] },
    { k: "Eligible for BRAINS Certified", v: ["By the score, like everyone", "Company's choice to pursue", "Company's choice to pursue"] },
    { k: "BRAINS influences product roadmap", v: ["Yes (it's our product)", "No", "No"] },
    { k: "Conflict of interest declared", v: ["Yes (inline on system page)", "If any, declared inline", "Standard COI declaration"] },
  ];

  const cellStyle = (i) => ({
    padding: "14px 18px",
    fontSize: 13.5,
    color: theme.ink,
    textAlign: i === 0 ? "left" : "left",
    verticalAlign: "top",
    borderBottom: `1px solid ${theme.cardBorder}`,
  });

  return (
    <Section id="what-partner-means" theme={theme} padding="60px 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 : 56, alignItems: "end" }}>
        <div>
          <Eyebrow theme={theme}>What "partner" means</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 columns.
            <br />
            <span style={{ color: theme.accent, fontStyle: "italic", fontWeight: 600 }}>
              Same scoring.
            </span>
          </h2>
        </div>
        <p style={{ fontSize: 17, lineHeight: 1.6, color: theme.sub, margin: 0, maxWidth: 540 }}>
          A partner company shares the neuro-affirming mission and builds independently
          of BRAINS. Partner products are evaluated on the same terms as the
          Incubator's own, against the same{" "}
          <a
            href="https://github.com/shard-BRAINS/BRAINS-template-repo"
            target="_blank"
            rel="noopener noreferrer"
            style={{ color: theme.accent, fontWeight: 600, textDecoration: "none" }}
          >
            BRAINS Standard
          </a>{" "}
          for code, security, and accessibility. But partner ≠ certified;{" "}
          <strong style={{ color: theme.ink }}>certification</strong> is a step a
          company takes for each product, on its score.
        </p>
      </div>
      </window.Reveal>

      <window.Reveal delay={120}>
      <div
        style={{
          background: theme.card,
          border: `1px solid ${theme.cardBorder}`,
          borderRadius: 18,
          overflow: "hidden",
        }}
      >
        <div style={{ overflowX: "auto" }}>
          <table style={{ width: "100%", borderCollapse: "collapse", minWidth: 720 }}>
            <thead>
              <tr style={{ background: theme.dark ? "rgba(0,0,0,0.25)" : "rgba(22,26,43,0.04)" }}>
                <th
                  style={{
                    padding: "20px 18px",
                    textAlign: "left",
                    fontSize: 10.5,
                    letterSpacing: 1.4,
                    textTransform: "uppercase",
                    color: theme.mute,
                    fontFamily: "'JetBrains Mono', monospace",
                    fontWeight: 600,
                    borderBottom: `1px solid ${theme.cardBorder}`,
                    width: "26%",
                  }}
                >
                  Attribute
                </th>
                {cols.map((c) => (
                  <th
                    key={c.key}
                    style={{
                      padding: "20px 18px",
                      textAlign: "left",
                      borderBottom: `1px solid ${theme.cardBorder}`,
                      borderLeft: `1px solid ${theme.cardBorder}`,
                      width: "24%",
                    }}
                  >
                    <div
                      style={{
                        display: "flex",
                        alignItems: "center",
                        gap: 8,
                        marginBottom: 4,
                      }}
                    >
                      <span
                        style={{
                          width: 8,
                          height: 8,
                          borderRadius: "50%",
                          background: c.accent,
                          boxShadow: c.tone !== "neutral" ? `0 0 8px ${c.accent}` : "none",
                          flexShrink: 0,
                        }}
                      />
                      <span style={{ fontSize: 14.5, fontWeight: 600, color: theme.ink, letterSpacing: -0.2 }}>
                        {c.label}
                      </span>
                    </div>
                    <div
                      style={{
                        fontSize: 11.5,
                        color: theme.mute,
                        fontFamily: "'JetBrains Mono', monospace",
                        letterSpacing: 0.2,
                      }}
                    >
                      {c.sub}
                    </div>
                  </th>
                ))}
              </tr>
            </thead>
            <tbody>
              {rows.map((row, ri) => (
                <tr key={row.k}>
                  <td
                    style={{
                      ...cellStyle(0),
                      color: theme.sub,
                      fontWeight: 500,
                      borderBottom: ri === rows.length - 1 ? "none" : cellStyle(0).borderBottom,
                    }}
                  >
                    {row.k}
                  </td>
                  {row.v.map((cell, ci) => (
                    <td
                      key={ci}
                      style={{
                        ...cellStyle(ci + 1),
                        borderLeft: `1px solid ${theme.cardBorder}`,
                        borderBottom: ri === rows.length - 1 ? "none" : cellStyle(ci + 1).borderBottom,
                      }}
                    >
                      {cell === "Yes" ? (
                        <span style={{ display: "inline-flex", alignItems: "center", gap: 6, color: theme.success, fontWeight: 600, fontFamily: "'JetBrains Mono', monospace", fontSize: 12.5 }}>
                          <svg width="12" height="12" viewBox="0 0 24 24" fill="none">
                            <path d="M4 12l5 5L20 6" stroke={theme.success} strokeWidth="3" strokeLinecap="round" strokeLinejoin="round" />
                          </svg>
                          Yes
                        </span>
                      ) : cell === "No" ? (
                        <span style={{ display: "inline-flex", alignItems: "center", gap: 6, color: theme.mute, fontWeight: 600, fontFamily: "'JetBrains Mono', monospace", fontSize: 12.5 }}>
                          <svg width="12" height="12" viewBox="0 0 24 24" fill="none">
                            <path d="M6 6l12 12M6 18L18 6" stroke={theme.mute} strokeWidth="2.5" strokeLinecap="round" />
                          </svg>
                          No
                        </span>
                      ) : (
                        cell
                      )}
                    </td>
                  ))}
                </tr>
              ))}
            </tbody>
          </table>
        </div>
        <div
          style={{
            padding: "14px 20px",
            borderTop: `1px solid ${theme.cardBorder}`,
            fontSize: 12,
            color: theme.mute,
            fontFamily: "'JetBrains Mono', monospace",
            display: "flex",
            justifyContent: "space-between",
            alignItems: "center",
            flexWrap: "wrap",
            gap: 12,
          }}
        >
          <span>Partnership policy v0.3 (draft public review).</span>
          <div style={{ display: "flex", gap: 18, flexWrap: "wrap" }}>
            <a
              href="https://github.com/shard-BRAINS/BRAINS-template-repo"
              target="_blank"
              rel="noopener noreferrer"
              style={{ color: theme.accent, textDecoration: "none", fontWeight: 600 }}
            >
              BRAINS Standard ↗
            </a>
            <a href="/benchmark#methodology" style={{ color: theme.accent, textDecoration: "none", fontWeight: 600 }}>
              Benchmark methodology →
            </a>
          </div>
        </div>
      </div>
      </window.Reveal>
    </Section>
  );
}

// ============================================================
// PARTNERSHIP PRINCIPLES
// ============================================================

function PartnershipPrinciples({ theme }) {
  const { Section, Eyebrow } = window;
  const { isMobile } = window.useViewport();
  const principles = [
    {
      n: "01",
      t: "Mission alignment, not brand alignment.",
      d: "A partner shares the neuro-affirming mission. We don't ask partners to wear BRAINS branding, follow our roadmap, or change their identity. We acknowledge alignment in public; that's the relationship.",
    },
    {
      n: "02",
      t: "Same evaluation, no exceptions.",
      d: "Partner products go through BRAINS Benchmark with the same rubric, the same Trust rotation, and the same public scoring as the Incubator's own products and any submitted system.",
    },
    {
      n: "03",
      t: "No editorial influence on scores.",
      d: "BRAINS does not soften, withhold, or accelerate a partner's score. There is no commercial relationship that gives a partner a different evaluation path.",
    },
  ];
  return (
    <Section theme={theme} padding="120px 0 80px">
      <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}>Partnership principles</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 rules,
            <br />
            <span style={{ color: theme.accent, fontStyle: "italic", fontWeight: 600 }}>
              no exceptions.
            </span>
          </h2>
        </div>
        <p style={{ fontSize: 17, lineHeight: 1.6, color: theme.sub, margin: 0, maxWidth: 540 }}>
          These are the principles that govern every partnership BRAINS enters. If a
          potential partner can't agree to them in writing, we don't acknowledge the
          alignment, full stop.
        </p>
      </div>
      </window.Reveal>

      <div style={{ display: "grid", gridTemplateColumns: isMobile ? "1fr" : "1fr 1fr 1fr", gap: isMobile ? 14 : 18 }}>
        {principles.map((p, i) => (
          <window.Reveal key={p.n} delay={i * 110} style={{ display: "flex", flexDirection: "column" }}>
          <div
            style={{
              padding: isMobile ? "22px 20px" : "28px 30px",
              background: theme.card,
              border: `1px solid ${theme.cardBorder}`,
              borderRadius: 16,
              display: "flex",
              flexDirection: "column",
              gap: 14,
              minHeight: isMobile ? 0 : 240,
            }}
          >
            <div
              style={{
                fontSize: 14,
                fontWeight: 600,
                color: theme.accent,
                fontFamily: "'JetBrains Mono', monospace",
                letterSpacing: 0.6,
              }}
            >
              {p.n}
            </div>
            <h4 style={{ fontSize: 20, fontWeight: 600, letterSpacing: -0.3, margin: 0, color: theme.ink, lineHeight: 1.2, textWrap: "balance" }}>
              {p.t}
            </h4>
            <p style={{ fontSize: 14.5, lineHeight: 1.55, color: theme.sub, margin: 0 }}>
              {p.d}
            </p>
          </div>
          </window.Reveal>
        ))}
      </div>
    </Section>
  );
}

// ============================================================
// BECOME A PARTNER CTA
// ============================================================

function BecomePartnerCTA({ 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" : "60px 56px",
          overflow: "hidden",
          display: "grid",
          gridTemplateColumns: isMobile ? "1fr" : "1fr 1.1fr",
          gap: isMobile ? 28 : 60,
        }}
      >
<div style={{ position: "relative" }}>
          <Eyebrow theme={theme}>Become a partner</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",
            }}
          >
            Build neuro-affirming AI?{" "}
            <span style={{ color: theme.accent, fontStyle: "italic", fontWeight: 600 }}>
              Tell us.
            </span>
          </h2>
          <p style={{ fontSize: 17, lineHeight: 1.6, color: theme.sub, margin: "0 0 28px 0", maxWidth: 460 }}>
            We acknowledge mission-aligned companies whose products are willing to be
            evaluated by BRAINS Benchmark on the same terms as everyone else. There's
            no fee. There's no equity. The relationship is the alignment.
          </p>

          <div style={{ display: "flex", gap: 14, flexWrap: "wrap" }}>
            <a
              href="/contact?subject=partner"
              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)",
              }}
            >
              Apply to partner →
            </a>
          </div>
        </div>

        {/* Requirements */}
        <div style={{ position: "relative", display: "flex", flexDirection: "column", gap: 10 }}>
          <div
            style={{
              fontSize: 10.5,
              letterSpacing: 1.4,
              textTransform: "uppercase",
              color: theme.mute,
              fontWeight: 600,
              fontFamily: "'JetBrains Mono', monospace",
              marginBottom: 6,
            }}
          >
            What we ask of partners
          </div>
          {[
            "Neuro-affirming mission, documented in your company's own materials",
            "Willingness to submit at least one product to BRAINS Benchmark",
            "Agreement that scores are public, with no embargo or veto",
            "A point of contact for conflict-of-interest disclosure",
            "Acknowledgement that partner status does not equal certification",
          ].map((req, i) => (
            <div
              key={i}
              style={{
                display: "flex",
                gap: 14,
                alignItems: "flex-start",
                padding: "13px 18px",
                background: theme.dark ? "rgba(0,0,0,0.3)" : "rgba(255,255,255,0.6)",
                border: `1px solid ${theme.cardBorder}`,
                borderRadius: 10,
              }}
            >
              <span
                style={{
                  fontSize: 11,
                  fontFamily: "'JetBrains Mono', monospace",
                  color: theme.accent,
                  fontWeight: 600,
                  letterSpacing: 0.4,
                  paddingTop: 3,
                  minWidth: 24,
                }}
              >
                {String(i + 1).padStart(2, "0")}
              </span>
              <span style={{ fontSize: 14, lineHeight: 1.5, color: theme.ink }}>{req}</span>
            </div>
          ))}
        </div>
      </div>
      </window.Reveal>
    </Section>
  );
}

window.WhatPartnerMeans = WhatPartnerMeans;
window.PartnershipPrinciples = PartnershipPrinciples;
window.BecomePartnerCTA = BecomePartnerCTA;

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

const { useState: useStateP, useEffect: useEffectP } = React;

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

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

  const [prefs, setPrefs] = useStateP(() => {
    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 };
  });
  useEffectP(() => {
    try {
      localStorage.setItem("brains.prefs", JSON.stringify(prefs));
    } catch (e) {}
  }, [prefs]);
  const [readingOpen, setReadingOpen] = useStateP(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 };
  useEffectP(() => {
    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, PartnersHero, CompaniesSection,
    WhatPartnerMeans, PartnershipPrinciples, BecomePartnerCTA, 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="partners"
      />
      <ReadingPanel open={readingOpen} onClose={() => setReadingOpen(false)} theme={theme} prefs={prefs} setPrefs={setPrefs} />

      <PartnersHero theme={theme} prefs={prefs} />
      <CompaniesSection theme={theme} />
      <WhatPartnerMeans theme={theme} />
      <PartnershipPrinciples theme={theme} />
      <BecomePartnerCTA 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 rootP = ReactDOM.createRoot(document.getElementById("root"));
rootP.render(<PartnersPage />);