"use client";

import { motion } from "framer-motion";
import Image from "next/image";
import logo from "../../../public/KulchaKingLogo.svg"; // adjust path if needed

export default function Loading() {
  return (
    <div className="fixed inset-0 flex flex-col items-center justify-center bg-[#fff7f1] text-[#E9500F] z-[9999]">
      {/* Logo */}
      <motion.div
        initial={{ scale: 0, opacity: 0 }}
        animate={{ scale: 1, opacity: 1 }}
        transition={{ duration: 0.6, ease: "easeOut" }}
        className="mb-6"
      >
        <Image
          src={logo}
          alt="Kulcha King Logo"
          width={120}
          height={120}
          priority
          className="drop-shadow-md"
        />
      </motion.div>

      {/* Animated Text */}
      <motion.h2
        initial={{ opacity: 0, y: 20 }}
        animate={{ opacity: 1, y: 0 }}
        transition={{ delay: 0.3, duration: 0.6 }}
        className="text-2xl font-bold tracking-wide"
      >
        Cooking Something Delicious...
      </motion.h2>

      {/* Loader animation */}
      <motion.div
        className="mt-8 flex space-x-2"
        initial="hidden"
        animate="visible"
        variants={{
          visible: {
            transition: {
              staggerChildren: 0.15,
            },
          },
        }}
      >
        {[0, 1, 2, 3].map((i) => (
          <motion.span
            key={i}
            className="w-3 h-3 rounded-full bg-[#E9500F]"
            variants={{
              hidden: { y: 0, opacity: 0.3 },
              visible: {
                y: [0, -10, 0],
                opacity: [0.3, 1, 0.3],
                transition: { duration: 0.6, repeat: Infinity, ease: "easeInOut" },
              },
            }}
          />
        ))}
      </motion.div>

      {/* Background subtle animation */}
      <motion.div
        className="absolute inset-0 bg-[radial-gradient(circle_at_center,rgba(233,80,15,0.05),transparent_70%)]"
        animate={{ opacity: [0.5, 1, 0.5], scale: [1, 1.1, 1] }}
        transition={{ duration: 3, repeat: Infinity, ease: "easeInOut" }}
      />
    </div>
  );
}