// Hero — cinematic opening centered on the brand mark + wordmark.
function Hero({ onCta }) {
  const [isMobile, setIsMobile] = React.useState(window.innerWidth < 768);
  React.useEffect(() => {
    const h = () => setIsMobile(window.innerWidth < 768);
    window.addEventListener("resize", h);
    return () => window.removeEventListener("resize", h);
  }, []);

  return (
    <section id="top" className="grain" style={{
      position: "relative",
      minHeight: "100vh",
      paddingTop: isMobile ? 80 : 120,
      paddingBottom: isMobile ? 48 : 60,
      background: "radial-gradient(ellipse at 50% 0%, #1C2542 0%, #080C18 50%, #04060C 100%)",
      overflow: "hidden",
      display: "flex", flexDirection: "column", justifyContent: "center",
    }}>
      <ParticleField density={isMobile ? 30 : 65} hue="cool" interactive={!isMobile} />

      {/* off-canvas orbit arcs — hidden on mobile to avoid overflow flash */}
      {!isMobile && (
        <>
          <div style={{
            position: "absolute", right: "-20%", top: "5%",
            width: 820, height: 820, borderRadius: "50%",
            border: "1px solid rgba(0,229,255,0.10)",
            transform: "rotate(-18deg)", pointerEvents: "none",
          }} />
          <div style={{
            position: "absolute", left: "-22%", top: "30%",
            width: 980, height: 980, borderRadius: "50%",
            border: "1px solid rgba(255,45,157,0.07)",
            transform: "rotate(35deg)", pointerEvents: "none",
          }} />
        </>
      )}
      <div style={{
        position: "absolute", left: "50%", top: "40%", transform: "translate(-50%, -50%)",
        width: isMobile ? 500 : 1100, height: isMobile ? 500 : 1100, borderRadius: "50%",
        background: "radial-gradient(circle, rgba(45,111,247,0.18) 0%, rgba(107,63,255,0.10) 30%, transparent 60%)",
        pointerEvents: "none", filter: "blur(20px)",
      }} />

      <div className="container-wide" style={{ position: "relative", zIndex: 2 }}>
        <div style={{ display: "flex", flexDirection: "column", alignItems: "center", textAlign: "center" }}>

          {/* overline */}
          <div style={{
            fontFamily: "var(--font-mono)", fontSize: isMobile ? 10 : 11,
            color: "var(--plasma-cyan)", letterSpacing: isMobile ? "0.18em" : "0.32em", textTransform: "uppercase",
            display: "flex", alignItems: "center", gap: 14, marginBottom: 24,
          }}>
            <span style={{ width: 28, height: 1, background: "linear-gradient(90deg, transparent, var(--plasma-cyan))" }} />
            Goiânia · Goiás · Brasil
            <span style={{ width: 28, height: 1, background: "linear-gradient(90deg, var(--plasma-cyan), transparent)" }} />
          </div>

          {/* big brand mark with glow */}
          <BrandMark size={isMobile ? 200 : 300} />

          {/* wordmark */}
          <div style={{ marginTop: 4, textAlign: "center" }}>
            <div style={{
              fontFamily: "var(--font-wordmark)", fontWeight: 500,
              fontSize: isMobile ? "clamp(22px, 7vw, 36px)" : "clamp(30px, 5.4vw, 72px)",
              lineHeight: 1.04,
              letterSpacing: "0.1em", color: "var(--fg-1)",
              textShadow: "0 0 28px rgba(45,111,247,0.35), 0 0 60px rgba(107,63,255,0.18)",
            }}>FÍSICA ALÉM DO PAPEL</div>
          </div>

          {/* statement */}
          <h1 style={{
            fontFamily: "var(--font-display)",
            fontSize: isMobile ? "clamp(24px, 6vw, 36px)" : "clamp(32px, 3.8vw, 56px)",
            fontWeight: 300, lineHeight: 1.1,
            letterSpacing: "-0.02em",
            color: "var(--fg-1)", margin: isMobile ? "36px 0 0" : "56px 0 0", maxWidth: 880,
          }}>
            A física não se decora.{" "}
            <span style={{
              fontWeight: 500,
              background: "linear-gradient(135deg, #FF2D9D 0%, #6B3FFF 50%, #00E5FF 100%)",
              WebkitBackgroundClip: "text", WebkitTextFillColor: "transparent",
              backgroundClip: "text",
            }}>Se observa.</span>
          </h1>

          <p style={{
            fontFamily: "var(--font-body)",
            fontSize: isMobile ? 16 : 18,
            lineHeight: 1.6,
            color: "var(--fg-2)", maxWidth: isMobile ? 340 : 640,
            margin: isMobile ? "20px 0 28px" : "28px 0 40px",
          }}>
            Levamos experimentos reais de física para escolas e comunidades de Goiás — transformando
            fórmula em descoberta, e descoberta em vontade de entender o mundo.
          </p>

          {/* CTAs */}
          <div style={{
            display: "flex", gap: 12, flexWrap: "wrap", justifyContent: "center",
            width: isMobile ? "100%" : "auto",
          }}>
            <button className="btn btn-primary"
              style={isMobile ? { width: "100%", justifyContent: "center" } : {}}
              onClick={() => onCta && onCta("projeto")}>
              Conheça o projeto <span className="arrow">→</span>
            </button>
            <button className="btn btn-secondary"
              style={isMobile ? { width: "100%", justifyContent: "center" } : {}}
              onClick={() => onCta && onCta("experimentos")}>
              Ver experiências
            </button>
            {!isMobile && (
              <button className="btn btn-ghost" onClick={() => onCta && onCta("contato")}>
                Levar à sua escola <span className="arrow">→</span>
              </button>
            )}
          </div>

          {/* metadata row */}
          <div style={{
            display: "flex", gap: isMobile ? 32 : 64, marginTop: isMobile ? 48 : 80,
            paddingTop: 32, borderTop: "1px solid var(--line)",
            fontFamily: "var(--font-mono)", fontSize: 11,
            color: "var(--fg-3)", letterSpacing: "0.16em", textTransform: "uppercase",
            width: "100%", maxWidth: 560, justifyContent: "center", flexWrap: "wrap",
          }}>
            <div style={{ textAlign: "left" }}>
              <div style={{ color: "var(--plasma-cyan)", fontSize: isMobile ? 18 : 22, fontWeight: 500, letterSpacing: "0.02em" }}>+250h</div>
              <div style={{ marginTop: 6 }}>Horas em sala</div>
            </div>
            <div style={{ textAlign: "left" }}>
              <div style={{ color: "var(--plasma-magenta)", fontSize: isMobile ? 18 : 22, fontWeight: 500, letterSpacing: "0.02em" }}>200 alunos</div>
              <div style={{ marginTop: 6 }}>EF · EM</div>
            </div>
          </div>
        </div>
      </div>
    </section>
  );
}

// Brand mark — logo with cinematic orbiting halo.
function BrandMark({ size = 300 }) {
  const scale = size / 300;
  return (
    <div style={{
      position: "relative", width: size, height: size,
      display: "flex", alignItems: "center", justifyContent: "center",
    }}>
      {/* halo glow */}
      <div style={{
        position: "absolute",
        width: size * 1.07, height: size * 1.07, borderRadius: "50%",
        background: "radial-gradient(circle, rgba(45,111,247,0.45) 0%, rgba(107,63,255,0.25) 35%, rgba(255,45,157,0.12) 60%, transparent 75%)",
        filter: "blur(12px)",
      }} />

      {/* outer dashed ring */}
      <div style={{
        position: "absolute",
        width: Math.round(320 * scale), height: Math.round(320 * scale), borderRadius: "50%",
        border: "1px dashed rgba(255,255,255,0.10)",
        animation: "spin 60s linear infinite",
      }} />

      {/* orbit rings */}
      <div style={{
        position: "absolute",
        width: Math.round(260 * scale), height: Math.round(260 * scale), borderRadius: "50%",
        border: "1.5px solid rgba(0,229,255,0.30)",
        transform: "rotateX(70deg) rotate(20deg)",
        boxShadow: "0 0 28px rgba(0,229,255,0.15)",
        animation: "spin 20s linear infinite",
      }} />
      <div style={{
        position: "absolute",
        width: Math.round(260 * scale), height: Math.round(260 * scale), borderRadius: "50%",
        border: "1.5px solid rgba(255,45,157,0.30)",
        transform: "rotateX(70deg) rotate(-50deg)",
        boxShadow: "0 0 28px rgba(255,45,157,0.15)",
        animation: "spin 26s linear infinite reverse",
      }} />

      {/* orbiting electrons */}
      <Electron color="#00E5FF" radius={Math.round(130 * scale)} duration="7s" />
      <Electron color="#FF2D9D" radius={Math.round(130 * scale)} duration="11s" delay="-3s" />
      <Electron color="#6B3FFF" radius={Math.round(130 * scale)} duration="14s" delay="-7s" />

      {/* logo mark */}
      <img src="./assets/logo-white.svg" alt="Física Além do Papel"
        style={{
          position: "relative", zIndex: 2,
          width: Math.round(180 * scale), height: Math.round(180 * scale),
          filter: "drop-shadow(0 0 24px rgba(0,229,255,0.5)) drop-shadow(0 0 48px rgba(45,111,247,0.35))",
        }}
      />
    </div>
  );
}

function Electron({ color, radius, duration, delay = "0s" }) {
  return (
    <div style={{
      position: "absolute", width: radius * 2, height: radius * 2,
      animation: `spin ${duration} linear infinite`,
      animationDelay: delay,
    }}>
      <div style={{
        position: "absolute", left: "50%", top: 0,
        width: 12, height: 12, marginLeft: -6,
        borderRadius: "50%", background: color,
        boxShadow: `0 0 16px ${color}, 0 0 36px ${color}80`,
      }} />
    </div>
  );
}

window.Hero = Hero;
