/* global React */
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" />;
}