/* global React, ReactDOM, Lenis, Cursor, IntroOverlay, Nav, Hero, Vision, Infrastructure, Bouncer, Portfolio, Retainers, Closer */
const { useEffect, useState } = React;

/* ============================================================================
   App — composes the full cinematic site.
   - Lenis smooth scroll on window
   - IntersectionObserver for active section + `.reveal-up` triggers
   - Scroll progress for the nav bar
   ============================================================================ */

function App() {
  const [active, setActive] = useState("hero");
  const [progress, setProgress] = useState(0);

  // Lenis smooth scroll
  useEffect(() => {
    if (typeof Lenis === "undefined") return;
    const lenis = new Lenis({
      duration: 1.15,
      easing: (t) => Math.min(1, 1.001 - Math.pow(2, -10 * t)),
      smoothWheel: true,
      smoothTouch: false,
      wheelMultiplier: 1.0,
    });
    let raf = 0;
    const tick = (time) => { lenis.raf(time); raf = requestAnimationFrame(tick); };
    raf = requestAnimationFrame(tick);
    // Anchor handling — let Lenis scroll to anchors
    const onAnchor = (e) => {
      const a = e.target.closest('a[href^="#"]');
      if (!a) return;
      const id = a.getAttribute("href").slice(1);
      const el = document.getElementById(id);
      if (!el) return;
      e.preventDefault();
      lenis.scrollTo(el, { offset: -10, duration: 1.4 });
    };
    document.addEventListener("click", onAnchor);
    return () => {
      cancelAnimationFrame(raf);
      lenis.destroy();
      document.removeEventListener("click", onAnchor);
    };
  }, []);

  // Scroll progress (0..1 of full document)
  useEffect(() => {
    const onScroll = () => {
      const sy = window.scrollY || window.pageYOffset;
      const max = document.documentElement.scrollHeight - window.innerHeight;
      setProgress(max > 0 ? sy / max : 0);
    };
    onScroll();
    window.addEventListener("scroll", onScroll, { passive: true });
    return () => window.removeEventListener("scroll", onScroll);
  }, []);

  // Active section
  useEffect(() => {
    const sections = Array.from(document.querySelectorAll("section[id]"));
    const io = new IntersectionObserver(
      (entries) => {
        let best = null;
        for (const e of entries) {
          if (!best || e.intersectionRatio > best.intersectionRatio) best = e;
        }
        if (best && best.isIntersecting) setActive(best.target.id);
      },
      { rootMargin: "-30% 0px -50% 0px", threshold: [0, 0.2, 0.5, 0.8] }
    );
    sections.forEach((s) => io.observe(s));
    return () => io.disconnect();
  }, []);

  // Reveal-up on entry
  useEffect(() => {
    const els = document.querySelectorAll(".reveal-up");
    const io = new IntersectionObserver((entries) => {
      for (const e of entries) {
        if (e.isIntersecting) {
          e.target.classList.add("in");
          io.unobserve(e.target);
        }
      }
    }, { rootMargin: "0px 0px -10% 0px", threshold: 0.05 });
    els.forEach((el) => io.observe(el));
    return () => io.disconnect();
  }, []);

  return (
    <React.Fragment>
      <IntroOverlay />
      <Cursor />
      <Nav active={active} progress={progress} />

      <main>
        <Hero />
        <Infrastructure />
        <Portfolio />
        <Retainers />
        <Closer />
      </main>
    </React.Fragment>
  );
}

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