// ============ CINEMA + PERIPHERALS + CONTACT + FOOTER + APP ============

function Cinema({ mode }) {
  return (
    <section id="cine">
      <div className="shead reveal">
        <span className="idx">§ 04 · CINEMA</span>
        <span className="t">The other half of the logbook — field, 4K, hand-held.</span>
        <span className="meta">IG / YT · ONGOING</span>
      </div>

      <div className="strip reveal d1">
        {FILMS.map((f) => (
          <div className={"reel " + f.cls} key={f.title}>
            <div className="perfs">
              {Array.from({ length: 16 }).map((_, i) => <i key={i} />)}
            </div>
            <div className="meta">
              <div className="cat-line">
                <span className="cat">{f.cat}</span>
                <span>{f.runtime}</span>
              </div>
              <h4>{f.title}</h4>
              <div className="caption">{f.caption}</div>
              <div className="tech">
                {f.tech.map((t) => <span key={t.k}>{t.k}&nbsp;<b>{t.v}</b></span>)}
              </div>
            </div>
          </div>
        ))}
      </div>

      <div className="sound reveal d2">
        <div className="left">
          <div className="eq"><i /><i /><i /><i /><i /></div>
          <div>
            <div className="label">Soundtrack · House / Afro House</div>
            <div className="artists" style={{ marginTop: 6 }}>
              Black Coffee<span className="sep">·</span>
              WhoMadeWho<span className="sep">·</span>
              Ben Böhmer<span className="sep">·</span>
              <em style={{ color: "var(--ink-dim)", fontStyle: "italic" }}>Cercle sets</em>
            </div>
          </div>
        </div>
        <div style={{ color: "var(--ink-mute)", letterSpacing: "0.12em" }}>↳ 04:32 · 06:18 · ongoing</div>
      </div>
    </section>
  );
}

function Peripherals() {
  return (
    <section>
      <div className="shead reveal">
        <span className="idx">§ 05 · PERIPHERALS</span>
        <span className="t">Honest signals — no filler.</span>
        <span className="meta">UPDATED · WEEKLY</span>
      </div>
      <div className="peripherals reveal d1">
        {PERIPHERALS.map((p) => (
          <div className="per" key={p.k}>
            <span className="k">{p.k}</span>
            <span className="v">{p.v}</span>
          </div>
        ))}
      </div>
    </section>
  );
}

function Contact() {
  return (
    <section id="contact">
      <div className="shead reveal">
        <span className="idx">§ 06 · CONTACT</span>
        <span className="t">Open to Staff / Principal / VP conversations.</span>
        <span className="meta">AUSTIN · &lt; 24H RESPONSE</span>
      </div>
      <div className="contact reveal d1">
        <div className="left">
          <h3 className="big">Let's build <em>something</em> remarkable.</h3>
          <p>
            I'm most useful on the sharp edges: safety evaluation at scale,
            agent platforms that stay up under adversarial load, and teams
            that need a senior hand while they grow. Happy to talk — or
            share a reel.
          </p>
        </div>
        <div className="right">
          {LINKS.map((l) => (
            <a key={l.k} href={l.url} target="_blank" rel="noopener noreferrer">
              <span>
                <span className="k">{l.k}</span>
                <div className="v" style={{ marginTop: 4 }}>{l.v}</div>
              </span>
              <span className="arr">{l.arr}</span>
            </a>
          ))}
        </div>
      </div>
    </section>
  );
}

function Footer() {
  return (
    <footer className="footer">
      <span>© MMXXVI · MAYANK CHUTANI</span>
      <span>ENGINEERED IN AUSTIN<span className="dot" />EDITED ON THE ROAD</span>
      <span>BUILD · 26.Q2 · SIGNED</span>
    </footer>
  );
}

// ============ APP ============
function App() {
  const [mode, setMode] = useState("eng");

  useEffect(() => {
    document.body.classList.remove("mode-eng", "mode-cine");
    document.body.classList.add("mode-" + mode);
  }, [mode]);

  // Reveal observer — more forgiving + fallback
  useEffect(() => {
    const obs = new IntersectionObserver(
      (entries) => entries.forEach((e) => e.isIntersecting && e.target.classList.add("in")),
      { threshold: 0.05, rootMargin: "0px 0px -5% 0px" }
    );
    const wire = () =>
      document.querySelectorAll(".reveal:not(.in)").forEach((el) => {
        // if already in viewport at mount, add immediately
        const r = el.getBoundingClientRect();
        if (r.top < window.innerHeight && r.bottom > 0) el.classList.add("in");
        else obs.observe(el);
      });
    wire();
    const t1 = setTimeout(wire, 100);
    const t2 = setTimeout(wire, 500);
    // safety: force all visible after 3s
    const t3 = setTimeout(() => {
      document.querySelectorAll(".reveal:not(.in)").forEach((el) => el.classList.add("in"));
    }, 3000);
    return () => { obs.disconnect(); clearTimeout(t1); clearTimeout(t2); clearTimeout(t3); };
  }, []);

  return (
    <>
      <div className="grain" />
      <Spine />
      <TopBar mode={mode} setMode={setMode} />
      <div className="page">
        <Hero mode={mode} />
        <Graph mode={mode} />
        <ParallaxBlock><Signal /></ParallaxBlock>
        <ParallaxBlock><Stack /></ParallaxBlock>
        <ParallaxBlock><Incident /></ParallaxBlock>
        {mode === "cine" && <ParallaxBlock><Cinema mode={mode} /></ParallaxBlock>}
        <ParallaxBlock><Peripherals /></ParallaxBlock>
        <ParallaxBlock><Contact /></ParallaxBlock>
        <Footer />
      </div>
    </>
  );
}

ReactDOM.createRoot(document.getElementById("root")).render(<App />);