// Custom cursor: dot + trailing ring, scales/inverts over [data-cursor="link"]
function Cursor() {
  const ringRef = React.useRef(null);
  const dotRef = React.useRef(null);
  const pos = React.useRef({ x: 0, y: 0 });
  const ring = React.useRef({ x: 0, y: 0 });
  const [big, setBig] = React.useState(false);

  React.useEffect(() => {
    const move = (e) => {
      pos.current = { x: e.clientX, y: e.clientY };
      if (dotRef.current) {
        dotRef.current.style.transform = `translate3d(${e.clientX - 3}px, ${e.clientY - 3}px, 0)`;
      }
      const el = e.target.closest && e.target.closest('[data-cursor="link"]');
      setBig(!!el);
    };
    window.addEventListener("mousemove", move);
    let raf;
    const tick = () => {
      ring.current.x += (pos.current.x - ring.current.x) * 0.18;
      ring.current.y += (pos.current.y - ring.current.y) * 0.18;
      if (ringRef.current) {
        ringRef.current.style.transform = `translate3d(${ring.current.x - 20}px, ${ring.current.y - 20}px, 0)`;
      }
      raf = requestAnimationFrame(tick);
    };
    raf = requestAnimationFrame(tick);
    return () => { window.removeEventListener("mousemove", move); cancelAnimationFrame(raf); };
  }, []);

  return (
    <React.Fragment>
      <div
        ref={ringRef}
        className="jmk-cursor"
        style={{
          position: "fixed", top: 0, left: 0, width: 40, height: 40,
          borderRadius: "50%", border: "1.5px solid #ffffff",
          pointerEvents: "none", zIndex: 9999, mixBlendMode: "difference",
          transition: "width 200ms var(--ease-confident), height 200ms var(--ease-confident), opacity 200ms",
          transform: `scale(${big ? 1.8 : 1})`,
          opacity: 1,
        }}
      />
      <div
        ref={dotRef}
        className="jmk-cursor"
        style={{
          position: "fixed", top: 0, left: 0, width: 6, height: 6,
          borderRadius: "50%", background: "#FF62B1",
          boxShadow: "0 0 0 1.5px rgba(255,255,255,0.9), 0 0 5px rgba(0,0,0,0.35)",
          pointerEvents: "none", zIndex: 9999,
        }}
      />
    </React.Fragment>
  );
}
window.JMK = window.JMK || {};
window.JMK.Cursor = Cursor;