"use client";

import { motion } from "framer-motion";

export default function AnimatedBackground() {
  return (
    <div
      style={{ position: "absolute", inset: 0, overflow: "hidden", pointerEvents: "none" }}
      aria-hidden="true"
    >
      {/* Dot grid */}
      <div
        style={{
          position: "absolute",
          inset: 0,
          opacity: 0.3,
          backgroundImage: "radial-gradient(circle, var(--border, #E5E7EB) 1px, transparent 1px)",
          backgroundSize: "28px 28px",
        }}
      />

      {/* Blob 1 — top-left brand red */}
      <motion.div
        style={{
          position: "absolute",
          top: -128,
          left: -128,
          width: 520,
          height: 520,
          borderRadius: "50%",
          background:
            "radial-gradient(circle at 40% 40%, rgba(193,39,45,0.14) 0%, rgba(193,39,45,0.05) 50%, transparent 75%)",
          filter: "blur(48px)",
        }}
        animate={{ x: [0, 30, -15, 0], y: [0, -20, 30, 0], scale: [1, 1.06, 0.97, 1] }}
        transition={{ duration: 12, repeat: Infinity, ease: "easeInOut" }}
      />

      {/* Blob 2 — bottom-right accent red */}
      <motion.div
        style={{
          position: "absolute",
          bottom: -160,
          right: -160,
          width: 600,
          height: 600,
          borderRadius: "50%",
          background:
            "radial-gradient(circle at 60% 60%, rgba(237,32,39,0.10) 0%, rgba(193,39,45,0.04) 50%, transparent 75%)",
          filter: "blur(64px)",
        }}
        animate={{ x: [0, -25, 20, 0], y: [0, 25, -15, 0], scale: [1, 0.95, 1.08, 1] }}
        transition={{ duration: 15, repeat: Infinity, ease: "easeInOut", delay: 2 }}
      />

      {/* Blob 3 — centre warm glow */}
      <motion.div
        style={{
          position: "absolute",
          top: "25%",
          left: "50%",
          transform: "translateX(-50%)",
          width: 400,
          height: 400,
          borderRadius: "50%",
          background:
            "radial-gradient(circle at 50% 50%, rgba(255,226,226,0.65) 0%, rgba(248,249,251,0.0) 70%)",
          filter: "blur(32px)",
        }}
        animate={{ scale: [1, 1.12, 1], opacity: [0.5, 0.9, 0.5] }}
        transition={{ duration: 6, repeat: Infinity, ease: "easeInOut" }}
      />

      <FloatingShape size={48} top="12%" left="8%"    delay={0}   duration={8}  rotation={45} opacity={0.10} />
      <FloatingShape size={32} top="20%" right="12%"  delay={2.5} duration={10} rotation={30} opacity={0.08} />
      <FloatingShape size={24} bottom="18%" left="14%" delay={1.5} duration={9} rotation={60} opacity={0.09} />
      <FloatingShape size={40} bottom="22%" right="10%" delay={3} duration={11} rotation={15} opacity={0.07} />
      <FloatingShape size={18} top="55%" left="6%"    delay={0.8} duration={7}  rotation={72} opacity={0.09} />
    </div>
  );
}

interface FloatingShapeProps {
  size: number;
  delay: number;
  duration: number;
  rotation: number;
  opacity: number;
  top?: string;
  left?: string;
  right?: string;
  bottom?: string;
}

function FloatingShape({ size, delay, duration, rotation, opacity, top, left, right, bottom }: FloatingShapeProps) {
  return (
    <motion.div
      style={{ position: "absolute", top, left, right, bottom, opacity }}
      animate={{ y: [0, -16, 8, 0], rotate: [rotation, rotation + 20, rotation - 10, rotation] }}
      transition={{ duration, repeat: Infinity, ease: "easeInOut", delay }}
    >
      <svg width={size} height={size} viewBox="0 0 48 48" fill="none">
        <rect
          x="4" y="4" width="40" height="40" rx="4"
          stroke="var(--brand, #C1272D)"
          strokeWidth="2"
          fill="none"
        />
      </svg>
    </motion.div>
  );
}