// ============================================================
// HERO SECTION — full-bleed animated logo + headline
// ============================================================

function HeroSection({ theme, prefs }) {
  const { Constellation, AnimatedLogo, InfinityMark3D } = window;
  const { isMobile } = window.useViewport();
  const motion = !prefs.dyslexia;
  // 3D infinity mark when three.js is available + motion on;
  // the PNG clip-reveal logo otherwise.
  const useInfinity = InfinityMark3D && window.THREE && motion;

  return (
    <section
      id="top"
      style={{
        position: "relative",
        minHeight: "100vh",
        background: theme.heroBg,
        color: theme.ink,
        overflow: "hidden",
        paddingTop: isMobile ? 80 : 100,
      }}
    >
      <Constellation
        density={1.0}
        speed={1.0}
        accent={theme.accent}
        glow={true}
        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 ? "32px 22px 60px" : "60px 48px 80px",
          display: "grid",
          gridTemplateColumns: isMobile ? "1fr" : "1.1fr 1fr",
          gap: isMobile ? 28 : 40,
          alignItems: "center",
          zIndex: 2,
        }}
      >
        <div style={{ maxWidth: 660, order: isMobile ? 2 : 1 }}>
          <window.Reveal delay={0}>
          <div
            style={{
              display: "inline-flex",
              alignItems: "center",
              gap: 10,
              padding: "6px 14px",
              borderRadius: 999,
              background: theme.chip,
              border: `1px solid ${theme.chipBorder}`,
              color: theme.chipText,
              fontSize: 11.5,
              letterSpacing: 1.4,
              textTransform: "uppercase",
              fontWeight: 600,
              marginBottom: 32,
              fontFamily: "'JetBrains Mono', 'SF Mono', ui-monospace, monospace",
            }}
          >
            <span
              style={{
                width: 6,
                height: 6,
                borderRadius: "50%",
                background: theme.accent,
                boxShadow: `0 0 10px ${theme.accent}`,
              }}
            />
            Independent · Non-profit · Neurodivergent-led
          </div>
          </window.Reveal>

          <window.Reveal delay={90}>
          <h1
            style={{
              fontSize: "clamp(32px, 5.6vw, 84px)",
              lineHeight: 0.98,
              fontWeight: 700,
              letterSpacing: -1.5,
              margin: "0 0 28px 0",
              textWrap: "balance",
            }}
          >
            AI that works for{" "}
            <span
              style={{
                color: theme.accent,
                fontStyle: "italic",
                fontWeight: 600,
              }}
            >
              every mind.
            </span>
          </h1>
          </window.Reveal>

          <window.Reveal delay={180}>
          <p
            style={{
              fontSize: isMobile ? 16 : 20,
              lineHeight: 1.55,
              color: theme.sub,
              margin: "0 0 40px 0",
              maxWidth: 560,
              textWrap: "pretty",
            }}
          >
            BRAINS is a non-profit building the{" "}
            <span style={{ color: theme.ink, fontWeight: 500 }}>standards</span>,{" "}
            <span style={{ color: theme.ink, fontWeight: 500 }}>evidence</span>, and{" "}
            <span style={{ color: theme.ink, fontWeight: 500 }}>systems</span>{" "}
            that make AI work for neurodivergent people by default, not as an afterthought.
          </p>
          </window.Reveal>

          <window.Reveal delay={260}>
          <div style={{ display: "flex", gap: 14, alignItems: "center", flexWrap: "wrap" }}>
            <a
              href="#work"
              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,
              }}
            >
              See how we work →
            </a>
            <a
              href="#founding"
              style={{
                padding: "15px 22px",
                borderRadius: 999,
                background: "transparent",
                color: theme.ink,
                border: `1px solid ${theme.chipBorder}`,
                fontSize: 15,
                fontWeight: 500,
                cursor: "pointer",
                fontFamily: "inherit",
                textDecoration: "none",
              }}
            >
              Become a founding partner
            </a>
          </div>
          </window.Reveal>

          <window.Reveal delay={340}>
          <div
            style={{
              display: "flex",
              gap: isMobile ? 24 : 40,
              marginTop: isMobile ? 40 : 64,
              flexWrap: "wrap",
            }}
            className="hero-stats"
          >
            {[
              ["3", "Arms working in concert"],
              ["1", "Independent benchmark"],
              ["∞", "Minds we build for"],
            ].map(([n, l]) => (
              <div key={l}>
                <div
                  style={{
                    fontSize: 36,
                    fontWeight: 700,
                    letterSpacing: -1,
                    color: theme.accent,
                    lineHeight: 1,
                  }}
                >
                  {n}
                </div>
                <div
                  style={{
                    fontSize: 12.5,
                    color: theme.sub,
                    marginTop: 8,
                    letterSpacing: 0.2,
                  }}
                >
                  {l}
                </div>
              </div>
            ))}
          </div>
          </window.Reveal>
        </div>

        <window.Reveal delay={150} style={{ order: isMobile ? 1 : 2 }}>
        <div
          style={{
            display: "flex",
            justifyContent: "center",
            alignItems: "center",
            pointerEvents: "none",
          }}
        >
          {useInfinity ? (
            <InfinityMark3D size={isMobile ? 280 : 480} motion={motion} dark={theme.dark} />
          ) : (
            <AnimatedLogo
              size={isMobile ? 280 : 480}
              drawIn={motion}
              breathe={motion}
              drift={motion}
              motion={motion}
              dark={theme.dark}
            />
          )}
        </div>
        </window.Reveal>
      </div>

      {!isMobile && (
        <div
          style={{
            position: "absolute",
            bottom: 28,
            left: 48,
            fontSize: 11,
            letterSpacing: 1.6,
            textTransform: "uppercase",
            color: theme.sub,
            display: "flex",
            alignItems: "center",
            gap: 10,
            zIndex: 5,
          }}
          className="hero-scroll-hint"
        >
          <span
            style={{
              display: "inline-block",
              width: 28,
              height: 1,
              background: theme.accent,
            }}
          />
          Scroll to read
        </div>
      )}

      {!isMobile && (
        <div
          style={{
            position: "absolute",
            bottom: 28,
            right: 48,
            fontSize: 11,
            letterSpacing: 0.4,
            color: theme.sub,
            display: "flex",
            alignItems: "center",
            gap: 8,
            zIndex: 5,
            fontFamily: "'JetBrains Mono', 'SF Mono', ui-monospace, monospace",
          }}
          className="hero-version-chip"
        >
          <span
            style={{
              width: 8,
              height: 8,
              borderRadius: "50%",
              background: theme.success,
              boxShadow: `0 0 10px ${theme.success}`,
            }}
          />
          Founding round open · 2026
        </div>
      )}
    </section>
  );
}

window.HeroSection = HeroSection;