// cursor.jsx — custom cursor: dot (instant) + ring (slight trail), grows on
// elements with [data-cursor-hover]. Screen-fixed so it never drifts on scroll.

function CustomCursor({ rootRef }) {
  const dotRef = React.useRef(null);
  const ringRef = React.useRef(null);
  const [active, setActive] = React.useState(false);
  const [visible, setVisible] = React.useState(false);
  const [label, setLabel] = React.useState(null);

  React.useEffect(() => {
    const dot = dotRef.current;
    const ring = ringRef.current;
    if (!dot || !ring) return;

    let rx = window.innerWidth / 2, ry = window.innerHeight / 2;  // ring smoothed
    let tx = rx, ty = ry;                                        // target (screen px)
    let raf = 0;
    let first = true;

    const onMove = (e) => {
      // clientX/clientY are viewport-relative — independent of scroll.
      tx = e.clientX;
      ty = e.clientY;
      // Dot tracks the pointer 1:1, every move — zero lag.
      dot.style.transform = `translate(${tx}px, ${ty}px) translate(-50%, -50%)`;
      if (first) { rx = tx; ry = ty; first = false; }
      if (!visible) setVisible(true);
    };
    const tick = () => {
      // Tighter follow so the ring stays close to the dot (was 0.18).
      rx += (tx - rx) * 0.35;
      ry += (ty - ry) * 0.35;
      ring.style.transform = `translate(${rx}px, ${ry}px) translate(-50%, -50%)`;
      raf = requestAnimationFrame(tick);
    };
    raf = requestAnimationFrame(tick);

    const onLeaveWin = (e) => { if (!e.relatedTarget) setVisible(false); };
    const onEnterWin = () => setVisible(true);
    const onOver = (e) => {
      const hov = e.target.closest('[data-cursor-hover]');
      if (hov) {
        setActive(true);
        setLabel(hov.getAttribute('data-cursor-label') || null);
      } else {
        setActive(false);
        setLabel(null);
      }
    };

    window.addEventListener('pointermove', onMove, { passive: true });
    window.addEventListener('pointerover', onOver, { passive: true });
    document.addEventListener('pointerleave', onLeaveWin);
    document.addEventListener('pointerenter', onEnterWin);
    return () => {
      cancelAnimationFrame(raf);
      window.removeEventListener('pointermove', onMove);
      window.removeEventListener('pointerover', onOver);
      document.removeEventListener('pointerleave', onLeaveWin);
      document.removeEventListener('pointerenter', onEnterWin);
    };
  }, [visible]);

  const dotStyle = {
    position: 'fixed',
    top: 0, left: 0,
    width: 7, height: 7,
    borderRadius: '50%',
    background: '#f4f1ec',
    pointerEvents: 'none',
    zIndex: 99999,
    mixBlendMode: 'difference',
    opacity: visible ? 1 : 0,
    transition: 'opacity .2s',
    willChange: 'transform',
  };
  const ringStyle = {
    position: 'fixed',
    top: 0, left: 0,
    width: active ? 76 : 34,
    height: active ? 76 : 34,
    borderRadius: '50%',
    border: '1px solid rgba(244,241,236,0.6)',
    background: active ? 'rgba(91,139,255,0.18)' : 'transparent',
    backdropFilter: active ? 'blur(2px)' : 'none',
    pointerEvents: 'none',
    zIndex: 99998,
    opacity: visible ? 1 : 0,
    transition: 'width .25s cubic-bezier(.2,.7,.2,1), height .25s cubic-bezier(.2,.7,.2,1), background .25s, opacity .2s',
    display: 'flex', alignItems: 'center', justifyContent: 'center',
    color: '#f4f1ec',
    fontSize: 11, letterSpacing: '0.04em', fontWeight: 500,
    textTransform: 'uppercase',
    willChange: 'transform',
  };

  return (
    <>
      <div ref={ringRef} style={ringStyle}>{label}</div>
      <div ref={dotRef} style={dotStyle} />
    </>
  );
}

window.CustomCursor = CustomCursor;