"use client";

import { motion } from "framer-motion";

type HeroAtmosphereProps = {
  compact?: boolean;
};

export function HeroAtmosphere({ compact = false }: HeroAtmosphereProps) {
  return (
    <div className="pointer-events-none absolute inset-0 overflow-hidden">
      <motion.div
        animate={{
          x: [0, 90, -48, 0],
          y: [0, -70, 32, 0],
          scale: [1, 1.12, 0.96, 1],
        }}
        transition={{
          duration: 20,
          repeat: Number.POSITIVE_INFINITY,
          ease: "easeInOut",
        }}
        className="absolute left-[-10%] top-[4%] h-[24rem] w-[24rem] rounded-full bg-brand-primary/22 blur-3xl sm:h-[34rem] sm:w-[34rem] lg:h-[42rem] lg:w-[42rem]"
      />

      <motion.div
        animate={{
          x: [0, -110, 40, 0],
          y: [0, 48, -26, 0],
          scale: [1, 0.92, 1.08, 1],
        }}
        transition={{
          duration: 24,
          repeat: Number.POSITIVE_INFINITY,
          ease: "easeInOut",
        }}
        className="absolute right-[-14%] top-[2%] h-[22rem] w-[22rem] rounded-full bg-brand-secondary/18 blur-3xl sm:h-[30rem] sm:w-[30rem] lg:h-[38rem] lg:w-[38rem]"
      />

      <motion.div
        animate={{
          x: [0, 42, -24, 0],
          y: [0, -28, 30, 0],
          opacity: [0.2, 0.34, 0.18, 0.2],
        }}
        transition={{
          duration: 18,
          repeat: Number.POSITIVE_INFINITY,
          ease: "easeInOut",
        }}
        className="absolute bottom-[-18%] left-[18%] h-[18rem] w-[18rem] rounded-full bg-brand-primary/14 blur-3xl sm:h-[24rem] sm:w-[24rem] lg:h-[30rem] lg:w-[30rem]"
      />

      <div className="absolute inset-0 bg-[linear-gradient(180deg,rgba(255,255,255,0.58),rgba(255,255,255,0.32)_32%,rgba(255,255,255,0.08)_68%,rgba(255,255,255,0.02)),radial-gradient(circle_at_18%_24%,rgba(221,65,36,0.16),transparent_30%),radial-gradient(circle_at_78%_20%,rgba(235,143,117,0.18),transparent_34%),radial-gradient(circle_at_50%_100%,rgba(174,196,255,0.18),transparent_38%)] dark:bg-[linear-gradient(180deg,rgba(10,14,22,0.3),rgba(10,14,22,0.42)_34%,rgba(10,14,22,0.7)_100%),radial-gradient(circle_at_18%_24%,rgba(221,65,36,0.2),transparent_30%),radial-gradient(circle_at_78%_20%,rgba(235,143,117,0.12),transparent_34%),radial-gradient(circle_at_50%_100%,rgba(91,117,214,0.12),transparent_38%)]" />

      <motion.div
        animate={{
          x: [0, compact ? 18 : 26, compact ? -12 : -18, 0],
          y: [0, compact ? -14 : -22, compact ? 10 : 16, 0],
        }}
        transition={{
          duration: compact ? 8 : 10,
          repeat: Number.POSITIVE_INFINITY,
          ease: "linear",
        }}
        className="hero-noise absolute inset-[-8%] opacity-55 mix-blend-soft-light dark:opacity-22"
      />
    </div>
  );
}
