// Root app composition
const root = ReactDOM.createRoot(document.getElementById("app"));

function App() {
  // Custom cursor (subtle ring follow)
  const cursorRef = React.useRef(null);
  React.useEffect(() => {
    if (window.matchMedia("(pointer: coarse)").matches) return;
    const el = cursorRef.current;
    if (!el) return;
    let x = 0, y = 0, tx = 0, ty = 0;
    const move = (e) => { tx = e.clientX; ty = e.clientY; };
    window.addEventListener("mousemove", move);
    let raf;
    const tick = () => {
      x += (tx - x) * 0.18;
      y += (ty - y) * 0.18;
      el.style.transform = `translate3d(${x - 16}px, ${y - 16}px, 0)`;
      raf = requestAnimationFrame(tick);
    };
    raf = requestAnimationFrame(tick);
    return () => { window.removeEventListener("mousemove", move); cancelAnimationFrame(raf); };
  }, []);

  return (
    <div id="top" className="relative">
      <ScrollProgress />

      {/* Custom cursor */}
      <div
        ref={cursorRef}
        aria-hidden="true"
        className="hidden md:block fixed top-0 left-0 z-[60] pointer-events-none w-8 h-8 rounded-full mix-blend-difference"
        style={{ border: "1px solid rgba(242,237,227,0.6)" }}
      />

      <Hero />
      <PrinciplesMarquee />
      <About />
      <Education />
      <Experience />
      <Skills />
      <Certifications />
      <Research />
      <Contact />
      <Footer />
    </div>
  );
}

root.render(<App />);