export function SparkleTrailButton() {
  const sparkles = [
    { left: "8%", top: "12%", delay: "0s", size: 4 },
    { left: "92%", top: "20%", delay: "0.2s", size: 5 },
    { left: "20%", top: "85%", delay: "0.4s", size: 3 },
    { left: "78%", top: "78%", delay: "0.1s", size: 4 },
    { left: "50%", top: "8%", delay: "0.3s", size: 3 },
    { left: "10%", top: "55%", delay: "0.5s", size: 4 },
    { left: "94%", top: "55%", delay: "0.15s", size: 3 },
  ];

  return (
    <div className="bg-[#0a0510] p-12 grid place-items-center">
      <style>{`
        @keyframes sparkle-twinkle {
          0%, 100% { opacity: 0; transform: scale(0) rotate(0deg); }
          50% { opacity: 1; transform: scale(1) rotate(180deg); }
        }
        .sparkle-btn { position: relative; transition: transform .2s ease; }
        .sparkle-btn .sparkle { opacity: 0; }
        .sparkle-btn:hover .sparkle {
          animation: sparkle-twinkle 1.1s ease-in-out infinite;
        }
        .sparkle-btn:hover { transform: scale(1.04); }
        .sparkle-btn:active { transform: scale(.97); }
      `}</style>
      <button
        type="button"
        className="sparkle-btn px-7 py-3.5 rounded-full text-[14px] font-semibold text-white"
        style={{
          background:
            "linear-gradient(135deg, #6d28d9 0%, #4f46e5 50%, #2563eb 100%)",
          boxShadow:
            "0 0 0 1px rgba(255,255,255,0.1) inset, 0 12px 30px -10px rgba(99,102,241,0.6)",
        }}
      >
        <span className="relative z-10">✨ Make it magic</span>
        {sparkles.map((s, i) => (
          <span
            key={i}
            aria-hidden
            className="sparkle pointer-events-none absolute rounded-full"
            style={{
              left: s.left,
              top: s.top,
              width: s.size,
              height: s.size,
              background: "#fff",
              boxShadow: "0 0 8px #fff, 0 0 16px #c4b5fd",
              animationDelay: s.delay,
              transform: "translate(-50%, -50%)",
            }}
          />
        ))}
      </button>
    </div>
  );
}
Sparkle Trail Button
