"use client";

import { useEffect, useRef } from "react";
import gsap from "gsap";
import { ScrollTrigger } from "gsap/ScrollTrigger";
import Image from "next/image";

gsap.registerPlugin(ScrollTrigger);

export default function SpatialSanctuary() {
  const containerRef = useRef<HTMLDivElement>(null);
  const trackRef = useRef<HTMLDivElement>(null);

  useEffect(() => {
    const container = containerRef.current;
    const track = trackRef.current;
    if (!container || !track) return;

    const ctx = gsap.context(() => {
      // Calculate horizontal translation distance
      const trackWidth = track.scrollWidth;
      const scrollDistance = trackWidth - window.innerWidth;

      // Horizontal Scroll Trigger for track sliding
      const scrollTween = gsap.to(track, {
        x: -scrollDistance,
        ease: "none",
        scrollTrigger: {
          trigger: container,
          pin: true,
          start: "top top",
          end: `+=${scrollDistance}`, // scroll length matches translation
          scrub: 1,
          invalidateOnRefresh: true,
        },
      });

      // Parallax Zoom Effect on individual slide images
      const images = track.querySelectorAll(".gallery-img");
      images.forEach((img) => {
        gsap.fromTo(
          img,
          { scale: 1.0 },
          {
            scale: 1.12,
            ease: "none",
            scrollTrigger: {
              trigger: img,
              containerAnimation: scrollTween, // sync with horizontal tween
              start: "left right",
              end: "right left",
              scrub: true,
            },
          }
        );
      });
    }, container);

    return () => ctx.revert();
  }, []);

  const gallerySlides = [
    {
      title: "The Teakwood Columns",
      subtitle: "T H E   T E A K   C O U R T",
      desc: "Supported by eighty grand hand-carved pillars sourced from Chettinad, framing a courtyard that captures cooling cross-breezes.",
      img: "/images/chettinad_interior.png",
    },
    {
      title: "The Royal Banquet Court",
      subtitle: "I M P E R I A L   D I N I N G",
      desc: "Our ceremonial feast hall features heavy teak tables, soft yellow lanterns, and floral motifs (Kolams) hand-drawn with rice flour daily.",
      img: "/images/royal_dining_experience.png",
    },
    {
      title: "The Sanctuary Lobby",
      subtitle: "T H E   W E L C O M E   A N T E R O O M",
      desc: "Paved with rough-cut temple stone tiles, featuring bubbling brass vessels (urlis) filled with fresh jasmine buds and marigolds.",
      img: "/images/south_indian_welcome.png",
    },
  ];

  return (
    <div
      ref={containerRef}
      className="relative w-full h-screen overflow-hidden bg-[#060b08] select-none"
    >
      {/* Horizontal Scroll Track container */}
      <div
        ref={trackRef}
        className="absolute top-0 left-0 h-full flex flex-row items-center z-10"
        style={{ width: "max-content" }}
      >

        {/* ==================== SLIDE 1: THE CULINARY HERITAGE MAIN COVER ==================== */}
        <div className="w-screen h-screen flex-shrink-0 relative flex flex-col justify-start lg:justify-center px-4 sm:px-12 md:px-16 pt-20 lg:pt-12 pb-24 lg:pb-20 overflow-y-auto lg:overflow-hidden bg-[#fdfcf7] custom-scrollbar">
          {/* Parchment background image for Slide 1 */}
          <Image
            src="/images/home/culinary-heritage/our-culinary-heritage-bg-1.webp"
            alt="Traditional South Indian Sanctuary Background"
            fill
            priority
            className="object-fill pointer-events-none select-none z-0"
          />

          {/* Traditional Temple Borders */}
          <div className="absolute top-0 left-0 w-full h-[6px] bg-gradient-to-r from-gold-dark via-gold-light to-gold-dark opacity-35 z-10" />

          {/* Slide Content layout */}
          <div className="max-w-7xl mx-auto w-full flex flex-col lg:flex-row items-center justify-between gap-8 lg:gap-12 relative z-10">

            {/* Left Side details */}
            <div className="w-full lg:w-[50%] flex flex-col items-center lg:items-start text-center lg:text-left justify-start lg:justify-center select-text">

              {/* Pre-title with Gold star crest */}
              <div className="flex flex-col items-center lg:items-start mb-2 pointer-events-none select-none">
                <svg className="w-5 h-5 text-[#bc9e65] mb-2" viewBox="0 0 24 24" fill="currentColor">
                  <path d="M12 2L14.5 9.5L22 12L14.5 14.5L12 22L9.5 14.5L2 12L9.5 9.5L12 2Z" />
                </svg>
                <span className="font-sans text-base sm:text-base tracking-[0.4em] uppercase text-[#bc9e65] font-bold block">
                  — THE GASTRONOMY —
                </span>
              </div>

              {/* Main Headline */}
              <h2 className="font-serif text-3xl sm:text-4xl lg:text-5xl font-bold tracking-wider text-[#0a4a2b] leading-tight uppercase mb-2 lg:mb-4">
                Our Culinary<br />
                <span className="text-[#bc9e65] font-extrabold block mt-1">Heritage</span>
              </h2>

              {/* Traditional Gold Divider */}
              <div className="flex items-center gap-3 w-40 mb-5 justify-center lg:justify-start pointer-events-none select-none">
                <div className="h-[1px] flex-1 bg-gradient-to-r from-[#bc9e65] to-transparent" />
                <svg className="w-4 h-4 text-[#bc9e65]" viewBox="0 0 30 20" fill="currentColor">
                  <path d="M 15,3 C 13,8 14,14 15,16 C 16,14 17,8 15,3 Z" />
                </svg>
                <div className="h-[1px] flex-1 bg-gradient-to-l from-[#bc9e65] to-transparent" />
              </div>

              {/* Description narrative */}
              <p className="font-sans text-xs sm:text-base text-stone-700 leading-relaxed tracking-wider max-w-lg mb-4 lg:mb-6">
                Swipe or scroll to explore the rich, traditional recipes of My Dosa Place, bringing stone-ground batters, fresh local spices, and traditional techniques to life.
              </p>

              {/* Scroll Down Slide Indicator */}
              <div className="flex items-center gap-2 mb-4 lg:mb-6 pointer-events-none select-none text-[#bc9e65]">
                <span className="font-sans text-sm tracking-[0.2em] font-bold uppercase">
                  Scroll down to slide right
                </span>
                <svg className="w-4 h-4" fill="none" stroke="currentColor" strokeWidth="2" viewBox="0 0 24 24">
                  <circle cx="12" cy="12" r="10" />
                  <path d="M12 8v8M12 16l4-4M12 16l-4-4" />
                </svg>
              </div>

              {/* Grid of 4 Sanctuary Features */}
              <div className="grid grid-cols-2 gap-4 w-full max-w-lg">

                {/* Card 1: Recipes */}
                <div className="bg-[#fcfaf2]/70 border border-[#d8c396]/45 rounded-xl shadow-sm p-3 lg:p-4 flex flex-col items-center text-center group">
                  <Image src="/images/home/culinary-heritage/icons/culinary-heritage.webp" alt="Heritage Recipes" width={32} height={32} className="object-contain mb-1 lg:mb-2 w-6 h-6 lg:w-8 lg:h-8" />
                  <h5 className="font-serif text-sm lg:text-base font-bold text-[#0a4a2b] tracking-wider uppercase mb-0.5 lg:mb-1">
                    Heritage Recipes
                  </h5>
                  <p className="font-sans text-xs lg:text-sm text-stone-500 leading-tight lg:leading-relaxed max-w-[180px]">
                    Timeless recipes rooted in tradition.
                  </p>
                </div>

                {/* Card 2: Ghee */}
                <div className="bg-[#fcfaf2]/70 border border-[#d8c396]/45 rounded-xl shadow-sm p-3 lg:p-4 flex flex-col items-center text-center group">
                  <Image src="/images/home/culinary-heritage/icons/culinary-pure.webp" alt="Pure A2 Ghee" width={32} height={32} className="object-contain mb-1 lg:mb-2 w-6 h-6 lg:w-8 lg:h-8" />
                  <h5 className="font-serif text-sm lg:text-base font-bold text-[#0a4a2b] tracking-wider uppercase mb-0.5 lg:mb-1">
                    Pure A2 Ghee
                  </h5>
                  <p className="font-sans text-xs lg:text-sm text-stone-500 leading-tight lg:leading-relaxed max-w-[180px]">
                    Traditional ghee that enriches the flavor.
                  </p>
                </div>

                {/* Card 3: Dosa */}
                <div className="bg-[#fcfaf2]/70 border border-[#d8c396]/45 rounded-xl shadow-sm p-3 lg:p-4 flex flex-col items-center text-center group">
                  <Image src="/images/home/culinary-heritage/icons/culinary-dosa.webp" alt="Artisanal Dosa" width={32} height={32} className="object-contain mb-1 lg:mb-2 w-6 h-6 lg:w-8 lg:h-8" />
                  <h5 className="font-serif text-sm lg:text-base font-bold text-[#0a4a2b] tracking-wider uppercase mb-0.5 lg:mb-1">
                    Artisanal Dosa
                  </h5>
                  <p className="font-sans text-xs lg:text-sm text-stone-500 leading-tight lg:leading-relaxed max-w-[180px]">
                    Stone-ground batter fermented to perfection.
                  </p>
                </div>

                {/* Card 4: Feasts */}
                <div className="bg-[#fcfaf2]/70 border border-[#d8c396]/45 rounded-xl shadow-sm p-3 lg:p-4 flex flex-col items-center text-center group">
                  <Image src="/images/home/culinary-heritage/icons/culinary-feast.webp" alt="Imperial Feasts" width={32} height={32} className="object-contain mb-1 lg:mb-2 w-6 h-6 lg:w-8 lg:h-8" />
                  <h5 className="font-serif text-sm lg:text-base font-bold text-[#0a4a2b] tracking-wider uppercase mb-0.5 lg:mb-1">
                    Imperial Feasts
                  </h5>
                  <p className="font-sans text-xs lg:text-sm text-stone-500 leading-tight lg:leading-relaxed max-w-[180px]">
                    Grand platters reflecting royal tastes.
                  </p>
                </div>

              </div>

            </div>

            {/* Right Side: Thali Archway photo overlap */}
            <div className="hidden lg:flex w-full lg:w-[46%] justify-center lg:justify-end relative select-none pointer-events-none mt-6 lg:mt-0">
              <div className="w-[180px] h-[180px] sm:w-[320px] sm:h-[320px] md:w-[400px] md:h-[400px] lg:w-[480px] lg:h-[480px] relative">
                <Image
                  src="/images/home/culinary-heritage/our-culinary-heritage-right.webp"
                  alt="My Dosa Place Spatial Dining Sanctuary"
                  fill
                  sizes="(max-width: 1024px) 100vw, 46vw"
                  className="object-contain"
                  priority
                />
              </div>
            </div>

          </div>
        </div>

        {/* ==================== BENTO GRID: HORIZONTAL SCROLLING GALLERY ==================== */}
        <div className="h-screen flex-shrink-0 w-max flex items-center px-8 sm:px-12 md:px-16 pr-16 sm:pr-20 md:pr-24 relative bg-[#fdfcf7] py-12 select-none z-10">
          {/* Parchment background image for Bento Grid */}
          <Image
            src="/images/home/culinary-heritage/our-culinary-heritage-bg-2.webp"
            alt="Traditional South Indian Sanctuary Background"
            fill
            className="object-fill pointer-events-none select-none z-0"
          />

          {/* Traditional Temple Borders */}
          <div className="absolute top-0 left-0 w-full h-[6px] bg-gradient-to-r from-gold-dark via-gold-light to-gold-dark opacity-35 z-10" />

          {/* Grid Layout Container */}
          <div className="grid grid-rows-2 auto-cols-[200px] sm:auto-cols-[250px] md:auto-cols-[270px] grid-flow-col gap-4 sm:gap-6 h-[65vh] sm:h-[75vh] max-h-[680px] w-max relative z-10 pr-24">

            {/* Card 1: Row 1, Col 1 - Cream Intro Card */}
            <div className="row-span-1 col-span-1 w-full h-full bg-[#fcfaf2]/80 border border-[#d8c396]/45 rounded-2xl shadow-sm p-4 sm:p-5 flex flex-col justify-center select-text relative">
              <div className="absolute inset-1.5 border border-[#d8c396]/20 pointer-events-none rounded-xl" />
              <span className="font-sans text-[10px] sm:text-sm tracking-[0.2em] sm:tracking-[0.25em] uppercase text-[#bc9e65] font-bold block mb-1">
                — The Masterpieces —
              </span>
              <h3 className="font-serif text-base sm:text-lg font-bold tracking-wider text-[#0a4a2b] uppercase mb-1 sm:mb-2">
                Culinary Art
              </h3>
              <p className="font-sans text-xs sm:text-base text-stone-700 leading-snug sm:leading-relaxed">
                Every category is a chapter of South Indian gastronomy, curated to showcase heritage and flavor.
              </p>
              <div className="flex items-center gap-1.5 mt-2 sm:mt-3 text-[#bc9e65]">
                <span className="font-sans text-sm tracking-[0.15em] font-bold uppercase">Slide to explore</span>
                <svg className="w-3 h-3 animate-pulse" fill="none" stroke="currentColor" strokeWidth="2.5" viewBox="0 0 24 24">
                  <path d="M9 5l7 7-7 7" strokeLinecap="round" strokeLinejoin="round" />
                </svg>
              </div>
            </div>

            {/* Card 2: Row 2, Col 1 - Breakfast Classics Image Card */}
            <div className="row-span-1 col-span-1 w-full h-full relative rounded-2xl overflow-hidden border border-[#d8c396]/60 shadow-sm group bg-[#0a4a2b]/10">
              <Image
                src="/images/home/culinary-heritage/cards/crispy-ghee-roast.webp"
                alt="Breakfast Classics"
                fill
                sizes="240px"
                className="gallery-img object-cover transition-all duration-[1s]"
              />
              <div className="absolute inset-x-0 bottom-0 bg-gradient-to-t from-black/90 via-black/60 to-transparent p-3 sm:p-4 z-20">
                <span className="font-sans text-[10px] sm:text-sm tracking-[0.1em] sm:tracking-[0.15em] text-[#bc9e65] font-bold uppercase block mb-0.5">
                  Breakfast Classics
                </span>
                <h4 className="font-serif text-xs sm:text-sm font-bold text-white uppercase tracking-wider leading-tight">
                  Crispy Ghee Roasts
                </h4>
              </div>
              <div className="absolute inset-3 border border-white/20 rounded-xl pointer-events-none z-10" />
            </div>

            {/* Card 3: Row 1, Col 2 & 3 - Double-Width Thali Highlight (Dark Green Card) */}
            <div className="row-span-1 col-span-2 w-full h-full bg-[#0a4a2b] border border-[#bc9e65]/40 rounded-2xl shadow-md flex flex-col sm:flex-row overflow-hidden relative group">
              <div className="absolute inset-1.5 border border-[#bc9e65]/20 pointer-events-none rounded-xl z-20" />
              {/* Left text section */}
              <div className="w-full sm:w-[50%] p-4 sm:p-7 flex flex-col justify-center select-text relative z-10">
                <span className="font-sans text-[10px] sm:text-sm tracking-[0.2em] sm:tracking-[0.25em] uppercase text-[#bc9e65] font-bold block mb-1">
                  — Heirloom Platter —
                </span>
                <h3 className="font-serif text-base sm:text-lg md:text-xl font-bold tracking-wider text-white uppercase mb-1 sm:mb-2">
                  Royal Feast
                </h3>
                <p className="font-sans text-xs sm:text-base text-[#e4d7bc] leading-snug sm:leading-relaxed">
                  Experience the grand Chola Samrat Thali, bringing twenty hand-turned heirloom dishes together on a banana leaf.
                </p>
                <div className="flex items-center gap-2 mt-2 sm:mt-3 text-[#bc9e65]">
                  <svg className="w-3.5 h-3.5" fill="none" stroke="currentColor" strokeWidth="1.5" viewBox="0 0 24 24">
                    <circle cx="12" cy="12" r="10" />
                    <path d="M8 12a4 4 0 108 0" strokeLinecap="round" />
                  </svg>
                  <span className="font-serif text-xs sm:text-base tracking-[0.05em] font-semibold">Imperial Banquet</span>
                </div>
              </div>
              {/* Right image section */}
              <div className="hidden sm:block w-full sm:w-[50%] h-[150px] sm:h-full relative overflow-hidden">
                <Image
                  src="/images/home/culinary-heritage/cards/royal-feast.webp"
                  alt="Royal Feast Thali"
                  fill
                  sizes="480px"
                  className="gallery-img object-cover transition-all duration-[1s]"
                />
                <div className="absolute inset-3 border border-white/20 rounded-xl pointer-events-none z-10" />
              </div>
            </div>

            {/* Card 4: Row 2, Col 2 - Rooted in Tradition Cream Card */}
            <div className="row-span-1 col-span-1 w-full h-full bg-[#fcfaf2]/80 border border-[#d8c396]/45 rounded-2xl shadow-sm p-4 sm:p-6 flex flex-col justify-center select-text relative">
              <div className="absolute inset-1.5 border border-[#d8c396]/20 pointer-events-none rounded-xl" />
              <span className="font-sans text-[10px] sm:text-sm tracking-[0.2em] sm:tracking-[0.25em] uppercase text-[#bc9e65] font-bold block mb-1">
                — The Foundation —
              </span>
              <h3 className="font-serif text-base sm:text-lg font-bold tracking-wider text-[#0a4a2b] uppercase mb-1 sm:mb-2">
                Stone Batter
              </h3>
              <p className="font-sans text-xs sm:text-base text-stone-700 leading-snug sm:leading-relaxed">
                Batter fermented for 12 hours, stone-ground daily to achieve the perfect crispness and tang.
              </p>
            </div>

            {/* Card 5: Row 2, Col 3 - South Indian Feast Image Card */}
            <div className="row-span-1 col-span-1 w-full h-full relative rounded-2xl overflow-hidden border border-[#d8c396]/60 shadow-sm group bg-[#0a4a2b]/10">
              <Image
                src="/images/home/culinary-heritage/cards/heirloom.webp"
                alt="South Indian Feast"
                fill
                sizes="240px"
                className="gallery-img object-cover transition-all duration-[1s]"
              />
              <div className="absolute inset-x-0 bottom-0 bg-gradient-to-t from-black/90 via-black/60 to-transparent p-3 sm:p-4 z-20">
                <span className="font-sans text-[10px] sm:text-sm tracking-[0.1em] sm:tracking-[0.15em] text-[#bc9e65] font-bold uppercase block mb-0.5">
                  Imperial Platter
                </span>
                <h4 className="font-serif text-xs sm:text-sm font-bold text-white uppercase tracking-wider leading-tight">
                  20 Heirloom Delicacies
                </h4>
              </div>
              <div className="absolute inset-3 border border-white/20 rounded-xl pointer-events-none z-10" />
            </div>

            {/* Card 6: Row 1, Col 4 - Dark Green Madras Filter Coffee Card */}
            <div className="row-span-1 col-span-1 w-full h-full bg-[#0a4a2b] border border-[#bc9e65]/40 rounded-2xl shadow-sm p-4 sm:p-6 flex flex-col justify-center select-text relative">
              <div className="absolute inset-1.5 border border-[#bc9e65]/20 pointer-events-none rounded-xl" />
              <span className="font-sans text-[10px] sm:text-sm tracking-[0.2em] sm:tracking-[0.25em] uppercase text-[#bc9e65] font-bold block mb-1">
                — A Sip of Tradition —
              </span>
              <h3 className="font-serif text-base sm:text-lg font-bold tracking-wider text-white uppercase mb-1 sm:mb-2">
                Filter Coffee
              </h3>
              <p className="font-sans text-xs sm:text-base text-[#e4d7bc] leading-snug sm:leading-relaxed">
                Strong, aromatic brew of premium chicory-coffee, hand-frothed in traditional brass tumblers.
              </p>
              <div className="flex items-center gap-2 mt-3 text-[#bc9e65]">
                <svg className="w-3.5 h-3.5" fill="none" stroke="currentColor" strokeWidth="1.5" viewBox="0 0 24 24">
                  <path d="M12 2v3M8 9h8v8H8zM12 17v5M5 9c0-3.5 3-4 7-4s7 .5 7 4" strokeLinecap="round" />
                </svg>
                <span className="font-serif text-sm sm:text-base tracking-[0.05em] font-semibold">Frothed Brews</span>
              </div>
            </div>

            {/* Card 7: Row 2, Col 4 - Dosa Perfection Image Card */}
            <div className="row-span-1 col-span-1 w-full h-full relative rounded-2xl overflow-hidden border border-[#d8c396]/60 shadow-sm group bg-[#0a4a2b]/10">
              <Image
                src="/images/home/culinary-heritage/cards/ghee-roast.webp"
                alt="Dosa Perfection"
                fill
                sizes="240px"
                className="gallery-img object-cover transition-all duration-[1s]"
              />
              <div className="absolute inset-x-0 bottom-0 bg-gradient-to-t from-black/90 via-black/60 to-transparent p-3 sm:p-4 z-20">
                <span className="font-sans text-[10px] sm:text-sm tracking-[0.1em] sm:tracking-[0.15em] text-[#bc9e65] font-bold uppercase block mb-0.5">
                  Dosa Court
                </span>
                <h4 className="font-serif text-xs sm:text-sm font-bold text-white uppercase tracking-wider leading-tight">
                  A2 Ghee Roast
                </h4>
              </div>
              <div className="absolute inset-3 border border-white/20 rounded-xl pointer-events-none z-10" />
            </div>

            {/* Card 8: Row 1, Col 5 - Chef's Specials Image Card */}
            <div className="row-span-1 col-span-1 w-full h-full relative rounded-2xl overflow-hidden border border-[#d8c396]/60 shadow-sm group bg-[#0a4a2b]/10">
              <Image
                src="/images/home/culinary-heritage/cards/seasonal-creations.webp"
                alt="Chef's Specials"
                fill
                sizes="240px"
                className="gallery-img object-cover transition-all duration-[1s]"
              />
              <div className="absolute inset-x-0 bottom-0 bg-gradient-to-t from-black/90 via-black/60 to-transparent p-3 sm:p-4 z-20">
                <span className="font-sans text-[10px] sm:text-sm tracking-[0.1em] sm:tracking-[0.15em] text-[#bc9e65] font-bold uppercase block mb-0.5">
                  Chef's Specials
                </span>
                <h4 className="font-serif text-xs sm:text-sm font-bold text-white uppercase tracking-wider leading-tight">
                  Seasonal Creations
                </h4>
              </div>
              <div className="absolute inset-3 border border-white/20 rounded-xl pointer-events-none z-10" />
            </div>

            {/* Card 9: Row 2, Col 5 - Pure Ingredients Cream Card */}
            <div className="row-span-1 col-span-1 w-full h-full bg-[#fcfaf2]/80 border border-[#d8c396]/45 rounded-2xl shadow-sm p-4 sm:p-6 flex flex-col justify-center select-text relative">
              <div className="absolute inset-1.5 border border-[#d8c396]/20 pointer-events-none rounded-xl" />
              <span className="font-sans text-[10px] sm:text-sm tracking-[0.2em] sm:tracking-[0.25em] uppercase text-[#bc9e65] font-bold block mb-1">
                — Purity Checked —
              </span>
              <h3 className="font-serif text-base sm:text-lg font-bold tracking-wider text-[#0a4a2b] uppercase mb-1 sm:mb-2">
                Pure A2 Ghee
              </h3>
              <p className="font-sans text-xs sm:text-base text-stone-700 leading-snug sm:leading-relaxed">
                Enriched with hand-churned A2 cow ghee and cold-pressed coconut oil.
              </p>
            </div>

            {/* Card 10: Row 1, Col 6 - Traditional Spices Cream Card */}
            <div className="row-span-1 col-span-1 w-full h-full bg-[#fcfaf2]/80 border border-[#d8c396]/45 rounded-2xl shadow-sm p-4 sm:p-6 flex flex-col justify-center select-text relative">
              <div className="absolute inset-1.5 border border-[#d8c396]/20 pointer-events-none rounded-xl" />
              <span className="font-sans text-[10px] sm:text-sm tracking-[0.2em] sm:tracking-[0.25em] uppercase text-[#bc9e65] font-bold block mb-1">
                — Aromatic Notes —
              </span>
              <h3 className="font-serif text-base sm:text-lg font-bold tracking-wider text-[#0a4a2b] uppercase mb-1 sm:mb-2">
                Organic Spices
              </h3>
              <p className="font-sans text-xs sm:text-base text-stone-700 leading-snug sm:leading-relaxed">
                Hand-selected black pepper, cardamom, turmeric, and dry chilies sourced from local hills.
              </p>
            </div>

            {/* Card 11: Row 2, Col 6 - Curry Court Image Card */}
            <div className="row-span-1 col-span-1 w-full h-full relative rounded-2xl overflow-hidden border border-[#d8c396]/60 shadow-sm group bg-[#0a4a2b]/10">
              <Image
                src="/images/home/culinary-heritage/cards/smoked.webp"
                alt="Curry Court"
                fill
                sizes="240px"
                className="gallery-img object-cover transition-all duration-[1s]"
              />
              <div className="absolute inset-x-0 bottom-0 bg-gradient-to-t from-black/90 via-black/60 to-transparent p-3 sm:p-4 z-20">
                <span className="font-sans text-[10px] sm:text-sm tracking-[0.1em] sm:tracking-[0.15em] text-[#bc9e65] font-bold uppercase block mb-0.5">
                  Curry Court
                </span>
                <h4 className="font-serif text-xs sm:text-sm font-bold text-white uppercase tracking-wider leading-tight">
                  Smoked Clay Pots
                </h4>
              </div>
              <div className="absolute inset-3 border border-white/20 rounded-xl pointer-events-none z-10" />
            </div>

            {/* Card 12: Row 1, Col 7 - Sweet Delights Dark Green Card */}
            <div className="row-span-1 col-span-1 w-full h-full bg-[#0a4a2b] border border-[#bc9e65]/40 rounded-2xl shadow-sm p-4 sm:p-6 flex flex-col justify-center select-text relative">
              <div className="absolute inset-1.5 border border-[#bc9e65]/20 pointer-events-none rounded-xl" />
              <span className="font-sans text-[10px] sm:text-sm tracking-[0.2em] sm:tracking-[0.25em] uppercase text-[#bc9e65] font-bold block mb-1">
                — Nectars of the South —
              </span>
              <h3 className="font-serif text-base sm:text-lg font-bold tracking-wider text-white uppercase mb-1 sm:mb-2">
                Sweet Delights
              </h3>
              <p className="font-sans text-xs sm:text-base text-[#e4d7bc] leading-snug sm:leading-relaxed">
                End your feast with traditional payasam, cardamomy kesari, and coconut sweets.
              </p>
            </div>

            {/* Card 13: Row 2, Col 7 - Beverage Bar Image Card */}
            <div className="row-span-1 col-span-1 w-full h-full relative rounded-2xl overflow-hidden border border-[#d8c396]/60 shadow-sm group bg-[#0a4a2b]/10">
              <Image
                src="/images/home/culinary-heritage/cards/nectar.webp"
                alt="Beverage Bar"
                fill
                sizes="240px"
                className="gallery-img object-cover transition-all duration-[1s]"
              />
              <div className="absolute inset-x-0 bottom-0 bg-gradient-to-t from-black/90 via-black/60 to-transparent p-3 sm:p-4 z-20">
                <span className="font-sans text-[10px] sm:text-sm tracking-[0.1em] sm:tracking-[0.15em] text-[#bc9e65] font-bold uppercase block mb-0.5">
                  Traditional Drinks
                </span>
                <h4 className="font-serif text-xs sm:text-sm font-bold text-white uppercase tracking-wider leading-tight">
                  Froth Brews & Nectars
                </h4>
              </div>
              <div className="absolute inset-3 border border-white/20 rounded-xl pointer-events-none z-10" />
            </div>

          </div>
        </div>

      </div>

      {/* ==================== PINNED BOTTOM BANNER BAR (OUTSIDE TRACK) ==================== */}
      <div className="absolute bottom-0 left-0 w-full bg-[#0a4a2b] border-t border-b border-[#d8c396]/60 py-2.5 z-30 flex items-center justify-center gap-2 sm:gap-4 pointer-events-none select-none">
        <span className="font-serif text-sm text-[#bc9e65] font-semibold italic hidden sm:block">My Dosa Place</span>
        <span className="h-4 w-[1px] bg-[#bc9e65]/40 hidden sm:block" />
        <span className="font-sans text-[9px] sm:text-sm tracking-[0.1em] sm:tracking-[0.25em] text-[#bc9e65] font-bold uppercase text-center px-2">
          ROOTED IN TRADITION • DRIVEN BY PASSION • SERVED WITH LOVE
        </span>
      </div>

    </div>
  );
}