/* Root app */
const { useState: uSA, useEffect: uEA } = React;

function ScrollProgress() {
  const [w, setW] = uSA(0);
  uEA(() => {
    let raf = 0;
    const update = () => {
      raf = 0;
      const h = document.documentElement;
      const max = h.scrollHeight - h.clientHeight;
      setW(max > 0 ? (h.scrollTop / max) * 100 : 0);
    };
    const onScroll = () => { if (!raf) raf = requestAnimationFrame(update); };
    update();
    window.addEventListener("scroll", onScroll, { passive: true });
    return () => window.removeEventListener("scroll", onScroll);
  }, []);
  return <div className="scroll-prog" style={{ width: `${w}%` }}></div>;
}

function App() {
  return (
    <React.Fragment>
      <ScrollProgress />
      <div className="ambient">
        <div className="grid-mesh"></div>
        <div className="orb orb-1"></div>
        <div className="orb orb-2"></div>
        <div className="orb orb-3"></div>
        <div className="noise"></div>
      </div>
      <Nav />
      <main>
        <Hero />
        <Marquee />
        <About />
        <Agentic />
        <Experience />
        <Skills />
        <Education />
        <Contact />
      </main>
      <Footer />
    </React.Fragment>
  );
}

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