/* Laser-spot cursor: the beam's own footprint, replacing the native pointer. */
function LaserCursor() {
  const wrapRef = React.useRef(null);
  const posRef = React.useRef({ x: -100, y: -100 });
  const stateRef = React.useRef({ hot: false, down: false, shown: false });

  React.useEffect(() => {
    let raf = 0;
    const onMove = (e) => {
      posRef.current = { x: e.clientX, y: e.clientY };
      stateRef.current.hot = !!(e.target && e.target.closest && e.target.closest('a,button,input,select,textarea,label,[role="button"]'));
      stateRef.current.shown = true;
    };
    const onDown = () => { stateRef.current.down = true; };
    const onUp = () => { stateRef.current.down = false; };
    const onLeave = () => { stateRef.current.shown = false; };
    const tick = () => {
      const el = wrapRef.current;
      if (el) {
        const { x, y } = posRef.current;
        const s = stateRef.current;
        const scale = s.down ? 0.72 : s.hot ? 1.55 : 1;
        el.style.transform = 'translate3d(' + x + 'px,' + y + 'px,0) translate(-50%,-50%) scale(' + scale + ')';
        el.style.opacity = s.shown ? 1 : 0;
      }
      raf = requestAnimationFrame(tick);
    };
    raf = requestAnimationFrame(tick);
    window.addEventListener('mousemove', onMove, { passive: true });
    window.addEventListener('mousedown', onDown);
    window.addEventListener('mouseup', onUp);
    document.addEventListener('mouseleave', onLeave);
    return () => {
      cancelAnimationFrame(raf);
      window.removeEventListener('mousemove', onMove);
      window.removeEventListener('mousedown', onDown);
      window.removeEventListener('mouseup', onUp);
      document.removeEventListener('mouseleave', onLeave);
    };
  }, []);

  const tick = { position: 'absolute', background: 'var(--laser-red-bright)', opacity: 0.85 };
  return (
    <div ref={wrapRef} aria-hidden="true" style={{ position: 'fixed', left: 0, top: 0, width: 0, height: 0, zIndex: 9999, pointerEvents: 'none', mixBlendMode: 'screen', opacity: 0, transition: 'opacity 220ms var(--ease-standard)', willChange: 'transform' }}>
      <div style={{ position: 'absolute', left: -26, top: -26, width: 52, height: 52, borderRadius: '50%', background: 'radial-gradient(circle, color-mix(in srgb, var(--laser-red) 50%, transparent) 0%, color-mix(in srgb, var(--laser-red) 14%, transparent) 42%, transparent 70%)' }} />
      <div style={{ position: 'absolute', left: -11, top: -11, width: 22, height: 22, borderRadius: '50%', border: '1px solid color-mix(in srgb, var(--laser-red-bright) 45%, transparent)' }} />
      <div style={{ position: 'absolute', left: -3, top: -3, width: 6, height: 6, borderRadius: '50%', background: '#fff', boxShadow: '0 0 8px var(--laser-red), 0 0 20px color-mix(in srgb, var(--laser-red) 90%, transparent), 0 0 40px color-mix(in srgb, var(--laser-red) 50%, transparent)' }} />
      <div style={{ ...tick, left: -0.5, top: -18, width: 1, height: 7 }} />
      <div style={{ ...tick, left: -0.5, top: 11, width: 1, height: 7 }} />
      <div style={{ ...tick, left: -18, top: -0.5, width: 7, height: 1 }} />
      <div style={{ ...tick, left: 11, top: -0.5, width: 7, height: 1 }} />
    </div>
  );
}

window.LaserCursor = LaserCursor;