// ui_kits/site/Cursor.jsx — custom dot + ring cursor, smoothed.
const Cursor = () => {
  const ringRef = React.useRef(null);
  const dotRef  = React.useRef(null);

  React.useEffect(() => {
    let mx = innerWidth / 2, my = innerHeight / 2;
    let rx = mx, ry = my;
    let hot = false;
    let raf;

    const move = (e) => { mx = e.clientX; my = e.clientY; };
    const over = (e) => {
      const t = e.target.closest('a, button, [data-hot], input, [data-cursor="hot"]');
      hot = !!t;
      ringRef.current?.classList.toggle('hot', hot);
    };
    addEventListener('pointermove', move, { passive: true });
    addEventListener('pointerover', over);

    const tick = () => {
      rx += (mx - rx) * 0.18;
      ry += (my - ry) * 0.18;
      if (ringRef.current) ringRef.current.style.transform = `translate(${rx}px, ${ry}px) translate(-50%, -50%)`;
      if (dotRef.current)  dotRef.current.style.transform  = `translate(${mx}px, ${my}px) translate(-50%, -50%)`;
      raf = requestAnimationFrame(tick);
    };
    tick();
    return () => {
      cancelAnimationFrame(raf);
      removeEventListener('pointermove', move);
      removeEventListener('pointerover', over);
    };
  }, []);

  return (
    <>
      <div ref={ringRef} className="koa-cursor-ring" />
      <div ref={dotRef}  className="koa-cursor-dot" />
      <style>{`
        .koa-cursor-ring, .koa-cursor-dot {
          position: fixed; left: 0; top: 0; pointer-events: none; z-index: 9999;
          will-change: transform, width, height;
        }
        .koa-cursor-ring {
          width: 32px; height: 32px; border-radius: 50%;
          border: 1.5px solid var(--accent);
          mix-blend-mode: difference;
          transition: width 220ms var(--ease-out), height 220ms var(--ease-out), background 220ms var(--ease-out);
        }
        .koa-cursor-ring.hot {
          width: 58px; height: 58px;
          background: color-mix(in oklch, var(--accent) 18%, transparent);
        }
        .koa-cursor-dot {
          width: 4px; height: 4px; border-radius: 50%;
          background: var(--accent);
        }
        @media (pointer: coarse) {
          .koa-cursor-ring, .koa-cursor-dot { display: none; }
        }
      `}</style>
    </>
  );
};

window.Cursor = Cursor;