/* eslint-disable */
// Root app — wires sections together and runs the reveal-on-scroll observer.
// No tour modal, no video-like showreel — landing-hero.jsx and
// landing-social.jsx explain why (redesigned 2026-09, second pass).

const { useEffect: la_useEffect } = React;

function App() {
  // IntersectionObserver to add `.in` to `.reveal` elements as they enter view
  la_useEffect(() => {
    const els = document.querySelectorAll(".reveal");
    const io = new IntersectionObserver((entries) => {
      entries.forEach(e => {
        if (e.isIntersecting) {
          e.target.classList.add("in");
          io.unobserve(e.target);
        }
      });
    }, { threshold: 0.12, rootMargin: "0px 0px -40px 0px" });
    els.forEach(el => io.observe(el));
    return () => io.disconnect();
  }, []);

  // Smooth-scroll for nav anchors
  la_useEffect(() => {
    const onClick = (e) => {
      const a = e.target.closest("a[href^='#']");
      if (!a) return;
      const href = a.getAttribute("href");
      if (href === "#" || href === "#login") return;
      const el = document.querySelector(href);
      if (!el) return;
      e.preventDefault();
      window.scrollTo({ top: el.getBoundingClientRect().top + window.scrollY - 60, behavior: "smooth" });
    };
    document.addEventListener("click", onClick);
    return () => document.removeEventListener("click", onClick);
  }, []);

  // Dev aid: /landing/index.html?only=hero,pricing renders just those
  // sections — useful for inspecting one section in isolation.
  const only = new URLSearchParams(window.location.search).get("only");
  const show = (name) => !only || only.split(",").includes(name);

  return (
    <>
      <NavBar />
      {show("hero") && <Hero />}
      {show("journey") && <JourneyStrip />}
      {show("build") && <BuildSection />}
      {show("apply") && <ApplySection />}
      {show("tools") && <ToolsSection />}
      {show("learn") && <LearnSection />}
      {show("interview") && <InterviewSection />}
      {show("stats") && <StatsStrip />}
      {show("pricing") && <Pricing />}
      {show("cta") && <FinalCTA />}
      {show("footer") && <Footer />}
    </>
  );
}

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