"use client";

const PARTICLES = Array.from({ length: 50 }, (_, i) => ({
  size: 4 + (i % 6),
  left: (i * 17.3) % 100,
  top: (i * 23.7) % 100,
  duration: 10 + (i % 8),
  delay: (i * 0.3) % 5,
}));

export function Particles() {
  return (
    <div className="pointer-events-none absolute inset-0 overflow-hidden">
      {PARTICLES.map((p, i) => (
        <div
          key={i}
          className="absolute rounded-full bg-gradient-to-br from-violet-400/50 via-fuchsia-400/40 to-cyan-400/50 blur-[1px]"
          style={{
            width: `${p.size}px`,
            height: `${p.size}px`,
            left: `${p.left}%`,
            top: `${p.top}%`,
            animation: `float ${p.duration}s ease-in-out infinite`,
            animationDelay: `${p.delay}s`,
          }}
        />
      ))}
    </div>
  );
}