"use client";

import { motion } from "framer-motion";
import { useEffect, useState } from "react";

const BackgroundBlobs = () => {
  const [mounted, setMounted] = useState(false);

  useEffect(() => {
    setMounted(true);
  }, []);

  if (!mounted) return null;

  return (
    <div className="fixed inset-0 overflow-hidden pointer-events-none z-0">
      {/* Mint blob - top left */}
      <motion.div
        className="absolute top-[-10%] left-[-10%] w-[40vw] h-[40vw] bg-liquid-mint/40 rounded-full blur-[60px] mix-blend-multiply"
        animate={{ scale: [1, 1.15, 1] }}
        transition={{ duration: 40, repeat: Infinity, ease: "easeInOut", repeatType: "reverse" }}
      />

      {/* Lavender blob - top right */}
      <motion.div
        className="absolute top-[10%] right-[-5%] w-[35vw] h-[35vw] bg-liquid-lavender/35 rounded-full blur-[60px] mix-blend-multiply"
        animate={{ scale: [1, 1.1, 1] }}
        transition={{ duration: 45, repeat: Infinity, ease: "easeInOut", repeatType: "reverse" }}
      />

      {/* Rose blob - bottom left */}
      <motion.div
        className="absolute bottom-[-5%] left-[15%] w-[45vw] h-[45vw] bg-liquid-rose/35 rounded-full blur-[60px] mix-blend-multiply"
        animate={{ scale: [1, 1.2, 1] }}
        transition={{ duration: 50, repeat: Infinity, ease: "easeInOut", repeatType: "reverse" }}
      />

      {/* Peach blob - middle right */}
      <motion.div
        className="absolute top-[40%] right-[10%] w-[30vw] h-[30vw] bg-orange-200/30 rounded-full blur-[60px] mix-blend-multiply"
        animate={{ scale: [1, 1.25, 1] }}
        transition={{ duration: 55, repeat: Infinity, ease: "easeInOut", repeatType: "reverse" }}
      />
    </div>
  );
};

export default BackgroundBlobs;