// Infinite animated grid background with mouse-reveal
function InfiniteGrid() {
  const ref = React.useRef(null);
  const offsetRef = React.useRef({ x: 0, y: 0 });
  const mouseRef = React.useRef({ x: -9999, y: -9999 });

  React.useEffect(() => {
    let raf;
    const tick = () => {
      offsetRef.current.x = (offsetRef.current.x + 0.4) % 40;
      offsetRef.current.y = (offsetRef.current.y + 0.4) % 40;
      const el = ref.current;
      if (el) {
        el.style.setProperty('--gx', offsetRef.current.x + 'px');
        el.style.setProperty('--gy', offsetRef.current.y + 'px');
      }
      raf = requestAnimationFrame(tick);
    };
    raf = requestAnimationFrame(tick);

    const onMove = (e) => {
      mouseRef.current.x = e.clientX;
      mouseRef.current.y = e.clientY;
      const el = ref.current;
      if (el) {
        el.style.setProperty('--mx', e.clientX + 'px');
        el.style.setProperty('--my', e.clientY + 'px');
      }
    };
    window.addEventListener('mousemove', onMove);
    return () => { cancelAnimationFrame(raf); window.removeEventListener('mousemove', onMove); };
  }, []);

  return (
    <div className="bg-grid" ref={ref} aria-hidden="true">
      <div className="bg-grid-orb bg-grid-orb-1"></div>
      <div className="bg-grid-orb bg-grid-orb-2"></div>
      <div className="bg-grid-orb bg-grid-orb-3"></div>
      <div className="bg-grid-base"></div>
      <div className="bg-grid-mask"></div>
    </div>
  );
}

Object.assign(window, { InfiniteGrid });