/* Octodus clone — app shell: reveal scroll + page composition */

function App() {
  // Anchor jump (content renders async via Babel, so retry until target exists)
  React.useEffect(() => {
    const id = decodeURIComponent((window.location.hash || "").replace("#", ""));
    if (!id) return;
    let tries = 0;
    const tick = () => {
      const el = document.getElementById(id);
      if (el) { el.scrollIntoView({ behavior: "auto", block: "start" }); return; }
      if (tries++ < 40) setTimeout(tick, 80);
    };
    tick();
  }, []);

  // Scroll reveal
  React.useEffect(() => {
    const io = new IntersectionObserver((entries) => {
      entries.forEach((e) => { if (e.isIntersecting) { e.target.classList.add("in"); io.unobserve(e.target); } });
    }, { threshold: 0.06, rootMargin: "0px 0px -4% 0px" });
    const wire = () => {
      document.querySelectorAll(".reveal:not(.in)").forEach((el) => {
        const r = el.getBoundingClientRect();
        if (r.top < window.innerHeight * 0.96 && r.bottom > -40) el.classList.add("in");
        else io.observe(el);
      });
    };
    wire();
    const onScroll = () => wire();
    window.addEventListener("scroll", onScroll, { passive: true });
    window.addEventListener("resize", onScroll);
    const safety = setTimeout(() => {
      document.querySelectorAll(".reveal").forEach((el) => {
        const r = el.getBoundingClientRect();
        if (r.top < window.innerHeight && r.bottom > 0 && getComputedStyle(el).opacity === "0") {
          el.style.transition = "none"; el.classList.add("in");
        }
      });
    }, 1400);
    return () => { clearTimeout(safety); io.disconnect(); window.removeEventListener("scroll", onScroll); window.removeEventListener("resize", onScroll); };
  }, []);

  return (
    <>
      <Navbar />
      <HeroA />
      <HeroStats />
      <Trusted />
      <Capabilities />
      <Demo />
      <HowItWorks />
      <Stories />
      <Comparison />
      <AiTools />
      <Pricing />
      <Faq />
      <FinalCta />
      <Footer />
    </>
  );
}

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