import React, { useState, useEffect, useRef } from 'react';
import { motion } from 'motion/react';
import { Button } from './ui/button';
import { Badge } from './ui/badge';
import { Card, CardContent } from './ui/card';
import { Dialog, DialogContent, DialogDescription, DialogHeader, DialogTitle, DialogTrigger } from './ui/dialog';
import { Input } from './ui/input';
import { Label } from './ui/label';
import { Textarea } from './ui/textarea';
import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from './ui/select';
import { ImageWithFallback } from './figma/ImageWithFallback';
import { navigateTo } from './Router';
import { BrandedTag } from './about/BrandedTag';
import { PrimaryCTAButton } from './PrimaryCTAButton';
import { TestimonialsSection } from './TestimonialsSection';
import { CTABannerSection } from './CTABannerSection';
import kautilyaVirtualTourImage from '../assets/Kautilya.png';
import {
    ArrowRight,
    CheckCircle,
    Calendar,
    Download,
    Building,
    Monitor,
    BookOpen,
    Heart,
    Briefcase,
    Users,
    Target,
    Network,
    MapPin,
    Coffee,
    Wifi,
    Car,
    Shield,
    Play,
    ChevronLeft,
    ChevronRight,
    Eye,
    X,
    Clock,
    Star,
    Mail,
    Phone,
    Globe,
    Maximize2,
    TreePine,
    Bed,
    Dumbbell,
    Utensils,
    Leaf
} from 'lucide-react';

const offerings = [
    {
        title: "Training Halls & Spaces",
        description: "State-of-the-art training facilities designed for optimal learning experiences",
        icon: Building,
        features: ["4 fully-equipped halls", "Flexible seating arrangements", "Advanced AV systems", "Natural lighting"]
    },
    {
        title: "Technology Infrastructure",
        description: "Cutting-edge technology to support modern learning and collaboration",
        icon: Monitor,
        features: ["High-speed connectivity", "Interactive displays", "Video conferencing", "Digital whiteboards"]
    },
    {
        title: "Learning Resources",
        description: "Comprehensive resources and materials to enhance the learning experience",
        icon: BookOpen,
        features: ["Digital library access", "Learning materials", "Resource centers", "Study spaces"]
    },
    {
        title: "Wellness & Recreation",
        description: "Facilities focused on participant well-being and relaxation during programs",
        icon: Heart,
        features: ["Wellness areas", "Recreation spaces", "Quiet zones", "Outdoor areas"]
    }
];

const targetAudience = [
    {
        title: "Corporate Teams",
        description: "Organizations seeking immersive learning experiences for their leadership development programs",
        icon: Briefcase,
        characteristics: ["Team retreats", "Leadership programs", "Skills workshops", "Strategic planning"]
    },
    {
        title: "Learning Groups",
        description: "Educational institutions and learning organizations hosting intensive development sessions",
        icon: Users,
        characteristics: ["Educational programs", "Intensive workshops", "Collaborative learning", "Group development"]
    },
    {
        title: "Professional Networks",
        description: "Professional associations and networks organizing development events and conferences",
        icon: Network,
        characteristics: ["Professional development", "Networking events", "Industry conferences", "Skill building"]
    }
];

const facilityFeatures = [
    {
        title: "Luxury Accommodation",
        description: "Premium residential suites with hotel-standard amenities for extended stays",
        icon: Bed,
        image: "https://images.unsplash.com/photo-1664186771971-2eaca0576c6c?crop=entropy&cs=tinysrgb&fit=max&fm=jpg&ixid=M3w3Nzg4Nzd8MHwxfHNlYXJjaHwxfHxsdXh1cnklMjBob3RlbCUyMGFjY29tbW9kYXRpb258ZW58MXx8fHwxNzU2ODk4OTA3fDA&ixlib=rb-4.1.0&q=80&w=1080",
        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"]
    }
];

const amenities = [
    { name: "High-Speed Wi-Fi", icon: Wifi },
    { name: "Parking Facilities", icon: Car },
    { name: "Coffee Lounge", icon: Coffee },
    { name: "Security Services", icon: Shield },
    { name: "Recreation Areas", icon: Heart },
    { name: "Study Spaces", icon: BookOpen },
    { name: "Meeting Rooms", icon: Users },
    { name: "Tech Support", icon: Monitor }
];

// 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'
        ]
    }
];

// Booking Form Interface
interface BookingForm {
    companyName: string;
    contactName: string;
    email: string;
    phone: string;
    role: string;
    teamSize: string;
    facilityZone: string;
    additionalRequirements: string;
}

// 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: "https://images.unsplash.com/photo-1588865198054-c83788106132?crop=entropy&cs=tinysrgb&fit=max&fm=jpg&ixid=M3w3Nzg4Nzd8MHwxfHNlYXJjaHwxfHxtb2Rlcm4lMjBjb25mZXJlbmNlJTIwcm9vbSUyMGxhcmdlJTIwc3BhY2V8ZW58MXx8fHwxNzU2OTAyMzYyfDA&ixlib=rb-4.1.0&q=80&w=1080&utm_source=figma&utm_medium=referral",
            alt: "Modern Conference Room"
        },
        {
            src: "https://images.unsplash.com/photo-1613186145425-5bb4eca455d7?crop=entropy&cs=tinysrgb&fit=max&fm=jpg&ixid=M3w3Nzg4Nzd8MHwxfHNlYXJjaHwxfHxleGVjdXRpdmUlMjBib2FyZHJvb20lMjBtZWV0aW5nJTIwc3BhY2V8ZW58MXx8fHwxNzU2OTAyMzY2fDA&ixlib=rb-4.1.0&q=80&w=1080&utm_source=figma&utm_medium=referral",
            alt: "Executive Boardroom"
        },
        {
            src: "https://images.unsplash.com/photo-1752579664702-e6609516e21a?crop=entropy&cs=tinysrgb&fit=max&fm=jpg&ixid=M3w3Nzg4Nzd8MHwxfHNlYXJjaHwxfHxidXNpbmVzcyUyMHRyYWluaW5nJTIwY2xhc3Nyb29tJTIwbW9kZXJufGVufDF8fHx8MTc1NjkwMjM3MHww&ixlib=rb-4.1.0&q=80&w=1080&utm_source=figma&utm_medium=referral",
            alt: "Business Training Classroom"
        },
        {
            src: "https://images.unsplash.com/photo-1718224326658-489bbfbeb2ca?crop=entropy&cs=tinysrgb&fit=max&fm=jpg&ixid=M3w3Nzg4Nzd8MHwxfHNlYXJjaHwxfHxjb3Jwb3JhdGUlMjBzZW1pbmFyJTIwaGFsbCUyMGF1ZGl0b3JpdW18ZW58MXx8fHwxNzU2OTAyMzc2fDA&ixlib=rb-4.1.0&q=80&w=1080&utm_source=figma&utm_medium=referral",
            alt: "Corporate Seminar Hall"
        },
        {
            src: "https://images.unsplash.com/photo-1655392032233-c95aedd27ad4?crop=entropy&cs=tinysrgb&fit=max&fm=jpg&ixid=M3w3Nzg4Nzd8MHwxfHNlYXJjaHwxfHxwcm9mZXNzaW9uYWwlMjB3b3Jrc2hvcCUyMHZlbnVlJTIwc3BhY2V8ZW58MXx8fHwxNzU2OTAyMzc5fDA&ixlib=rb-4.1.0&q=80&w=1080&utm_source=figma&utm_medium=referral",
            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 handleStartTour = () => {
        setIsVirtualTourActive(true);
        setCurrentTourStop(0);
    };

    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);
    };

    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)'
                                    }}
                                    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>

            {/* Enhanced Our Story Timeline Section */}
            <section className="py-20" style={{ backgroundColor: '#FFFFFF' }}>
                <div className="container mx-auto section-margin-x">
                    <div className="max-w-6xl mx-auto">
                        {/* Header */}
                        <div className="text-center mb-16">
                            <div className="branded-tag-system mb-6 justify-center">
                                <div className="dot"></div>
                                <span className="text">Journey Through Time</span>
                            </div>
                            <h2 className="text-h2 mb-6">
                                The Legacy of Leadership
                            </h2>
                            <p className="text-body-lg text-muted max-w-3xl mx-auto">
                                From ancient wisdom to modern excellence, discover the timeless journey that inspired the creation of our world-class leadership development center.
                            </p>
                        </div>

                        {/* Timeline Container */}
                        <div className="relative">
                            {/* Timeline Line */}
                            <div className="absolute left-1/2 transform -translate-x-0.5 w-0.5 h-full bg-gradient-to-b from-primary via-primary to-transparent opacity-30"></div>

                            {/* Timeline Items */}
                            <div className="space-y-16">
                                {[
                                    {
                                        era: "4th Century BC",
                                        title: "Ancient Wisdom",
                                        description: "In the 4th century BC, a teacher named Kautilya saw leadership potential in a young goat herd boy in Pataliputra, present day Patna, in the state of Bihar, India.",
                                        icon: "📜",
                                        side: "left"
                                    },
                                    {
                                        era: "Today",
                                        title: "Inspired Vision",
                                        description: "He is our inspiration, as we set out to build a world class centre dedicated to leadership and learning in his namesake.",
                                        icon: "🌟",
                                        side: "right"
                                    },
                                    {
                                        era: "Location",
                                        title: "Scenic Sanctuary",
                                        description: "'Kautilya' is built on two acres of land surrounded by the Sahyadri hills, and is about 90 minutes from the hustle and bustle of Mumbai and just off the Mumbai-Pune expressway.",
                                        icon: "🏔️",
                                        side: "left"
                                    },
                                    {
                                        era: "Facilities",
                                        title: "World-Class Infrastructure",
                                        description: "Kautilya offers a world class learning facility with 57 residential rooms, 3 large modern state of the art learning spaces, an amphitheatre, 10 internationally themed discussion rooms, a gym, a sports lounge and a walking track.",
                                        icon: "🏛️",
                                        side: "right"
                                    },
                                    {
                                        era: "Welcome",
                                        title: "Sacred Entrance",
                                        description: "As you enter Kautilya, a custom-made granite panel depicting Samudra Manthan welcomes you to your personal Manthan & Chinthan.",
                                        icon: "🎭",
                                        side: "left"
                                    },
                                    {
                                        era: "Philosophy",
                                        title: "Spiritual Foundation",
                                        description: "At the discussion space, the Trimurti will welcome you with Tridevis and Arthanariswara, reminding you of the immense integrated power you possess.",
                                        icon: "🕉️",
                                        side: "right"
                                    }
                                ].map((item, index) => (
                                    <motion.div
                                        key={index}
                                        initial={{ opacity: 0, x: item.side === 'left' ? -50 : 50 }}
                                        whileInView={{ opacity: 1, x: 0 }}
                                        transition={{ duration: 0.8, delay: index * 0.2 }}
                                        viewport={{ once: true }}
                                        className={`relative flex items-center ${item.side === 'left' ? 'justify-start' : 'justify-end'}`}
                                    >
                                        {/* Timeline Content Card */}
                                        <div className={`w-full max-w-md ${item.side === 'left' ? 'mr-8 lg:mr-16' : 'ml-8 lg:ml-16'}`}>
                                            <div className="bg-white border border-gray-200 rounded-2xl p-6 hover:bg-gray-50 transition-all duration-300 shadow-sm">
                                                {/* Era Badge */}
                                                <div className="inline-flex items-center gap-2 px-3 py-1 bg-accent/20 text-primary rounded-full text-sm font-medium mb-4">
                                                    <span className="text-lg">{item.icon}</span>
                                                    {item.era}
                                                </div>

                                                {/* Content */}
                                                <h3 className="text-h4 mb-3">{item.title}</h3>
                                                <p className="text-body text-muted leading-relaxed">
                                                    {item.description}
                                                </p>
                                            </div>
                                        </div>

                                        {/* Timeline Dot */}
                                        <div className="absolute left-1/2 transform -translate-x-1/2 w-4 h-4 bg-accent border-4 border-white rounded-full shadow-lg"></div>

                                        {/* Era Line */}
                                        <div className={`absolute ${item.side === 'left' ? 'right-1/2' : 'left-1/2'} top-1/2 transform -translate-y-1/2 w-8 h-0.5 bg-primary/60`}></div>
                                    </motion.div>
                                ))}
                            </div>
                        </div>

                        {/* Call to Action */}
                        <motion.div
                            initial={{ opacity: 0, y: 30 }}
                            whileInView={{ opacity: 1, y: 0 }}
                            transition={{ duration: 0.6, delay: 0.8 }}
                            viewport={{ once: true }}
                            className="text-center mt-16"
                        >
                            <div className="bg-white border border-gray-200 rounded-2xl p-8 max-w-2xl mx-auto shadow-sm">
                                <h3 className="text-h3 mb-4">Experience the Legacy</h3>
                                <p className="text-body text-muted mb-6">
                                    Step into a space where ancient wisdom meets modern leadership development,
                                    designed to unlock your infinite potential.
                                </p>
                                <PrimaryCTAButton
                                    text="Explore Our Facility"
                                    onClick={handleStartTour}
                                    ariaLabel="Explore our facility"
                                    className="cta-text-black"
                                />
                            </div>
                        </motion.div>
                    </div>
                </div>
            </section>

            {/* Deluxe Living & Recreation Section */}
            <section className="py-20" style={{ backgroundColor: 'var(--color-bg-white)' }}>
                <div className="container mx-auto section-margin-x">
                    <div className="mb-12 relative max-w-7xl mx-auto">
                        <div className="flex-1 max-w-3xl">
                            <BrandedTag text="Deluxe Living & Recreation" />
                            <h2 className="text-h2 mb-4 leading-tight">
                                Facility <span className="text-primary">Features</span>
                            </h2>
                            <p className="text-body-lg text-muted leading-relaxed">
                                Every aspect of our facility is designed to enhance learning outcomes
                                and provide an exceptional experience for participants and facilitators.
                            </p>
                        </div>

                        {/* Navigation Controls - Bottom right positioning */}
                        <div className="absolute bottom-0 right-0 flex items-center gap-4">
                            <span className="text-body text-muted font-medium">
                                {String(currentSlide + 1).padStart(2, '0')} / {String(Math.ceil(facilityFeatures.length / cardsPerView)).padStart(2, '0')}
                            </span>
                            <div className="flex gap-2">
                                <button
                                    onClick={scrollLeft}
                                    disabled={currentSlide === 0}
                                    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 disabled:opacity-50 disabled:cursor-not-allowed disabled:hover:bg-white disabled:hover:text-black transition-all duration-300"
                                    aria-label="Previous facility features"
                                >
                                    <ChevronLeft className="w-5 h-5" />
                                </button>
                                <button
                                    onClick={scrollRight}
                                    disabled={currentSlide >= maxSlide}
                                    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 disabled:opacity-50 disabled:cursor-not-allowed disabled:hover:bg-white disabled:hover:text-black transition-all duration-300"
                                    aria-label="Next facility features"
                                >
                                    <ChevronRight className="w-5 h-5" />
                                </button>
                            </div>
                        </div>
                    </div>

                    {/* Carousel Container */}
                    <div className="relative max-w-7xl mx-auto">
                        {/* Carousel Container */}
                        <div className="overflow-hidden" style={{ paddingBottom: '80px' }}>
                            <div
                                ref={carouselRef}
                                className="flex transition-transform duration-500 ease-in-out gap-6"
                                style={{ transform: `translateX(-${currentSlide * slideWidth}%)` }}
                            >
                                {facilityFeatures.map((feature, index) => {
                                    const Icon = feature.icon;
                                    return (
                                        <Card key={index} className="flex-shrink-0 border hover:shadow-lg transition-shadow duration-300" style={{ backgroundColor: 'var(--color-bg-white)', width: `${cardWidth}%` }}>
                                            <CardContent className="p-8 text-center">
                                                <div className="w-full h-[180px] overflow-hidden rounded-lg mx-auto mb-6">
                                                    <ImageWithFallback
                                                        src={
                                                            feature.title.toLowerCase().includes('wifi')
                                                                ? 'https://images.unsplash.com/photo-1518770660439-4636190af475?w=480&h=320&fit=crop&auto=format&dpr=2'
                                                                : feature.title.toLowerCase().includes('coffee') || feature.title.toLowerCase().includes('café') || feature.title.toLowerCase().includes('cafe')
                                                                    ? 'https://images.unsplash.com/photo-1495474472287-4d71bcdd2085?w=480&h=320&fit=crop&auto=format&dpr=2'
                                                                    : feature.title.toLowerCase().includes('parking') || feature.title.toLowerCase().includes('car')
                                                                        ? 'https://images.unsplash.com/photo-1518306727298-4c17e1bf8cff?w=480&h=320&fit=crop&auto=format&dpr=2'
                                                                        : feature.title.toLowerCase().includes('security') || feature.title.toLowerCase().includes('safety')
                                                                            ? 'https://images.unsplash.com/photo-1583511655857-d19b40a7a54e?w=480&h=320&fit=crop&auto=format&dpr=2'
                                                                            : feature.title.toLowerCase().includes('bed') || feature.title.toLowerCase().includes('accommodation') || feature.title.toLowerCase().includes('stay')
                                                                                ? 'https://images.unsplash.com/photo-1505691938895-1758d7feb511?w=480&h=320&fit=crop&auto=format&dpr=2'
                                                                                : feature.title.toLowerCase().includes('nature') || feature.title.toLowerCase().includes('outdoor')
                                                                                    ? 'https://images.unsplash.com/photo-1501785888041-af3ef285b470?w=480&h=320&fit=crop&auto=format&dpr=2'
                                                                                    : feature.title.toLowerCase().includes('meeting') || feature.title.toLowerCase().includes('room') || feature.title.toLowerCase().includes('facility')
                                                                                        ? 'https://images.unsplash.com/photo-1557800636-894a64c1696f?w=480&h=320&fit=crop&auto=format&dpr=2'
                                                                                        : 'https://images.unsplash.com/photo-1524758631624-e2822e304c36?w=480&h=320&fit=crop&auto=format&dpr=2'
                                                        }
                                                        alt={`${feature.title} image`}
                                                        className="w-full h-full object-cover"
                                                    />
                                                </div>

                                                <h3 className="text-h4 mb-4">{feature.title}</h3>

                                                <p className="text-body text-muted mb-6">{feature.description}</p>

                                                <div className="space-y-2">
                                                    {feature.details.map((detail, detailIndex) => (
                                                        <div key={detailIndex} className="flex items-center gap-2 text-body">
                                                            <CheckCircle className="w-4 h-4 flex-shrink-0 text-primary" />
                                                            <span className="text-left text-muted">{detail}</span>
                                                        </div>
                                                    ))}
                                                </div>
                                            </CardContent>
                                        </Card>
                                    );
                                })}
                            </div>
                        </div>
                    </div>
                </div>
            </section>

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

            {/* Testimonials Section - Using home page testimonials with custom headers */}
            <TestimonialsSection
                title="Guest Experiences"
                subtitle="Hear from clients and partners who have experienced the transformational power of our purpose-built learning environment."
                tagText="Facility Excellence"
            />

            {/* Facility Tour - How to Reach Us Section */}
            <section className="py-12" style={{ backgroundColor: '#FFFFFF' }}>
                <div className="container mx-auto section-margin-x">
                    <div className="max-w-7xl mx-auto">
                        {/* Header */}
                        <div className="text-center mb-8">
                            <div className="branded-tag-system mb-4 justify-center">
                                <div className="dot"></div>
                                <span className="text">FACILITY TOUR</span>
                            </div>
                            <h2 className="text-h2 mb-4">
                                We Look Forward to Host You
                            </h2>
                            <p className="text-body text-muted max-w-2xl mx-auto">
                                Experience our world-class facility firsthand. Here's everything you need to know about reaching us and planning your visit.
                            </p>
                        </div>

                        {/* Content Grid */}
                        <div className="grid grid-cols-1 lg:grid-cols-5 gap-8 items-start">
                            {/* Contact Information */}
                            <div className="lg:col-span-3 space-y-6">
                                {/* Venue Details */}
                                <motion.div
                                    initial={{ opacity: 0, x: -30 }}
                                    whileInView={{ opacity: 1, x: 0 }}
                                    transition={{ duration: 0.6 }}
                                    viewport={{ once: true }}
                                    className="bg-white border border-gray-200 rounded-xl p-4 shadow-sm"
                                >
                                    <div className="flex items-center gap-3 mb-3">
                                        <div className="w-10 h-10 bg-blue-100 rounded-lg flex items-center justify-center">
                                            <MapPin className="w-5 h-5 text-blue-600" />
                                        </div>
                                        <h3 className="text-h4">Venue Details</h3>
                                    </div>
                                    <div className="space-y-1 text-body text-gray-700">
                                        <p className="font-medium text-black">Kautilya Leadership Services</p>
                                        <p>R.S. No. 5/6, Savaroli Kharpada Road,</p>
                                        <p>Dhamani Taluk, Khalapur, District Raigad – 410201</p>
                                    </div>
                                </motion.div>

                                {/* Corporate Booking & Distance in one row */}
                                <div className="grid grid-cols-1 md:grid-cols-2 gap-6">
                                    {/* Corporate Booking */}
                                    <motion.div
                                        initial={{ opacity: 0, x: -30 }}
                                        whileInView={{ opacity: 1, x: 0 }}
                                        transition={{ duration: 0.6, delay: 0.2 }}
                                        viewport={{ once: true }}
                                        className="bg-white border border-gray-200 rounded-xl p-4 shadow-sm"
                                    >
                                        <div className="flex items-center gap-3 mb-3">
                                            <div className="w-10 h-10 bg-green-100 rounded-lg flex items-center justify-center">
                                                <Phone className="w-5 h-5 text-green-600" />
                                            </div>
                                            <h3 className="text-h4">Corporate Booking</h3>
                                        </div>
                                        <div className="space-y-2">
                                            <p className="text-body font-medium text-black">Supriya Salvi</p>
                                            <div className="flex items-center gap-2 text-small text-gray-700">
                                                <Phone className="w-4 h-4" />
                                                <span>+91 9819232703 / 9326091775</span>
                                            </div>
                                            <div className="flex items-center gap-2 text-small text-gray-700">
                                                <Mail className="w-4 h-4" />
                                                <span>connect@kautilyaservices.in</span>
                                            </div>
                                        </div>
                                    </motion.div>

                                    {/* Distance Information */}
                                    <motion.div
                                        initial={{ opacity: 0, x: -30 }}
                                        whileInView={{ opacity: 1, x: 0 }}
                                        transition={{ duration: 0.6, delay: 0.4 }}
                                        viewport={{ once: true }}
                                        className="bg-white border border-gray-200 rounded-xl p-4 shadow-sm"
                                    >
                                        <div className="flex items-center gap-3 mb-3">
                                            <div className="w-10 h-10 bg-purple-100 rounded-lg flex items-center justify-center">
                                                <MapPin className="w-5 h-5 text-purple-600" />
                                            </div>
                                            <h3 className="text-h4">How to Reach Us</h3>
                                        </div>
                                        <div className="space-y-2">
                                            <div className="flex justify-between items-center">
                                                <span className="text-small text-gray-600">From Lonavala:</span>
                                                <span className="text-body font-medium text-blue-600">23 Km</span>
                                            </div>
                                            <div className="flex justify-between items-center">
                                                <span className="text-small text-gray-600">From Mumbai Airport:</span>
                                                <span className="text-body font-medium text-blue-600">82 Km</span>
                                            </div>
                                            <div className="flex justify-between items-center">
                                                <span className="text-small text-gray-600">From Pune Airport:</span>
                                                <span className="text-body font-medium text-blue-600">94 Km</span>
                                            </div>
                                        </div>
                                    </motion.div>
                                </div>
                            </div>

                            {/* Location Map */}
                            <motion.div
                                initial={{ opacity: 0, x: 30 }}
                                whileInView={{ opacity: 1, x: 0 }}
                                transition={{ duration: 0.6, delay: 0.3 }}
                                viewport={{ once: true }}
                                className="lg:col-span-2 space-y-4"
                            >
                                <div className="bg-white border border-gray-200 rounded-xl overflow-hidden shadow-sm">
                                    <div className="relative h-64">
                                        <ImageWithFallback
                                            src="https://images.unsplash.com/photo-1587400873582-230980eb46eb?crop=entropy&cs=tinysrgb&fit=max&fm=jpg&ixid=M3w3Nzg4Nzd8MHwxfHNlYXJjaHwxfHxsb2NhdGlvbiUyMG1hcCUyMGZhY2lsaXR5JTIwZGlyZWN0aW9uc3xlbnwxfHx8fDE3NTY5MDA5MTF8MA&ixlib=rb-4.1.0&q=80&w=1080&utm_source=figma&utm_medium=referral"
                                            alt="Kautilya Leadership Services Location Map"
                                            className="w-full h-full object-cover"
                                        />
                                        <div className="absolute inset-0 bg-gradient-to-t from-black/20 to-transparent"></div>
                                        <div className="absolute bottom-3 left-3 bg-white/90 backdrop-blur-sm rounded-lg px-3 py-1">
                                            <p className="text-small font-medium text-black">Kautilya Leadership Centre</p>
                                            <p className="text-small text-gray-600">Raigad, Maharashtra</p>
                                        </div>
                                    </div>
                                </div>

                                {/* Quick Actions */}
                                <div className="flex justify-center">
                                    <Button
                                        variant="outline"
                                        onClick={handleBookNow}
                                        className="text-body px-4 py-2 border-2 border-blue-600 text-blue-600 hover:bg-blue-50 transition-colors w-full"
                                        style={{
                                            fontFamily: 'var(--font-family-base)'
                                        }}
                                    >
                                        <Calendar className="w-4 h-4 mr-2" />
                                        Plan Your Visit
                                    </Button>
                                </div>
                            </motion.div>
                        </div>
                    </div>
                </div>
            </section>
            
            {/* 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>
  );
}