/* global React, ReactDOM, AnimatedBackground, Nav, Hero, Services, Clients, Work, Reviews, About, Contact, Footer */

function CursorGlow() {
  const glowRef = React.useRef(null);

  React.useEffect(() => {
    const glow = glowRef.current;
    if (!glow) return;
    let x = 0, y = 0, cx = 0, cy = 0;
    let raf;
    let visible = false;

    const onMove = (e) => {
      x = e.clientX;
      y = e.clientY;
      if (!visible) { glow.style.opacity = '1'; visible = true; }
    };
    const onLeave = () => { glow.style.opacity = '0'; visible = false; };

    const animate = () => {
      cx += (x - cx) * 0.1;
      cy += (y - cy) * 0.1;
      glow.style.transform = `translate(${cx - 300}px, ${cy - 300}px)`;
      raf = requestAnimationFrame(animate);
    };

    document.addEventListener('mousemove', onMove);
    document.addEventListener('mouseleave', onLeave);
    animate();
    return () => {
      document.removeEventListener('mousemove', onMove);
      document.removeEventListener('mouseleave', onLeave);
      cancelAnimationFrame(raf);
    };
  }, []);

  return <div ref={glowRef} className="cursor-glow" aria-hidden="true" />;
}

function App() {
  return (
    <>
      <CursorGlow />
      <AnimatedBackground enabled={true} />
      <Nav />
      <main>
        <Hero variant="visual" />
        <Services />
        <Clients />
        <Work />
        <Reviews />
        <About />
        <Contact />
      </main>
      <Footer />
    </>
  );
}

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