// ============================================================
// FOUNDING PARTNERS CTA + WORKING ALONGSIDE US + FOOTER
// ============================================================

function FoundingSection({ theme }) {
  const { Section, Eyebrow } = window;
  const { isMobile } = window.useViewport();
  return (
    <Section id="founding" theme={theme} padding="120px 0">
      <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`,
          boxShadow: "inset 0 1px 0 rgba(255,255,255,0.06)",
          borderRadius: 24,
          padding: isMobile ? "36px 22px" : "72px 64px",
          overflow: "hidden",
          display: "grid",
          gridTemplateColumns: isMobile ? "1fr" : "1.4fr 1fr",
          gap: isMobile ? 32 : 56,
          alignItems: "center",
        }}
      >
        <div style={{ position: "relative" }}>
          <Eyebrow theme={theme}>Help build BRAINS</Eyebrow>

          <h2
            style={{
              fontSize: "clamp(28px, 4.8vw, 64px)",
              lineHeight: 1.02,
              fontWeight: 700,
              letterSpacing: -1.4,
              margin: "0 0 24px 0",
              color: theme.ink,
              textWrap: "balance",
            }}
          >
            We're seeking{" "}
            <span style={{ color: theme.accent, fontStyle: "italic", fontWeight: 600 }}>
              founding philanthropic partners
            </span>{" "}
            to fund the first 36 months.
          </h2>

          <p style={{ fontSize: isMobile ? 16 : 18, lineHeight: 1.6, color: theme.sub, margin: "0 0 36px 0", maxWidth: 600, textWrap: "pretty" }}>
            Independence is the product. Philanthropic funding pays the team building
            BRAINS: what the Incubator ships, what the Trust deliberates, what the
            Benchmark certifies.{" "}
            <span style={{ color: theme.ink, fontWeight: 500 }}>None of it</span> is
            influenced by who funds the org.
          </p>

          <div style={{ display: "flex", gap: 14, alignItems: "center", flexWrap: "wrap" }}>
            <a
              href="/contact?subject=founding"
              style={{
                padding: "15px 28px",
                borderRadius: 999,
                background: theme.accent,
                color: "#161a2b",
                border: "none",
                fontSize: 15,
                fontWeight: 600,
                cursor: "pointer",
                textDecoration: "none",
                boxShadow: theme.dark
                  ? `0 10px 30px -10px ${theme.accent}aa`
                  : "0 10px 30px -10px rgba(22,26,43,0.4)",
                fontFamily: "inherit",
                display: "inline-flex",
                alignItems: "center",
                gap: 8,
              }}
            >
              Express interest →
            </a>
          </div>
        </div>

        {/* Round status panel */}
        <div
          style={{
            position: "relative",
            background: theme.dark ? "rgba(8,16,30,0.55)" : "rgba(250,246,234,0.75)",
            backdropFilter: "blur(10px)",
            border: `1px solid ${theme.cardBorder}`,
            borderRadius: 18,
            padding: isMobile ? "22px 22px" : "26px 28px",
            fontFamily: "'JetBrains Mono', 'SF Mono', ui-monospace, monospace",
          }}
        >
          <div
            style={{
              display: "flex",
              alignItems: "center",
              gap: 8,
              marginBottom: 22,
              fontSize: 11,
              letterSpacing: 1.4,
              textTransform: "uppercase",
              color: theme.sub,
              fontWeight: 600,
            }}
          >
            <span
              style={{
                width: 8,
                height: 8,
                borderRadius: "50%",
                background: theme.success,
                boxShadow: `0 0 10px ${theme.success}`,
              }}
            />
            Round status
          </div>
          {[
            ["Round", "Founding · 2026–2029"],
            ["Closing", "Rolling intake"],
            ["Status", "Open", theme.success],
            ["Influence on outputs", "None, by charter"],
            ["Audited", "Annually, public letter"],
          ].map(([k, v, valueColor], i, arr) => (
            <div
              key={k}
              style={{
                display: "flex",
                justifyContent: "space-between",
                alignItems: "baseline",
                padding: "10px 0",
                borderBottom: i === arr.length - 1 ? "none" : `1px solid ${theme.cardBorder}`,
                fontSize: 13,
                gap: 12,
              }}
            >
              <span style={{ color: theme.sub, whiteSpace: "nowrap" }}>{k}</span>
              <span
                style={{
                  color: valueColor || theme.ink,
                  fontWeight: 500,
                  textAlign: "right",
                }}
              >
                {v}
              </span>
            </div>
          ))}
          <div style={{ marginTop: 16, paddingTop: 14, borderTop: `1px solid ${theme.cardBorder}`, fontSize: 11, color: theme.mute, lineHeight: 1.5 }}>
            Allocation, partner benefits, and the full prospectus on the{" "}
            <a href="/founding" style={{ color: theme.accent, textDecoration: "none" }}>
              Founding Partners page →
            </a>
          </div>
        </div>
      </div>
      </window.Reveal>
    </Section>
  );
}

// ---------- Working alongside us ----------

function PartnerCard({ partner, theme }) {
  const [hover, setHover] = React.useState(false);
  return (
    <div
      onMouseEnter={() => setHover(true)}
      onMouseLeave={() => setHover(false)}
      style={{
        position: "relative",
        padding: "28px 28px 24px",
        background: theme.card,
        border: `1px solid ${theme.cardBorder}`,
        borderRadius: 16,
        transition: "transform 250ms ease, border-color 250ms",
        transform: hover ? "translateY(-3px)" : "translateY(0)",
      }}
    >
      <div style={{ display: "flex", alignItems: "center", gap: 14, marginBottom: 18 }}>
        <div
          style={{
            width: 44,
            height: 44,
            borderRadius: 10,
            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: 18,
          }}
        >
          {partner.glyph}
        </div>
        <div>
          <h4 style={{ margin: 0, fontSize: 19, fontWeight: 600, letterSpacing: -0.3, color: theme.ink }}>
            {partner.name}
          </h4>
          <div style={{ fontSize: 12, color: theme.mute, marginTop: 2 }}>
            {partner.region}
          </div>
        </div>
      </div>

      <p style={{ fontSize: 15, lineHeight: 1.55, color: theme.sub, margin: "0 0 20px 0" }}>
        {partner.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: 18,
          fontFamily: "'JetBrains Mono', 'SF Mono', ui-monospace, 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}`,
            }}
          />
          {partner.status}
        </span>
      </div>

      <a
        href={partner.href}
        target="_blank"
        rel="noopener noreferrer"
        style={{
          color: theme.accent,
          fontWeight: 600,
          fontSize: 14,
          textDecoration: "none",
          display: "inline-flex",
          alignItems: "center",
          gap: 8,
        }}
      >
        Visit {partner.name}
        <span style={{ transform: hover ? "translateX(4px)" : "translateX(0)", transition: "transform 200ms" }}>→</span>
      </a>
    </div>
  );
}

function PartnersSection({ theme }) {
  const { Section, Eyebrow } = window;
  const { isMobile } = window.useViewport();
  const partners = [
    {
      name: "NeuroTranslator",
      region: "Independent partner · AU",
      glyph: "NT",
      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",
      region: "Independent partner · AU",
      glyph: "LL",
      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="partners" 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 : 56, alignItems: "end" }}>
        <div>
          <Eyebrow theme={theme}>Working alongside us</Eyebrow>
          <h2
            style={{
              fontSize: "clamp(28px, 4.2vw, 56px)",
              lineHeight: 1.02,
              fontWeight: 700,
              letterSpacing: -1.3,
              margin: 0,
              color: theme.ink,
              textWrap: "balance",
            }}
          >
            Partners share the mission.
            <br />
            <span style={{ color: theme.accent, fontStyle: "italic", fontWeight: 600 }}>
              Same standard for everyone.
            </span>
          </h2>
        </div>
        <p style={{ fontSize: isMobile ? 16 : 17, lineHeight: 1.6, color: theme.sub, margin: 0, maxWidth: 540, textWrap: "pretty" }}>
          Independent partner companies build neuro-affirming products that share our
          mission. BRAINS Benchmark evaluates them by the{" "}
          <span style={{ color: theme.ink, fontWeight: 500 }}>same rigorous standard</span>{" "}
          as anything the Incubator builds, which is exactly what makes a partner-product
          certification worth carrying.
        </p>
      </div>
      </window.Reveal>

      <div style={{ display: "grid", gridTemplateColumns: isMobile ? "1fr" : "1fr 1fr", gap: isMobile ? 16 : 20, marginBottom: 32 }}>
        {partners.map((p, i) => (
          <window.Reveal key={p.name} delay={i * 130}>
            <PartnerCard partner={p} theme={theme} />
          </window.Reveal>
        ))}
      </div>

      <a
        href="/partners"
        style={{
          color: theme.ink,
          textDecoration: "none",
          fontSize: 14.5,
          fontWeight: 500,
          display: "inline-flex",
          alignItems: "center",
          gap: 8,
          opacity: 0.9,
        }}
      >
        More about our partners <span style={{ color: theme.accent }}>→</span>
      </a>
    </Section>
  );
}

// ---------- Footer ----------

function SocialIcon({ kind }) {
  const props = {
    width: 14,
    height: 14,
    viewBox: "0 0 24 24",
    fill: "currentColor",
    "aria-hidden": true,
    style: { flexShrink: 0 },
  };
  if (kind === "github") {
    return (
      <svg {...props}>
        <path d="M12 .297c-6.63 0-12 5.373-12 12 0 5.303 3.438 9.8 8.205 11.385.6.113.82-.258.82-.577 0-.285-.01-1.04-.015-2.04-3.338.724-4.042-1.61-4.042-1.61C4.422 18.07 3.633 17.7 3.633 17.7c-1.087-.744.084-.729.084-.729 1.205.084 1.838 1.236 1.838 1.236 1.07 1.835 2.809 1.305 3.495.998.108-.776.417-1.305.76-1.605-2.665-.3-5.466-1.332-5.466-5.93 0-1.31.465-2.38 1.235-3.22-.135-.303-.54-1.523.105-3.176 0 0 1.005-.322 3.3 1.23.96-.267 1.98-.399 3-.405 1.02.006 2.04.138 3 .405 2.28-1.552 3.285-1.23 3.285-1.23.645 1.653.24 2.873.12 3.176.765.84 1.23 1.91 1.23 3.22 0 4.61-2.805 5.625-5.475 5.92.42.36.81 1.096.81 2.22 0 1.606-.015 2.896-.015 3.286 0 .315.21.69.825.57C20.565 22.092 24 17.592 24 12.297c0-6.627-5.373-12-12-12" />
      </svg>
    );
  }
  if (kind === "discord") {
    return (
      <svg {...props}>
        <path d="M20.317 4.37a19.791 19.791 0 0 0-4.885-1.515.074.074 0 0 0-.079.037c-.21.375-.444.864-.608 1.25a18.27 18.27 0 0 0-5.487 0 12.64 12.64 0 0 0-.617-1.25.077.077 0 0 0-.079-.037A19.736 19.736 0 0 0 3.677 4.37a.07.07 0 0 0-.032.027C.533 9.046-.32 13.58.099 18.057a.082.082 0 0 0 .031.057 19.9 19.9 0 0 0 5.993 3.03.078.078 0 0 0 .084-.028 14.09 14.09 0 0 0 1.226-1.994.076.076 0 0 0-.041-.106 13.107 13.107 0 0 1-1.872-.892.077.077 0 0 1-.008-.128 10.2 10.2 0 0 0 .372-.292.074.074 0 0 1 .077-.01c3.928 1.793 8.18 1.793 12.062 0a.074.074 0 0 1 .078.01c.12.098.246.198.373.292a.077.077 0 0 1-.006.127 12.299 12.299 0 0 1-1.873.892.077.077 0 0 0-.041.107c.36.698.772 1.362 1.225 1.993a.076.076 0 0 0 .084.028 19.839 19.839 0 0 0 6.002-3.03.077.077 0 0 0 .032-.054c.5-5.177-.838-9.674-3.549-13.66a.061.061 0 0 0-.031-.03zM8.02 15.33c-1.183 0-2.157-1.085-2.157-2.419 0-1.333.956-2.419 2.157-2.419 1.21 0 2.176 1.096 2.157 2.42 0 1.333-.956 2.418-2.157 2.418zm7.975 0c-1.183 0-2.157-1.085-2.157-2.419 0-1.333.955-2.419 2.157-2.419 1.21 0 2.176 1.096 2.157 2.42 0 1.333-.946 2.418-2.157 2.418z" />
      </svg>
    );
  }
  if (kind === "bluesky") {
    return (
      <svg {...props}>
        <path d="M12 10.8c-1.087-2.114-4.046-6.053-6.798-7.995C2.566.944 1.561 1.266.902 1.565.139 1.908 0 3.08 0 3.768c0 .69.378 5.65.624 6.479.815 2.736 3.713 3.66 6.383 3.364.136-.02.275-.039.415-.056-.138.022-.276.04-.415.056-3.912.58-7.387 2.005-2.83 7.078 5.013 5.19 6.87-1.113 7.823-4.308.953 3.195 2.05 9.271 7.733 4.308 4.267-4.308 1.172-6.498-2.74-7.078a8.741 8.741 0 0 1-.415-.056c.14.017.279.036.415.056 2.67.297 5.568-.628 6.383-3.364.246-.828.624-5.79.624-6.478 0-.69-.139-1.861-.902-2.206-.659-.298-1.664-.62-4.3 1.24C16.046 4.748 13.087 8.687 12 10.8Z" />
      </svg>
    );
  }
  if (kind === "portal") {
    return (
      <svg {...props} fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round">
        <rect x="3" y="3" width="7" height="7" />
        <rect x="14" y="3" width="7" height="7" />
        <rect x="3" y="14" width="7" height="7" />
        <rect x="14" y="14" width="7" height="7" />
      </svg>
    );
  }
  return null;
}

function Footer({ theme, prefs }) {
  const { isMobile } = window.useViewport();
  // Flip the `hidden` flags below to bring items / columns back.
  const cols = [
    {
      title: "Our work",
      items: [
        { label: "BRAINS Benchmark", href: "/benchmark" },
        { label: "BRAINS Incubator", href: "/incubator" },
        { label: "BRAINS Trust", href: "/trust" },
      ],
    },
    {
      title: "Organisation",
      items: [
        { label: "About", href: "/about" },
        { label: "Partners", href: "/partners" },
        { label: "Founding Partners", href: "/founding" },
        { label: "Contact", href: "/about#contact", hidden: true },
      ],
    },
    {
      title: "Accessibility & legal",
      hidden: true,
      items: [
        { label: "Accessibility statement", href: "/accessibility" },
        { label: "Privacy", href: "/privacy" },
        { label: "Charter", href: "#" },
      ],
    },
    {
      title: "Community",
      items: [
        { label: "GitHub", href: "https://github.com/shard-BRAINS", external: true, icon: "github" },
        { label: "Bluesky", href: "https://bsky.app/profile/brainscertified.com", external: true, icon: "bluesky" },
        { label: "Discord", href: "https://discord.gg/3QApUQ6S", external: true, icon: "discord" },
        { label: "BRAINS Portal", href: "https://build.brainscertified.com/", external: true, icon: "portal" },
      ],
    },
  ];
  const underline = "none";
  return (
    <React.Fragment>
    <window.Marquee
      theme={theme}
      items={["Reliable", "Affirming", "Inclusive", "Evidence-led", "Community-validated"]}
      speed={36}
      style={{ borderTop: `1px solid ${theme.cardBorder}` }}
    />
    <footer
      style={{
        position: "relative",
        background: theme.page,
        color: theme.ink,
        borderTop: `1.5px solid ${theme.accent}`,
        padding: isMobile ? "40px 0 28px" : "72px 0 36px",
      }}
    >
      <div style={{ maxWidth: 1280, margin: "0 auto", padding: isMobile ? "0 22px" : "0 48px" }}>
        <div style={{ display: "flex", alignItems: "center", gap: 18, marginBottom: 20 }}>
          <img
            src={theme.dark ? "../assets/brains-logo-yellow.png" : "../assets/brains-logo-full.png"}
            alt=""
            style={{ width: 52, height: 52, objectFit: "contain" }}
          />
          <div>
            <div style={{ fontSize: 22, fontWeight: 700, letterSpacing: 0.5 }}>BRAINS</div>
            <div
              style={{
                fontSize: 11,
                letterSpacing: 1.5,
                textTransform: "uppercase",
                color: theme.accent,
                fontWeight: 600,
                marginTop: 2,
                fontFamily: "'JetBrains Mono', monospace",
              }}
            >
              Built by neurodivergent minds, for neurodivergent people.
            </div>
          </div>
        </div>

        <div style={{ display: "grid", gridTemplateColumns: isMobile ? "1fr 1fr" : `1.4fr ${"1fr ".repeat(cols.filter((c) => !c.hidden).length).trim()}`, gap: isMobile ? 24 : 40, marginTop: isMobile ? 32 : 48 }}>
          <p style={{ fontSize: 14.5, color: theme.sub, lineHeight: 1.6, margin: 0, maxWidth: 360, gridColumn: isMobile ? "1 / -1" : "auto" }}>
            A non-profit working out of Australia. Independent, neurodivergent-led,
            funded by philanthropy.
          </p>
          {cols.filter((c) => !c.hidden).map((c) => (
            <div key={c.title}>
              <div
                style={{
                  fontSize: 11,
                  letterSpacing: 1.6,
                  textTransform: "uppercase",
                  color: theme.mute,
                  fontWeight: 600,
                  marginBottom: 14,
                  fontFamily: "'JetBrains Mono', monospace",
                }}
              >
                {c.title}
              </div>
              <ul style={{ listStyle: "none", padding: 0, margin: 0, display: "flex", flexDirection: "column", gap: 10 }}>
                {c.items.filter((it) => !it.hidden).map((it) => (
                  <li key={it.label}>
                    <a
                      href={it.href}
                      {...(it.external ? { target: "_blank", rel: "noopener noreferrer" } : {})}
                      style={{
                        color: theme.ink,
                        textDecoration: underline,
                        textUnderlineOffset: 4,
                        fontSize: 14.5,
                        display: "inline-flex",
                        alignItems: "center",
                        gap: it.icon ? 10 : 0,
                      }}
                    >
                      {it.icon && <SocialIcon kind={it.icon} />}
                      <span>{it.label}{it.external && !it.icon ? " ↗" : ""}</span>
                    </a>
                  </li>
                ))}
              </ul>
            </div>
          ))}
        </div>

        <div
          style={{
            marginTop: isMobile ? 36 : 64,
            paddingTop: 28,
            borderTop: `1px solid ${theme.cardBorder}`,
            display: "flex",
            justifyContent: "space-between",
            gap: isMobile ? 16 : 24,
            flexWrap: "wrap",
            fontSize: 13,
            color: theme.sub,
          }}
        >
          <div>
            <a
              href="/contact"
              style={{
                fontFamily: "'JetBrains Mono', monospace",
                color: theme.accent,
                background: `${theme.accent}1f`,
                padding: "2px 8px",
                borderRadius: 4,
                fontSize: 12.5,
                textDecoration: "none",
              }}
            >
              Contact BRAINS →
            </a>
          </div>
          <div>© 2026 BRAINS.</div>
        </div>
      </div>
    </footer>
    </React.Fragment>
  );
}

window.FoundingSection = FoundingSection;
window.PartnersSection = PartnersSection;
window.Footer = Footer;