"use client";

import { motion } from "framer-motion";

export function AmbientBackground() {
  const dots = Array.from({ length: 14 }, (_, i) => i);
  return (
    <div className="pointer-events-none fixed inset-0 -z-10 overflow-hidden">
      <div className="absolute inset-0 bg-[radial-gradient(circle_at_20%_10%,rgba(34,211,238,.14),transparent_38%),radial-gradient(circle_at_80%_0%,rgba(167,139,250,.16),transparent_42%)]" />
      {dots.map((i) => (
        <motion.span
          key={i}
          initial={{ opacity: 0.2, y: i * 30 }}
          animate={{ opacity: [0.2, 0.45, 0.2], y: [i * 30, i * 30 - 18, i * 30] }}
          transition={{ repeat: Infinity, duration: 6 + (i % 4), ease: "easeInOut", delay: i * 0.2 }}
          className="absolute h-1.5 w-1.5 rounded-full bg-cyan-200/70 blur-[1px]"
          style={{ left: `${8 + i * 6.3}%`, top: `${12 + (i % 6) * 12}%` }}
        />
      ))}
    </div>
  );
}