// App entry — composes Navbar, Hero, Case, Timeline, Pricing, Footer
const App = () => {
  // Scroll progress
  const [progress, setProgress] = React.useState(0);
  React.useEffect(() => {
    const onScroll = () => {
      const h = document.documentElement;
      const max = h.scrollHeight - h.clientHeight;
      setProgress(max > 0 ? (h.scrollTop / max) * 100 : 0);
    };
    onScroll();
    window.addEventListener("scroll", onScroll, { passive: true });
    return () => window.removeEventListener("scroll", onScroll);
  }, []);

  // Reveal on scroll
  React.useEffect(() => {
    const els = document.querySelectorAll(".reveal:not(.in),.reveal-left:not(.in),.reveal-right:not(.in),.reveal-scale:not(.in)");
    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();
  });

  return (
    <>
      <div className="page-bg"></div>
      <div className="grain"></div>
      <div className="scroll-progress" style={{ width: `${progress}%` }}></div>
      <Navbar />
      <Hero />
      <Case />
      <Timeline />
      <Pricing />
      <Footer />
    </>
  );
};

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