/* Hero - video-forward landing with bold motion */

function HeroShell({ children }) {
  return (
    <section id="top" style={{ position: "relative", minHeight: "100vh", display: "flex", alignItems: "center", overflow: "hidden", paddingTop: 88, paddingBottom: 40 }}>
      {children}
      <div style={{ position: "absolute", bottom: 28, left: "50%", transform: "translateX(-50%)", zIndex: 4, display: "flex", flexDirection: "column", alignItems: "center", gap: 8, color: "var(--fg4)" }}>
        <span style={{ fontFamily: "var(--font-mono)", fontSize: 11, letterSpacing: ".2em" }}>SCROLL</span>
        <span style={{ width: 1, height: 34, background: "linear-gradient(var(--ink-500), transparent)" }} />
      </div>
    </section>
  );
}

function GhostNumerals() {
  const items = [
    { t: "314852", top: "14%", left: "6%", size: 60, dur: "8s", op: .05 },
    { t: "66852431", top: "70%", left: "10%", size: 46, dur: "9s", op: .045 },
    { t: "</>", top: "26%", right: "8%", size: 78, dur: "7s", op: .07 },
    { t: "0x1F", top: "78%", right: "16%", size: 40, dur: "10s", op: .05 },
  ];

  return (
    <div aria-hidden style={{ position: "absolute", inset: 0, zIndex: 1, pointerEvents: "none" }}>
      {items.map((n, i) => (
        <span key={i} className="float-num" style={{
          position: "absolute", top: n.top, left: n.left, right: n.right,
          fontFamily: "var(--font-mono)", fontSize: n.size, color: "var(--white)", opacity: n.op,
          letterSpacing: ".04em", animationDelay: (i * 1.3) + "s", animationDuration: n.dur,
        }}>{n.t}</span>
      ))}
    </div>
  );
}

function HeroText({ onNav, codeLines }) {
  return (
    <div style={{ maxWidth: 660 }}>
      <h1 className="ds-display" style={{ fontSize: "clamp(46px, 7vw, 92px)", margin: 0, lineHeight: 1.02 }}>
        <WordReveal text="I build, solve," /><br />
        <WordReveal text="and ship things." />
      </h1>
      <Reveal delay={120} as="p">
        <span className="ds-body-lg" style={{ display: "block", maxWidth: 500, marginTop: 26, color: "var(--fg2)" }}>
          I'm Rishi — a computer-science student who reasons from first principles, moves across domains, and turns hard problems into things that actually work.
        </span>
      </Reveal>
      <Reveal delay={220}>
        <div style={{ display: "flex", gap: 14, marginTop: 38, flexWrap: "wrap" }}>
          <Magnetic as="span" strength={0.4} style={{ display: "inline-flex" }}>
            <button className="btn-primary lk" onClick={() => onNav("work")}>See my work <span className="arrow">→</span></button>
          </Magnetic>
          <Magnetic as="span" strength={0.4} style={{ display: "inline-flex" }}>
            <button className="btn-outline" onClick={() => onNav("gpt")}>What ChatGPT says</button>
          </Magnetic>
        </div>
      </Reveal>
      {codeLines !== false && (
        <Reveal delay={320}>
          <pre style={{
            marginTop: 52, fontFamily: "var(--font-mono)", fontSize: 13, lineHeight: 1.7,
            color: "var(--fg3)", borderLeft: "1px solid var(--border-default)", paddingLeft: 16,
          }}>{`def solve(problem):
    think(); build(); iterate()
    return impact`}</pre>
        </Reveal>
      )}
    </div>
  );
}

function Hero({ onNav }) {
  return (
    <HeroShell>
      <div style={{ position: "absolute", inset: 0, zIndex: 0 }}>
        <video src="assets/hero-mind.mp4" poster="assets/hero-mind-still.png" autoPlay muted loop playsInline
          style={{ position: "absolute", right: "-0.75%", top: 0, height: "100%", width: "62%", objectFit: "cover", objectPosition: "center",
            WebkitMaskImage: "linear-gradient(90deg, transparent 0%, #000 40%, #000 88%, transparent 100%)",
            maskImage: "linear-gradient(90deg, transparent 0%, #000 40%, #000 88%, transparent 100%)" }} />
        <div style={{ position: "absolute", inset: 0, background: "linear-gradient(90deg, #000 21%, rgba(0,0,0,0.68) 47%, rgba(0,0,0,0.18) 74%, transparent 94%)" }} />
        <div style={{ position: "absolute", inset: 0, background: "var(--vignette)", opacity: .42 }} />
      </div>
      <GhostNumerals />
      <div className="wrap" style={{ position: "relative", zIndex: 2, width: "100%", maxWidth: "none", paddingLeft: "clamp(24px, 4vw, 76px)", paddingRight: "clamp(16px, 3vw, 40px)" }}>
        <HeroText onNav={onNav} />
        <Reveal delay={420}>
          <span className="ds-caption" style={{ display: "block", marginTop: 30, fontFamily: "var(--font-mono)", fontSize: 11, letterSpacing: ".08em", color: "var(--fg4)" }}>
            FIG.00 — THINK ON PAPER
          </span>
        </Reveal>
      </div>
    </HeroShell>
  );
}

Object.assign(window, { Hero });