// Magnetic custom cursor — subtle, tasteful
function CoviaCursor() {
  const dotRef = React.useRef(null);
  const ringRef = React.useRef(null);
  const [hoveredLink, setHoveredLink] = React.useState(false);

  React.useEffect(() => {
    // Hide on touch devices
    if ('ontouchstart' in window) return;

    let mx = window.innerWidth / 2, my = window.innerHeight / 2;
    let rx = mx, ry = my;
    let raf;

    const onMove = (e) => {
      mx = e.clientX; my = e.clientY;
      if (dotRef.current) {
        dotRef.current.style.transform = `translate3d(${mx - 3}px, ${my - 3}px, 0)`;
      }
      // Detect interactive targets
      const el = e.target;
      const interactive = el && (el.closest('a, button, [data-magnetic], input, textarea, [role="button"]'));
      setHoveredLink(!!interactive);
    };

    const loop = () => {
      rx += (mx - rx) * 0.15;
      ry += (my - ry) * 0.15;
      if (ringRef.current) {
        ringRef.current.style.transform = `translate3d(${rx - 18}px, ${ry - 18}px, 0)`;
      }
      raf = requestAnimationFrame(loop);
    };

    window.addEventListener('mousemove', onMove);
    loop();

    return () => {
      window.removeEventListener('mousemove', onMove);
      cancelAnimationFrame(raf);
    };
  }, []);

  if (typeof window !== 'undefined' && 'ontouchstart' in window) return null;

  return React.createElement(React.Fragment, null,
    // Dot
    React.createElement('div', {
      ref: dotRef,
      style: {
        position: 'fixed', top: 0, left: 0, width: 6, height: 6,
        borderRadius: '50%', background: 'var(--gold)',
        pointerEvents: 'none', zIndex: 9999,
        mixBlendMode: 'difference',
        transition: 'width 0.2s, height 0.2s',
      }
    }),
    // Ring
    React.createElement('div', {
      ref: ringRef,
      style: {
        position: 'fixed', top: 0, left: 0,
        width: hoveredLink ? 48 : 36, height: hoveredLink ? 48 : 36,
        marginLeft: hoveredLink ? -6 : 0, marginTop: hoveredLink ? -6 : 0,
        borderRadius: '50%',
        border: `1px solid ${hoveredLink ? 'var(--gold)' : 'oklch(0.7 0.02 260 / 0.3)'}`,
        pointerEvents: 'none', zIndex: 9998,
        transition: 'width 0.3s cubic-bezier(0.16,1,0.3,1), height 0.3s cubic-bezier(0.16,1,0.3,1), border-color 0.3s, margin 0.3s',
        backdropFilter: hoveredLink ? 'invert(1)' : 'none',
      }
    }),
  );
}

window.CoviaCursor = CoviaCursor;