"use client";

import { motion, useReducedMotion } from "framer-motion";

export function AnimatedBackground() {
  const reduce = useReducedMotion();

  if (reduce) {
    return (
      <div
        aria-hidden
        className="pointer-events-none fixed inset-0 -z-10 bg-gradient-to-br from-white via-[#F8FAFC] to-[#F1F5F9]"
      />
    );
  }

  return (
    <div aria-hidden className="pointer-events-none fixed inset-0 -z-10 overflow-hidden">
      <div className="absolute inset-0 bg-gradient-to-br from-white via-[#F8FAFC] to-[#F1F5F9]" />

      <motion.div
        className="absolute -left-24 top-16 h-[28rem] w-[28rem] rounded-full bg-[#A855F7]/12 blur-3xl"
        animate={{ x: [0, 48, 0], y: [0, 32, 0], scale: [1, 1.08, 1] }}
        transition={{ duration: 20, repeat: Infinity, ease: "easeInOut" }}
      />
      <motion.div
        className="absolute -right-20 top-1/4 h-80 w-80 rounded-full bg-[#06B6D4]/14 blur-3xl"
        animate={{ x: [0, -40, 0], y: [0, -28, 0], scale: [1, 1.05, 1] }}
        transition={{ duration: 24, repeat: Infinity, ease: "easeInOut" }}
      />
      <motion.div
        className="absolute bottom-0 left-1/3 h-72 w-96 rounded-full bg-[#9333EA]/8 blur-3xl"
        animate={{ x: [0, 24, 0], y: [0, -16, 0] }}
        transition={{ duration: 26, repeat: Infinity, ease: "easeInOut" }}
      />

      {/* Light trails */}
      <motion.div
        className="absolute left-[10%] top-[35%] h-px w-[40%] bg-gradient-to-r from-transparent via-[#A855F7]/25 to-transparent"
        animate={{ opacity: [0.3, 0.7, 0.3], x: [0, 20, 0] }}
        transition={{ duration: 8, repeat: Infinity, ease: "easeInOut" }}
      />
      <motion.div
        className="absolute right-[8%] top-[55%] h-px w-[35%] bg-gradient-to-r from-transparent via-[#06B6D4]/30 to-transparent"
        animate={{ opacity: [0.4, 0.8, 0.4], x: [0, -16, 0] }}
        transition={{ duration: 10, repeat: Infinity, ease: "easeInOut" }}
      />

      {/* Bokeh orbs */}
      {[
        { top: "12%", left: "18%", size: 6, delay: 0 },
        { top: "28%", left: "72%", size: 8, delay: 1.2 },
        { top: "62%", left: "12%", size: 5, delay: 0.6 },
        { top: "78%", left: "58%", size: 7, delay: 2 },
        { top: "45%", left: "88%", size: 4, delay: 1.8 },
      ].map((orb, i) => (
        <motion.div
          key={i}
          className="absolute rounded-full bg-gradient-to-br from-[#A855F7]/20 to-[#06B6D4]/20"
          style={{
            top: orb.top,
            left: orb.left,
            width: orb.size * 4,
            height: orb.size * 4,
          }}
          animate={{ opacity: [0.2, 0.55, 0.2], scale: [1, 1.2, 1] }}
          transition={{
            duration: 6 + orb.delay,
            repeat: Infinity,
            ease: "easeInOut",
            delay: orb.delay,
          }}
        />
      ))}

      <div
        className="absolute inset-0 opacity-[0.25]"
        style={{
          backgroundImage:
            "linear-gradient(rgba(15,23,42,0.03) 1px, transparent 1px), linear-gradient(90deg, rgba(15,23,42,0.03) 1px, transparent 1px)",
          backgroundSize: "56px 56px",
        }}
      />
    </div>
  );
}
