/* CursorParticles — sparkle/star trail following the mouse */
(function () {
  const { useEffect } = React;

  const STAR = "M12 2l1.4 8.6L22 12l-8.6 1.4L12 22l-1.4-8.6L2 12l8.6-1.4Z";
  const CROSS = "M11 2h2v9h9v2h-9v9h-2v-9H2v-2h9V2Z";

  function CursorParticles() {
    useEffect(() => {
      const layer = document.createElement("div");
      layer.className = "cp-layer";
      document.body.appendChild(layer);

      let last = 0;

      const spawn = (x, y) => {
        const el = document.createElement("div");
        el.className = "cp";

        const big   = Math.random() > 0.45;
        const size  = big ? 12 + Math.random() * 10 : 5 + Math.random() * 6;
        const tx    = (Math.random() - 0.5) * 22;
        const ty    = -18 - Math.random() * 28;
        const rot   = (Math.random() - 0.5) * 130;
        const dur   = 520 + Math.random() * 280;
        const op    = 0.55 + Math.random() * 0.45;

        el.style.cssText = `left:${x}px;top:${y}px;width:${size}px;height:${size}px;--tx:${tx}px;--ty:${ty}px;--rot:${rot}deg;--dur:${dur}ms;--op:${op};`;

        const path = Math.random() > 0.3 ? STAR : CROSS;
        el.innerHTML = `<svg viewBox="0 0 24 24" fill="currentColor"><path d="${path}"/></svg>`;

        layer.appendChild(el);
        setTimeout(() => el.remove(), dur + 60);
      };

      const onMove = (e) => {
        const now = performance.now();
        if (now - last < 45) return;
        last = now;
        spawn(e.clientX, e.clientY);
      };

      window.addEventListener("mousemove", onMove, { passive: true });
      return () => {
        window.removeEventListener("mousemove", onMove);
        layer.remove();
      };
    }, []);

    return null;
  }

  window.CursorParticles = CursorParticles;
})();