import { motion } from "framer-motion";

// Refined cosmic backdrop: soft aurora glows tuned to the brand, calm float,
// coherent in light and dark. Replaces the previous loud sun/cloud blobs.
export const CosmicBackground = () => (
  <div className="fixed inset-0 z-[-1] pointer-events-none overflow-hidden bg-background transition-colors duration-700">
    {/* Base wash */}
    <div className="absolute inset-0 bg-gradient-to-b from-teal-50/80 via-background to-background dark:from-transparent dark:to-transparent" />

    {/* Aurora glows */}
    <motion.div
      animate={{ y: [0, -18, 0], opacity: [0.5, 0.7, 0.5] }}
      transition={{ repeat: Infinity, duration: 12, ease: "easeInOut" }}
      className="absolute -top-32 -right-24 w-[28rem] h-[28rem] rounded-full blur-[90px] bg-teal-300/40 dark:bg-teal-500/20"
    />
    <motion.div
      animate={{ y: [0, 16, 0], opacity: [0.4, 0.6, 0.4] }}
      transition={{ repeat: Infinity, duration: 14, ease: "easeInOut", delay: 1 }}
      className="absolute -bottom-32 -left-24 w-[26rem] h-[26rem] rounded-full blur-[90px] bg-indigo-300/40 dark:bg-indigo-600/25"
    />
    <div className="absolute top-1/3 left-1/2 -translate-x-1/2 w-[22rem] h-[22rem] rounded-full blur-[110px] bg-amber-200/30 dark:bg-fuchsia-600/10" />

    {/* Twinkling stars (dark only) */}
    {[
      { top: "14%", left: "22%", d: 3, delay: 0 },
      { top: "26%", left: "72%", d: 4, delay: 1 },
      { top: "44%", left: "12%", d: 5, delay: 2 },
      { top: "68%", left: "80%", d: 3.5, delay: 0.5 },
      { top: "78%", left: "34%", d: 4.5, delay: 1.5 },
    ].map((s, i) => (
      <motion.div
        key={i}
        animate={{ opacity: [0.15, 0.9, 0.15] }}
        transition={{ repeat: Infinity, duration: s.d, delay: s.delay }}
        className="absolute w-1.5 h-1.5 bg-white rounded-full opacity-0 dark:opacity-100"
        style={{ top: s.top, left: s.left }}
      />
    ))}
  </div>
);
