// Rocket cursor with a sparkly stardust contrail.

function RocketCursor() {
  const cursorRef = React.useRef(null);
  const [trail, setTrail] = React.useState([]);
  const trailIdRef = React.useRef(0);
  const lastEmit = React.useRef(0);
  const lastMouse = React.useRef({ x: -100, y: -100 });
  const angleRef = React.useRef(-45);

  React.useEffect(() => {
    const onMove = (e) => {
      const x = e.clientX;
      const y = e.clientY;
      const dx = x - lastMouse.current.x;
      const dy = y - lastMouse.current.y;
      if (dx * dx + dy * dy > 4) {
        angleRef.current = Math.atan2(dy, dx) * 180 / Math.PI + 90;
      }
      lastMouse.current = { x, y };

      if (cursorRef.current) {
        cursorRef.current.style.transform =
          `translate3d(${x}px, ${y}px, 0) rotate(${angleRef.current}deg)`;
      }

      const now = performance.now();
      const speedSq = dx * dx + dy * dy;
      if (now - lastEmit.current > 26 && speedSq > 6) {
        lastEmit.current = now;
        const rad = (angleRef.current - 90) * Math.PI / 180;
        for (let k = 0; k < 2; k++) {
          const jitter = (Math.random() - 0.5) * 10;
          const px = -Math.sin(rad) * jitter;
          const py = Math.cos(rad) * jitter;
          const tx = x - Math.cos(rad) * (16 + Math.random() * 6) + px;
          const ty = y - Math.sin(rad) * (16 + Math.random() * 6) + py;
          const id = trailIdRef.current++;
          const kind = (id % 3 === 0) ? 'star' : 'dot';
          const color = kind === 'star'
            ? '#fff4e8'
            : ['#ffe38a', '#ffb088', '#f096c2'][id % 3];
          const size = kind === 'star' ? 9 + Math.random() * 4 : 5 + Math.random() * 3;
          const rot = Math.random() * 360;
          setTrail((prev) => [
            ...prev.slice(-28),
            { id, x: tx, y: ty, color, kind, size, rot },
          ]);
          setTimeout(() => {
            setTrail((p) => p.filter((pp) => pp.id !== id));
          }, 850);
        }
      }
    };

    const onDown = () => {
      if (cursorRef.current) cursorRef.current.classList.add('rc-boost');
    };
    const onUp = () => {
      if (cursorRef.current) cursorRef.current.classList.remove('rc-boost');
    };

    window.addEventListener('pointermove', onMove);
    window.addEventListener('pointerdown', onDown);
    window.addEventListener('pointerup', onUp);
    return () => {
      window.removeEventListener('pointermove', onMove);
      window.removeEventListener('pointerdown', onDown);
      window.removeEventListener('pointerup', onUp);
    };
  }, []);

  return (
    <React.Fragment>
      <style>{`
        html, body, a, button, [role="button"], input, textarea, select,
        [onclick], [class*="cursor"] {
          cursor: none !important;
        }
        .rc-root {
          position: fixed;
          top: 0; left: 0;
          width: 48px; height: 48px;
          pointer-events: none;
          z-index: 9999;
          transform: translate3d(-200px, -200px, 0) rotate(-45deg);
          transition: transform 0.04s linear;
          will-change: transform;
          margin-left: -24px;
          margin-top: -24px;
        }
        .rc-root.rc-boost .rc-rocket { transform: scale(1.15); }
        .rc-rocket {
          transition: transform 0.18s ease;
          filter:
            drop-shadow(0 0 6px rgba(255, 244, 232, 0.85))
            drop-shadow(0 2px 4px rgba(26, 16, 48, 0.55));
        }
        .rc-trail {
          position: fixed;
          pointer-events: none;
          z-index: 9998;
          will-change: transform, opacity;
          transform-origin: center;
        }
        .rc-dot {
          border-radius: 50%;
          animation: rcDot 0.85s ease-out forwards;
        }
        .rc-star {
          animation: rcStar 0.85s ease-out forwards;
        }
        @keyframes rcDot {
          0% { transform: translate(-50%, -50%) scale(0.4); opacity: 0.95; }
          60% { transform: translate(-50%, -50%) scale(1.4); opacity: 0.55; }
          100% { transform: translate(-50%, -50%) scale(2); opacity: 0; }
        }
        @keyframes rcStar {
          0% { transform: translate(-50%, -50%) rotate(var(--rc-rot, 0deg)) scale(0.3); opacity: 1; }
          40% { transform: translate(-50%, -50%) rotate(calc(var(--rc-rot, 0deg) + 60deg)) scale(1.1); opacity: 0.9; }
          100% { transform: translate(-50%, -50%) rotate(calc(var(--rc-rot, 0deg) + 180deg)) scale(0.2); opacity: 0; }
        }
        @media (hover: none), (pointer: coarse) {
          html, body, a, button, [role="button"], input, textarea, select,
          [onclick], [class*="cursor"] { cursor: auto !important; }
          .rc-root, .rc-trail { display: none; }
        }
      `}</style>

      {trail.map((p) => {
        if (p.kind === 'star') {
          return (
            <svg key={p.id}
              className="rc-trail rc-star"
              style={{
                left: p.x, top: p.y,
                width: p.size, height: p.size,
                '--rc-rot': `${p.rot}deg`,
                filter: 'drop-shadow(0 0 4px rgba(255, 227, 138, 0.9))',
              }}
              viewBox="-10 -10 20 20"
            >
              <path d="M 0 -9 L 2 -2 L 9 0 L 2 2 L 0 9 L -2 2 L -9 0 L -2 -2 Z"
                    fill={p.color}
                    stroke="#ffe38a" strokeWidth="0.8" />
            </svg>
          );
        }
        return (
          <div key={p.id}
            className="rc-trail rc-dot"
            style={{
              left: p.x, top: p.y,
              width: p.size, height: p.size,
              background: `radial-gradient(circle, ${p.color} 0%, ${p.color}00 70%)`,
              boxShadow: `0 0 8px ${p.color}`,
            }}
          />
        );
      })}

      <div ref={cursorRef} className="rc-root">
        <svg className="rc-rocket" width="48" height="48" viewBox="0 0 48 48">
          <g transform="translate(24 24)">
            <path d="M -4 10 Q 0 20 4 10 Q 0 14 -4 10 Z"
                  fill="#ffb088" opacity="0.95">
              <animate attributeName="d"
                values="M -4 10 Q 0 20 4 10 Q 0 14 -4 10 Z;
                        M -4 10 Q 0 17 4 10 Q 0 14 -4 10 Z;
                        M -4 10 Q 0 20 4 10 Q 0 14 -4 10 Z"
                dur="0.25s" repeatCount="indefinite" />
            </path>
            <path d="M -2.5 10 Q 0 16 2.5 10 Q 0 13 -2.5 10 Z"
                  fill="#ffe38a">
              <animate attributeName="d"
                values="M -2.5 10 Q 0 16 2.5 10 Q 0 13 -2.5 10 Z;
                        M -2.5 10 Q 0 13 2.5 10 Q 0 13 -2.5 10 Z;
                        M -2.5 10 Q 0 16 2.5 10 Q 0 13 -2.5 10 Z"
                dur="0.25s" repeatCount="indefinite" />
            </path>
            <path d="M 0 -17 Q 6 -12 7 -3 L 7 7 L -7 7 L -7 -3 Q -6 -12 0 -17 Z"
                  fill="#fff4e8" stroke="#2a1f4a" strokeWidth="1.6"
                  strokeLinejoin="round" />
            <circle cx="0" cy="-5" r="3.2" fill="#b9a0e8" stroke="#2a1f4a" strokeWidth="1.3" />
            <circle cx="-1" cy="-6.2" r="1" fill="#fff4e8" opacity="0.85" />
            <path d="M -7 3 L -11 8 L -7 7 Z" fill="#f096c2" stroke="#2a1f4a" strokeWidth="1.3" strokeLinejoin="round" />
            <path d="M 7 3 L 11 8 L 7 7 Z" fill="#f096c2" stroke="#2a1f4a" strokeWidth="1.3" strokeLinejoin="round" />
            <path d="M -4 2 L 4 2" stroke="#2a1f4a" strokeWidth="1" opacity="0.55" />
          </g>
        </svg>
      </div>
    </React.Fragment>
  );
}

Object.assign(window, { RocketCursor });