import {
  Bed,
  BookOpen,
  Briefcase,
  Building,
  Calendar,
  Car,
  CheckCircle,
  ChevronLeft,
  ChevronRight,
  Coffee,
  Dumbbell,
  Heart,
  Home,
  Leaf,
  Mail,
  MapPin,
  Monitor,
  Network,
  Phone,
  Play,
  Shield,
  Sparkles,
  Sun,
  TreePine,
  Trees,
  Users,
  Utensils,
  UtensilsCrossed,
  Wifi,
  X
} from 'lucide-react';
import { motion } from 'motion/react';
import React, { useEffect, useRef, useState } from 'react';
import kautilyaVirtualTourImage from '../assets/Kautilya.png';
import { BrandedTag } from './about/BrandedTag';
import { CTABannerSection } from './CTABannerSection';
import { ImageWithFallback } from './figma/ImageWithFallback';
import { PrimaryCTAButton } from './PrimaryCTAButton';
import { navigateTo } from './Router';
import { TestimonialsSection } from './TestimonialsSection';
import { Button } from './ui/button';
import { Card, CardContent } from './ui/card';
import { Input } from './ui/input';
import { Label } from './ui/label';
import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from './ui/select';
import { Textarea } from './ui/textarea';
import kautilyaLearningStory from '../assets/kautilya-learning-story.jpg';
import campus1 from '../assets/Campus6.jpg';
import campus2 from '../assets/Campus2.jpg';
import campus3 from '../assets/Campus3.jpg';
import campus4 from '../assets/Campus4.jpg';
import campus5 from '../assets/Campus5.jpg';
import campus6 from '../assets/Campus1.jpg';
import classroom1 from '../assets/Classroom1.jpg';
import classroom2 from '../assets/Classroom2.jpg';
import classroom3 from '../assets/Classroom3.jpg';
import classroom4 from '../assets/Classroom4.jpg';
import classroom5 from '../assets/Classroom5.jpg';
import expertSupportImage from '../assets/expert-support.jpg';
import luxuryAccommodationImage from '../assets/luxury-accommodation.jpg';
import fitnessCentreImage from '../assets/Fitness&Recreation-centre.jpg';
import outdoorAmphitheaterImage from '../assets/outdoor-amphitheater.jpg';
import diningexperienceImage from '../assets/dining-experience.jpg';
import privateSpaceImage from '../assets/private-space.jpg';
import executiveBoardroomImage from '../assets/exe-boardroom.jpg';
import morningReflectionImage from '../assets/morning.jpg';
import campusArialViewImage from '../assets/campus-arial-view.jpg';
import { VirtualTour360 } from './VirtualTour360';

const facilityFeatures = [
  {
    title: "Luxury Accommodation",
    description: "Premium residential suites with hotel-standard amenities for extended stays",
    icon: Bed,
    image: luxuryAccommodationImage,
    details: ["Private en-suite rooms", "Premium furnishing", "Air conditioning", "Garden views", "Room service"]
  },
  {
    title: "Fitness & Recreation Centre",
    description: "State-of-the-art fitness facilities and recreational spaces for wellness",
    icon: Dumbbell,
    image: "https://images.unsplash.com/photo-1721394747060-7cfc57104f88?crop=entropy&cs=tinysrgb&fit=max&fm=jpg&ixid=M3w3Nzg4Nzd8MHwxfHNlYXJjaHwxfHxmaXRuZXNzJTIwY2VudGVyJTIwZ3ltJTIwbW9kZXJufGVufDF8fHx8MTc1NjgyNzg1OXww&ixlib=rb-4.1.0&q=80&w=1080",
    details: ["Modern gym equipment", "Yoga studio", "Sports lounge", "Walking track", "Recreational activities"]
  },
  {
    title: "Outdoor Amphitheater",
    description: "Spectacular outdoor venue for large gatherings and presentations",
    icon: TreePine,
    image: "https://images.unsplash.com/photo-1715887377873-980352ddecc8?crop=entropy&cs=tinysrgb&fit=max&fm=jpg&ixid=M3w3Nzg4Nzd8MHwxfHNlYXJjaHwxfHxvdXRkb29yJTIwYW1waGl0aGVhdGVyJTIwdmVudWV8ZW58MXx8fHwxNzU2ODk4OTY3fDA&ixlib=rb-4.1.0&q=80&w=1080",
    details: ["Natural acoustics", "Tiered seating", "Scenic backdrop", "Weather protection", "Professional lighting"]
  },
  {
    title: "Gourmet Dining Experience",
    description: "Exceptional culinary experiences with locally sourced ingredients",
    icon: Utensils,
    image: "https://images.unsplash.com/photo-1532270441355-095a26af8a99?crop=entropy&cs=tinysrgb&fit=max&fm=jpg&ixid=M3w3Nzg4Nzd8MHwxfHNlYXJjaHwxfHxnb3VybWV0JTIwcmVzdGF1cmFudCUyMGRpbmluZ3xlbnwxfHx8fDE3NTY4OTg5NzN8MA&ixlib=rb-4.1.0&q=80&w=1080",
    details: ["Chef-prepared meals", "Local ingredients", "Dietary accommodations", "Fine dining atmosphere", "Wine pairings"]
  },
  {
    title: "Eco-Conscious Design",
    description: "Sustainable architecture harmoniously integrated with natural surroundings",
    icon: Leaf,
    image: "https://images.unsplash.com/photo-1688981783835-67308623dccb?crop=entropy&cs=tinysrgb&fit=max&fm=jpg&ixid=M3w3Nzg4Nzd8MHwxfHNlYXJjaHwxfHxlY28lMjBzdXN0YWluYWJsZSUyMGdyZWVuJTIwYnVpbGRpbmd8ZW58MXx8fHwxNzU2ODk4OTgxfDA&ixlib=rb-4.1.0&q=80&w=1080",
    details: ["Green building design", "Sustainable materials", "Energy efficiency", "Natural lighting", "Minimal environmental impact"]
  }
];

// Virtual Tour Data
const virtualTourStops = [
  {
    id: 'training-amphitheater',
    title: 'Training Amphitheater',
    description: 'Inspire your audience in our largest training space featuring tiered seating and state-of-the-art presentation technology.',
    image: 'https://images.unsplash.com/photo-1526045004414-3e7ed02f9ca1?w=1080&h=720&fit=crop',
    capacity: '80-120 attendees',
    keyHighlight: 'Large-Scale Training Excellence',
    zone: 1,
    features: [
      'Tiered amphitheater seating',
      'Professional stage',
      'Advanced acoustics',
      'Multiple screens',
      'Live streaming capability'
    ]
  },
  {
    id: 'collaboration-suites',
    title: 'Collaboration Suites',
    description: 'Foster deep connections and intensive learning in our intimate spaces perfect for small group work and coaching sessions.',
    image: 'https://images.unsplash.com/photo-1592565276431-c27e6ad5f46a?w=1080&h=720&fit=crop',
    capacity: '4-8 participants',
    keyHighlight: 'Intimate Learning Environment',
    zone: 2,
    features: [
      'Comfortable seating',
      'Natural light',
      'Privacy glass',
      'Dedicated workspace',
      'Tea/coffee station'
    ]
  },
  {
    id: 'outdoor-pavilion',
    title: 'Outdoor Learning Pavilion',
    description: 'Connect with nature while learning in our unique outdoor space that combines fresh air with professional learning environments.',
    image: 'https://images.unsplash.com/photo-1571624436279-b272adf752b5?w=800&h=600&fit=crop',
    capacity: '20-40 participants',
    keyHighlight: 'Nature-Connected Learning',
    zone: 3,
    features: [
      'Weather-protected pavilion',
      'Garden views',
      'Fresh air environment',
      'Flexible seating',
      'Natural acoustics'
    ]
  },
  {
    id: 'residential-quarters',
    title: 'Residential Quarters',
    description: 'Extend your learning journey with comfortable accommodation for multi-day programs featuring hotel-standard amenities.',
    image: 'https://images.unsplash.com/photo-1590490360182-c33d57733427?w=800&h=600&fit=crop',
    capacity: '40 single occupancy rooms',
    keyHighlight: 'Premium Residential Experience',
    zone: 4,
    features: [
      'Private en-suite rooms',
      'Work desk and chair',
      'High-speed WiFi',
      'Air conditioning',
      'Garden/courtyard views'
    ]
  },
  {
    id: 'executive-boardroom',
    title: 'Executive Boardroom',
    description: 'Host high-level strategic discussions in our sophisticated boardroom designed for executive leadership meetings.',
    image: 'https://images.unsplash.com/photo-1497366216548-37526070297c?w=1080&h=720&fit=crop',
    capacity: '12-16 executives',
    keyHighlight: 'Strategic Leadership Hub',
    zone: 5,
    features: [
      'Premium boardroom table',
      'Executive seating',
      '4K presentation displays',
      'Secure video conferencing',
      'Integrated sound system'
    ]
  },
  {
    id: 'innovation-lab',
    title: 'Innovation Lab',
    description: 'Spark creativity and innovation in our flexible workspace designed for design thinking and collaborative problem-solving.',
    image: 'https://images.unsplash.com/photo-1497366412874-3415097a27e7?w=1080&h=720&fit=crop',
    capacity: '15-25 participants',
    keyHighlight: 'Creative Collaboration Space',
    zone: 6,
    features: [
      'Modular furniture setup',
      'Whiteboard walls',
      'Breakout alcoves',
      'Technology integration',
      'Flexible lighting'
    ]
  },
  {
    id: 'wellness-retreat',
    title: 'Wellness & Reflection Area',
    description: 'Recharge and reflect in our tranquil wellness space designed for mindfulness and personal development sessions.',
    image: 'https://images.unsplash.com/photo-1571019613454-1cb2f99b2d8b?w=1080&h=720&fit=crop',
    capacity: '8-15 participants',
    keyHighlight: 'Mindful Leadership Development',
    zone: 7,
    features: [
      'Meditation seating area',
      'Natural lighting',
      'Acoustic privacy',
      'Aromatherapy system',
      'Garden views'
    ]
  },
  {
    id: 'digital-learning-studio',
    title: 'Digital Learning Studio',
    description: 'Experience cutting-edge digital learning with our high-tech studio equipped for virtual reality and interactive sessions.',
    image: 'https://images.unsplash.com/photo-1560472354-b33ff0c44a43?w=1080&h=720&fit=crop',
    capacity: '10-20 participants',
    keyHighlight: 'Future of Learning Technology',
    zone: 8,
    features: [
      'VR/AR capabilities',
      'Interactive displays',
      'Recording equipment',
      'Livestream setup',
      'Digital collaboration tools'
    ]
  }
];


// Facility data for BookingModal
const facilities = [
  {
    id: 'learning-facility',
    name: 'Learning Facility',
    description: 'A purpose-built campus for immersive leadership learning. State-of-the-art facilities designed to foster transformation, collaboration, and growth.',
    capacity: '80-120 people',
    icon: Building,
    features: [
      'State-of-the-art training halls',
      'Advanced AV systems',
      'Flexible seating arrangements',
      'High-speed connectivity',
      'Professional learning environment'
    ],
    videoUrl: 'https://example.com/virtual-tour'
  }
];

// Booking Form Data Interface for BookingModal
interface BookingFormData {
  companyName: string;
  contactName: string;
  email: string;
  phone: string;
  role: string;
  teamSize: string;
  facilityType: string;
  preferredDate: string;
  additionalRequirements: string;
}

export function LearningFacilityNew() {
  // Deluxe Living & Recreation Carousel state and functionality
  const [currentSlide, setCurrentSlide] = useState(0);
  const carouselRef = useRef<HTMLDivElement>(null);

  // Virtual Tour Carousel state and functionality
  const [currentTourSlide, setCurrentTourSlide] = useState(0);
  const tourCarouselRef = useRef<HTMLDivElement>(null);

  // Hero Background Image Carousel state and functionality
  const [currentHeroBackground, setCurrentHeroBackground] = useState(0);

  // Booking Modal state
  const [isModalOpen, setIsModalOpen] = useState(false);
  const [selectedFacility, setSelectedFacility] = useState<typeof facilities[0] | null>(null);

  // Conference/Classroom room background images array for hero section
  const heroBackgroundImages = [
    {
      src: campus5,
      alt: "Modern Conference Room"
    },
    {
      src: campus4,
      alt: "Executive Boardroom"
    },
    {
      src: campus3,
      alt: "Business Training Classroom"
    },
    {
      src: campus2,
      alt: "Corporate Seminar Hall"
    },
    {
      src: campus1,
      alt: "Professional Workshop Venue"
    }
  ];

  // Responsive carousel settings
  const getCarouselSettings = () => {
    if (typeof window !== 'undefined') {
      if (window.innerWidth >= 1200) {
        return { cardsPerView: 3, cardWidth: 33.333, slideWidth: 33.333 };
      } else if (window.innerWidth >= 768) {
        return { cardsPerView: 2, cardWidth: 50, slideWidth: 50 };
      } else {
        return { cardsPerView: 1, cardWidth: 100, slideWidth: 100 };
      }
    }
    return { cardsPerView: 3, cardWidth: 33.333, slideWidth: 33.333 };
  };

  // Virtual tour carousel settings
  const getTourCarouselSettings = () => {
    if (typeof window !== 'undefined') {
      if (window.innerWidth >= 1200) {
        return { cardsPerView: 5, cardWidth: 20, slideWidth: 20 };
      } else if (window.innerWidth >= 768) {
        return { cardsPerView: 3, cardWidth: 33.333, slideWidth: 33.333 };
      } else {
        return { cardsPerView: 1, cardWidth: 100, slideWidth: 100 };
      }
    }
    return { cardsPerView: 5, cardWidth: 20, slideWidth: 20 };
  };

  const [carouselSettings, setCarouselSettings] = useState(getCarouselSettings());
  const [tourCarouselSettings, setTourCarouselSettings] = useState(getTourCarouselSettings());
  const { cardsPerView, cardWidth, slideWidth } = carouselSettings;
  const { cardsPerView: tourCardsPerView, cardWidth: tourCardWidth, slideWidth: tourSlideWidth } = tourCarouselSettings;
  const maxSlide = Math.max(0, facilityFeatures.length - cardsPerView);
  const maxTourSlide = Math.max(0, virtualTourStops.length - tourCardsPerView);


  // Handle window resize
  useEffect(() => {
    const handleResize = () => {
      setCarouselSettings(getCarouselSettings());
      setTourCarouselSettings(getTourCarouselSettings());
      setCurrentSlide(0); // Reset to first slide on resize
      setCurrentTourSlide(0); // Reset tour carousel on resize
    };

    window.addEventListener('resize', handleResize);
    return () => window.removeEventListener('resize', handleResize);
  }, []);

  const scrollLeft = () => {
    if (currentSlide > 0) {
      setCurrentSlide(currentSlide - 1);
    }
  };

  const scrollRight = () => {
    if (currentSlide < maxSlide) {
      setCurrentSlide(currentSlide + 1);
    }
  };

  // Virtual Tour Carousel navigation
  const scrollTourLeft = () => {
    if (currentTourSlide > 0) {
      setCurrentTourSlide(currentTourSlide - 1);
    }
  };

  const scrollTourRight = () => {
    if (currentTourSlide < maxTourSlide) {
      setCurrentTourSlide(currentTourSlide + 1);
    }
  };
  const [currentTourStop, setCurrentTourStop] = useState(0);
  const [isVirtualTourActive, setIsVirtualTourActive] = useState(false);
  const [expandedTourCard, setExpandedTourCard] = useState<string | null>(null);

  useEffect(() => {
    console.log('LearningFacility component mounted'); // Debug log
    window.scrollTo(0, 0);

    // Listen for custom booking modal event from CTAPopupModal
    const handleOpenBookingModal = () => {
      console.log('Custom booking modal event received'); // Debug log
      handleBookNow();
    };

    window.addEventListener('openBookingModal', handleOpenBookingModal);

    // Also check if we should auto-open the booking modal based on URL parameters
    const urlParams = new URLSearchParams(window.location.search);
    if (urlParams.get('autoBooking') === 'true') {
      console.log('Auto-opening booking modal from URL parameter'); // Debug log
      setTimeout(() => handleBookNow(), 100);
    }

    return () => {
      window.removeEventListener('openBookingModal', handleOpenBookingModal);
    };
  }, []);

  // Hero background image carousel auto-rotation effect
  useEffect(() => {
    const interval = setInterval(() => {
      setCurrentHeroBackground((prev) => (prev + 1) % heroBackgroundImages.length);
    }, 3000); // Change background image every 3 seconds

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

  const handleNextStop = () => {
    if (currentTourStop < virtualTourStops.length - 1) {
      setCurrentTourStop(currentTourStop + 1);
    }
  };

  const handlePrevStop = () => {
    if (currentTourStop > 0) {
      setCurrentTourStop(currentTourStop - 1);
    }
  };

  const handleJumpToStop = (index: number) => {
    setCurrentTourStop(index);
  };

  const handleBookNow = () => {
    // Set the first facility as default for booking
    setSelectedFacility(facilities[0]);
    setIsModalOpen(true);
  };

  const handleCloseModal = () => {
    setIsModalOpen(false);
    setSelectedFacility(null);
  };

  const [isVirtualTourOpen, setIsVirtualTourOpen] = useState(false);
  const handleStartTour = () => {
    setIsVirtualTourOpen(true);
  };

  return (
    <div className="min-h-screen" style={{ backgroundColor: '#F7F7FD' }}>

      {/* Hero Section */}
      {/* Service-style hero: full-bleed rotating background images with dark gradient, centered content */}
      <section className="relative min-h-[90vh] flex flex-col" style={{ backgroundColor: '#FFFFFF' }}>
        {/* Rotating Background images + overlay */}
        <div className="absolute inset-0 z-0">
          {heroBackgroundImages.map((image, index) => (
            <div
              key={index}
              className={`absolute inset-0 transition-opacity duration-1000 ease-in-out ${index === currentHeroBackground ? 'opacity-100' : 'opacity-0'
                }`}
            >
              <ImageWithFallback
                src={image.src}
                alt={image.alt}
                className="w-full h-full object-cover"
              />
            </div>
          ))}
          <div className="absolute inset-0 bg-gradient-to-r from-black/80 via-black/70 to-black/60 z-10"></div>
        </div>

        {/* Centered content */}
        <div className="relative z-20 flex-1 flex items-center">
          <div className="container mx-auto section-margin-x">
            <div className="text-center max-w-5xl mx-auto">
              <div className="branded-tag-system-white mb-8 justify-center">
                <div className="dot"></div>
                <span className="text">World-Class Facility</span>
              </div>

              <h1 className="text-h1-white mb-6">Learning Facility</h1>

              <p className="text-body-lg-white mb-8 max-w-2xl mx-auto">
                A purpose-built campus for immersive leadership learning. State-of-the-art facilities
                designed to foster transformation, collaboration, and growth.
              </p>

              <div className="flex flex-col sm:flex-row mb-12 justify-center items-center" style={{ gap: '30px' }}>
                <PrimaryCTAButton
                  text="Take Virtual Tour"
                  onClick={handleStartTour}
                  ariaLabel="Take virtual tour"
                  className="primary-cta-button-blue cta-text-white"
                />

                <Button
                  variant="outline"
                  onClick={handleBookNow}
                  data-booking-trigger
                  className="management-dev-glassmorphic-btn text-body px-8 py-4 min-h-[52px] border transition-all duration-300"
                  style={{
                    fontFamily: 'var(--font-family-base)',
                    padding: '8px 20px',
                    borderRadius: '10px',
                  }}
                  aria-label="Book facility"
                >
                  <Calendar className="w-5 h-5 mr-2" />
                  Book Facility
                </Button>
              </div>
            </div>
          </div>
        </div>

        {/* Background Image Indicators */}
        <div className="relative z-20 border-t border-white/20 backdrop-blur-sm bg-black/20">
          <div className="container mx-auto section-margin-x py-6">
            <div className="flex justify-center items-center space-x-4">
              {/* Current Image Label */}
              <div className="bg-white/10 backdrop-blur-sm rounded-lg px-4 py-2 border border-white/20">
                <p className="text-small-white font-medium">{heroBackgroundImages[currentHeroBackground]?.alt}</p>
                <p className="text-small-white">KLC Learning Spaces</p>
              </div>

              {/* Carousel Indicators */}
              <div className="flex space-x-2">
                {heroBackgroundImages.map((_, index) => (
                  <button
                    key={index}
                    onClick={() => setCurrentHeroBackground(index)}
                    className={`w-2 h-2 rounded-full transition-all duration-300 ${index === currentHeroBackground
                      ? 'bg-yellow-400 w-8'
                      : 'bg-white/40 hover:bg-white/60'
                      }`}
                    aria-label={`Go to ${heroBackgroundImages[index]?.alt}`}
                  />
                ))}
              </div>
            </div>
          </div>
        </div>
      </section>

      {/* The Kautilya Learning Story Section */}
      <section className="py-24 lg:py-32" style={{ backgroundColor: '#FFFFFF' }}>
        <div className="section-margin-x">
          <div className="max-w-7xl mx-auto">
            <div className="grid grid-cols-1 lg:grid-cols-2 gap-16 items-center">
              {/* Image */}
              <div className="order-2 lg:order-1">
                <div className="relative rounded-2xl overflow-hidden shadow-xl">
                  <ImageWithFallback
                    src={kautilyaLearningStory}
                    alt="Kautilya Learning Environment"
                    className="w-full h-[500px] object-cover"
                  />
                  <div className="absolute inset-0 bg-gradient-to-t from-black/20 to-transparent"></div>
                </div>
              </div>

              {/* Content */}
              <div className="order-1 lg:order-2">
                <div className="branded-tag-system mb-6">
                  <span className="dot"></span>
                  <span className="text">OUR STORY</span>
                </div>

                <h2 className="text-h2 mb-6">
                  The Kautilya Learning Story
                </h2>

                <p className="text-body-lg text-muted mb-6 leading-relaxed">
                  From the vision of Kautilya in the 4th century BC, who discovered leadership in the most unexpected places, to the creation of a modern sanctuary for learning, our journey is inspired by timeless wisdom and a commitment to nurturing leaders of tomorrow.
                </p>

                <p className="text-body text-muted mb-6 leading-relaxed">
                  Set amidst the serene Sahyadri hills, just a short drive from Mumbai, Kautilya Leadership Learning Facility blends spirituality, world-class infrastructure, and a tranquil environment to create the perfect space for reflection, collaboration, and growth.
                </p>

                <p className="text-body text-muted leading-relaxed">
                  Here, every corner tells a story — from sacred art that inspires self-discovery, to modern classrooms and collaborative spaces designed to spark innovation.
                </p>
              </div>
            </div>
          </div>
        </div>
      </section>

      {/* Why Kautilya Learning Facility Section */}
      <section className="py-24 lg:py-32" style={{ backgroundColor: '#FFFFFF' }}>
        <div className="section-margin-x">
          <div className="grid grid-cols-12 gap-12 max-w-7xl mx-auto">
            {/* Left: Sticky intro */}
            <div className="col-span-12 lg:col-span-5 sticky top-24 self-start">
              <div className="recognition-header pr-0 lg:pr-8">
                <div className="branded-tag-system mb-6">
                  <span className="dot"></span>
                  <span className="text">WHY CHOOSE US</span>
                </div>
                <h3 className="text-h2 mb-6">Why Kautilya Learning Facility?</h3>
                <p className="text-body-lg text-muted">
                  We've thoughtfully designed every element to create a space that supports deep learning and meaningful connections. Experience the difference of a facility built specifically for leadership transformation.
                </p>
              </div>
            </div>

            {/* Right: Stacked cards with staggered on-scroll animation */}
            <div className="col-span-12 lg:col-span-7">
              <div className="space-y-6" role="list" aria-label="Facility advantages">
                {/* Card 1: Calm Environment */}
                <motion.div
                  role="listitem"
                  initial={{ opacity: 0, y: 40 }}
                  whileInView={{ opacity: 1, y: 0 }}
                  transition={{ duration: 0.6, delay: 0, ease: [0.25, 0.46, 0.45, 0.94] }}
                  viewport={{ once: true, amount: 0.2 }}
                  className="group focus-ring"
                  style={{ willChange: 'transform, opacity' }}
                >
                  <div
                    className="p-8 transition-all duration-300 hover:shadow-xl hover:-translate-y-1 border relative overflow-hidden"
                    style={{ borderColor: 'var(--color-border)', borderRadius: '12px' }}
                  >
                    {/* Background Image */}
                    <div className="absolute inset-0 z-0">
                      <ImageWithFallback
                        src={campusArialViewImage}
                        alt="Calm Environment Background"
                        className="w-full h-full object-cover"
                      />
                      {/* 80% Black Overlay */}
                      <div className="absolute inset-0 bg-black opacity-80"></div>
                    </div>

                    {/* Content */}
                    <div className="relative z-10">
                      {/* Icon and Header Horizontal */}
                      <div className="flex items-center mb-10" style={{ gap: '20px' }}>
                        <Trees className="w-7 h-7 text-white flex-shrink-0 transition-transform duration-300 group-hover:scale-110" aria-hidden="true" />
                        <h4 className="text-h4 mb-0 text-white">Calm Environment</h4>
                      </div>

                      <div>
                        <p className="text-small leading-relaxed mb-5 text-white opacity-90">
                          Surrounded by nature and designed for tranquility—perfect for focused leadership development.
                        </p>
                        <div className="space-y-2">
                          <div className="flex items-center gap-2">
                            <svg className="w-4 h-4 flex-shrink-0 text-white" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2"><path d="M20 6L9 17l-5-5" /></svg>
                            <span className="text-small text-white">Natural surroundings</span>
                          </div>
                          <div className="flex items-center gap-2">
                            <svg className="w-4 h-4 flex-shrink-0 text-white" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2"><path d="M20 6L9 17l-5-5" /></svg>
                            <span className="text-small text-white">Peaceful ambiance</span>
                          </div>
                          <div className="flex items-center gap-2">
                            <svg className="w-4 h-4 flex-shrink-0 text-white" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2"><path d="M20 6L9 17l-5-5" /></svg>
                            <span className="text-small text-white">Distraction-free zones</span>
                          </div>
                        </div>
                      </div>
                    </div>
                  </div>
                </motion.div>

                {/* Card 2: Modern Tools */}
                <motion.div
                  role="listitem"
                  initial={{ opacity: 0, y: 40 }}
                  whileInView={{ opacity: 1, y: 0 }}
                  transition={{ duration: 0.6, delay: 0.15, ease: [0.25, 0.46, 0.45, 0.94] }}
                  viewport={{ once: true, amount: 0.2 }}
                  className="group focus-ring"
                  style={{ willChange: 'transform, opacity' }}
                >
                  <div
                    className="p-8 transition-all duration-300 hover:shadow-xl hover:-translate-y-1 border relative overflow-hidden"
                    style={{ borderColor: 'var(--color-border)', borderRadius: '12px' }}
                  >
                    {/* Background Image */}
                    <div className="absolute inset-0 z-0">
                      <ImageWithFallback
                        src="https://images.unsplash.com/photo-1623715537851-8bc15aa8c145?crop=entropy&cs=tinysrgb&fit=max&fm=jpg&ixid=M3w3Nzg4Nzd8MHwxfHNlYXJjaHwxfHxtb2Rlcm4lMjB0ZWNobm9sb2d5JTIwd29ya3NwYWNlfGVufDF8fHx8MTc1OTQzMjA4Mnww&ixlib=rb-4.1.0&q=80&w=1080"
                        alt="Modern Tools Background"
                        className="w-full h-full object-cover"
                      />
                      {/* 80% Black Overlay */}
                      <div className="absolute inset-0 bg-black opacity-80"></div>
                    </div>

                    {/* Content */}
                    <div className="relative z-10">
                      {/* Icon and Header Horizontal */}
                      <div className="flex items-center mb-10" style={{ gap: '20px' }}>
                        <Monitor className="w-7 h-7 text-white flex-shrink-0 transition-transform duration-300 group-hover:scale-110" aria-hidden="true" />
                        <h4 className="text-h4 mb-0 text-white">Modern Tools</h4>
                      </div>

                      <div>
                        <p className="text-small leading-relaxed mb-5 text-white opacity-90">
                          State-of-the-art digital learning tools integrated into comfortable, well-designed spaces.
                        </p>
                        <div className="space-y-2">
                          <div className="flex items-center gap-2">
                            <svg className="w-4 h-4 flex-shrink-0 text-white" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2"><path d="M20 6L9 17l-5-5" /></svg>
                            <span className="text-small text-white">Advanced AV systems</span>
                          </div>
                          <div className="flex items-center gap-2">
                            <svg className="w-4 h-4 flex-shrink-0 text-white" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2"><path d="M20 6L9 17l-5-5" /></svg>
                            <span className="text-small text-white">Interactive displays</span>
                          </div>
                          <div className="flex items-center gap-2">
                            <svg className="w-4 h-4 flex-shrink-0 text-white" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2"><path d="M20 6L9 17l-5-5" /></svg>
                            <span className="text-small text-white">High-speed connectivity</span>
                          </div>
                        </div>
                      </div>
                    </div>
                  </div>
                </motion.div>

                {/* Card 3: Holistic Growth */}
                <motion.div
                  role="listitem"
                  initial={{ opacity: 0, y: 40 }}
                  whileInView={{ opacity: 1, y: 0 }}
                  transition={{ duration: 0.6, delay: 0.3, ease: [0.25, 0.46, 0.45, 0.94] }}
                  viewport={{ once: true, amount: 0.2 }}
                  className="group focus-ring"
                  style={{ willChange: 'transform, opacity' }}
                >
                  <div
                    className="p-8 transition-all duration-300 hover:shadow-xl hover:-translate-y-1 border relative overflow-hidden"
                    style={{ borderColor: 'var(--color-border)', borderRadius: '12px' }}
                  >
                    {/* Background Image */}
                    <div className="absolute inset-0 z-0">
                      <ImageWithFallback
                        src="https://images.unsplash.com/photo-1687436874174-977fdd9e2cb8?crop=entropy&cs=tinysrgb&fit=max&fm=jpg&ixid=M3w3Nzg4Nzd8MHwxfHNlYXJjaHwxfHxtZWRpdGF0aW9uJTIwd2VsbG5lc3MlMjBob2xpc3RpY3xlbnwxfHx8fDE3NTk0NzczODd8MA&ixlib=rb-4.1.0&q=80&w=1080"
                        alt="Holistic Growth Background"
                        className="w-full h-full object-cover"
                      />
                      {/* 80% Black Overlay */}
                      <div className="absolute inset-0 bg-black opacity-80"></div>
                    </div>

                    {/* Content */}
                    <div className="relative z-10">
                      {/* Icon and Header Horizontal */}
                      <div className="flex items-center mb-10" style={{ gap: '20px' }}>
                        <Sparkles className="w-7 h-7 text-white flex-shrink-0 transition-transform duration-300 group-hover:scale-110" aria-hidden="true" />
                        <h4 className="text-h4 mb-0 text-white">Holistic Growth</h4>
                      </div>

                      <div>
                        <p className="text-small leading-relaxed mb-5 text-white opacity-90">
                          Dedicated reflection spaces and collaboration zones supporting your complete development journey.
                        </p>
                        <div className="space-y-2">
                          <div className="flex items-center gap-2">
                            <svg className="w-4 h-4 flex-shrink-0 text-white" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2"><path d="M20 6L9 17l-5-5" /></svg>
                            <span className="text-small text-white">Meditation areas</span>
                          </div>
                          <div className="flex items-center gap-2">
                            <svg className="w-4 h-4 flex-shrink-0 text-white" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2"><path d="M20 6L9 17l-5-5" /></svg>
                            <span className="text-small text-white">Collaborative spaces</span>
                          </div>
                          <div className="flex items-center gap-2">
                            <svg className="w-4 h-4 flex-shrink-0 text-white" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2"><path d="M20 6L9 17l-5-5" /></svg>
                            <span className="text-small text-white">Wellness amenities</span>
                          </div>
                        </div>
                      </div>
                    </div>
                  </div>
                </motion.div>

                {/* Card 4: Expert Support */}
                <motion.div
                  role="listitem"
                  initial={{ opacity: 0, y: 40 }}
                  whileInView={{ opacity: 1, y: 0 }}
                  transition={{ duration: 0.6, delay: 0.45, ease: [0.25, 0.46, 0.45, 0.94] }}
                  viewport={{ once: true, amount: 0.2 }}
                  className="group focus-ring"
                  style={{ willChange: 'transform, opacity' }}
                >
                  <div
                    className="p-8 transition-all duration-300 hover:shadow-xl hover:-translate-y-1 border relative overflow-hidden"
                    style={{ borderColor: 'var(--color-border)', borderRadius: '12px' }}
                  >
                    {/* Background Image */}
                    <div className="absolute inset-0 z-0">
                      <ImageWithFallback
                        src={expertSupportImage}
                        alt="Expert Support Background"
                        className="w-full h-full object-cover"
                      />
                      {/* 80% Black Overlay */}
                      <div className="absolute inset-0 bg-black opacity-80"></div>
                    </div>

                    {/* Content */}
                    <div className="relative z-10">
                      {/* Icon and Header Horizontal */}
                      <div className="flex items-center mb-10" style={{ gap: '20px' }}>
                        <Users className="w-7 h-7 text-white flex-shrink-0 transition-transform duration-300 group-hover:scale-110" aria-hidden="true" />
                        <h4 className="text-h4 mb-0 text-white">Expert Support</h4>
                      </div>

                      <div>
                        <p className="text-small leading-relaxed mb-5 text-white opacity-90">
                          Experienced facilitators and dedicated staff ensuring every learning experience exceeds expectations.
                        </p>
                        <div className="space-y-2">
                          <div className="flex items-center gap-2">
                            <svg className="w-4 h-4 flex-shrink-0 text-white" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2"><path d="M20 6L9 17l-5-5" /></svg>
                            <span className="text-small text-white">Professional facilitators</span>
                          </div>
                          <div className="flex items-center gap-2">
                            <svg className="w-4 h-4 flex-shrink-0 text-white" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2"><path d="M20 6L9 17l-5-5" /></svg>
                            <span className="text-small text-white">Dedicated staff</span>
                          </div>
                          <div className="flex items-center gap-2">
                            <svg className="w-4 h-4 flex-shrink-0 text-white" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2"><path d="M20 6L9 17l-5-5" /></svg>
                            <span className="text-small text-white">Personalized attention</span>
                          </div>
                        </div>
                      </div>
                    </div>
                  </div>
                </motion.div>
              </div>
            </div>
          </div>
        </div>
      </section>

      {/* Facility Features Grid Section */}
      <section className="py-24 lg:py-32" style={{ backgroundColor: '#FFFFFF' }}>
        <div className="section-margin-x">
          <div className="max-w-7xl mx-auto">
            {/* Header with eyebrow and controls */}
            <div className="mb-12 relative">
              <div className="flex-1 max-w-2xl">
                <div className="branded-tag-system mb-6">
                  <div className="dot"></div>
                  <span className="text">WHAT WE OFFER</span>
                </div>
                <h2 className="text-h2 mb-4 leading-tight">Facility Features</h2>
                <p className="text-body-lg text-muted leading-relaxed">
                  Every element thoughtfully designed to create the ideal learning environment for transformative experiences.
                </p>
              </div>

              {/* Simple controls that scroll the container */}
              <div className="absolute bottom-0 right-0 flex items-center gap-4">
                <span id="lf-features-counter" className="text-body text-muted font-medium">01 / 05</span>
                <div className="flex gap-2">
                  <button
                    onClick={() => {
                      const el = document.getElementById('lf-features-carousel');
                      if (!el) return;
                      el.scrollBy({ left: -384, behavior: 'smooth' });
                      setTimeout(() => {
                        const idx = Math.round((el.scrollLeft + el.clientWidth * 0.1) / (el.clientWidth * 0.75));
                        const num = Math.max(1, Math.min(5, idx + 1));
                        const counter = document.getElementById('lf-features-counter');
                        if (counter) counter.textContent = `${String(num).padStart(2, '0')} / 05`;
                      }, 300);
                    }}
                    className="w-12 h-12 rounded-lg border-2 border-gray-200 flex items-center justify-center hover:border-primary hover:bg-primary hover:text-white transition-all duration-300"
                    aria-label="Previous feature"
                  >
                    <svg className="w-5 h-5" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2"><path strokeLinecap="round" strokeLinejoin="round" d="M15 19l-7-7 7-7" /></svg>
                  </button>
                  <button
                    onClick={() => {
                      const el = document.getElementById('lf-features-carousel');
                      if (!el) return;
                      el.scrollBy({ left: 384, behavior: 'smooth' });
                      setTimeout(() => {
                        const idx = Math.round((el.scrollLeft + el.clientWidth * 0.1) / (el.clientWidth * 0.75));
                        const num = Math.max(1, Math.min(5, idx + 1));
                        const counter = document.getElementById('lf-features-counter');
                        if (counter) counter.textContent = `${String(num).padStart(2, '0')} / 05`;
                      }, 300);
                    }}
                    className="w-12 h-12 rounded-lg border-2 border-gray-200 flex items-center justify-center hover:border-primary hover:bg-primary hover:text-white transition-all duration-300"
                    aria-label="Next feature"
                  >
                    <svg className="w-5 h-5" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2"><path strokeLinecap="round" strokeLinejoin="round" d="M9 5l7 7-7 7" /></svg>
                  </button>
                </div>
              </div>
            </div>

            {/* Carousel */}
            <div className="relative">
              <div className="overflow-hidden">
                <div
                  id="lf-features-carousel"
                  className="flex transition-transform duration-700 ease-in-out gap-4 overflow-x-auto scroll-smooth services-cards-carousel"
                  style={{ scrollSnapType: 'x mandatory', msOverflowStyle: 'none', scrollbarWidth: 'none' }}
                >
                  {/* Feature 1 - Luxury Accommodation */}
                  <div className="flex-shrink-0 w-[70%] mr-7" style={{ scrollSnapAlign: 'start' }}>
                    <div className="border border-gray-200 h-full overflow-hidden rounded-xl bg-white card-shadow-elevated">
                      <div className="p-6">
                        <div className="flex items-stretch">
                          {/* Left: Image */}
                          <div className="flex-shrink-0 self-stretch" style={{ margin: '6px 0 6px 10px', borderRadius: '5px', overflow: 'hidden', width: '270px' }}>
                            <ImageWithFallback
                              src={luxuryAccommodationImage}
                              alt="Luxury Accommodation"
                              className="w-full h-full object-cover"
                              style={{ objectFit: 'cover', objectPosition: 'center', maxHeight: '100%', height: '100%' }}
                            />
                          </div>

                          {/* Right: Content */}
                          <div className="flex-1 pl-7 flex flex-col">
                            <div className="flex items-center gap-4 mb-4">
                              <div className="w-14 h-14 rounded-xl flex items-center justify-center flex-shrink-0" style={{ backgroundColor: 'rgba(4, 4, 91, 0.1)' }}>
                                <Home className="w-7 h-7 text-primary" />
                              </div>
                              <h3 className="text-h4 text-black leading-tight">Luxury Accommodation</h3>
                            </div>

                            <p className="text-body text-muted leading-relaxed mb-6">Premium guest rooms and suites designed for comfort and relaxation, ensuring an exceptional residential learning experience.</p>

                            <div className="mb-6">
                              <h4 className="text-subhead text-black mb-4 font-medium">Key Features:</h4>
                              <div className="grid md:grid-cols-2 gap-3">
                                <div className="flex items-start gap-2">
                                  <svg className="w-4 h-4 flex-shrink-0 mt-0.5 text-primary" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2"><path d="M20 6L9 17l-5-5" /></svg>
                                  <span className="text-small text-muted leading-relaxed">Premium rooms & suites</span>
                                </div>
                                <div className="flex items-start gap-2">
                                  <svg className="w-4 h-4 flex-shrink-0 mt-0.5 text-primary" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2"><path d="M20 6L9 17l-5-5" /></svg>
                                  <span className="text-small text-muted leading-relaxed">Modern amenities</span>
                                </div>
                                <div className="flex items-start gap-2">
                                  <svg className="w-4 h-4 flex-shrink-0 mt-0.5 text-primary" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2"><path d="M20 6L9 17l-5-5" /></svg>
                                  <span className="text-small text-muted leading-relaxed">Comfortable bedding</span>
                                </div>
                                <div className="flex items-start gap-2">
                                  <svg className="w-4 h-4 flex-shrink-0 mt-0.5 text-primary" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2"><path d="M20 6L9 17l-5-5" /></svg>
                                  <span className="text-small text-muted leading-relaxed">Quality furnishings</span>
                                </div>
                              </div>
                            </div>

                            <div className="rounded-lg p-4" style={{ backgroundColor: 'rgba(247, 247, 253, 0.5)' }}>
                              <h4 className="text-subhead text-black mb-3 font-medium">Accommodation:</h4>
                              <div className="flex items-start gap-3">
                                <svg className="w-4 h-4 flex-shrink-0 mt-0.5 text-primary" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2"><path d="M12 19V6m0 0l-7 7m7-7l7 7" /></svg>
                                <span className="text-small text-muted leading-relaxed">
                                  Spacious rooms with elegant design and modern conveniences for restful stays during extended programs.
                                </span>
                              </div>
                            </div>
                          </div>
                        </div>
                      </div>
                    </div>
                  </div>

                  {/* Feature 2 - Fitness & Recreation Centre */}
                  <div className="flex-shrink-0 w-[70%] mr-7" style={{ scrollSnapAlign: 'start' }}>
                    <div className="border border-gray-200 h-full overflow-hidden rounded-xl bg-white card-shadow-elevated">
                      <div className="p-6">
                        <div className="flex items-stretch">
                          {/* Left: Image */}
                          <div className="flex-shrink-0 self-stretch" style={{ margin: '6px 0 6px 10px', borderRadius: '5px', overflow: 'hidden', width: '270px' }}>
                            <ImageWithFallback
                              src={fitnessCentreImage}
                              alt="Fitness & Recreation Centre"
                              className="w-full h-full object-cover"
                              style={{ objectFit: 'cover', objectPosition: 'center', maxHeight: '100%', height: '100%' }}
                            />
                          </div>

                          {/* Right: Content */}
                          <div className="flex-1 pl-7 flex flex-col">
                            <div className="flex items-center gap-4 mb-4">
                              <div className="w-14 h-14 rounded-xl flex items-center justify-center flex-shrink-0" style={{ backgroundColor: 'rgba(4, 4, 91, 0.1)' }}>
                                <Dumbbell className="w-7 h-7 text-primary" />
                              </div>
                              <h3 className="text-h4 text-black leading-tight">Fitness & Recreation Centre</h3>
                            </div>

                            <p className="text-body text-muted leading-relaxed mb-6">State-of-the-art fitness facilities and recreation areas supporting physical wellness alongside leadership development.</p>

                            <div className="mb-6">
                              <h4 className="text-subhead text-black mb-4 font-medium">Key Features:</h4>
                              <div className="grid md:grid-cols-2 gap-3">
                                <div className="flex items-start gap-2">
                                  <svg className="w-4 h-4 flex-shrink-0 mt-0.5 text-primary" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2"><path d="M20 6L9 17l-5-5" /></svg>
                                  <span className="text-small text-muted leading-relaxed">Modern equipment</span>
                                </div>
                                <div className="flex items-start gap-2">
                                  <svg className="w-4 h-4 flex-shrink-0 mt-0.5 text-primary" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2"><path d="M20 6L9 17l-5-5" /></svg>
                                  <span className="text-small text-muted leading-relaxed">Wellness programs</span>
                                </div>
                                <div className="flex items-start gap-2">
                                  <svg className="w-4 h-4 flex-shrink-0 mt-0.5 text-primary" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2"><path d="M20 6L9 17l-5-5" /></svg>
                                  <span className="text-small text-muted leading-relaxed">Recreation spaces</span>
                                </div>
                                <div className="flex items-start gap-2">
                                  <svg className="w-4 h-4 flex-shrink-0 mt-0.5 text-primary" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2"><path d="M20 6L9 17l-5-5" /></svg>
                                  <span className="text-small text-muted leading-relaxed">Professional trainers</span>
                                </div>
                              </div>
                            </div>

                            <div className="rounded-lg p-4" style={{ backgroundColor: 'rgba(247, 247, 253, 0.5)' }}>
                              <h4 className="text-subhead text-black mb-3 font-medium">Wellness:</h4>
                              <div className="flex items-start gap-3">
                                <svg className="w-4 h-4 flex-shrink-0 mt-0.5 text-primary" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2"><path d="M12 19V6m0 0l-7 7m7-7l7 7" /></svg>
                                <span className="text-small text-muted leading-relaxed">
                                  Comprehensive fitness facilities promoting physical and mental well-being throughout your stay.
                                </span>
                              </div>
                            </div>
                          </div>
                        </div>
                      </div>
                    </div>
                  </div>

                  {/* Feature 3 - Outdoor Amphitheater */}
                  <div className="flex-shrink-0 w-[70%] mr-7" style={{ scrollSnapAlign: 'start' }}>
                    <div className="border border-gray-200 h-full overflow-hidden rounded-xl bg-white card-shadow-elevated">
                      <div className="p-6">
                        <div className="flex items-stretch">
                          {/* Left: Image */}
                          <div className="flex-shrink-0 self-stretch" style={{ margin: '6px 0 6px 10px', borderRadius: '5px', overflow: 'hidden', width: '270px' }}>
                            <ImageWithFallback
                              src={outdoorAmphitheaterImage}
                              alt="Outdoor Amphitheater"
                              className="w-full h-full object-cover"
                              style={{ objectFit: 'cover', objectPosition: 'center', maxHeight: '100%', height: '100%' }}
                            />
                          </div>

                          {/* Right: Content */}
                          <div className="flex-1 pl-7 flex flex-col">
                            <div className="flex items-center gap-4 mb-4">
                              <div className="w-14 h-14 rounded-xl flex items-center justify-center flex-shrink-0" style={{ backgroundColor: 'rgba(4, 4, 91, 0.1)' }}>
                                <Sun className="w-7 h-7 text-primary" />
                              </div>
                              <h3 className="text-h4 text-black leading-tight">Outdoor Amphitheater</h3>
                            </div>

                            <p className="text-body text-muted leading-relaxed mb-6">Open-air venue perfect for large gatherings, keynote sessions, and inspiring outdoor learning experiences.</p>

                            <div className="mb-6">
                              <h4 className="text-subhead text-black mb-4 font-medium">Key Features:</h4>
                              <div className="grid md:grid-cols-2 gap-3">
                                <div className="flex items-start gap-2">
                                  <svg className="w-4 h-4 flex-shrink-0 mt-0.5 text-primary" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2"><path d="M20 6L9 17l-5-5" /></svg>
                                  <span className="text-small text-muted leading-relaxed">Natural setting</span>
                                </div>
                                <div className="flex items-start gap-2">
                                  <svg className="w-4 h-4 flex-shrink-0 mt-0.5 text-primary" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2"><path d="M20 6L9 17l-5-5" /></svg>
                                  <span className="text-small text-muted leading-relaxed">Large capacity</span>
                                </div>
                                <div className="flex items-start gap-2">
                                  <svg className="w-4 h-4 flex-shrink-0 mt-0.5 text-primary" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2"><path d="M20 6L9 17l-5-5" /></svg>
                                  <span className="text-small text-muted leading-relaxed">Audio systems</span>
                                </div>
                                <div className="flex items-start gap-2">
                                  <svg className="w-4 h-4 flex-shrink-0 mt-0.5 text-primary" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2"><path d="M20 6L9 17l-5-5" /></svg>
                                  <span className="text-small text-muted leading-relaxed">Flexible seating</span>
                                </div>
                              </div>
                            </div>

                            <div className="rounded-lg p-4" style={{ backgroundColor: 'rgba(247, 247, 253, 0.5)' }}>
                              <h4 className="text-subhead text-black mb-3 font-medium">Venue:</h4>
                              <div className="flex items-start gap-3">
                                <svg className="w-4 h-4 flex-shrink-0 mt-0.5 text-primary" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2"><path d="M12 19V6m0 0l-7 7m7-7l7 7" /></svg>
                                <span className="text-small text-muted leading-relaxed">
                                  Unique outdoor space ideal for workshops, ceremonies, and memorable group experiences.
                                </span>
                              </div>
                            </div>
                          </div>
                        </div>
                      </div>
                    </div>
                  </div>

                  {/* Feature 4 - Gourmet Dining Experience */}
                  <div className="flex-shrink-0 w-[70%] mr-7" style={{ scrollSnapAlign: 'start' }}>
                    <div className="border border-gray-200 h-full overflow-hidden rounded-xl bg-white card-shadow-elevated">
                      <div className="p-6">
                        <div className="flex items-stretch">
                          {/* Left: Image */}
                          <div className="flex-shrink-0 self-stretch" style={{ margin: '6px 0 6px 10px', borderRadius: '5px', overflow: 'hidden', width: '270px' }}>
                            <ImageWithFallback
                              src={diningexperienceImage}
                              alt="Gourmet Dining Experience"
                              className="w-full h-full object-cover"
                              style={{ objectFit: 'cover', objectPosition: 'center', maxHeight: '100%', height: '100%' }}
                            />
                          </div>

                          {/* Right: Content */}
                          <div className="flex-1 pl-7 flex flex-col">
                            <div className="flex items-center gap-4 mb-4">
                              <div className="w-14 h-14 rounded-xl flex items-center justify-center flex-shrink-0" style={{ backgroundColor: 'rgba(4, 4, 91, 0.1)' }}>
                                <UtensilsCrossed className="w-7 h-7 text-primary" />
                              </div>
                              <h3 className="text-h4 text-black leading-tight">Gourmet Dining Experience</h3>
                            </div>

                            <p className="text-body text-muted leading-relaxed mb-6">Exceptional culinary experiences featuring chef-prepared meals using fresh, locally-sourced ingredients.</p>

                            <div className="mb-6">
                              <h4 className="text-subhead text-black mb-4 font-medium">Key Features:</h4>
                              <div className="grid md:grid-cols-2 gap-3">
                                <div className="flex items-start gap-2">
                                  <svg className="w-4 h-4 flex-shrink-0 mt-0.5 text-primary" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2"><path d="M20 6L9 17l-5-5" /></svg>
                                  <span className="text-small text-muted leading-relaxed">Chef-prepared meals</span>
                                </div>
                                <div className="flex items-start gap-2">
                                  <svg className="w-4 h-4 flex-shrink-0 mt-0.5 text-primary" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2"><path d="M20 6L9 17l-5-5" /></svg>
                                  <span className="text-small text-muted leading-relaxed">Diverse menu options</span>
                                </div>
                                <div className="flex items-start gap-2">
                                  <svg className="w-4 h-4 flex-shrink-0 mt-0.5 text-primary" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2"><path d="M20 6L9 17l-5-5" /></svg>
                                  <span className="text-small text-muted leading-relaxed">Fresh ingredients</span>
                                </div>
                                <div className="flex items-start gap-2">
                                  <svg className="w-4 h-4 flex-shrink-0 mt-0.5 text-primary" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2"><path d="M20 6L9 17l-5-5" /></svg>
                                  <span className="text-small text-muted leading-relaxed">Dietary accommodations</span>
                                </div>
                              </div>
                            </div>

                            <div className="rounded-lg p-4" style={{ backgroundColor: 'rgba(247, 247, 253, 0.5)' }}>
                              <h4 className="text-subhead text-black mb-3 font-medium">Dining:</h4>
                              <div className="flex items-start gap-3">
                                <svg className="w-4 h-4 flex-shrink-0 mt-0.5 text-primary" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2"><path d="M12 19V6m0 0l-7 7m7-7l7 7" /></svg>
                                <span className="text-small text-muted leading-relaxed">
                                  Premium dining experiences with customizable menus catering to all dietary preferences and needs.
                                </span>
                              </div>
                            </div>
                          </div>
                        </div>
                      </div>
                    </div>
                  </div>

                  {/* Feature 5 - Eco-Conscious Design */}
                  <div className="flex-shrink-0 w-[70%] mr-7" style={{ scrollSnapAlign: 'start' }}>
                    <div className="border border-gray-200 h-full overflow-hidden rounded-xl bg-white card-shadow-elevated">
                      <div className="p-6">
                        <div className="flex items-stretch">
                          {/* Left: Image */}
                          <div className="flex-shrink-0 self-stretch" style={{ margin: '6px 0 6px 10px', borderRadius: '5px', overflow: 'hidden', width: '270px' }}>
                            <ImageWithFallback
                              src="https://images.unsplash.com/photo-1630404991412-9504d094e8ba?crop=entropy&cs=tinysrgb&fit=max&fm=jpg&ixid=M3w3Nzg4Nzd8MHwxfHNlYXJjaHwxfHxzdXN0YWluYWJsZSUyMGdyZWVuJTIwYnVpbGRpbmd8ZW58MXx8fHwxNzU5NDM5NzUwfDA&ixlib=rb-4.1.0&q=80&w=1080"
                              alt="Eco-Conscious Design"
                              className="w-full h-full object-cover"
                              style={{ objectFit: 'cover', objectPosition: 'center', maxHeight: '100%', height: '100%' }}
                            />
                          </div>

                          {/* Right: Content */}
                          <div className="flex-1 pl-7 flex flex-col">
                            <div className="flex items-center gap-4 mb-4">
                              <div className="w-14 h-14 rounded-xl flex items-center justify-center flex-shrink-0" style={{ backgroundColor: 'rgba(4, 4, 91, 0.1)' }}>
                                <Trees className="w-7 h-7 text-primary" />
                              </div>
                              <h3 className="text-h4 text-black leading-tight">Eco-Conscious Design</h3>
                            </div>

                            <p className="text-body text-muted leading-relaxed mb-6">Sustainable architecture and operations reflecting our commitment to environmental stewardship and responsible practices.</p>

                            <div className="mb-6">
                              <h4 className="text-subhead text-black mb-4 font-medium">Key Features:</h4>
                              <div className="grid md:grid-cols-2 gap-3">
                                <div className="flex items-start gap-2">
                                  <svg className="w-4 h-4 flex-shrink-0 mt-0.5 text-primary" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2"><path d="M20 6L9 17l-5-5" /></svg>
                                  <span className="text-small text-muted leading-relaxed">Sustainable materials</span>
                                </div>
                                <div className="flex items-start gap-2">
                                  <svg className="w-4 h-4 flex-shrink-0 mt-0.5 text-primary" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2"><path d="M20 6L9 17l-5-5" /></svg>
                                  <span className="text-small text-muted leading-relaxed">Energy efficient</span>
                                </div>
                                <div className="flex items-start gap-2">
                                  <svg className="w-4 h-4 flex-shrink-0 mt-0.5 text-primary" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2"><path d="M20 6L9 17l-5-5" /></svg>
                                  <span className="text-small text-muted leading-relaxed">Green spaces</span>
                                </div>
                                <div className="flex items-start gap-2">
                                  <svg className="w-4 h-4 flex-shrink-0 mt-0.5 text-primary" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2"><path d="M20 6L9 17l-5-5" /></svg>
                                  <span className="text-small text-muted leading-relaxed">Environmental care</span>
                                </div>
                              </div>
                            </div>

                            <div className="rounded-lg p-4" style={{ backgroundColor: 'rgba(247, 247, 253, 0.5)' }}>
                              <h4 className="text-subhead text-black mb-3 font-medium">Sustainability:</h4>
                              <div className="flex items-start gap-3">
                                <svg className="w-4 h-4 flex-shrink-0 mt-0.5 text-primary" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2"><path d="M12 19V6m0 0l-7 7m7-7l7 7" /></svg>
                                <span className="text-small text-muted leading-relaxed">
                                  Environmentally responsible facility designed to minimize ecological impact while maximizing learning outcomes.
                                </span>
                              </div>
                            </div>
                          </div>
                        </div>
                      </div>
                    </div>
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>
      </section>

      {/* Experience Through Pictures - Image Gallery Section */}
      {/* Experience Through Pictures - Card Design */}
      <section className="py-24 lg:py-32" style={{ backgroundColor: '#FFFFFF' }}>
        <div className="section-margin-x">
          <div className="max-w-7xl mx-auto">
            {/* Header */}
            <div className="text-center mb-12">
              <div className="branded-tag-system mb-4 justify-center">
                <span className="dot"></span>
                <span className="text">VISUAL TOUR</span>
              </div>

              <h2 className="text-h2 mb-4">
                Experience Through Pictures
              </h2>

              <p className="text-body text-muted max-w-2xl mx-auto">
                Explore our world-class facility spaces designed for transformative learning experiences.
              </p>
            </div>

            {/* Tab Navigation */}
            <div className="flex items-center justify-center mb-10">
              <div className="inline-flex bg-gray-50 rounded-xl p-1.5 border border-gray-200 shadow-sm">
                {['Campus', 'Classroom', 'Auditorium', 'Boardroom'].map((tab) => (
                  <button
                    key={tab}
                    onClick={() => {
                      const tabButtons = document.querySelectorAll('.facility-tab-btn');
                      const tabContents = document.querySelectorAll('.facility-tab-content');

                      tabButtons.forEach(btn => {
                        btn.classList.remove('bg-[#04045B]', 'text-white', 'shadow-md');
                        btn.classList.add('text-gray-600', 'hover:text-gray-900');
                      });

                      tabContents.forEach(content => {
                        content.classList.add('hidden');
                      });

                      const clickedBtn = document.querySelector(`[data-tab="${tab.toLowerCase()}"]`);
                      clickedBtn?.classList.remove('text-gray-600', 'hover:text-gray-900');
                      clickedBtn?.classList.add('bg-[#04045B]', 'text-white', 'shadow-md');

                      const targetContent = document.querySelector(`[data-tab-content="${tab.toLowerCase()}"]`);
                      targetContent?.classList.remove('hidden');
                    }}
                    data-tab={tab.toLowerCase()}
                    className={`facility-tab-btn px-6 py-3 rounded-lg transition-all duration-300 ${tab === 'Campus'
                      ? 'bg-[#04045B] text-white shadow-md'
                      : 'text-gray-600 hover:text-gray-900 hover:bg-white'
                      }`}
                  >
                    {tab}
                  </button>
                ))}
              </div>
            </div>

            {/* Campus Tab Content - 1 Large + 4 Small Layout */}
            <div data-tab-content="campus" className="facility-tab-content">
              <div className="grid grid-cols-1 lg:grid-cols-2 gap-4 h-[500px]">
                {/* Large Image - Left Side */}
                <div className="relative h-full overflow-hidden rounded-2xl group cursor-pointer shadow-lg hover:shadow-2xl transition-all duration-300">
                  <ImageWithFallback
                    src={campusArialViewImage}
                    alt="Campus Aerial View"
                    className="w-full h-full object-cover group-hover:scale-105 transition-transform duration-500"
                  />
                  <div className="absolute inset-0 bg-gradient-to-t from-black/70 via-black/20 to-transparent"></div>

                  <div className="absolute bottom-0 left-0 right-0 p-6">
                    <h3 className="text-white text-2xl font-semibold mb-2">Campus Aerial View</h3>
                    <p className="text-white/90">Kautilya Learning Centre</p>
                  </div>
                </div>

                {/* 4 Small Cards - Right Side (2x2 Grid) */}
                <div className="grid grid-cols-2 gap-4 h-full">
                  {/* Card 1 */}
                  <div className="relative overflow-hidden rounded-2xl group cursor-pointer shadow-lg hover:shadow-2xl transition-all duration-300">
                    <ImageWithFallback
                      src={morningReflectionImage}
                      alt="Campus Gardens"
                      className="w-full h-full object-cover group-hover:scale-105 transition-transform duration-500"
                    />
                    <div className="absolute inset-0 bg-gradient-to-t from-black/70 via-black/20 to-transparent"></div>

                    <div className="absolute bottom-0 left-0 right-0 p-4">
                      <h3 className="text-white font-semibold mb-1">Outdoor Gardens</h3>
                      <p className="text-white/90 text-sm">Kautilya Learning Centre</p>
                    </div>
                  </div>

                  {/* Card 2 */}
                  <div className="relative overflow-hidden rounded-2xl group cursor-pointer shadow-lg hover:shadow-2xl transition-all duration-300">
                    <ImageWithFallback
                      src={campus3}
                      alt="Green Spaces"
                      className="w-full h-full object-cover group-hover:scale-105 transition-transform duration-500"
                    />
                    <div className="absolute inset-0 bg-gradient-to-t from-black/70 via-black/20 to-transparent"></div>

                    <div className="absolute bottom-0 left-0 right-0 p-4">
                      <h3 className="text-white font-semibold mb-1">Green Spaces</h3>
                      <p className="text-white/90 text-sm">Kautilya Learning Centre</p>
                    </div>
                  </div>

                  {/* Card 3 */}
                  <div className="relative overflow-hidden rounded-2xl group cursor-pointer shadow-lg hover:shadow-2xl transition-all duration-300">
                    <ImageWithFallback
                      src={campus1}
                      alt="Campus Entrance"
                      className="w-full h-full object-cover group-hover:scale-105 transition-transform duration-500"
                    />
                    <div className="absolute inset-0 bg-gradient-to-t from-black/70 via-black/20 to-transparent"></div>

                    <div className="absolute bottom-0 left-0 right-0 p-4">
                      <h3 className="text-white font-semibold mb-1">Main Entrance</h3>
                      <p className="text-white/90 text-sm">Kautilya Learning Centre</p>
                    </div>
                  </div>

                  {/* Card 4 */}
                  <div className="relative overflow-hidden rounded-2xl group cursor-pointer shadow-lg hover:shadow-2xl transition-all duration-300">
                    <ImageWithFallback
                      src={classroom4}
                      alt="Campus Facilities"
                      className="w-full h-full object-cover group-hover:scale-105 transition-transform duration-500"
                    />
                    <div className="absolute inset-0 bg-gradient-to-t from-black/70 via-black/20 to-transparent"></div>

                    <div className="absolute bottom-0 left-0 right-0 p-4">
                      <h3 className="text-white font-semibold mb-1">Study Areas</h3>
                      <p className="text-white/90 text-sm">Kautilya Learning Centre</p>
                    </div>
                  </div>
                </div>
              </div>
            </div>

            {/* Classroom Tab Content - 1 Large + 4 Small Layout */}
            <div data-tab-content="classroom" className="facility-tab-content hidden">
              <div className="grid grid-cols-1 lg:grid-cols-2 gap-4 h-[500px]">
                {/* Large Image - Left Side */}
                <div className="relative h-full overflow-hidden rounded-2xl group cursor-pointer shadow-lg hover:shadow-2xl transition-all duration-300">
                  <ImageWithFallback
                    src={classroom1}
                    alt="Modern Classroom"
                    className="w-full h-full object-cover group-hover:scale-105 transition-transform duration-500"
                  />
                  <div className="absolute inset-0 bg-gradient-to-t from-black/70 via-black/20 to-transparent"></div>

                  <div className="absolute bottom-0 left-0 right-0 p-6">
                    <h3 className="text-white text-2xl font-semibold mb-2">Modern Classroom</h3>
                    <p className="text-white/90">Kautilya Learning Centre</p>
                  </div>
                </div>

                {/* 4 Small Cards - Right Side (2x2 Grid) */}
                <div className="grid grid-cols-2 gap-4 h-full">
                  {/* Card 1 */}
                  <div className="relative overflow-hidden rounded-2xl group cursor-pointer shadow-lg hover:shadow-2xl transition-all duration-300">
                    <ImageWithFallback
                      src={classroom2}
                      alt="Interactive Space"
                      className="w-full h-full object-cover group-hover:scale-105 transition-transform duration-500"
                    />
                    <div className="absolute inset-0 bg-gradient-to-t from-black/70 via-black/20 to-transparent"></div>

                    <div className="absolute bottom-0 left-0 right-0 p-4">
                      <h3 className="text-white font-semibold mb-1">Interactive Space</h3>
                      <p className="text-white/90 text-sm">Kautilya Learning Centre</p>
                    </div>
                  </div>

                  {/* Card 2 */}
                  <div className="relative overflow-hidden rounded-2xl group cursor-pointer shadow-lg hover:shadow-2xl transition-all duration-300">
                    <ImageWithFallback
                      src={classroom3}
                      alt="Learning Tools"
                      className="w-full h-full object-cover group-hover:scale-105 transition-transform duration-500"
                    />
                    <div className="absolute inset-0 bg-gradient-to-t from-black/70 via-black/20 to-transparent"></div>

                    <div className="absolute bottom-0 left-0 right-0 p-4">
                      <h3 className="text-white font-semibold mb-1">Learning Tools</h3>
                      <p className="text-white/90 text-sm">Kautilya Learning Centre</p>
                    </div>
                  </div>

                  {/* Card 3 */}
                  <div className="relative overflow-hidden rounded-2xl group cursor-pointer shadow-lg hover:shadow-2xl transition-all duration-300">
                    <ImageWithFallback
                      src={classroom4}
                      alt="Collaboration Area"
                      className="w-full h-full object-cover group-hover:scale-105 transition-transform duration-500"
                    />
                    <div className="absolute inset-0 bg-gradient-to-t from-black/70 via-black/20 to-transparent"></div>

                    <div className="absolute bottom-0 left-0 right-0 p-4">
                      <h3 className="text-white font-semibold mb-1">Collaboration Area</h3>
                      <p className="text-white/90 text-sm">Kautilya Learning Centre</p>
                    </div>
                  </div>

                  {/* Card 4 */}
                  <div className="relative overflow-hidden rounded-2xl group cursor-pointer shadow-lg hover:shadow-2xl transition-all duration-300">
                    <ImageWithFallback
                      src={classroom5}
                      alt="Technology Hub"
                      className="w-full h-full object-cover group-hover:scale-105 transition-transform duration-500"
                    />
                    <div className="absolute inset-0 bg-gradient-to-t from-black/70 via-black/20 to-transparent"></div>

                    <div className="absolute bottom-0 left-0 right-0 p-4">
                      <h3 className="text-white font-semibold mb-1">Technology Hub</h3>
                      <p className="text-white/90 text-sm">Kautilya Learning Centre</p>
                    </div>
                  </div>
                </div>
              </div>
            </div>

            {/* Auditorium Tab Content - 1 Large + 4 Small Layout */}
            <div data-tab-content="auditorium" className="facility-tab-content hidden">
              <div className="grid grid-cols-1 lg:grid-cols-2 gap-4 h-[500px]">
                {/* Large Image - Left Side */}
                <div className="relative h-full overflow-hidden rounded-2xl group cursor-pointer shadow-lg hover:shadow-2xl transition-all duration-300">
                  <ImageWithFallback
                    src={executiveBoardroomImage}
                    alt="Main Auditorium"
                    className="w-full h-full object-cover group-hover:scale-105 transition-transform duration-500"
                  />
                  <div className="absolute inset-0 bg-gradient-to-t from-black/70 via-black/20 to-transparent"></div>

                  <div className="absolute bottom-0 left-0 right-0 p-6">
                    <h3 className="text-white text-2xl font-semibold mb-2">Main Auditorium Hall</h3>
                    <p className="text-white/90">Kautilya Learning Centre</p>
                  </div>
                </div>

                {/* 4 Small Cards - Right Side (2x2 Grid) */}
                <div className="grid grid-cols-2 gap-4 h-full">
                  {/* Card 1 */}
                  <div className="relative overflow-hidden rounded-2xl group cursor-pointer shadow-lg hover:shadow-2xl transition-all duration-300">
                    <ImageWithFallback
                      src={outdoorAmphitheaterImage}
                      alt="Stage Area"
                      className="w-full h-full object-cover group-hover:scale-105 transition-transform duration-500"
                    />
                    <div className="absolute inset-0 bg-gradient-to-t from-black/70 via-black/20 to-transparent"></div>

                    <div className="absolute bottom-0 left-0 right-0 p-4">
                      <h3 className="text-white font-semibold mb-1">Stage Area</h3>
                      <p className="text-white/90 text-sm">Kautilya Learning Centre</p>
                    </div>
                  </div>

                  {/* Card 2 */}
                  <div className="relative overflow-hidden rounded-2xl group cursor-pointer shadow-lg hover:shadow-2xl transition-all duration-300">
                    <ImageWithFallback
                      src={campus6}
                      alt="Premium Seating"
                      className="w-full h-full object-cover group-hover:scale-105 transition-transform duration-500"
                    />
                    <div className="absolute inset-0 bg-gradient-to-t from-black/70 via-black/20 to-transparent"></div>

                    <div className="absolute bottom-0 left-0 right-0 p-4">
                      <h3 className="text-white font-semibold mb-1">Premium Seating</h3>
                      <p className="text-white/90 text-sm">Kautilya Learning Centre</p>
                    </div>
                  </div>

                  {/* Card 3 */}
                  <div className="relative overflow-hidden rounded-2xl group cursor-pointer shadow-lg hover:shadow-2xl transition-all duration-300">
                    <ImageWithFallback
                      src={classroom1}
                      alt="AV Technology"
                      className="w-full h-full object-cover group-hover:scale-105 transition-transform duration-500"
                    />
                    <div className="absolute inset-0 bg-gradient-to-t from-black/70 via-black/20 to-transparent"></div>

                    <div className="absolute bottom-0 left-0 right-0 p-4">
                      <h3 className="text-white font-semibold mb-1">AV Technology</h3>
                      <p className="text-white/90 text-sm">Kautilya Learning Centre</p>
                    </div>
                  </div>

                  {/* Card 4 */}
                  <div className="relative overflow-hidden rounded-2xl group cursor-pointer shadow-lg hover:shadow-2xl transition-all duration-300">
                    <ImageWithFallback
                      src={campus4}
                      alt="Lighting Setup"
                      className="w-full h-full object-cover group-hover:scale-105 transition-transform duration-500"
                    />
                    <div className="absolute inset-0 bg-gradient-to-t from-black/70 via-black/20 to-transparent"></div>

                    <div className="absolute bottom-0 left-0 right-0 p-4">
                      <h3 className="text-white font-semibold mb-1">Lighting Setup</h3>
                      <p className="text-white/90 text-sm">Kautilya Learning Centre</p>
                    </div>
                  </div>
                </div>
              </div>
            </div>

            {/* Boardroom Tab Content - 1 Large + 4 Small Layout */}
            <div data-tab-content="boardroom" className="facility-tab-content hidden">
              <div className="grid grid-cols-1 lg:grid-cols-2 gap-4 h-[500px]">
                {/* Large Image - Left Side */}
                <div className="relative h-full overflow-hidden rounded-2xl group cursor-pointer shadow-lg hover:shadow-2xl transition-all duration-300">
                  <ImageWithFallback
                    src={executiveBoardroomImage}
                    alt="Executive Boardroom"
                    className="w-full h-full object-cover group-hover:scale-105 transition-transform duration-500"
                  />
                  <div className="absolute inset-0 bg-gradient-to-t from-black/70 via-black/20 to-transparent"></div>

                  <div className="absolute bottom-0 left-0 right-0 p-6">
                    <h3 className="text-white text-2xl font-semibold mb-2">Executive Boardroom</h3>
                    <p className="text-white/90">Kautilya Learning Centre</p>
                  </div>
                </div>

                {/* 4 Small Cards - Right Side (2x2 Grid) */}
                <div className="grid grid-cols-2 gap-4 h-full">
                  {/* Card 1 */}
                  <div className="relative overflow-hidden rounded-2xl group cursor-pointer shadow-lg hover:shadow-2xl transition-all duration-300">
                    <ImageWithFallback
                      src="https://images.unsplash.com/photo-1568992687947-868a62a9f521?w=600&h=600&fit=crop"
                      alt="Conference Setup"
                      className="w-full h-full object-cover group-hover:scale-105 transition-transform duration-500"
                    />
                    <div className="absolute inset-0 bg-gradient-to-t from-black/70 via-black/20 to-transparent"></div>

                    <div className="absolute bottom-0 left-0 right-0 p-4">
                      <h3 className="text-white font-semibold mb-1">Conference Setup</h3>
                      <p className="text-white/90 text-sm">Kautilya Learning Centre</p>
                    </div>
                  </div>

                  {/* Card 2 */}
                  <div className="relative overflow-hidden rounded-2xl group cursor-pointer shadow-lg hover:shadow-2xl transition-all duration-300">
                    <ImageWithFallback
                      src={expertSupportImage}
                      alt="Meeting Technology"
                      className="w-full h-full object-cover group-hover:scale-105 transition-transform duration-500"
                    />
                    <div className="absolute inset-0 bg-gradient-to-t from-black/70 via-black/20 to-transparent"></div>

                    <div className="absolute bottom-0 left-0 right-0 p-4">
                      <h3 className="text-white font-semibold mb-1">Meeting Technology</h3>
                      <p className="text-white/90 text-sm">Kautilya Learning Centre</p>
                    </div>
                  </div>

                  {/* Card 3 */}
                  <div className="relative overflow-hidden rounded-2xl group cursor-pointer shadow-lg hover:shadow-2xl transition-all duration-300">
                    <ImageWithFallback
                      src="https://images.unsplash.com/photo-1543269865-cbf427effbad?w=600&h=600&fit=crop"
                      alt="Premium Amenities"
                      className="w-full h-full object-cover group-hover:scale-105 transition-transform duration-500"
                    />
                    <div className="absolute inset-0 bg-gradient-to-t from-black/70 via-black/20 to-transparent"></div>

                    <div className="absolute bottom-0 left-0 right-0 p-4">
                      <h3 className="text-white font-semibold mb-1">Premium Amenities</h3>
                      <p className="text-white/90 text-sm">Kautilya Learning Centre</p>
                    </div>
                  </div>

                  {/* Card 4 */}
                  <div className="relative overflow-hidden rounded-2xl group cursor-pointer shadow-lg hover:shadow-2xl transition-all duration-300">
                    <ImageWithFallback
                      src={privateSpaceImage}
                      alt="Private Meeting Space"
                      className="w-full h-full object-cover group-hover:scale-105 transition-transform duration-500"
                    />
                    <div className="absolute inset-0 bg-gradient-to-t from-black/70 via-black/20 to-transparent"></div>

                    <div className="absolute bottom-0 left-0 right-0 p-4">
                      <h3 className="text-white font-semibold mb-1">Private Space</h3>
                      <p className="text-white/90 text-sm">Kautilya Learning Centre</p>
                    </div>
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>
      </section>

      {/* A Day at Kautilya - Timeline Section */}
      <section className="py-24 lg:py-32" style={{ backgroundColor: '#FFFFFF' }}>
        <div className="section-margin-x">
          <div className="max-w-6xl mx-auto">
            <div className="text-center mb-16">
              <div className="branded-tag-system mb-6 justify-center">
                <span className="dot"></span>
                <span className="text">DAILY EXPERIENCE</span>
              </div>

              <h2 className="text-h2 mb-6">
                A Day at Kautilya
              </h2>

              <p className="text-body-lg text-muted max-w-3xl mx-auto">
                Experience the rhythm of learning, reflection, and growth at our facility.
              </p>
            </div>

            {/* Timeline */}
            <div className="relative">
              {/* Timeline Line - Desktop */}
              <div className="hidden lg:block absolute left-1/2 top-0 bottom-0 w-px bg-gray-200 transform -translate-x-1/2"></div>

              <div className="space-y-12">
                {/* Timeline Item 1 */}
                <div className="relative flex flex-col lg:flex-row items-center lg:justify-between gap-8">
                  <div className="lg:w-5/12 lg:text-right">
                    <div className="inline-block bg-[#F8C301]/10 px-4 py-2 rounded-lg mb-3">
                      <span className="text-small font-semibold" style={{ color: '#04045B' }}>Morning</span>
                    </div>
                    <h4 className="text-h4 mb-2">Morning reflection & mindfulness</h4>
                    <p className="text-body text-muted">
                      Begin your day with calm intention, setting the tone for focused learning and personal growth in our dedicated meditation spaces.
                    </p>
                  </div>

                  {/* Center Dot */}
                  <div className="hidden lg:flex absolute left-1/2 transform -translate-x-1/2 w-4 h-4 rounded-full bg-[#F8C301] border-4 border-white shadow-md z-10"></div>

                  <div className="lg:w-5/12">
                    <div className="relative rounded-xl overflow-hidden">
                      <ImageWithFallback
                        src={morningReflectionImage}
                        alt="Morning Reflection"
                        className="w-full h-48 object-cover"
                      />
                    </div>
                  </div>
                </div>

                {/* Timeline Item 2 */}
                <div className="relative flex flex-col lg:flex-row-reverse items-center lg:justify-between gap-8">
                  <div className="lg:w-5/12 lg:text-left">
                    <div className="inline-block bg-[#F8C301]/10 px-4 py-2 rounded-lg mb-3">
                      <span className="text-small font-semibold" style={{ color: '#04045B' }}>Mid-Morning</span>
                    </div>
                    <h4 className="text-h4 mb-2">Interactive classroom learning</h4>
                    <p className="text-body text-muted">
                      Engage in dynamic sessions with expert facilitators in modern, technology-enabled classrooms designed for maximum learning impact.
                    </p>
                  </div>

                  {/* Center Dot */}
                  <div className="hidden lg:flex absolute left-1/2 transform -translate-x-1/2 w-4 h-4 rounded-full bg-[#F8C301] border-4 border-white shadow-md z-10"></div>

                  <div className="lg:w-5/12">
                    <div className="relative rounded-xl overflow-hidden">
                      <ImageWithFallback
                        src={campus3}
                        alt="Classroom Learning"
                        className="w-full h-48 object-cover"
                      />
                    </div>
                  </div>
                </div>

                {/* Timeline Item 3 */}
                <div className="relative flex flex-col lg:flex-row items-center lg:justify-between gap-8">
                  <div className="lg:w-5/12 lg:text-right">
                    <div className="inline-block bg-[#F8C301]/10 px-4 py-2 rounded-lg mb-3">
                      <span className="text-small font-semibold" style={{ color: '#04045B' }}>Afternoon</span>
                    </div>
                    <h4 className="text-h4 mb-2">Group collaboration & workshops</h4>
                    <p className="text-body text-muted">
                      Connect with peers in collaborative spaces designed to foster teamwork, creative thinking, and meaningful dialogue.
                    </p>
                  </div>

                  {/* Center Dot */}
                  <div className="hidden lg:flex absolute left-1/2 transform -translate-x-1/2 w-4 h-4 rounded-full bg-[#F8C301] border-4 border-white shadow-md z-10"></div>

                  <div className="lg:w-5/12">
                    <div className="relative rounded-xl overflow-hidden">
                      <ImageWithFallback
                        src={campus1}
                        alt="Group Collaboration"
                        className="w-full h-48 object-cover"
                      />
                    </div>
                  </div>
                </div>

                {/* Timeline Item 4 */}
                <div className="relative flex flex-col lg:flex-row-reverse items-center lg:justify-between gap-8">
                  <div className="lg:w-5/12 lg:text-left">
                    <div className="inline-block bg-[#F8C301]/10 px-4 py-2 rounded-lg mb-3">
                      <span className="text-small font-semibold" style={{ color: '#04045B' }}>Evening</span>
                    </div>
                    <h4 className="text-h4 mb-2">Evening reflection in calm spaces</h4>
                    <p className="text-body text-muted">
                      Close your learning day with quiet contemplation, integrating insights and preparing for tomorrow's growth in serene outdoor or indoor reflection areas.
                    </p>
                  </div>

                  {/* Center Dot */}
                  <div className="hidden lg:flex absolute left-1/2 transform -translate-x-1/2 w-4 h-4 rounded-full bg-[#F8C301] border-4 border-white shadow-md z-10"></div>

                  <div className="lg:w-5/12">
                    <div className="relative rounded-xl overflow-hidden">
                      <ImageWithFallback
                        src={outdoorAmphitheaterImage}
                        alt="Evening Reflection"
                        className="w-full h-48 object-cover"
                      />
                    </div>
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>
      </section>

      {/* Booking Modal */}
      <BookingModal
        facility={selectedFacility}
        isOpen={isModalOpen}
        onClose={handleCloseModal}
      />

      {/* Virtual Tour Modal */}
      <VirtualTour360
        isOpen={isVirtualTourOpen}
        onClose={() => setIsVirtualTourOpen(false)}
        onBookNow={() => {
          // Optional: auto-open booking modal after tour
          handleBookNow();
        }}
      />

      {/* CTA Section - Using standardized home page CTA */}
      <CTABannerSection />

    </div>
  );
}

// Utility functions for calendar
const getDaysInMonth = (date: Date) => {
  return new Date(date.getFullYear(), date.getMonth() + 1, 0).getDate();
};

const getFirstDayOfMonth = (date: Date) => {
  return new Date(date.getFullYear(), date.getMonth(), 1).getDay();
};

const isDateAvailable = (date: Date) => {
  // Simple availability check - you can replace this with your actual logic
  const today = new Date();
  today.setHours(0, 0, 0, 0);
  return date >= today;
};

const formatDate = (date: Date) => {
  return date.toISOString().split('T')[0];
};

// Modal Component for Virtual Tour and Booking
function BookingModal({
  facility,
  isOpen,
  onClose
}: {
  facility: typeof facilities[0] | null;
  isOpen: boolean;
  onClose: () => void;
}) {
  const [bookingForm, setBookingForm] = useState<BookingFormData>({
    companyName: '',
    contactName: '',
    email: '',
    phone: '',
    role: '',
    teamSize: '',
    facilityType: facility?.name || '',
    preferredDate: '',
    additionalRequirements: ''
  });

  // Calendar state
  const [currentMonth, setCurrentMonth] = useState(new Date());
  const [selectedDate, setSelectedDate] = useState<Date | null>(null);

  // Lock body scroll when modal is open
  React.useEffect(() => {
    if (isOpen) {
      document.body.style.overflow = 'hidden';
      document.body.style.paddingRight = '15px'; // Prevent layout shift from scrollbar
    } else {
      document.body.style.overflow = '';
      document.body.style.paddingRight = '';
    }

    // Cleanup on unmount or when modal closes
    return () => {
      document.body.style.overflow = '';
      document.body.style.paddingRight = '';
    };
  }, [isOpen]);

  const handleFormSubmit = (e: React.FormEvent) => {
    e.preventDefault();
    console.log('Booking form submitted:', bookingForm);
    // Here you would typically send the form data to your backend
    alert('Booking request submitted successfully! We will contact you soon.');
    onClose();
  };

  const updateFormField = (field: keyof BookingFormData, value: string) => {
    setBookingForm(prev => ({ ...prev, [field]: value }));
  };

  // Calendar functions
  const handleDateSelect = (date: Date) => {
    if (isDateAvailable(date)) {
      setSelectedDate(date);
      updateFormField('preferredDate', formatDate(date));
    }
  };

  const navigateMonth = (direction: 'prev' | 'next') => {
    setCurrentMonth(prev => {
      const newMonth = new Date(prev);
      if (direction === 'prev') {
        newMonth.setMonth(prev.getMonth() - 1);
      } else {
        newMonth.setMonth(prev.getMonth() + 1);
      }
      return newMonth;
    });
  };

  const renderCalendar = () => {
    const daysInMonth = getDaysInMonth(currentMonth);
    const firstDay = getFirstDayOfMonth(currentMonth);
    const days = [];
    const monthNames = [
      'Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun',
      'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec'
    ];
    const dayNames = ['S', 'M', 'T', 'W', 'T', 'F', 'S'];

    // Empty cells for days before the first day of the month
    for (let i = 0; i < firstDay; i++) {
      days.push(<div key={`empty-${i}`} className="h-6" />);
    }

    // Days of the month
    for (let day = 1; day <= daysInMonth; day++) {
      const date = new Date(currentMonth.getFullYear(), currentMonth.getMonth(), day);
      const isAvailable = isDateAvailable(date);
      const isSelected = selectedDate &&
        date.getFullYear() === selectedDate.getFullYear() &&
        date.getMonth() === selectedDate.getMonth() &&
        date.getDate() === selectedDate.getDate();

      days.push(
        <button
          key={day}
          type="button"
          onClick={() => handleDateSelect(date)}
          disabled={!isAvailable}
          className={`
            h-6 w-6 rounded text-xs font-medium transition-all duration-200 flex items-center justify-center
            ${isSelected
              ? 'bg-primary text-white shadow-sm'
              : isAvailable
                ? 'hover:bg-blue-50 hover:text-primary text-gray-700'
                : 'text-gray-300 cursor-not-allowed'
            }
          `}
          style={{
            backgroundColor: isSelected ? 'var(--color-primary)' : undefined,
            color: isSelected ? 'white' : undefined
          }}
        >
          {day}
        </button>
      );
    }

    return (
      <div className="bg-white rounded-lg border border-gray-200 p-3">
        {/* Calendar Header */}
        <div className="flex items-center justify-between mb-3">
          <button
            type="button"
            onClick={() => navigateMonth('prev')}
            className="p-1 rounded hover:bg-gray-100 transition-colors"
          >
            <ChevronLeft className="w-3 h-3 text-gray-600" />
          </button>
          <h4 className="text-sm font-semibold text-gray-900">
            {monthNames[currentMonth.getMonth()]} {currentMonth.getFullYear()}
          </h4>
          <button
            type="button"
            onClick={() => navigateMonth('next')}
            className="p-1 rounded hover:bg-gray-100 transition-colors"
          >
            <ChevronRight className="w-3 h-3 text-gray-600" />
          </button>
        </div>

        {/* Day Names */}
        <div className="grid grid-cols-7 gap-1 mb-2">
          {dayNames.map((day, index) => (
            <div key={`day-${index}`} className="h-6 flex items-center justify-center">
              <span className="text-xs font-medium text-gray-500">{day}</span>
            </div>
          ))}
        </div>

        {/* Calendar Grid */}
        <div className="grid grid-cols-7 gap-1 mb-3">
          {days}
        </div>
      </div>
    );
  };

  if (!isOpen || !facility) return null;

  return (
    <div
      className="fixed inset-0 bg-black/60 flex items-center justify-center p-2 lg:p-4 z-popup-modal virtual-space-modal-overlay"
      onClick={onClose}
    >
      <div
        className="bg-white rounded-xl lg:rounded-2xl max-w-5xl w-full h-[85vh] overflow-hidden virtual-space-modal-container flex flex-col"
        onClick={(e) => e.stopPropagation()}
      >
        {/* Modal Header - Compact */}
        <div
          className="flex items-center justify-between p-4 lg:p-6 border-b flex-shrink-0"
          style={{ backgroundColor: 'rgba(4, 4, 91, 0.02)' }}
        >
          <div className="flex items-center gap-3 lg:gap-4">
            <div
              className="w-10 h-10 lg:w-12 lg:h-12 rounded-lg flex items-center justify-center"
              style={{ backgroundColor: 'var(--color-primary)' }}
            >
              <facility.icon className="w-5 h-5 lg:w-6 lg:h-6 text-white" />
            </div>
            <div>
              <h2 className="text-body lg:text-subhead mb-1">
                Kautilya Leadership Centre
              </h2>
              <p className="text-small text-muted">
                Capacity: {facility.capacity} people
              </p>
            </div>
          </div>
          <Button
            variant="ghost"
            size="sm"
            onClick={onClose}
            className="rounded-full w-8 h-8 lg:w-10 lg:h-10 p-0 hover:bg-gray-100"
          >
            <X className="w-4 h-4 lg:w-5 lg:h-5" />
          </Button>
        </div>

        {/* Modal Content - Side by Side Layout No Scroll */}
        <div className="grid grid-cols-1 lg:grid-cols-2 flex-1 min-h-0">
          {/* Left Side - Virtual Tour */}
          <div className="p-3 lg:p-6 border-r border-gray-100 flex flex-col min-h-0 overflow-y-auto">
            <div className="flex flex-col h-full space-y-2 lg:space-y-3">
              {/* Video Section - Compact */}
              <div className="flex-shrink-0">
                <div className="flex items-center gap-2 mb-2">
                  <Play className="w-4 h-4 text-primary" />
                  <h3 className="text-small lg:text-body font-semibold">Virtual Tour</h3>
                </div>

                {/* Virtual Tour Container - Developer-Ready for 360 Viewer or Video */}
                <div className="aspect-video rounded-lg overflow-hidden bg-gray-100 shadow-md relative">
                  <div
                    id={`virtual-tour-container-${facility.id}`}
                    className="w-full h-full relative"
                    data-facility-id={facility.id}
                    data-facility-name={facility.name}
                    data-tour-type="360-viewer"
                  >
                    <ImageWithFallback
                      src={kautilyaVirtualTourImage}
                      alt={`${facility.name} Virtual Tour`}
                      className="w-full h-full object-cover"
                    />
                  </div>

                  {/* Interactive Controls Overlay (optional) */}
                  <div className="absolute bottom-2 left-2 right-2 flex justify-between items-center pointer-events-none">
                    <div className="bg-black/20 backdrop-blur-sm rounded px-2 py-1">
                      <span className="text-white text-xs">360° Virtual Tour</span>
                    </div>
                    <div className="bg-black/20 backdrop-blur-sm rounded px-2 py-1">
                      <span className="text-white text-xs">Click & Drag to Explore</span>
                    </div>
                  </div>
                </div>
              </div>

              {/* Compact Info Section */}
              <div className="flex-1 min-h-0 space-y-2 lg:space-y-3">
                {/* About - Compact */}
                <div className="bg-gray-50 rounded-lg p-2 lg:p-3">
                  <h4 className="text-small font-semibold mb-1">About This Space</h4>
                  <p className="text-xs lg:text-small text-muted leading-relaxed line-clamp-2">
                    {facility.description}
                  </p>
                </div>

                {/* Features - Compact */}
                <div className="bg-gray-50 rounded-lg p-2 lg:p-3">
                  <h4 className="text-small font-semibold mb-2">Key Features</h4>
                  <div className="space-y-1">
                    {facility.features.slice(0, 3).map((feature, index) => (
                      <div key={index} className="flex items-center gap-2">
                        <div
                          className="w-1.5 h-1.5 rounded-full flex-shrink-0"
                          style={{ backgroundColor: 'var(--color-primary)' }}
                        />
                        <span className="text-xs lg:text-small">{feature}</span>
                      </div>
                    ))}
                  </div>
                </div>

                {/* Quick Stats - Compact */}
                <div className="grid grid-cols-2 gap-2 p-2 lg:p-3 bg-blue-50 rounded-lg">
                  <div className="text-center">
                    <div className="text-xs lg:text-small font-semibold text-primary">Capacity</div>
                    <div className="text-xs lg:text-small text-muted">{facility.capacity}</div>
                  </div>
                  <div className="text-center">
                    <div className="text-xs lg:text-small font-semibold text-primary">Zone</div>
                    <div className="text-xs lg:text-small text-muted">Premium</div>
                  </div>
                </div>

                {/* Action Button - Compact */}
                <Button
                  variant="outline"
                  onClick={() => navigateTo('/learning-facility')}
                  className="w-full h-8 lg:h-10 text-xs lg:text-small"
                >
                  <Building className="w-3 h-3 lg:w-4 lg:h-4 mr-1" />
                  View All Facilities
                </Button>
              </div>
            </div>
          </div>

          {/* Right Side - Booking Form */}
          <div className="p-4 lg:p-6 flex flex-col min-h-0 overflow-y-auto">
            <form onSubmit={handleFormSubmit} className="flex flex-col h-full">
              {/* Form Header */}
              <div className="flex items-center gap-3 mb-4 flex-shrink-0">
                <Calendar className="w-5 h-5 text-primary" />
                <h3 className="text-subhead">Book This Space</h3>
              </div>

              {/* Form Content with Compact Spacing */}
              <div className="flex-1 min-h-0 space-y-4 overflow-y-auto pr-2 virtual-space-modal-scroll">
                {/* Company Information Section */}
                <div className="space-y-3">
                  <div className="space-y-1">
                    <h4 className="text-small font-medium text-primary">Company Information</h4>
                    <div className="w-10 h-0.5 bg-primary"></div>
                  </div>

                  <div className="space-y-2">
                    <div className="grid grid-cols-1 lg:grid-cols-2 gap-2">
                      <div>
                        <Label htmlFor="companyName" className="text-xs font-normal text-black mb-1 block">
                          Company Name *
                        </Label>
                        <Input
                          id="companyName"
                          required
                          value={bookingForm.companyName}
                          onChange={(e) => updateFormField('companyName', e.target.value)}
                          placeholder="Company"
                          className="h-8 text-sm border border-gray-300 rounded focus:border-primary focus:ring-1 focus:ring-primary/30 transition-all duration-200 placeholder:text-gray-400 placeholder:opacity-50"
                        />
                      </div>
                      <div>
                        <Label htmlFor="contactName" className="text-xs font-normal text-black mb-1 block">
                          Contact Person *
                        </Label>
                        <Input
                          id="contactName"
                          required
                          value={bookingForm.contactName}
                          onChange={(e) => updateFormField('contactName', e.target.value)}
                          placeholder="Name"
                          className="h-8 text-sm border border-gray-300 rounded focus:border-primary focus:ring-1 focus:ring-primary/30 transition-all duration-200 placeholder:text-gray-400 placeholder:opacity-50"
                        />
                      </div>
                    </div>

                    <div className="grid grid-cols-1 lg:grid-cols-2 gap-2">
                      <div>
                        <Label htmlFor="email" className="text-xs font-normal text-black mb-1 block">
                          Email Address *
                        </Label>
                        <Input
                          id="email"
                          type="email"
                          required
                          value={bookingForm.email}
                          onChange={(e) => updateFormField('email', e.target.value)}
                          placeholder="email@company.com"
                          className="h-8 text-sm border border-gray-300 rounded focus:border-primary focus:ring-1 focus:ring-primary/30 transition-all duration-200 placeholder:text-gray-400 placeholder:opacity-50"
                        />
                      </div>
                      <div>
                        <Label htmlFor="phone" className="text-xs font-normal text-black mb-1 block">
                          Phone Number *
                        </Label>
                        <Input
                          id="phone"
                          required
                          value={bookingForm.phone}
                          onChange={(e) => updateFormField('phone', e.target.value)}
                          placeholder="+91 98765 43210"
                          className="h-8 text-sm border border-gray-300 rounded focus:border-primary focus:ring-1 focus:ring-primary/30 transition-all duration-200 placeholder:text-gray-400 placeholder:opacity-50"
                        />
                      </div>
                    </div>

                    <div className="grid grid-cols-1 lg:grid-cols-2 gap-2">
                      <div>
                        <Label htmlFor="role" className="text-xs font-normal text-black mb-1 block">
                          Your Role *
                        </Label>
                        <Select value={bookingForm.role} onValueChange={(value: string) => updateFormField('role', value)}>
                          <SelectTrigger className="h-8 text-sm border border-gray-300 rounded focus:border-primary focus:ring-1 focus:ring-primary/30 transition-all duration-200">
                            <SelectValue placeholder="Role" className="text-gray-400 opacity-50" />
                          </SelectTrigger>
                          <SelectContent>
                            <SelectItem value="ceo">CEO/Founder</SelectItem>
                            <SelectItem value="hr-director">HR Director</SelectItem>
                            <SelectItem value="training-manager">Training Manager</SelectItem>
                            <SelectItem value="operations-manager">Operations Manager</SelectItem>
                            <SelectItem value="executive-assistant">Executive Assistant</SelectItem>
                            <SelectItem value="other">Other</SelectItem>
                          </SelectContent>
                        </Select>
                      </div>
                      <div>
                        <Label htmlFor="teamSize" className="text-xs font-normal text-black mb-1 block">
                          Expected Team Size *
                        </Label>
                        <Select value={bookingForm.teamSize} onValueChange={(value: string) => updateFormField('teamSize', value)}>
                          <SelectTrigger className="h-8 text-sm border border-gray-300 rounded focus:border-primary focus:ring-1 focus:ring-primary/30 transition-all duration-200">
                            <SelectValue placeholder="Size" className="text-gray-400 opacity-50" />
                          </SelectTrigger>
                          <SelectContent>
                            <SelectItem value="1-5">1-5 people</SelectItem>
                            <SelectItem value="6-15">6-15 people</SelectItem>
                            <SelectItem value="16-30">16-30 people</SelectItem>
                            <SelectItem value="31-50">31-50 people</SelectItem>
                            <SelectItem value="50+">50+ people</SelectItem>
                          </SelectContent>
                        </Select>
                      </div>
                    </div>
                  </div>
                </div>

                {/* Booking Details Section */}
                <div className="space-y-3">
                  <div className="space-y-1">
                    <h4 className="text-small font-medium text-primary">Select Your Date</h4>
                    <div className="w-10 h-0.5 bg-primary"></div>
                  </div>

                  <div className="space-y-3">
                    {/* Calendar Date Selection */}
                    <div className="space-y-2">
                      <Label className="text-xs font-normal text-black">
                        Choose Your Preferred Date *
                      </Label>
                      {renderCalendar()}
                      {selectedDate && (
                        <div className="mt-2 p-2 bg-green-50 rounded border border-green-200">
                          <div className="flex items-center gap-2">
                            <Calendar className="w-3 h-3 text-green-600" />
                            <span className="text-xs font-medium text-green-800">
                              Selected: {selectedDate.toLocaleDateString('en-US', {
                                month: 'short',
                                day: 'numeric',
                                year: 'numeric'
                              })}
                            </span>
                          </div>
                        </div>
                      )}
                    </div>

                    {/* Additional Requirements */}
                    <div>
                      <Label htmlFor="additionalRequirements" className="text-xs font-normal text-black mb-1 block">
                        Additional Requirements
                      </Label>
                      <Textarea
                        id="additionalRequirements"
                        value={bookingForm.additionalRequirements}
                        onChange={(e) => updateFormField('additionalRequirements', e.target.value)}
                        placeholder="Special setup, AV equipment, catering..."
                        rows={2}
                        className="text-sm border border-gray-300 rounded focus:border-primary focus:ring-1 focus:ring-primary/30 transition-all duration-200 placeholder:text-gray-400 placeholder:opacity-50 resize-none"
                      />
                    </div>
                  </div>
                </div>
              </div>

              {/* Form Actions */}
              <div className="flex flex-col sm:flex-row gap-2 pt-3 border-t border-gray-200 mt-3 flex-shrink-0">
                <Button
                  type="submit"
                  disabled={!selectedDate}
                  className="flex-1 h-9 text-sm font-medium bg-primary hover:bg-primary/90 disabled:bg-gray-300 disabled:cursor-not-allowed text-white border-0 rounded shadow-sm hover:shadow-md transition-all duration-200"
                  style={{
                    backgroundColor: selectedDate ? 'var(--color-primary)' : '#d1d5db',
                    color: 'white'
                  }}
                >
                  <Calendar className="w-3 h-3 mr-2" />
                  {selectedDate ? 'Submit Request' : 'Select Date First'}
                </Button>
                <Button
                  type="button"
                  variant="outline"
                  onClick={onClose}
                  className="px-4 h-9 text-sm font-normal border border-gray-300 hover:border-gray-400 hover:bg-gray-50 rounded transition-all duration-200"
                >
                  Cancel
                </Button>
              </div>
            </form>
          </div>
        </div>
      </div>
    </div>
  );
}