// Cursor.jsx — quirky magnetic blob cursor (desktop, fine-pointer only).
// A soft trailing dot that swells + labels over interactive elements,
// and gently pulls buttons toward it.
function Cursor() {
  React.useEffect(() => {
    const fine = window.matchMedia && window.matchMedia('(pointer: fine)').matches;
    const reduce = window.matchMedia && window.matchMedia('(prefers-reduced-motion: reduce)').matches;
    if (!fine || reduce) return;

    const blob = document.createElement('div');
    blob.className = 'w-cursor';
    blob.innerHTML = '<span class="w-cursor__label"></span>';
    document.body.appendChild(blob);
    document.body.classList.add('w-has-cursor');
    const label = blob.querySelector('.w-cursor__label');

    let mx = window.innerWidth / 2, my = window.innerHeight / 2;
    let bx = mx, by = my;
    let raf = 0;
    const onMove = (e) => { mx = e.clientX; my = e.clientY; };
    window.addEventListener('mousemove', onMove, { passive: true });

    const loop = () => {
      bx += (mx - bx) * 0.18;
      by += (my - by) * 0.18;
      blob.style.transform = `translate(${bx}px, ${by}px) translate(-50%, -50%)`;
      raf = requestAnimationFrame(loop);
    };
    raf = requestAnimationFrame(loop);

    // magnetic pull on tagged elements
    const magnets = [];
    const wire = () => {
      document.querySelectorAll('.w-btn, .w-fab, .w-float__pill a, .w-faq__toggle, .w-bento__cell, .w-svc__tag').forEach(el => {
        if (el.__wired) return; el.__wired = true; magnets.push(el);
        el.addEventListener('mouseenter', () => {
          blob.classList.add('is-active');
          const l = el.getAttribute('data-cursor');
          if (l) { label.textContent = l; blob.classList.add('is-labeled'); }
        });
        el.addEventListener('mouseleave', () => {
          blob.classList.remove('is-active', 'is-labeled');
          label.textContent = '';
          el.style.transform = '';
        });
        el.addEventListener('mousemove', (e) => {
          const pull = el.classList.contains('w-btn') || el.classList.contains('w-fab') ? 0.32 : 0.16;
          const r = el.getBoundingClientRect();
          const dx = e.clientX - (r.left + r.width / 2);
          const dy = e.clientY - (r.top + r.height / 2);
          el.style.transform = `translate(${dx * pull}px, ${dy * pull}px)`;
        });
      });
    };
    wire();
    const mo = new MutationObserver(wire);
    mo.observe(document.body, { childList: true, subtree: true });

    return () => {
      window.removeEventListener('mousemove', onMove);
      cancelAnimationFrame(raf); mo.disconnect();
      blob.remove(); document.body.classList.remove('w-has-cursor');
    };
  }, []);
  return null;
}
Object.assign(window, { Cursor });