"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 z-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/18 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/14 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/10 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.38),rgba(255,255,255,0.18)_30%,rgba(255,255,255,0.04)_68%,rgba(255,255,255,0)),radial-gradient(circle_at_18%_24%,rgba(221,65,36,0.1),transparent_30%),radial-gradient(circle_at_78%_20%,rgba(235,143,117,0.12),transparent_34%),radial-gradient(circle_at_50%_100%,rgba(174,196,255,0.1),transparent_38%)] dark:bg-[linear-gradient(180deg,rgba(255,255,255,0.02),rgba(255,255,255,0.01)_28%,rgba(255,255,255,0)_68%,rgba(255,255,255,0)),radial-gradient(circle_at_18%_24%,rgba(221,65,36,0.12),transparent_30%),radial-gradient(circle_at_78%_20%,rgba(235,143,117,0.08),transparent_34%),radial-gradient(circle_at_50%_100%,rgba(91,117,214,0.08),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-32 mix-blend-soft-light dark:opacity-12"
      />
    </div>
  );
}