// Hero - orbiting profile + huge type + parallax depth (English only)
function SiteHero() {
  const T = window.TOKENS;
  const C = window.SITE_CONTENT;
  const h = C.hero;
  const [scrollY, setScrollY] = React.useState(0);
  const [mouse, setMouse] = React.useState({ x: 0, y: 0 });

  React.useEffect(() => {
    const onScroll = () => setScrollY(window.scrollY);
    const onMove = (e) => setMouse({ x: (e.clientX / window.innerWidth - 0.5) * 2, y: (e.clientY / window.innerHeight - 0.5) * 2 });
    window.addEventListener("scroll", onScroll, { passive: true });
    window.addEventListener("mousemove", onMove);
    return () => { window.removeEventListener("scroll", onScroll); window.removeEventListener("mousemove", onMove); };
  }, []);

  const satellites = [
    { label: "Code", angle: 0, distance: 1.0, color: T.orange, size: 14 },
    { label: "Lead", angle: 72, distance: 1.05, color: T.green, size: 16 },
    { label: "Build", angle: 144, distance: 0.95, color: T.violet, size: 13 },
    { label: "Teach", angle: 216, distance: 1.08, color: T.green, size: 12 },
    { label: "Ship", angle: 288, distance: 0.98, color: T.orange, size: 14 },
  ];

  return (
    <section style={{
      minHeight: "100vh",
      padding: "120px 32px 60px",
      position: "relative",
      display: "flex",
      flexDirection: "column",
      justifyContent: "space-between",
      overflow: "hidden",
    }}>
      <div style={{
        position: "absolute",
        top: "20%", right: "-10%",
        width: "60vw", height: "60vw",
        background: `radial-gradient(circle, ${T.orange}22, transparent 60%)`,
        filter: "blur(40px)",
        pointerEvents: "none",
        transform: `translate(${mouse.x * 20}px, ${mouse.y * 20}px)`,
        transition: "transform .3s ease-out",
      }}></div>
      <div style={{
        position: "absolute",
        bottom: "10%", left: "-15%",
        width: "50vw", height: "50vw",
        background: `radial-gradient(circle, ${T.violet}22, transparent 60%)`,
        filter: "blur(40px)",
        pointerEvents: "none",
        transform: `translate(${mouse.x * -15}px, ${mouse.y * -15}px)`,
        transition: "transform .3s ease-out",
      }}></div>

      <div style={{ position: "relative", zIndex: 2, transform: `translateY(${scrollY * -0.15}px)`, opacity: Math.max(0, 1 - scrollY / 500), maxWidth: "min(1100px, calc(100vw - min(460px, 36vw)))" }}>
        <div style={{
          fontFamily: "'JetBrains Mono', monospace",
          fontSize: "13px",
          color: T.orange,
          marginBottom: "24px",
          display: "flex", alignItems: "center", gap: "8px",
        }}>
          <span>{">"}</span>
          <span style={{ borderRight: `2px solid ${T.orange}`, paddingRight: "4px", animation: "blink 1s step-end infinite" }}>
            {h.greeting}
          </span>
        </div>

        <h1 style={{
          fontSize: "clamp(64px, 11vw, 180px)",
          fontWeight: 500,
          letterSpacing: "-0.04em",
          lineHeight: 0.88,
          margin: 0,
          maxWidth: "1100px",
        }}>
          <span style={{ color: T.ink }}>{h.tagline[0]}</span>{" "}
          <span style={{
            color: T.orange,
            fontStyle: "italic",
            fontWeight: 300,
            fontFamily: "'Fraunces', Georgia, serif",
          }}>{h.tagline[1]}</span>
        </h1>

        <p style={{
          fontSize: "clamp(20px, 2.4vw, 30px)",
          fontWeight: 300,
          maxWidth: "780px",
          marginTop: "40px",
          lineHeight: 1.4,
          color: T.ink,
        }}>
          <span>{h.pitch[0]}</span>{" "}
          <span style={{ color: T.green, fontStyle: "italic", fontFamily: "'Fraunces', serif", fontWeight: 400 }}>{h.pitch[1]}</span>
        </p>
        <p style={{ fontSize: "16px", color: T.inkDim, maxWidth: "640px", marginTop: "20px", lineHeight: 1.55 }}>
          {h.sub}
        </p>
      </div>

      <div style={{
        position: "absolute",
        top: "100px",
        right: "40px",
        width: "min(420px, 32vw)",
        height: "min(420px, 32vw)",
        zIndex: 1,
        transform: `translate(${mouse.x * -10}px, ${mouse.y * -10}px) translateY(${scrollY * 0.1}px)`,
        transition: "transform .3s ease-out",
      }}>
        <div style={{
          position: "absolute", inset: 0,
          border: `1px dashed ${T.ruleHi}`,
          borderRadius: "50%",
          animation: "spinHero 60s linear infinite",
        }}></div>
        <div style={{
          position: "absolute", inset: "30px",
          border: `1px dashed ${T.orange}55`,
          borderRadius: "50%",
          animation: "spinHero 35s linear infinite reverse",
        }}></div>
        <div style={{
          position: "absolute", inset: "20%",
          background: `url(assets/filiberto.png) center/cover`,
          borderRadius: "50%",
          border: `2px solid ${T.orange}`,
          boxShadow: `0 0 80px ${T.orange}55, inset 0 0 0 4px ${T.bg}`,
        }}></div>
        {satellites.map((s, i) => (
          <div key={i} style={{
            position: "absolute",
            top: "50%", left: "50%",
            width: 0, height: 0,
            transform: `rotate(${s.angle}deg) translateX(${50 * s.distance}%) rotate(-${s.angle}deg)`,
            animation: `orbitDrift ${8 + i}s ease-in-out infinite`,
          }}>
            <div style={{
              padding: "4px 10px",
              background: T.card,
              border: `1px solid ${s.color}`,
              borderRadius: "100px",
              fontFamily: "'JetBrains Mono', monospace",
              fontSize: "10px",
              color: s.color,
              transform: "translate(-50%, -50%)",
              whiteSpace: "nowrap",
              boxShadow: `0 0 16px ${s.color}40`,
            }}>{s.label}</div>
          </div>
        ))}
      </div>

      <div style={{
        position: "relative", zIndex: 2,
        display: "flex",
        justifyContent: "space-between",
        alignItems: "flex-end",
        fontFamily: "'JetBrains Mono', monospace",
        fontSize: "12px",
        color: T.inkDim,
      }}>
        <div style={{ display: "flex", alignItems: "center", gap: "8px" }}>
          <span style={{ color: T.orange }}>↓</span>
          <span>{h.scroll}</span>
        </div>
        <div style={{ textAlign: "right" }}>
          {h.location} · {h.age} y/o · {h.school}
        </div>
      </div>
    </section>
  );
}

window.SiteHero = SiteHero;