// Root app: single-page scroll layout with reveal transitions + scroll-spy nav
const { useState: useStateApp, useEffect: useEffectApp, useRef: useRefApp } = React;

/* Wraps a section with an anchor id and scroll-triggered reveal. */
function Reveal({ id, children, first }) {
  const ref = useRefApp(null);
  const [shown, setShown] = useStateApp(!!first);

  useEffectApp(() => {
    if (first || shown) return;
    const el = ref.current;
    if (!el) return;
    let done = false;

    const reveal = () => {
      if (done) return;
      done = true;
      setShown(true);
      window.removeEventListener("scroll", onScroll);
      window.removeEventListener("resize", onScroll);
      clearTimeout(timer);
    };
    const inView = () => {
      const r = el.getBoundingClientRect();
      const vh = window.innerHeight || document.documentElement.clientHeight;
      return r.top < vh * 0.92 && r.bottom > 0;
    };
    const onScroll = () => { if (inView()) reveal(); };

    if (inView()) { setShown(true); return; }
    window.addEventListener("scroll", onScroll, { passive: true });
    window.addEventListener("resize", onScroll);
    // safety net: never leave a section invisible
    const timer = setTimeout(reveal, 1400);

    return () => {
      window.removeEventListener("scroll", onScroll);
      window.removeEventListener("resize", onScroll);
      clearTimeout(timer);
    };
  }, [first]);

  const visible = first || shown;
  return (
    <section
      id={id}
      ref={ref}
      style={{
        scrollMarginTop: 74,
        opacity: visible ? 1 : 0,
        transform: "none",
        transition: visible ? "opacity 600ms cubic-bezier(.16,1,.3,1)" : "none",
      }}
    >
      {children}
    </section>
  );
}

function Footer() {
  return (
    <footer style={{
      borderTop: "1px solid var(--line)",
      padding: "32px 32px 40px",
    }}>
      <div style={{
        maxWidth: 1320, margin: "0 auto",
        display: "flex", justifyContent: "space-between", alignItems: "center",
        gap: 24, flexWrap: "wrap",
        fontFamily: "var(--mono)", fontSize: 11, letterSpacing: "0.14em",
        textTransform: "uppercase", color: "var(--ink-mute)",
      }}>
        <span>© {new Date().getFullYear()} Thirumurugan Sivalingam</span>
        <span>{DATA.location}</span>
        <span>Built with intention.</span>
      </div>
    </footer>
  );
}

function App() {
  const [active, setActive] = useStateApp("home");

  const goTo = (id) => {
    const el = document.getElementById(id);
    if (!el) return;
    el.scrollIntoView({ behavior: "smooth", block: "start" });
  };

  // Scroll-spy: highlight the section currently in view
  useEffectApp(() => {
    const ids = NAV_ITEMS.map((n) => n.id);
    const onScroll = () => {
      const mid = window.innerHeight / 2;
      let best = "home";
      let bestDist = Infinity;
      ids.forEach((id) => {
        const el = document.getElementById(id);
        if (!el) return;
        const r = el.getBoundingClientRect();
        if (r.top <= mid && r.bottom >= mid) {
          const d = Math.abs(r.top + r.height / 2 - mid);
          if (d < bestDist) { bestDist = d; best = id; }
        }
      });
      setActive(best);
    };
    window.addEventListener("scroll", onScroll, { passive: true });
    onScroll();
    return () => window.removeEventListener("scroll", onScroll);
  }, []);

  const sections = [
    ["home",     <HomeSection onNav={goTo} />],
    ["about",    <AboutSection />],
    ["speaking", <SpeakingSection />],
    ["projects", <ProjectsSection />],
    ["gallery",  <GallerySection />],
    ["watch",    <WatchSection />],
    ["buzz",     <BuzzSection />],
    ["contact",  <ContactSection />],
  ];

  return (
    <div>
      <Nav current={active} onNav={goTo} />
      {sections.map(([id, node], i) => (
        <Reveal key={id} id={id} first={i === 0}>
          {node}
        </Reveal>
      ))}
      <Footer />
    </div>
  );
}

/* cursor blink keyframe for terminal card */
const blinkStyle = document.createElement("style");
blinkStyle.textContent = `@keyframes blink { 0%,100%{opacity:1} 50%{opacity:0} }`;
document.head.appendChild(blinkStyle);

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