/* Background — animated grid + cursor spotlight */
const { useEffect, useRef } = React;

function Background() {
  const spotRef = useRef(null);

  useEffect(() => {
    const el = spotRef.current;
    if (!el) return;
    let raf = 0;
    let tx = window.innerWidth / 2;
    let ty = window.innerHeight / 2;
    let cx = tx, cy = ty;

    const onMove = (e) => {
      tx = e.clientX;
      ty = e.clientY;
      el.classList.add('on');
    };
    const onLeave = () => { el.classList.remove('on'); };

    const loop = () => {
      cx += (tx - cx) * 0.12;
      cy += (ty - cy) * 0.12;
      el.style.left = cx + 'px';
      el.style.top = cy + 'px';
      raf = requestAnimationFrame(loop);
    };
    raf = requestAnimationFrame(loop);

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

  return (
    <div className="bg-stack" aria-hidden="true">
      <div className="bg-grid"></div>
      <div className="bg-vignette"></div>
      <div className="bg-spot" ref={spotRef}></div>
      <div className="bg-noise"></div>
    </div>
  );
}

window.Background = Background;