"use client";

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

/**
 * Shahi Kitchen Hero - Focused on the Chef Logo
 * - Large central logo with life (wink + smile cycle)
 * - Cream background circle so the logo blends/absorbs into the site color
 * - No more small floating dishes
 */

export default function PlayfulHeroScene() {
  const [expression, setExpression] = useState<'normal' | 'wink' | 'smile'>('normal');

  // Cycle expressions for life (wink and smile)
  useEffect(() => {
    const interval = setInterval(() => {
      setExpression(prev => {
        const rand = Math.random();
        if (rand < 0.45) return 'wink';
        if (rand < 0.9) return 'smile';
        return 'normal';
      });
    }, 2400);

    return () => clearInterval(interval);
  }, []);

  const getLogoSrc = () => {
    if (expression === 'wink') return '/images/animation/chef-wink.jpg';
    if (expression === 'smile') return '/images/animation/chef-smile.jpg';
    return '/images/animation/chef-normal.jpg';
  };

  return (
    <div className="relative w-full h-full min-h-[520px] md:min-h-[620px] flex items-center justify-center overflow-hidden">
      
      {/* Large cream background circle - matches website exactly so logo absorbs */}
      <div className="absolute left-1/2 top-[58%] -translate-x-1/2 -translate-y-1/2 
                      w-[440px] h-[440px] md:w-[540px] md:h-[540px] lg:w-[620px] lg:h-[620px] 
                      bg-[#fbf7ef] rounded-full blur-[130px] opacity-95" />

      {/* Central Chef Logo with life */}
      <div className="relative z-30">
        <AnimatePresence mode="wait">
          <motion.div
            key={expression}
            initial={{ opacity: 0.7, scale: 0.97 }}
            animate={{ 
              opacity: 1, 
              scale: 1,
              y: [0, -24, 0],
              rotate: [-3.5, 3.5, -3.5]
            }}
            exit={{ opacity: 0.7, scale: 0.97 }}
            transition={{
              y: { duration: 6.6, repeat: Infinity, ease: "easeInOut" },
              rotate: { duration: 6.6, repeat: Infinity, ease: "easeInOut" },
              opacity: { duration: 0.4 },
              scale: { duration: 0.4 }
            }}
            className="w-[300px] h-[300px] md:w-[380px] md:h-[380px] lg:w-[440px] lg:h-[440px]"
          >
            <img
              src={getLogoSrc()}
              alt="Shahi Kitchen Chef"
              className="w-full h-full object-contain drop-shadow-[0_25px_55px_rgba(0,0,0,0.35)]"
            />
          </motion.div>
        </AnimatePresence>

        {/* Enhanced royal glows */}
        <div className="absolute -top-14 left-1/2 -translate-x-1/2 w-44 h-44 bg-[#f4d47f] rounded-full blur-3xl opacity-48" />
        <div className="absolute -top-7 left-1/2 -translate-x-1/2 w-24 h-24 bg-[#c99a2e] rounded-full blur-2xl opacity-32" />
        <div className="absolute -bottom-9 left-1/2 -translate-x-1/2 w-32 h-16 bg-[#c99a2e] rounded-full blur-3xl opacity-22" />
      </div>

      {/* Subtle steam for life */}
      <motion.div
        className="absolute left-[41%] top-[36%] w-4 h-11 opacity-32"
        animate={{ y: [0, -36, 0], opacity: [0.28, 0.52, 0.28] }}
        transition={{ duration: 3.5, repeat: Infinity, ease: "easeInOut" }}
      >
        <div className="w-full h-full bg-gradient-to-t from-[#f4d47f] to-transparent rounded-full blur-md" />
      </motion.div>

      <motion.div
        className="absolute right-[40%] top-[41%] w-3 h-9 opacity-27"
        animate={{ y: [0, -30, 0], opacity: [0.22, 0.48, 0.22] }}
        transition={{ duration: 4.2, repeat: Infinity, ease: "easeInOut", delay: 1.5 }}
      >
        <div className="w-full h-full bg-gradient-to-t from-[#c99a2e] to-transparent rounded-full blur-md" />
      </motion.div>
    </div>
  );
}