// ─── Custom cursor ──────────────────────────────────────────────────────
function Cursor({ style }) {
  const ref = React.useRef(null);
  const [hover, setHover] = React.useState(false);

  React.useEffect(() => {
    if (style === 'none') return;
    let raf = 0;
    let tx = window.innerWidth / 2, ty = window.innerHeight / 2;
    let cx = tx, cy = ty;

    const onMove = (e) => { tx = e.clientX; ty = e.clientY; };
    const onOver = (e) => {
      const t = e.target;
      const isInteractive = t.closest('a, button, .interactive, .twk-panel');
      setHover(!!isInteractive);
    };
    const tick = () => {
      cx += (tx - cx) * 0.22;
      cy += (ty - cy) * 0.22;
      if (ref.current) ref.current.style.transform = `translate(${cx}px, ${cy}px)`;
      raf = requestAnimationFrame(tick);
    };
    window.addEventListener('mousemove', onMove);
    window.addEventListener('mouseover', onOver);
    raf = requestAnimationFrame(tick);
    return () => {
      window.removeEventListener('mousemove', onMove);
      window.removeEventListener('mouseover', onOver);
      cancelAnimationFrame(raf);
    };
  }, [style]);

  if (style === 'none') return null;

  return (
    <div
      ref={ref}
      className={`cursor ${style} ${hover ? 'is-hover' : ''}`}
      aria-hidden="true"
    />
  );
}

window.Cursor = Cursor;