'use client';

const blobs = [
  {
    className: 'w-[600px] h-[600px] top-[-200px] right-[-100px]',
    gradient: 'rgba(139, 92, 246, 0.3)',
  },
  {
    className: 'w-[500px] h-[500px] top-[800px] left-[-150px]',
    gradient: 'rgba(99, 102, 241, 0.25)',
  },
  {
    className: 'w-[400px] h-[400px] top-[1600px] right-[-100px]',
    gradient: 'rgba(236, 72, 153, 0.2)',
  },
  {
    className: 'w-[550px] h-[550px] top-[2400px] left-[-200px]',
    gradient: 'rgba(34, 211, 238, 0.15)',
  },
  {
    className: 'w-[450px] h-[450px] top-[3200px] right-[-150px]',
    gradient: 'rgba(139, 92, 246, 0.25)',
  },
  {
    className: 'w-[500px] h-[500px] top-[4000px] left-[-100px]',
    gradient: 'rgba(99, 102, 241, 0.2)',
  },
];

export function BackgroundBlobs() {
  return (
    <>
      {blobs.map((blob, i) => (
        <div
          key={i}
          className={`absolute rounded-full blur-[80px] opacity-40 pointer-events-none ${blob.className}`}
          style={{ background: `radial-gradient(circle, ${blob.gradient} 0%, transparent 70%)` }}
        />
      ))}
    </>
  );
}