// ============ HERO: name, statement, artifact (term | slate), now ============

function TermArtifact({ mode }) {
  // Typed-out commands in engineer mode; slate when cine
  const [lineIdx, setLineIdx] = useState(0);
  const lines = [
    { type: "com", text: "whoami" },
    { type: "out", text: "mayank :: founding engineer · ai safety platform" },
    { type: "com", text: "uptime" },
    { type: "out", text: "12+ years · 768+ commits · 43% codebase" },
    { type: "com", text: "./eval --suite=safety --metrics=15 --workload=prod" },
    { type: "dim", text: "→ prefect.flow spawned · kueue admission ok" },
    { type: "dim", text: "→ triton.inference_server · 2 gpu pinned" },
    { type: "ok",  text: "✓ 15/15 metrics green · 3.2s p95 · 0 regressions" },
    { type: "com", text: "./deploy --env=prod --cascade" },
    { type: "dim", text: "→ sdk:3.14.2 · cli:3.14.2 · mcp:3.14.2 · helm:0.9.7" },
    { type: "ok",  text: "✓ tag-triggered cascade release · signed · attested" },
  ];

  useEffect(() => {
    if (mode !== "eng") return;
    const id = setInterval(() => setLineIdx((i) => (i >= lines.length ? 0 : i + 1)), 520);
    return () => clearInterval(id);
  }, [mode]);

  if (mode === "cine") {
    return (
      <div className="slate">
        <div className="slate-head">
          <span>Scene 04 · Take 12</span>
          <span>4K · ProRes 422 HQ</span>
        </div>
        <div className="slate-main">
          <div className="title">Molten Edges — golden hour, 18:44 HST.</div>
        </div>
        <div className="slate-rows">
          <span className="k">Roll</span><span className="v">A007 · R12</span>
          <span className="k">Lens</span><span className="v">24-70 f/2.8 · ND 0.9</span>
          <span className="k">FPS</span><span className="v">23.976</span>
          <span className="k">ISO</span><span className="v">640</span>
          <span className="k">Color</span><span className="v">S-Log3 · Venice LUT</span>
        </div>
        <div className="slate-foot">
          <span>Dir · Cam · Edit — M. Chutani</span>
          <span>Mic: none · only lava</span>
        </div>
      </div>
    );
  }

  return (
    <div className="term">
      <div className="bar">
        <span className="dots"><i className="live" /><i /><i /></span>
        <span className="title">mayank@platform — zsh · 120×32</span>
        <span className="shell">~/platform</span>
      </div>
      <div className="body">
        {lines.slice(0, lineIdx).map((l, i) => (
          <span className="line" key={i}>
            {l.type === "com" && <><span className="prompt">$</span><span className="com">{l.text}</span></>}
            {l.type === "out" && <span className="out">{l.text}</span>}
            {l.type === "dim" && <span className="dim">{l.text}</span>}
            {l.type === "ok"  && <span className="ok">{l.text}</span>}
            {l.type === "warn"&& <span className="warn">{l.text}</span>}
          </span>
        ))}
        <span className="line"><span className="prompt">$</span><span className="cursor" /></span>
      </div>
    </div>
  );
}

function NowCard() {
  const [t, setT] = useState(new Date());
  useEffect(() => {
    const id = setInterval(() => setT(new Date()), 1000);
    return () => clearInterval(id);
  }, []);
  const austin = t.toLocaleTimeString("en-US", {
    timeZone: "America/Chicago", hour: "2-digit", minute: "2-digit", second: "2-digit", hour12: false,
  });
  return (
    <div className="now-card">
      <div className="now-head">
        <span>Currently</span>
        <span className="live"><i />Live</span>
      </div>
      <div className="now-row">
        <span className="k">Local · Austin</span>
        <span className="v">{austin} CT</span>
        <span className="sub">30.27°N · 97.74°W · clear · 71°F</span>
      </div>
      <div className="now-row">
        <span className="k">Shipping</span>
        <span className="v">Safety Evaluation Engine · v3.14.2</span>
        <span className="sub">Cascade release at T+04:00</span>
      </div>
      <div className="now-row">
        <span className="k">Listening</span>
        <span className="v">Black Coffee — Subconsciously</span>
        <span className="sub">House / Afro House · late-night mix</span>
      </div>
      <div className="now-row">
        <span className="k">Reading</span>
        <span className="v">Constitutional classifiers · Anthropic '24</span>
      </div>
    </div>
  );
}

function Hero({ mode }) {
  const secRef = useRef(null);
  // Pin-mode progress: p = 0 at page top, p = 1 after scrolling heroScrollBudget px.
  // This guarantees a clean 0→1 timeline as the user scrolls *down* from the top,
  // instead of being partially advanced at load.
  const heroScrollBudget = typeof window !== "undefined" ? window.innerHeight * 1.5 : 1200;
  const p = useScrollProgress(secRef, { mode: "pin", pinDistance: heroScrollBudget });

  // Each headline line — VISIBLE by default, drifts up gently as you scroll.
  // No reveal; the page is not blank at load.
  const headlineLines = [
    { pre: "I build the ", accent: "safety", post: "" },
    { pre: "infrastructure", accent: "", post: "" },
    { pre: "behind frontier AI —", accent: "", post: "" },
    { pre: "then I go ", accent: "film", post: " the planet." },
  ];

  // TOP of hero (name, headline, ticker): fully visible at load, gentle drift on scroll
  const nameOffset = lerp(0, -40, p);
  const nameOpacity = 1 - seg(p, 0.55, 0.9, easeOut);

  const stmtLift = lerp(0, -60, p);
  const stmtOpacity = 1 - seg(p, 0.6, 1.0, easeOut) * 0.5;

  // BELOW ticker — terminal + now-card + teaser start slightly transparent + tilted in 3D,
  // become solid/flat as the user scrolls toward them. This signals "there's more".
  // Artifact: opacity 0.35 → 1, rotateX 18° → 0, translateY 30 → 0
  const artifactP = seg(p, 0.0, 0.55, easeOut);
  const artifactOpacity = lerp(0.32, 1, artifactP);
  const artifactRotateX = lerp(18, 0, artifactP);
  const artifactTranslate = lerp(30, 0, artifactP);

  // Teaser: opacity 0.3 → 1, deeper 3D preview
  const teaserP = seg(p, 0.25, 0.85, easeOut);
  const teaserOpacity = lerp(0.28, 1, teaserP);
  const teaserRotateX = lerp(22, 0, teaserP);
  const teaserTranslate = lerp(40, 0, teaserP);

  // Background depth drift
  const bgShift = lerp(0, -140, p);
  const glowScale = 1 + p * 0.15;

  return (
    <section className="hero scene scrubbed" id="hero" ref={secRef}>
      {/* 3D depth layers */}
      <div className="hero-depth" aria-hidden="true" style={{ transform: `translate3d(0, ${bgShift}px, 0)` }}>
        <div className="hero-grid" />
        <div className="hero-glow" style={{ transform: `translate(-50%, -50%) scale(${glowScale})` }} />
      </div>

      <div className="hero-name mono"
        style={{
          opacity: nameOpacity,
          transform: `translate3d(0, ${nameOffset}px, 0)`,
        }}>
        <span className="me">MAYANK CHUTANI</span> &nbsp;·&nbsp; PORTFOLIO &nbsp;·&nbsp; MMXXVI &nbsp;·&nbsp; AUSTIN, TX 78759
      </div>

      <h1 className="hero-statement" style={{ transform: `translate3d(0, ${stmtLift}px, 0)`, opacity: stmtOpacity }}>
        {headlineLines.map((line, i) => {
          // very gentle per-line drift — parallax, not reveal
          const offset = i * 6 * p;  // lines separate subtly as you scroll
          return (
            <span className="line-3d" key={i}
              style={{
                transform: `translate3d(0, ${-offset}px, 0)`,
              }}>
              {line.pre}
              {line.accent && <span className="accent">{line.accent}</span>}
              {line.post}
            </span>
          );
        })}
      </h1>

      <div className="hero-ticker">
        <Ticker />
      </div>

      <div className="artifact"
        style={{
          transform: `perspective(1600px) translate3d(0, ${artifactTranslate}px, 0) rotateX(${artifactRotateX}deg)`,
          opacity: artifactOpacity,
          transformOrigin: "center top",
        }}>
        <div><TermArtifact mode={mode} /></div>
        <div><NowCard /></div>
      </div>

      {/* Subtle fixed scroll hint — fades out as user scrolls past the hero */}
      <div className="hero-scroll-hint" style={{ opacity: 1 - seg(p, 0.15, 0.5, easeOut) }}>
        <i>↓</i>&nbsp;&nbsp;KEEP&nbsp;SCROLLING · TERMINAL + GRAPH BELOW
      </div>
    </section>
  );
}

Object.assign(window, { Hero });