"use client";

import { motion } from "framer-motion";

export function SplashBackground({ isDark }: { isDark: boolean }) {
  return (
    <motion.div
      className="absolute inset-0 overflow-hidden"
      initial={{ opacity: 0 }}
      animate={{ opacity: 1 }}
      transition={{ duration: 0.5, ease: "easeOut" }}
      style={{ background: isDark ? "#0a0a14" : "#f5f5f7" }}
    >
      {/* Deep base gradient */}
      <div
        className="absolute inset-0"
        style={{
          background: isDark
            ? "radial-gradient(ellipse 80% 60% at 50% 50%, #10002b 0%, #0a0a14 70%)"
            : "radial-gradient(ellipse 80% 60% at 50% 50%, #fff0f0 0%, #f5f5f7 70%)",
        }}
      />

      {/* Breathing accent orb — center */}
      <motion.div
        className="absolute rounded-full"
        style={{
          width: 700,
          height: 700,
          top: "50%",
          left: "50%",
          x: "-50%",
          y: "-50%",
          background: isDark
            ? "radial-gradient(circle, rgba(var(--accent-rgb),0.18) 0%, rgba(var(--accent-rgb),0.06) 45%, transparent 70%)"
            : "radial-gradient(circle, rgba(var(--accent-rgb),0.10) 0%, rgba(var(--accent-rgb),0.03) 45%, transparent 70%)",
          filter: "blur(40px)",
        }}
        animate={{
          scale: [1, 1.15, 1],
          opacity: [0.6, 1, 0.6],
        }}
        transition={{
          duration: 3.2,
          repeat: Infinity,
          ease: "easeInOut",
        }}
      />

      {/* Floating soft orb — top-left */}
      <motion.div
        className="absolute rounded-full"
        style={{
          width: 500,
          height: 500,
          top: "-10%",
          left: "-10%",
          background: isDark
            ? "radial-gradient(circle, rgba(60,9,108,0.45) 0%, transparent 65%)"
            : "radial-gradient(circle, rgba(var(--accent-rgb),0.07) 0%, transparent 65%)",
          filter: "blur(60px)",
        }}
        animate={{
          x: [0, 40, -20, 0],
          y: [0, -30, 20, 0],
          opacity: [0.5, 0.8, 0.5],
        }}
        transition={{
          duration: 7,
          repeat: Infinity,
          ease: "easeInOut",
        }}
      />

      {/* Floating soft orb — bottom-right */}
      <motion.div
        className="absolute rounded-full"
        style={{
          width: 400,
          height: 400,
          bottom: "-8%",
          right: "-8%",
          background: isDark
            ? "radial-gradient(circle, rgba(36,0,70,0.6) 0%, transparent 65%)"
            : "radial-gradient(circle, rgba(var(--accent-rgb),0.06) 0%, transparent 65%)",
          filter: "blur(50px)",
        }}
        animate={{
          x: [0, -30, 20, 0],
          y: [0, 25, -15, 0],
          opacity: [0.4, 0.7, 0.4],
        }}
        transition={{
          duration: 9,
          repeat: Infinity,
          ease: "easeInOut",
          delay: 1.5,
        }}
      />

      {/* Ambient accent streak — top-right */}
      <motion.div
        className="absolute rounded-full"
        style={{
          width: 300,
          height: 300,
          top: "5%",
          right: "5%",
          background:
            "radial-gradient(circle, rgba(var(--accent-rgb),0.08) 0%, transparent 70%)",
          filter: "blur(40px)",
        }}
        animate={{
          opacity: [0.3, 0.6, 0.3],
          scale: [0.9, 1.1, 0.9],
        }}
        transition={{
          duration: 5,
          repeat: Infinity,
          ease: "easeInOut",
          delay: 0.8,
        }}
      />

      {/* Fine grain overlay for cinematic texture */}
      <div
        className="absolute inset-0 pointer-events-none"
        style={{
          backgroundImage:
            "url(\"data:image/svg+xml,%3Csvg viewBox='0 0 256 256' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='noise'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23noise)' opacity='0.04'/%3E%3C/svg%3E\")",
          backgroundRepeat: "repeat",
          backgroundSize: "128px 128px",
          opacity: isDark ? 0.35 : 0.15,
          mixBlendMode: "overlay",
        }}
      />

      {/* Radial vignette */}
      <div
        className="absolute inset-0 pointer-events-none"
        style={{
          background: isDark
            ? "radial-gradient(ellipse 100% 100% at 50% 50%, transparent 40%, rgba(0,0,0,0.7) 100%)"
            : "radial-gradient(ellipse 100% 100% at 50% 50%, transparent 50%, rgba(0,0,0,0.06) 100%)",
        }}
      />
    </motion.div>
  );
}