import React, { useState, useEffect, useRef } from 'react';
import { motion } from 'motion/react';
// import { Button } from '../ui/button';
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 {
    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;
}

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

    // 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 [isBookingModalOpen, setIsBookingModalOpen] = useState(false);
    const [expandedTourCard, setExpandedTourCard] = useState<string | null>(null);
    const [bookingForm, setBookingForm] = useState<BookingForm>({
        companyName: '',
        contactName: '',
        email: '',
        phone: '',
        role: '',
        teamSize: '',
        facilityZone: '',
        additionalRequirements: ''
    });

    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
            setIsBookingModalOpen(true);
        };

        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(() => setIsBookingModalOpen(true), 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 handleBookingSubmit = (e: React.FormEvent) => {
        e.preventDefault();
        console.log('Booking submitted:', bookingForm);
        setIsBookingModalOpen(false);
        setBookingForm({
            companyName: '',
            contactName: '',
            email: '',
            phone: '',
            role: '',
            teamSize: '',
            facilityZone: '',
            additionalRequirements: ''
        });

        // Clean up URL parameter
        const url = new URL(window.location.href);
        url.searchParams.delete('autoBooking');
        window.history.replaceState({}, '', url.toString());

        // Here you would typically send the booking request to your backend
        alert('Booking request submitted successfully! We will contact you within 24 hours.');
    };

    const handleBookingModalClose = (open: boolean) => {
        console.log('Booking modal close triggered, open:', open); // Debug log
        setIsBookingModalOpen(open);

        if (!open) {
            // Clean up URL parameter when closing
            const url = new URL(window.location.href);
            url.searchParams.delete('autoBooking');
            window.history.replaceState({}, '', url.toString());
        }
    };

    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={() => {
                                        console.log('Book Facility button clicked');
                                        setIsBookingModalOpen(true);
                                    }}
                                    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">
                        {/* Navigation Controls - Positioned at bottom right */}


                        {/* 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 */}
            <Dialog open={isBookingModalOpen} onOpenChange={setIsBookingModalOpen}>
                <DialogContent className="max-w-md">
                    <DialogHeader>
                        <DialogTitle className="text-h3">Book Learning Facility</DialogTitle>
                        <DialogDescription>
                            Submit your facility booking request with your preferred dates, team size, and specific requirements. We'll contact you within 24 hours to confirm availability and discuss details.
                        </DialogDescription>
                    </DialogHeader>

                    <form onSubmit={handleBookingSubmit} className="space-y-4 pt-4">
                        <div className="grid grid-cols-2 gap-4">
                            <div>
                                <Label htmlFor="companyName">Company Name</Label>
                                <Input
                                    id="companyName"
                                    value={bookingForm.companyName}
                                    onChange={(e: any) => setBookingForm({ ...bookingForm, companyName: e.target.value })}
                                    required
                                />
                            </div>
                            <div>
                                <Label htmlFor="contactName">Contact Name</Label>
                                <Input
                                    id="contactName"
                                    value={bookingForm.contactName}
                                    onChange={(e: any) => setBookingForm({ ...bookingForm, contactName: e.target.value })}
                                    required
                                />
                            </div>
                        </div>

                        <div className="grid grid-cols-2 gap-4">
                            <div>
                                <Label htmlFor="email">Email</Label>
                                <Input
                                    id="email"
                                    type="email"
                                    value={bookingForm.email}
                                    onChange={(e: any) => setBookingForm({ ...bookingForm, email: e.target.value })}
                                    required
                                />
                            </div>
                            <div>
                                <Label htmlFor="phone">Phone</Label>
                                <Input
                                    id="phone"
                                    value={bookingForm.phone}
                                    onChange={(e: any) => setBookingForm({ ...bookingForm, phone: e.target.value })}
                                    required
                                />
                            </div>
                        </div>

                        <div className="grid grid-cols-2 gap-4">
                            <div>
                                <Label htmlFor="role">Your Role</Label>
                                <Input
                                    id="role"
                                    value={bookingForm.role}
                                    onChange={(e: any) => setBookingForm({ ...bookingForm, role: e.target.value })}
                                    required
                                />
                            </div>
                            <div>
                                <Label htmlFor="teamSize">Team Size</Label>
                                <Select value={bookingForm.teamSize} onValueChange={(value: any) => setBookingForm({ ...bookingForm, teamSize: value })}>
                                    <SelectTrigger>
                                        <SelectValue placeholder="Select size" />
                                    </SelectTrigger>
                                    <SelectContent>
                                        <SelectItem value="1-10">1-10 people</SelectItem>
                                        <SelectItem value="11-25">11-25 people</SelectItem>
                                        <SelectItem value="26-50">26-50 people</SelectItem>
                                        <SelectItem value="51-80">51-80 people</SelectItem>
                                        <SelectItem value="80+">80+ people</SelectItem>
                                    </SelectContent>
                                </Select>
                            </div>
                        </div>

                        <div>
                            <Label htmlFor="facilityZone">Preferred Zone</Label>
                            <Select value={bookingForm.facilityZone} onValueChange={(value: any) => setBookingForm({ ...bookingForm, facilityZone: value })}>
                                <SelectTrigger>
                                    <SelectValue placeholder="Select zone" />
                                </SelectTrigger>
                                <SelectContent>
                                    <SelectItem value="training-amphitheater">Training Amphitheater</SelectItem>
                                    <SelectItem value="collaboration-suites">Collaboration Suites</SelectItem>
                                    <SelectItem value="outdoor-pavilion">Outdoor Pavilion</SelectItem>
                                    <SelectItem value="residential-quarters">Residential Quarters</SelectItem>
                                    <SelectItem value="flexible">Flexible / Any Zone</SelectItem>
                                </SelectContent>
                            </Select>
                        </div>

                        <div>
                            <Label htmlFor="requirements">Additional Requirements</Label>
                            <Textarea
                                id="requirements"
                                value={bookingForm.additionalRequirements}
                                onChange={(e: any) => setBookingForm({ ...bookingForm, additionalRequirements: e.target.value })}
                                placeholder="Tell us about your event, special requirements, catering needs, etc."
                                rows={3}
                            />
                        </div>

                        <div className="flex gap-3 pt-4">
                            <Button
                                type="submit"
                                className="flex-1"
                                style={{
                                    backgroundColor: 'var(--color-primary)',
                                    color: 'white'
                                }}
                            >
                                Submit Booking Request
                            </Button>
                            <Button
                                type="button"
                                variant="outline"
                                onClick={() => setIsBookingModalOpen(false)}
                            >
                                Cancel
                            </Button>
                        </div>
                    </form>
                </DialogContent>
            </Dialog>

            {/* Booking Modal */}
            <Dialog open={isBookingModalOpen} onOpenChange={setIsBookingModalOpen}>
                <DialogContent className="max-w-2xl max-h-[90vh] overflow-y-auto">
                    <DialogHeader>
                        <DialogTitle className="text-h3 mb-2">Book Our Learning Facility</DialogTitle>
                        <DialogDescription className="text-body text-muted">
                            Submit your booking request and we'll get back to you within 24 hours to confirm availability and discuss your requirements.
                        </DialogDescription>
                    </DialogHeader>

                    <form onSubmit={handleBookingSubmit} className="space-y-6 mt-6">
                        <div className="grid md:grid-cols-2 gap-4">
                            <div className="space-y-2">
                                <Label htmlFor="companyName" className="text-body font-medium">Company/Organization Name *</Label>
                                <Input
                                    id="companyName"
                                    value={bookingForm.companyName}
                                    onChange={(e: any) => setBookingForm({ ...bookingForm, companyName: e.target.value })}
                                    placeholder="Enter company name"
                                    required
                                    className="text-body"
                                />
                            </div>

                            <div className="space-y-2">
                                <Label htmlFor="contactName" className="text-body font-medium">Contact Person *</Label>
                                <Input
                                    id="contactName"
                                    value={bookingForm.contactName}
                                    onChange={(e: any) => setBookingForm({ ...bookingForm, contactName: e.target.value })}
                                    placeholder="Enter your full name"
                                    required
                                    className="text-body"
                                />
                            </div>
                        </div>

                        <div className="grid md:grid-cols-2 gap-4">
                            <div className="space-y-2">
                                <Label htmlFor="email" className="text-body font-medium">Email Address *</Label>
                                <Input
                                    id="email"
                                    type="email"
                                    value={bookingForm.email}
                                    onChange={(e: any) => setBookingForm({ ...bookingForm, email: e.target.value })}
                                    placeholder="your.email@company.com"
                                    required
                                    className="text-body"
                                />
                            </div>

                            <div className="space-y-2">
                                <Label htmlFor="phone" className="text-body font-medium">Phone Number</Label>
                                <Input
                                    id="phone"
                                    value={bookingForm.phone}
                                    onChange={(e: any) => setBookingForm({ ...bookingForm, phone: e.target.value })}
                                    placeholder="+1 (555) 123-4567"
                                    className="text-body"
                                />
                            </div>
                        </div>

                        <div className="grid md:grid-cols-2 gap-4">
                            <div className="space-y-2">
                                <Label htmlFor="role" className="text-body font-medium">Your Role/Position</Label>
                                <Input
                                    id="role"
                                    value={bookingForm.role}
                                    onChange={(e: any) => setBookingForm({ ...bookingForm, role: e.target.value })}
                                    placeholder="e.g., Training Manager, HR Director"
                                    className="text-body"
                                />
                            </div>

                            <div className="space-y-2">
                                <Label htmlFor="teamSize" className="text-body font-medium">Expected Group Size *</Label>
                                <Select value={bookingForm.teamSize} onValueChange={(value: any) => setBookingForm({ ...bookingForm, teamSize: value })}>
                                    <SelectTrigger className="text-body">
                                        <SelectValue placeholder="Select group size" />
                                    </SelectTrigger>
                                    <SelectContent>
                                        <SelectItem value="1-10">1-10 participants</SelectItem>
                                        <SelectItem value="11-25">11-25 participants</SelectItem>
                                        <SelectItem value="26-50">26-50 participants</SelectItem>
                                        <SelectItem value="51-80">51-80 participants</SelectItem>
                                        <SelectItem value="80+">80+ participants</SelectItem>
                                    </SelectContent>
                                </Select>
                            </div>
                        </div>

                        <div className="space-y-2">
                            <Label htmlFor="facilityZone" className="text-body font-medium">Preferred Learning Zone</Label>
                            <Select value={bookingForm.facilityZone} onValueChange={(value: any) => setBookingForm({ ...bookingForm, facilityZone: value })}>
                                <SelectTrigger className="text-body">
                                    <SelectValue placeholder="Select preferred zone (optional)" />
                                </SelectTrigger>
                                <SelectContent>
                                    <SelectItem value="amphitheater">Training Amphitheater (80-120 people)</SelectItem>
                                    <SelectItem value="collaboration">Collaboration Suites (4-8 people)</SelectItem>
                                    <SelectItem value="outdoor">Outdoor Learning Pavilion (20-40 people)</SelectItem>
                                    <SelectItem value="multiple">Multiple zones needed</SelectItem>
                                    <SelectItem value="flexible">Flexible - advise best option</SelectItem>
                                </SelectContent>
                            </Select>
                        </div>

                        <div className="space-y-2">
                            <Label htmlFor="requirements" className="text-body font-medium">Additional Requirements</Label>
                            <Textarea
                                id="requirements"
                                value={bookingForm.additionalRequirements}
                                onChange={(e: any) => setBookingForm({ ...bookingForm, additionalRequirements: e.target.value })}
                                placeholder="Please share any specific requirements, preferred dates, catering needs, accommodation requirements, etc."
                                rows={4}
                                className="text-body resize-none"
                            />
                        </div>

                        <div className="flex flex-col sm:flex-row gap-3 justify-end pt-4">
                            <Button
                                type="button"
                                variant="outline"
                                onClick={() => setIsBookingModalOpen(false)}
                                className="text-body"
                            >
                                Cancel
                            </Button>
                            <Button
                                type="submit"
                                className="text-body px-8"
                                style={{
                                    backgroundColor: 'var(--color-primary)',
                                    color: 'white',
                                    fontFamily: 'var(--font-family-base)'
                                }}
                            >
                                <Calendar className="w-4 h-4 mr-2" />
                                Submit Booking Request
                            </Button>
                        </div>
                    </form>
                </DialogContent>
            </Dialog>

            {/* 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={() => setIsBookingModalOpen(true)}
                                        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>
    );
}