// ============================================================
// PARTNERS PAGE — Hero + partner companies
// ============================================================

function PartnersHero({ 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 ? 90 : 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}` }} />
            Working alongside BRAINS
          </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",
            }}
          >
            Partner{" "}
            <span style={{ color: theme.accent, fontStyle: "italic", fontWeight: 600 }}>
              companies.
            </span>
          </h1>
          </window.Reveal>

          <window.Reveal delay={180}>
          <p style={{ fontSize: 20, lineHeight: 1.55, color: theme.sub, margin: "0 0 36px 0", maxWidth: 620, textWrap: "pretty" }}>
            Some neuro-affirming products are built by independent partner companies.{" "}
            <span style={{ color: theme.ink, fontWeight: 500 }}>
              Their products are not BRAINS products
            </span>
            . They share the mission, and BRAINS Benchmark evaluates them on the same
            terms as everyone else.
          </p>
          </window.Reveal>

          <window.Reveal delay={260}>
          <div style={{ display: "flex", gap: 14, flexWrap: "wrap" }}>
            <a
              href="#companies"
              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)",
              }}
            >
              See partner companies →
            </a>
            <a
              href="#what-partner-means"
              style={{
                padding: "15px 22px",
                borderRadius: 999,
                background: "transparent",
                color: theme.ink,
                border: `1px solid ${theme.chipBorder}`,
                fontSize: 15,
                fontWeight: 500,
                textDecoration: "none",
              }}
            >
              What "partner" means
            </a>
          </div>
          </window.Reveal>
        </div>

        {/* Partnership status panel */}
        <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 18px" : "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}` }} />
            Partnership status
          </div>
          {[
            ["Partner companies", "1 · OneSkill AI"],
            ["Partner products in evaluation", "2 · NeuroTranslator, Learning Log"],
            ["Partner policy version", "v0.3 (draft public review)"],
            ["Applications", "Open"],
          ].map(([k, v]) => (
            <div
              key={k}
              style={{
                display: "flex",
                justifyContent: "space-between",
                alignItems: "baseline",
                padding: "10px 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 }}>
            Partner products carry the same{" "}
            <span style={{ color: theme.accent }}>Benchmark evaluation status</span>{" "}
            as any other system.
          </div>
        </div>
        </window.Reveal>
      </div>
    </section>
  );
}

// ============================================================
// PARTNER COMPANIES — one section per company
// ============================================================

function PartnerProductCard({ product, theme }) {
  const [hover, setHover] = React.useState(false);
  return (
    <a
      href={product.href}
      target="_blank"
      rel="noopener noreferrer"
      onMouseEnter={() => setHover(true)}
      onMouseLeave={() => setHover(false)}
      style={{
        position: "relative",
        padding: "26px 28px 22px",
        background: theme.card,
        border: `1px solid ${theme.cardBorder}`,
        borderRadius: 14,
        textDecoration: "none",
        color: theme.ink,
        display: "flex",
        flexDirection: "column",
        transition: "transform 250ms ease, border-color 250ms",
        transform: hover ? "translateY(-3px)" : "translateY(0)",
      }}
    >
      <div style={{ display: "flex", alignItems: "center", gap: 14, marginBottom: 16 }}>
        <div
          style={{
            width: 44,
            height: 44,
            borderRadius: 10,
            background: theme.dark ? "rgba(255,255,255,0.05)" : "rgba(22,26,43,0.05)",
            border: `1px solid ${theme.cardBorder}`,
            display: "grid",
            placeItems: "center",
            color: theme.accent,
            fontWeight: 700,
            fontSize: 16,
            fontFamily: "'JetBrains Mono', monospace",
          }}
        >
          {product.glyph}
        </div>
        <div>
          <h4 style={{ margin: 0, fontSize: 19, fontWeight: 600, letterSpacing: -0.3, color: theme.ink }}>
            {product.name}
          </h4>
          <div style={{ fontSize: 12, color: theme.mute, marginTop: 2, fontFamily: "'JetBrains Mono', monospace" }}>
            {product.category}
          </div>
        </div>
      </div>
      <p style={{ fontSize: 14, lineHeight: 1.55, color: theme.sub, margin: "0 0 18px 0", flex: 1 }}>
        {product.body}
      </p>
      <div
        style={{
          display: "flex",
          alignItems: "center",
          justifyContent: "space-between",
          padding: "10px 14px",
          borderRadius: 8,
          background: theme.dark ? "rgba(0,0,0,0.25)" : "rgba(22,26,43,0.04)",
          marginBottom: 16,
          fontFamily: "'JetBrains Mono', monospace",
          fontSize: 12,
        }}
      >
        <span style={{ color: theme.sub }}>BRAINS Benchmark</span>
        <span style={{ display: "inline-flex", alignItems: "center", gap: 6, color: theme.progress }}>
          <span style={{ width: 6, height: 6, borderRadius: "50%", background: theme.progress, boxShadow: `0 0 8px ${theme.progress}` }} />
          {product.status}
        </span>
      </div>
      <span style={{ color: theme.accent, fontWeight: 600, fontSize: 14, display: "inline-flex", alignItems: "center", gap: 8 }}>
        Visit {product.name}
        <span style={{ transform: hover ? "translateX(4px)" : "translateX(0)", transition: "transform 200ms" }}>→</span>
      </span>
    </a>
  );
}

function CompanyBlock({ company, theme }) {
  const { isMobile } = window.useViewport();
  return (
    <div
      style={{
        padding: isMobile ? "24px 20px" : "40px 36px",
        background: theme.card,
        border: `1px solid ${theme.cardBorder}`,
        borderRadius: 20,
        marginBottom: 24,
        position: "relative",
        overflow: "hidden",
      }}
    >
<div
        style={{
          display: "grid",
          gridTemplateColumns: isMobile ? "1fr" : "1fr 1.4fr",
          gap: isMobile ? 20 : 40,
          alignItems: "start",
          position: "relative",
          marginBottom: isMobile ? 24 : 32,
        }}
      >
        <div>
          <div style={{ display: "flex", alignItems: "center", gap: 14, marginBottom: 18 }}>
            <div
              style={{
                width: 56,
                height: 56,
                borderRadius: 12,
                background: theme.dark ? "rgba(255,255,255,0.06)" : "rgba(22,26,43,0.06)",
                border: `1px solid ${theme.cardBorder}`,
                display: "grid",
                placeItems: "center",
                color: theme.accent,
                fontWeight: 700,
                fontSize: 20,
                fontFamily: "'JetBrains Mono', monospace",
              }}
            >
              {company.glyph}
            </div>
            <div>
              <div
                style={{
                  fontSize: 10.5,
                  letterSpacing: 1.4,
                  textTransform: "uppercase",
                  color: theme.mute,
                  fontFamily: "'JetBrains Mono', monospace",
                  marginBottom: 2,
                  fontWeight: 600,
                }}
              >
                Partner · {company.region}
              </div>
              <h3 style={{ fontSize: 26, fontWeight: 700, letterSpacing: -0.6, margin: 0, color: theme.ink }}>
                {company.name}
              </h3>
            </div>
          </div>
        </div>
        <p style={{ fontSize: 16, lineHeight: 1.6, color: theme.sub, margin: 0, textWrap: "pretty" }}>
          {company.body}
        </p>
      </div>

      <div
        style={{
          fontSize: 10.5,
          letterSpacing: 1.4,
          textTransform: "uppercase",
          color: theme.mute,
          fontFamily: "'JetBrains Mono', monospace",
          marginBottom: 14,
          fontWeight: 600,
          paddingTop: 24,
          borderTop: `1px solid ${theme.cardBorder}`,
        }}
      >
        Products from {company.name}
      </div>

      <div
        style={{
          display: "grid",
          gridTemplateColumns: isMobile ? "1fr" : `repeat(${Math.min(company.products.length, 2)}, 1fr)`,
          gap: 16,
        }}
      >
        {company.products.map((p, i) => (
          <window.Reveal key={p.name} delay={i * 130} style={{ display: "flex", flexDirection: "column" }}>
            <PartnerProductCard product={p} theme={theme} />
          </window.Reveal>
        ))}
      </div>
    </div>
  );
}

function CompaniesSection({ theme }) {
  const { Section, Eyebrow } = window;
  const { isMobile } = window.useViewport();
  const companies = [
    {
      name: "OneSkill AI",
      region: "Independent · AU",
      glyph: "OS",
      body: "OneSkill AI builds neuro-affirming products independently of BRAINS. We acknowledge their work here because it shares the mission, and because BRAINS Benchmark evaluates their products on exactly the same terms as the Incubator's own.",
      href: "#",
      products: [
        {
          name: "NeuroTranslator",
          glyph: "NT",
          category: "Communication · Assistive",
          body: "A communication translation app for neurodivergent users. Bridges the gap between intent and how it lands.",
          status: "Evaluation in progress",
          href: "https://www.neurotranslator.ai/",
        },
        {
          name: "Learning Log",
          glyph: "LL",
          category: "Education · Compliance",
          body: "An Australian homeschooling compliance app. Records, organises, and submits the paperwork families would otherwise dread.",
          status: "Evaluation in progress",
          href: "https://learninglog.com.au/",
        },
      ],
    },
  ];
  return (
    <Section id="companies" theme={theme} padding="120px 0 60px">
      <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}>Partner companies</Eyebrow>
          <h2
            style={{
              fontSize: "clamp(26px, 4.4vw, 56px)",
              lineHeight: 1.02,
              fontWeight: 700,
              letterSpacing: -1.3,
              margin: 0,
              color: theme.ink,
              textWrap: "balance",
            }}
          >
            Independent companies,
            <br />
            <span style={{ color: theme.accent, fontStyle: "italic", fontWeight: 600 }}>
              shared mission.
            </span>
          </h2>
        </div>
        <p style={{ fontSize: 17, lineHeight: 1.6, color: theme.sub, margin: 0, maxWidth: 540 }}>
          Each partner builds and ships its own products under its own brand. BRAINS
          does not take an equity stake, does not direct the roadmap, and does not
          influence the score. We acknowledge their work here because the alignment
          is worth knowing about.
        </p>
      </div>
      </window.Reveal>

      {companies.map((c) => (
        <window.Reveal key={c.name}>
          <CompanyBlock company={c} theme={theme} />
        </window.Reveal>
      ))}
    </Section>
  );
}

window.PartnersHero = PartnersHero;
window.CompaniesSection = CompaniesSection;
