"use client";

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

// -------------------- IMAGE DATA --------------------

const categories = [
  { key: "ambience", label: "Ambience" },
  { key: "services", label: "Services" },
  { key: "indoor", label: "Indoor" },
  { key: "kulchas", label: "Kulchas" },
];

const galleryImages: Record<string, { src: string; title: string }[]> = {
  ambience: [
    { src: "https://source.unsplash.com/featured/?restaurant-ambience", title: "Cozy Seating" },
    { src: "https://source.unsplash.com/featured/?restaurant-lights", title: "Evening Lights" },
    { src: "https://source.unsplash.com/featured/?restaurant-decor", title: "Warm Decor" },
    { src: "https://source.unsplash.com/featured/?indian-restaurant", title: "Family Dining" },
  ],
  services: [
    { src: "https://source.unsplash.com/featured/?restaurant-service", title: "Smiling Service" },
    { src: "https://source.unsplash.com/featured/?chef-cooking", title: "Chef at Work" },
    { src: "https://source.unsplash.com/featured/?table-service", title: "Serving Happiness" },
    { src: "https://source.unsplash.com/featured/?indian-chef", title: "Authentic Touch" },
  ],
  indoor: [
    { src: "https://source.unsplash.com/featured/?indoor-dining", title: "Dining Area" },
    { src: "https://source.unsplash.com/featured/?restaurant-interior", title: "Elegant Design" },
    { src: "https://source.unsplash.com/featured/?restaurant-hall", title: "Spacious Setting" },
    { src: "https://source.unsplash.com/featured/?restaurant-furniture", title: "Comfortable Chairs" },
  ],
  kulchas: [
    { src: "https://source.unsplash.com/featured/?aloo-kulcha", title: "Aloo Kulcha" },
    { src: "https://source.unsplash.com/featured/?paneer-kulcha", title: "Paneer Kulcha" },
    { src: "https://source.unsplash.com/featured/?cheese-kulcha", title: "Cheese Kulcha" },
    { src: "https://source.unsplash.com/featured/?butter-chicken-kulcha", title: "Butter Chicken Kulcha" },
  ],
};

// -------------------- PAGE COMPONENT --------------------

export default function GalleryScreen() {
  const [active, setActive] = useState("ambience");

  return (
    <section className="w-full">
      {/* ---------- Featured Video Section ---------- */}
      <div className="relative  w-full h-screen bg-black overflow-hidden">
        <video
          src="/mp4.mp4"
          autoPlay
          loop
          muted
          playsInline
          className="absolute inset-0 w-full h-full object-cover"
        />

        {/* Overlay Title */}
        <div className="absolute inset-0 px-4 bg-black/40 flex items-center justify-center">
          <motion.h1
            initial={{ opacity: 0, y: 40 }}
            animate={{ opacity: 1, y: 0 }}
            transition={{ duration: 0.8 }}
            className="text-5xl md:text-6xl font-bold text-[#F2AE48] text-center drop-shadow-lg"
          >
            Kulcha King Gallery
          </motion.h1>
        </div>
      </div>

      {/* ---------- Image Categories Section ---------- */}
      <div className="max-w-7xl mx-auto px-6 md:px-10 py-16">
        <motion.h2
          initial={{ opacity: 0, y: -20 }}
          animate={{ opacity: 1, y: 0 }}
          transition={{ duration: 0.6 }}
          className="text-4xl font-bold text-center text-[#E9500E] mb-8"
        >
          Explore Our World
        </motion.h2>

        {/* Tabs */}
        <div className="flex justify-center flex-wrap gap-3 mb-10">
          {categories.map((cat) => (
            <button
              key={cat.key}
              onClick={() => setActive(cat.key)}
              className={`px-5 py-2 text-sm md:text-base font-semibold uppercase rounded-full border transition-all duration-300 ${
                active === cat.key
                  ? "bg-[#E9500E] text-white shadow-lg scale-105"
                  : "bg-white text-[#E9500E] border-[#E9500E] hover:bg-[#E9500E]/10"
              }`}
            >
              {cat.label}
            </button>
          ))}
        </div>

        {/* Gallery Grid */}
        <AnimatePresence mode="wait">
          <motion.div
            key={active}
            initial={{ opacity: 0, y: 20 }}
            animate={{ opacity: 1, y: 0 }}
            exit={{ opacity: 0, y: 20 }}
            transition={{ duration: 0.4 }}
            className="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gap-8"
          >
            {galleryImages[active]?.map((item, i) => (
              <motion.div
                key={i}
                initial={{ opacity: 0, y: 30 }}
                animate={{ opacity: 1, y: 0 }}
                transition={{ delay: i * 0.05 }}
                className="rounded-2xl overflow-hidden shadow-md hover:shadow-2xl transition duration-300 bg-white"
              >
                <img
                  src={item.src}
                  alt={item.title}
                  className="object-cover w-full h-64"
                />
                <div className="p-4 text-center">
                  <h3 className="text-lg font-semibold text-[#E9500E]">{item.title}</h3>
                </div>
              </motion.div>
            ))}
          </motion.div>
        </AnimatePresence>
      </div>
    </section>
  );
}