KLC-Website-Frontend/src/components/LearningFacilityNew.tsx

import {
  ArrowRight,
  Bed,
  BookOpen,
  Briefcase,
  Building,
  Calendar,
  Car,
  CheckCircle,
  ChevronDown,
  ChevronLeft,
  ChevronRight,
  ChevronUp,
  Coffee,
  Compass,
  Dumbbell,
  Heart,
  Home,
  Leaf,
  Mail,
  MapPin,
  Monitor,
  Network,
  Phone,
  Play,
  Settings,
  Shield,
  Star,
  Target,
  TreePine,
  TrendingUp,
  UserCheck,
  Users,
  Utensils,
  Wifi,
  X
} from 'lucide-react';
import { motion } from 'motion/react';
import React, { useEffect, useRef, useState } from 'react';
import kautilyaVirtualTourImage from '../assets/Kautilya.png';
import { BrandedTag } from './about/BrandedTag';
import { CTABannerSection } from './CTABannerSection';
import { ImageWithFallback } from './figma/ImageWithFallback';
import { PrimaryCTAButton } from './PrimaryCTAButton';
import { navigateTo } from './Router';
import { TestimonialsSection } from './TestimonialsSection';
import { Button } from './ui/button';
import { Card, CardContent } from './ui/card';
import { Input } from './ui/input';
import { Label } from './ui/label';
import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from './ui/select';
import { Textarea } from './ui/textarea';

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


const targetAudience = [
  {
    title: "Corporate Training Teams",
    description: "Organizations seeking premium residential learning experiences for their leadership development programs",
    icon: Building,
    challenges: ["Facility booking complexity", "Quality accommodation needs", "Program logistics", "Cost management"]
  },
  {
    title: "Leadership Development Providers",
    description: "Training organizations and consultancies requiring world-class facilities for executive programs",
    icon: Users,
    challenges: ["Facility availability", "Technology requirements", "Catering quality", "Professional environment"]
  },
  {
    title: "Executive Teams & Boards",
    description: "Senior leadership teams planning strategic retreats and intensive development programs",
    icon: Target,
    challenges: ["Privacy requirements", "Executive-level facilities", "Strategic planning spaces", "Convenience needs"]
  }
];

const useCases = [
  {
    title: "Leadership Residential Programs",
    description: "When organizations need premium facilities for multi-day leadership development programs",
    icon: Home,
    scenario: "Executive development programs requiring 2-7 day residential experiences"
  },
  {
    title: "Strategic Planning Retreats",
    description: "When leadership teams need focused environments for strategic planning and decision-making",
    icon: Target,
    scenario: "Board meetings, strategic sessions, or executive team planning retreats"
  },
  {
    title: "Learning & Development Events",
    description: "When organizations require professional venues for training, workshops, and development events",
    icon: BookOpen,
    scenario: "Corporate training programs, workshops, or learning conferences"
  },
  {
    title: "Team Building & Culture Events",
    description: "When teams need inspiring environments for team building and cultural development activities",
    icon: Heart,
    scenario: "Team building events, culture workshops, or organizational celebrations"
  }
];

const facilityFeatures = [
  {
    phase: "Premium Accommodations",
    duration: "World-Class Comfort",
    activities: ["Luxury single and double rooms", "Executive suites", "24/7 concierge service", "High-speed internet throughout"],
    deliverables: ["Comfortable stay experience", "Professional environment", "Seamless connectivity", "Executive-level service"]
  },
  {
    phase: "Learning & Meeting Spaces",
    duration: "State-of-the-Art Facilities",
    activities: ["Modern conference rooms", "Interactive learning spaces", "Breakout areas", "Outdoor meeting spaces"],
    deliverables: ["Flexible learning environments", "Technology-enabled spaces", "Collaborative areas", "Natural settings"]
  },
  {
    phase: "Dining & Recreation",
    duration: "Complete Experience",
    activities: ["Gourmet dining options", "Healthy meal programs", "Recreation facilities", "Wellness amenities"],
    deliverables: ["Nutritious meal programs", "Networking opportunities", "Physical wellness", "Stress relief activities"]
  }
];

const expectedOutcomes = [
  {
    metric: "96%",
    description: "Client satisfaction with facility quality and service",
    icon: Heart,
    category: "Satisfaction"
  },
  {
    metric: "87%",
    description: "Improvement in program engagement in residential setting",
    icon: TrendingUp,
    category: "Engagement"
  },
  {
    metric: "92%",
    description: "Would recommend Kautilya Facility to other organizations",
    icon: Star,
    category: "Recommendation"
  },
  {
    metric: "78%",
    description: "Return rate for repeat bookings and programs",
    icon: Building,
    category: "Loyalty"
  }
];

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

  const [expandedUseCase, setExpandedUseCase] = useState<number | null>(null);
  const [expandedFeature, setExpandedFeature] = useState<number | null>(0);

  // 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>

      {/* 1. What Is This Service */}
      <section className="py-24 lg:py-32" style={{ backgroundColor: '#FFFFFF' }}>
        <div className="section-margin-x">
          <div className="max-w-6xl mx-auto">
            <div className="text-center mb-12">
              <BrandedTag text="What Is This Service?" />
              <h2 className="text-h2 mb-8 text-[#26231A]">Premium Learning Campus & Residential Programs</h2>
              <div className="max-w-4xl mx-auto space-y-6">
                <p className="text-body-lg text-[#6F6F6F] leading-relaxed">
                  Kautilya Facility is a world-class residential learning campus designed specifically for executive education and leadership development programs. Our premium facility combines luxury accommodations, state-of-the-art learning spaces, and comprehensive amenities to create an immersive environment that maximizes learning outcomes and program engagement.
                </p>
                <div className="bg-[#04045B]/5 border-l-4 border-[#04045B] p-6 rounded-lg">
                  <p className="text-body-lg text-[#26231A] leading-relaxed">
                    <span className="font-semibold text-[#04045B]">The Business Problem It Solves:</span> Many organizations struggle to find appropriate venues that combine professional learning environments with quality accommodations for residential programs. Standard hotels lack the specialized learning infrastructure, while conference centers often compromise on accommodation quality. Our facility eliminates these compromises by providing an integrated solution designed specifically for executive learning.
                  </p>
                </div>
              </div>
            </div>

            <div className="grid grid-cols-1 md:grid-cols-3 gap-8">
              <div className="group bg-white border border-gray-200 rounded-xl p-8 hover:border-[#04045B]/20 hover:shadow-lg transition-all duration-300">
                <div className="flex flex-col items-center text-center">
                  <div
                    className="w-16 h-16 rounded-xl flex items-center justify-center mb-6 group-hover:scale-105 transition-transform duration-300"
                    style={{ backgroundColor: '#04045B' }}
                  >
                    <Building className="w-8 h-8 text-white" />
                  </div>
                  <h4 className="text-h4 mb-4 text-[#26231A] group-hover:text-[#04045B] transition-colors duration-300">
                    Premium Campus
                  </h4>
                  <p className="text-body text-[#6F6F6F] leading-relaxed">
                    World-class residential learning campus with luxury amenities and sophisticated infrastructure
                  </p>
                </div>
              </div>

              <div className="group bg-white border border-gray-200 rounded-xl p-8 hover:border-[#04045B]/20 hover:shadow-lg transition-all duration-300">
                <div className="flex flex-col items-center text-center">
                  <div
                    className="w-16 h-16 rounded-xl flex items-center justify-center mb-6 group-hover:scale-105 transition-transform duration-300"
                    style={{ backgroundColor: '#04045B' }}
                  >
                    <BookOpen className="w-8 h-8 text-white" />
                  </div>
                  <h4 className="text-h4 mb-4 text-[#26231A] group-hover:text-[#04045B] transition-colors duration-300">
                    Learning-Focused Design
                  </h4>
                  <p className="text-body text-[#6F6F6F] leading-relaxed">
                    Specialized spaces designed for optimal learning and development with cutting-edge technology
                  </p>
                </div>
              </div>

              <div className="group bg-white border border-gray-200 rounded-xl p-8 hover:border-[#04045B]/20 hover:shadow-lg transition-all duration-300">
                <div className="flex flex-col items-center text-center">
                  <div
                    className="w-16 h-16 rounded-xl flex items-center justify-center mb-6 group-hover:scale-105 transition-transform duration-300"
                    style={{ backgroundColor: '#04045B' }}
                  >
                    <Heart className="w-8 h-8 text-white" />
                  </div>
                  <h4 className="text-h4 mb-4 text-[#26231A] group-hover:text-[#04045B] transition-colors duration-300">
                    96% Satisfaction Rate
                  </h4>
                  <p className="text-body text-[#6F6F6F] leading-relaxed">
                    Exceptional client satisfaction with facility quality, service excellence, and learning outcomes
                  </p>
                </div>
              </div>
            </div>
          </div>
        </div>
      </section>

      {/* 2. Who Is It For */}
      <section className="py-24 lg:py-32" style={{ backgroundColor: '#F9F9F9' }}>
        <div className="section-margin-x">
          <div className="max-w-6xl mx-auto">
            <div className="text-center mb-16">
              <BrandedTag text="Who Is It For?" />
              <h2 className="text-h2 mb-8">Target Audience</h2>
              <p className="text-body-lg text-muted max-w-3xl mx-auto">
                Designed for organizations and teams seeking premium residential learning and strategic planning experiences.
              </p>
            </div>

            <div className="grid grid-cols-1 lg:grid-cols-3 gap-8">
              {targetAudience.map((audience, index) => (
                <Card key={index} className="h-full hover:shadow-lg transition-all duration-300">
                  <CardContent className="p-8">
                    <div className="flex items-center gap-4 mb-6">
                      <div
                        className="w-16 h-16 rounded-2xl flex items-center justify-center"
                        style={{ backgroundColor: 'var(--color-primary)' }}
                      >
                        <audience.icon className="w-8 h-8 text-white" />
                      </div>
                    </div>
                    <h3 className="text-h4 mb-4">{audience.title}</h3>
                    <p className="text-body text-muted mb-6">{audience.description}</p>
                    <div>
                      <h4 className="text-small font-semibold text-primary mb-3">Common Challenges:</h4>
                      <ul className="space-y-2">
                        {audience.challenges.map((challenge, challengeIndex) => (
                          <li key={challengeIndex} className="text-small text-muted flex items-start gap-2">
                            <div className="w-1 h-1 bg-primary rounded-full mt-2 flex-shrink-0"></div>
                            {challenge}
                          </li>
                        ))}
                      </ul>
                    </div>
                  </CardContent>
                </Card>
              ))}
            </div>
          </div>
        </div>
      </section>

      {/* 3. When to Use It */}
      <section className="py-24 lg:py-32" style={{ backgroundColor: '#FFFFFF' }}>
        <div className="section-margin-x">
          <div className="max-w-6xl mx-auto">
            <div className="text-center mb-16">
              <BrandedTag text="When to Use It?" />
              <h2 className="text-h2 mb-8">When Organizations Need Premium Learning Facilities</h2>
              <p className="text-body-lg text-muted max-w-2xl mx-auto">
                Ideal for organizations seeking world-class residential learning experiences and strategic planning sessions.
              </p>
            </div>

            <div className="grid grid-cols-1 md:grid-cols-2 gap-8">
              {useCases.map((useCase, index) => (
                <div
                  key={index}
                  className="bg-white rounded-xl border border-gray-200 p-6 hover:border-[#04045B] hover:shadow-lg transition-all duration-300"
                >
                  {/* Icon and Title */}
                  <div className="flex items-start gap-4 mb-4">
                    <div
                      className="w-12 h-12 rounded-lg flex items-center justify-center flex-shrink-0"
                      style={{ backgroundColor: '#04045B' }}
                    >
                      <useCase.icon className="w-6 h-6 text-white" />
                    </div>
                    <div className="flex-1">
                      <h3 className="text-h4 mb-2 text-[#26231A]">
                        {useCase.title}
                      </h3>
                      <p className="text-body text-muted">
                        {useCase.description}
                      </p>
                    </div>
                  </div>

                  {/* Ideal For Indicator */}
                  <div className="flex items-center gap-2 text-small text-[#04045B] bg-[#04045B]/5 px-3 py-2 rounded-lg">
                    <div className="w-2 h-2 rounded-full bg-[#F8C301]" />
                    <span className="font-medium">
                      {useCase.scenario}
                    </span>
                  </div>
                </div>
              ))}
            </div>
          </div>
        </div>
      </section>

      {/* 4. Our Approach */}
      <section className="py-24 lg:py-32" style={{ backgroundColor: '#F9F9F9' }}>
        <div className="section-margin-x">
          <div className="w-full">
            <div className="max-w-6xl mx-auto">
              <div className="text-center mb-16">
                <BrandedTag text="Our Approach" />
                <h2 className="text-h2 mb-8 text-[#26231A]">Integrated Learning Campus Experience</h2>
                <p className="text-body-lg text-[#6F6F6F] max-w-3xl mx-auto">
                  Our comprehensive approach combines premium accommodations, state-of-the-art learning facilities, and exceptional service delivery.
                </p>
              </div>

              {/* Flowchart Container with Connecting Lines */}
              <div className="relative mb-16 flex flex-col items-center">
                {/* Desktop: Horizontal Flowchart */}
                <div className="hidden lg:block w-full max-w-5xl">
                  <div className="relative">
                    {/* Row 1: Facilities, Services, Technology */}
                    <div className="grid grid-cols-3 gap-8 mb-12 relative w-full">
                      {/* Facilities */}
                      <div className="bg-white border-2 border-[#04045B] rounded-xl p-6 hover:shadow-lg transition-all duration-300 relative z-10">
                        <div className="w-12 h-12 bg-[#04045B] rounded-lg flex items-center justify-center mb-4">
                          <Home className="w-6 h-6 text-white" />
                        </div>
                        <h3 className="text-h4 text-[#26231A] mb-3">Premium Facilities</h3>
                        <p className="text-body text-[#6F6F6F] mb-4">
                          World-class accommodations and learning environments
                        </p>
                        <div className="space-y-2">
                          <div className="text-small text-[#6F6F6F] bg-gray-50 px-3 py-2 rounded-lg">
                            Luxury Accommodations
                          </div>
                          <div className="text-small text-[#6F6F6F] bg-gray-50 px-3 py-2 rounded-lg">
                            Learning Spaces
                          </div>
                          <div className="text-small text-[#6F6F6F] bg-gray-50 px-3 py-2 rounded-lg">
                            Wellness Facilities
                          </div>
                        </div>
                      </div>

                      {/* Arrow 1→2 */}
                      <div className="absolute top-1/2 left-[calc(33.33%-2rem)] -translate-y-1/2 z-0 flex items-center">
                        <div className="w-16 h-0.5 bg-[#F8C301]"></div>
                        <ArrowRight className="w-6 h-6 text-[#F8C301] -ml-1" />
                      </div>

                      {/* Services */}
                      <div className="bg-white border-2 border-[#F8C301] rounded-xl p-6 hover:shadow-lg transition-all duration-300 relative z-10">
                        <div className="w-12 h-12 bg-[#F8C301] rounded-lg flex items-center justify-center mb-4">
                          <Coffee className="w-6 h-6 text-white" />
                        </div>
                        <h3 className="text-h4 text-[#26231A] mb-3">Service Excellence</h3>
                        <p className="text-body text-[#6F6F6F] mb-4">
                          Exceptional hospitality and dining experiences
                        </p>
                        <div className="space-y-2">
                          <div className="text-small text-[#6F6F6F] bg-gray-50 px-3 py-2 rounded-lg">
                            Gourmet Catering
                          </div>
                          <div className="text-small text-[#6F6F6F] bg-gray-50 px-3 py-2 rounded-lg">
                            24/7 Concierge
                          </div>
                          <div className="text-small text-[#6F6F6F] bg-gray-50 px-3 py-2 rounded-lg">
                            Event Management
                          </div>
                        </div>
                      </div>

                      {/* Arrow 2→3 */}
                      <div className="absolute top-1/2 left-[calc(66.66%-2rem)] -translate-y-1/2 z-0 flex items-center">
                        <div className="w-16 h-0.5 bg-[#04045B]"></div>
                        <ArrowRight className="w-6 h-6 text-[#04045B] -ml-1" />
                      </div>

                      {/* Technology */}
                      <div className="bg-white border-2 border-[#04045B] rounded-xl p-6 hover:shadow-lg transition-all duration-300 relative z-10">
                        <div className="w-12 h-12 bg-[#04045B] rounded-lg flex items-center justify-center mb-4">
                          <Wifi className="w-6 h-6 text-white" />
                        </div>
                        <h3 className="text-h4 text-[#26231A] mb-3">Technology Infrastructure</h3>
                        <p className="text-body text-[#6F6F6F] mb-4">
                          Advanced technology for seamless learning delivery
                        </p>
                        <div className="space-y-2">
                          <div className="text-small text-[#6F6F6F] bg-gray-50 px-3 py-2 rounded-lg">
                            High-Speed Internet
                          </div>
                          <div className="text-small text-[#6F6F6F] bg-gray-50 px-3 py-2 rounded-lg">
                            AV Equipment
                          </div>
                          <div className="text-small text-[#6F6F6F] bg-gray-50 px-3 py-2 rounded-lg">
                            Tech Support
                          </div>
                        </div>
                      </div>
                    </div>

                    {/* Vertical Connector - Center Flow Down */}
                    <div className="flex justify-center mb-6">
                      <div className="flex flex-col items-center">
                        <div className="w-0.5 h-12 bg-[#F8C301]"></div>
                        <ArrowRight className="w-6 h-6 text-[#F8C301] rotate-90" />
                      </div>
                    </div>

                    {/* Row 2: Customization, Support */}
                    <div className="grid grid-cols-2 gap-8 w-full max-w-3xl mx-auto mb-12 relative">
                      {/* Customization */}
                      <div className="bg-white border-2 border-[#F8C301] rounded-xl p-6 hover:shadow-lg transition-all duration-300 relative z-10">
                        <div className="w-12 h-12 bg-[#F8C301] rounded-lg flex items-center justify-center mb-4">
                          <Settings className="w-6 h-6 text-white" />
                        </div>
                        <h3 className="text-h4 text-[#26231A] mb-3">Flexible Customization</h3>
                        <p className="text-body text-[#6F6F6F] mb-4">
                          Adaptable spaces configured to your program needs
                        </p>
                        <div className="space-y-2">
                          <div className="text-small text-[#6F6F6F] bg-gray-50 px-3 py-2 rounded-lg">
                            Room Configurations
                          </div>
                          <div className="text-small text-[#6F6F6F] bg-gray-50 px-3 py-2 rounded-lg">
                            Custom Setups
                          </div>
                          <div className="text-small text-[#6F6F6F] bg-gray-50 px-3 py-2 rounded-lg">
                            Branding Options
                          </div>
                        </div>
                      </div>

                      {/* Arrow 4→5 */}
                      <div className="absolute top-1/2 left-1/2 -translate-x-1/2 -translate-y-1/2 z-0 flex items-center">
                        <div className="w-16 h-0.5 bg-[#04045B]"></div>
                        <ArrowRight className="w-6 h-6 text-[#04045B] -ml-1" />
                      </div>

                      {/* Dedicated Support */}
                      <div className="bg-white border-2 border-[#04045B] rounded-xl p-6 hover:shadow-lg transition-all duration-300 relative z-10">
                        <div className="w-12 h-12 bg-[#04045B] rounded-lg flex items-center justify-center mb-4">
                          <UserCheck className="w-6 h-6 text-white" />
                        </div>
                        <h3 className="text-h4 text-[#26231A] mb-3">Dedicated Support</h3>
                        <p className="text-body text-[#6F6F6F] mb-4">
                          Expert team ensuring flawless program execution
                        </p>
                        <div className="space-y-2">
                          <div className="text-small text-[#6F6F6F] bg-gray-50 px-3 py-2 rounded-lg">
                            Event Coordinators
                          </div>
                          <div className="text-small text-[#6F6F6F] bg-gray-50 px-3 py-2 rounded-lg">
                            Facility Staff
                          </div>
                          <div className="text-small text-[#6F6F6F] bg-gray-50 px-3 py-2 rounded-lg">
                            Technical Team
                          </div>
                        </div>
                      </div>
                    </div>

                    {/* Final Vertical Connector - Center Flow Down to Outcome */}
                    <div className="flex justify-center mb-6">
                      <div className="flex flex-col items-center">
                        <div className="w-0.5 h-12 bg-[#04045B]"></div>
                        <ArrowRight className="w-6 h-6 text-[#04045B] rotate-90" />
                      </div>
                    </div>

                    {/* Row 3: Expected Outcome - Centered */}
                    <div className="flex justify-center w-full">
                      <div className="bg-[#04045B] text-white rounded-xl p-8 w-full max-w-2xl border-4 border-[#F8C301] shadow-xl">
                        <div className="flex items-center gap-3 mb-4">
                          <TrendingUp className="w-10 h-10 text-[#F8C301]" />
                          <h3 className="text-h4 text-white">Expected Outcome</h3>
                        </div>
                        <p className="text-body text-white mb-4">
                          An immersive learning environment that enhances focus, engagement, and program effectiveness for transformational results.
                        </p>
                        <div className="flex items-center gap-2 text-[#F8C301]">
                          <CheckCircle className="w-6 h-6" />
                          <span className="text-body text-white">Exceptional Learning Experience</span>
                        </div>
                      </div>
                    </div>
                  </div>
                </div>

                {/* Tablet & Mobile: Vertical Flowchart */}
                <div className="lg:hidden space-y-8">
                  {/* Facilities */}
                  <div className="relative">
                    <div className="bg-white border-2 border-[#04045B] rounded-xl p-6 hover:shadow-lg transition-all duration-300">
                      <div className="w-12 h-12 bg-[#04045B] rounded-lg flex items-center justify-center mb-4">
                        <Home className="w-6 h-6 text-white" />
                      </div>
                      <h3 className="text-h4 text-[#26231A] mb-3">Premium Facilities</h3>
                      <p className="text-body text-[#6F6F6F] mb-4">
                        World-class accommodations and learning environments
                      </p>
                      <div className="space-y-2">
                        <div className="text-small text-[#6F6F6F] bg-gray-50 px-3 py-2 rounded-lg">
                          Luxury Accommodations
                        </div>
                        <div className="text-small text-[#6F6F6F] bg-gray-50 px-3 py-2 rounded-lg">
                          Learning Spaces
                        </div>
                        <div className="text-small text-[#6F6F6F] bg-gray-50 px-3 py-2 rounded-lg">
                          Wellness Facilities
                        </div>
                      </div>
                    </div>
                    {/* Connector Arrow */}
                    <div className="flex justify-center my-4">
                      <ArrowRight className="w-8 h-8 text-[#F8C301] rotate-90" />
                    </div>
                  </div>

                  {/* Services */}
                  <div className="relative">
                    <div className="bg-white border-2 border-[#F8C301] rounded-xl p-6 hover:shadow-lg transition-all duration-300">
                      <div className="w-12 h-12 bg-[#F8C301] rounded-lg flex items-center justify-center mb-4">
                        <Coffee className="w-6 h-6 text-white" />
                      </div>
                      <h3 className="text-h4 text-[#26231A] mb-3">Service Excellence</h3>
                      <p className="text-body text-[#6F6F6F] mb-4">
                        Exceptional hospitality and dining experiences
                      </p>
                      <div className="space-y-2">
                        <div className="text-small text-[#6F6F6F] bg-gray-50 px-3 py-2 rounded-lg">
                          Gourmet Catering
                        </div>
                        <div className="text-small text-[#6F6F6F] bg-gray-50 px-3 py-2 rounded-lg">
                          24/7 Concierge
                        </div>
                        <div className="text-small text-[#6F6F6F] bg-gray-50 px-3 py-2 rounded-lg">
                          Event Management
                        </div>
                      </div>
                    </div>
                    {/* Connector Arrow */}
                    <div className="flex justify-center my-4">
                      <ArrowRight className="w-8 h-8 text-[#04045B] rotate-90" />
                    </div>
                  </div>

                  {/* Technology */}
                  <div className="relative">
                    <div className="bg-white border-2 border-[#04045B] rounded-xl p-6 hover:shadow-lg transition-all duration-300">
                      <div className="w-12 h-12 bg-[#04045B] rounded-lg flex items-center justify-center mb-4">
                        <Wifi className="w-6 h-6 text-white" />
                      </div>
                      <h3 className="text-h4 text-[#26231A] mb-3">Technology Infrastructure</h3>
                      <p className="text-body text-[#6F6F6F] mb-4">
                        Advanced technology for seamless learning delivery
                      </p>
                      <div className="space-y-2">
                        <div className="text-small text-[#6F6F6F] bg-gray-50 px-3 py-2 rounded-lg">
                          High-Speed Internet
                        </div>
                        <div className="text-small text-[#6F6F6F] bg-gray-50 px-3 py-2 rounded-lg">
                          AV Equipment
                        </div>
                        <div className="text-small text-[#6F6F6F] bg-gray-50 px-3 py-2 rounded-lg">
                          Tech Support
                        </div>
                      </div>
                    </div>
                    {/* Connector Arrow */}
                    <div className="flex justify-center my-4">
                      <ArrowRight className="w-8 h-8 text-[#F8C301] rotate-90" />
                    </div>
                  </div>

                  {/* Customization */}
                  <div className="relative">
                    <div className="bg-white border-2 border-[#F8C301] rounded-xl p-6 hover:shadow-lg transition-all duration-300">
                      <div className="w-12 h-12 bg-[#F8C301] rounded-lg flex items-center justify-center mb-4">
                        <Settings className="w-6 h-6 text-white" />
                      </div>
                      <h3 className="text-h4 text-[#26231A] mb-3">Flexible Customization</h3>
                      <p className="text-body text-[#6F6F6F] mb-4">
                        Adaptable spaces configured to your program needs
                      </p>
                      <div className="space-y-2">
                        <div className="text-small text-[#6F6F6F] bg-gray-50 px-3 py-2 rounded-lg">
                          Room Configurations
                        </div>
                        <div className="text-small text-[#6F6F6F] bg-gray-50 px-3 py-2 rounded-lg">
                          Custom Setups
                        </div>
                        <div className="text-small text-[#6F6F6F] bg-gray-50 px-3 py-2 rounded-lg">
                          Branding Options
                        </div>
                      </div>
                    </div>
                    {/* Connector Arrow */}
                    <div className="flex justify-center my-4">
                      <ArrowRight className="w-8 h-8 text-[#04045B] rotate-90" />
                    </div>
                  </div>

                  {/* Dedicated Support */}
                  <div className="relative">
                    <div className="bg-white border-2 border-[#04045B] rounded-xl p-6 hover:shadow-lg transition-all duration-300">
                      <div className="w-12 h-12 bg-[#04045B] rounded-lg flex items-center justify-center mb-4">
                        <UserCheck className="w-6 h-6 text-white" />
                      </div>
                      <h3 className="text-h4 text-[#26231A] mb-3">Dedicated Support</h3>
                      <p className="text-body text-[#6F6F6F] mb-4">
                        Expert team ensuring flawless program execution
                      </p>
                      <div className="space-y-2">
                        <div className="text-small text-[#6F6F6F] bg-gray-50 px-3 py-2 rounded-lg">
                          Event Coordinators
                        </div>
                        <div className="text-small text-[#6F6F6F] bg-gray-50 px-3 py-2 rounded-lg">
                          Facility Staff
                        </div>
                        <div className="text-small text-[#6F6F6F] bg-gray-50 px-3 py-2 rounded-lg">
                          Technical Team
                        </div>
                      </div>
                    </div>
                    {/* Connector Arrow */}
                    <div className="flex justify-center my-4">
                      <ArrowRight className="w-8 h-8 text-[#F8C301] rotate-90" />
                    </div>
                  </div>

                  {/* Expected Outcome */}
                  <div className="bg-[#04045B] text-white rounded-xl p-8 border-4 border-[#F8C301] shadow-xl">
                    <div className="flex items-center gap-3 mb-4">
                      <TrendingUp className="w-10 h-10 text-[#F8C301]" />
                      <h3 className="text-h4 text-white">Expected Outcome</h3>
                    </div>
                    <p className="text-body text-white mb-4">
                      An immersive learning environment that enhances focus, engagement, and program effectiveness for transformational results.
                    </p>
                    <div className="flex items-center gap-2 text-[#F8C301]">
                      <CheckCircle className="w-6 h-6" />
                      <span className="text-body text-white">Exceptional Learning Experience</span>
                    </div>
                  </div>
                </div>
              </div>

              {/* Framework Effectiveness */}
              {/* <div className="bg-gray-50 rounded-xl p-8">
                <div className="text-center mb-8">
                  <h3 className="text-h3 text-[#26231A] mb-4">Facility Excellence Metrics</h3>
                  <p className="text-body text-[#6F6F6F] max-w-2xl mx-auto">
                    Our integrated campus approach delivers superior learning outcomes through exceptional environments.
                  </p>
                </div>

                <div className="grid grid-cols-1 md:grid-cols-3 gap-6">
                  <div className="text-center bg-white rounded-lg p-6">
                    <div className="w-14 h-14 bg-[#04045B] rounded-lg flex items-center justify-center mx-auto mb-3">
                      <Target className="w-7 h-7 text-white" />
                    </div>
                    <div className="text-h2 text-[#04045B] mb-2">96%</div>
                    <p className="text-body text-[#6F6F6F]">Guest Satisfaction Rating</p>
                  </div>

                  <div className="text-center bg-white rounded-lg p-6">
                    <div className="w-14 h-14 bg-[#F8C301] rounded-lg flex items-center justify-center mx-auto mb-3">
                      <Users className="w-7 h-7 text-white" />
                    </div>
                    <div className="text-h2 text-[#04045B] mb-2">92%</div>
                    <p className="text-body text-[#6F6F6F]">Program Effectiveness Increase</p>
                  </div>

                  <div className="text-center bg-white rounded-lg p-6">
                    <div className="w-14 h-14 bg-[#04045B] rounded-lg flex items-center justify-center mx-auto mb-3">
                      <TrendingUp className="w-7 h-7 text-white" />
                    </div>
                    <div className="text-h2 text-[#04045B] mb-2">89%</div>
                    <p className="text-body text-[#6F6F6F]">Repeat Booking Rate</p>
                  </div>
                </div>
              </div> */}
            </div>
          </div>
        </div>
      </section>

      {/* 5. Sample Program Format */}
      <section className="py-24 lg:py-32" style={{ backgroundColor: '#FFFFFF' }}>
        <div className="section-margin-x">
          <div className="max-w-6xl mx-auto">
            <div className="text-center mb-16">
              <BrandedTag text="Sample Program Format" />
              <h2 className="text-h2 mb-8">Complete Campus Experience</h2>
              <p className="text-body-lg text-muted max-w-3xl mx-auto">
                A comprehensive facility experience designed to maximize learning outcomes and participant satisfaction.
              </p>
            </div>

            <div className="space-y-8">
              {facilityFeatures.map((feature, index) => (
                <Card
                  key={index}
                  className="border border-gray-200 hover:border-primary/20 transition-all duration-300 hover:shadow-lg"
                >
                  <CardContent className="p-0">
                    <div
                      className="flex items-center justify-between p-6 cursor-pointer"
                      onClick={() => setExpandedFeature(expandedFeature === index ? null : index)}
                    >
                      <div className="flex items-start gap-4 flex-1">
                        <div
                          className="w-12 h-12 rounded-xl flex items-center justify-center flex-shrink-0"
                          style={{ backgroundColor: 'var(--color-primary)' }}
                        >
                          <span className="text-white font-semibold">{index + 1}</span>
                        </div>
                        <div className="flex-1">
                          <h3 className="text-h4 mb-2">{feature.phase}</h3>
                          <div className="flex items-center gap-2 mb-3">
                            <Building className="w-4 h-4 text-muted" />
                            <span className="text-small text-muted">{feature.duration}</span>
                          </div>
                        </div>
                      </div>
                      <div className="ml-4">
                        {expandedFeature === index ? (
                          <ChevronUp className="w-5 h-5 text-muted" />
                        ) : (
                          <ChevronDown className="w-5 h-5 text-muted" />
                        )}
                      </div>
                    </div>

                    {expandedFeature === index && (
                      <div className="px-6 pb-6 border-t border-gray-100">
                        <div className="pt-6 grid grid-cols-1 lg:grid-cols-2 gap-8">
                          <div>
                            <h4 className="text-h4 mb-4">Available Features</h4>
                            <ul className="space-y-3">
                              {feature.activities.map((activity, activityIndex) => (
                                <li key={activityIndex} className="flex items-start gap-3">
                                  <CheckCircle className="w-4 h-4 text-primary flex-shrink-0 mt-1" />
                                  <span className="text-body text-muted">{activity}</span>
                                </li>
                              ))}
                            </ul>
                          </div>
                          <div>
                            <h4 className="text-h4 mb-4">Experience Benefits</h4>
                            <ul className="space-y-3">
                              {feature.deliverables.map((deliverable, deliverableIndex) => (
                                <li key={deliverableIndex} className="flex items-start gap-3">
                                  <Star className="w-4 h-4 text-accent flex-shrink-0 mt-1" />
                                  <span className="text-body text-muted">{deliverable}</span>
                                </li>
                              ))}
                            </ul>
                          </div>
                        </div>
                      </div>
                    )}
                  </CardContent>
                </Card>
              ))}
            </div>
          </div>
        </div>
      </section>

      {/* 6. Impact You Can Expect */}
      <section className="py-24 lg:py-32" style={{ backgroundColor: '#F9F9F9' }}>
        <div className="section-margin-x">
          <div className="max-w-6xl mx-auto">
            <div className="text-center mb-16">
              <BrandedTag text="Impact You Can Expect" />
              <h2 className="text-h2 mb-8">Measurable Facility Outcomes</h2>
              <p className="text-body-lg text-muted max-w-3xl mx-auto">
                Organizations consistently report high satisfaction and improved program outcomes when using our premium facility.
              </p>
            </div>

            {/* Outcomes Grid */}
            <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-8">
              {expectedOutcomes.map((outcome, index) => (
                <Card key={index} className="text-center bg-white hover:shadow-lg transition-all duration-300">
                  <CardContent className="p-8">
                    <div
                      className="w-16 h-16 rounded-2xl flex items-center justify-center mx-auto mb-6"
                      style={{ backgroundColor: 'var(--color-primary)' }}
                    >
                      <outcome.icon className="w-8 h-8 text-white" />
                    </div>
                    {/* <div className="text-5xl font-medium mb-4" style={{ color: 'var(--color-primary)' }}>
                      {outcome.metric}
                    </div> */}
                    <p className="text-xl mb-4 text-primary font-medium">{outcome.category}</p>

                    <p className="text-body text-muted mb-2">{outcome.description}</p>
                    {/* <p className="text-small text-primary font-medium">{outcome.category}</p> */}
                  </CardContent>
                </Card>
              ))}
            </div>

            <div className="mt-16 bg-white p-8 rounded-2xl shadow-lg">
              <h3 className="text-h3 mb-6 text-center">Additional Facility Benefits</h3>
              <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6">
                <div className="text-center">
                  <Building className="w-8 h-8 text-primary mx-auto mb-3" />
                  <h4 className="text-h4 mb-2">Premium Environment</h4>
                  <p className="text-small text-muted">World-class facilities that enhance learning and networking</p>
                </div>
                <div className="text-center">
                  <Heart className="w-8 h-8 text-primary mx-auto mb-3" />
                  <h4 className="text-h4 mb-2">Exceptional Service</h4>
                  <p className="text-small text-muted">Dedicated support staff and personalized service excellence</p>
                </div>
                <div className="text-center">
                  <Compass className="w-8 h-8 text-primary mx-auto mb-3" />
                  <h4 className="text-h4 mb-2">Strategic Location</h4>
                  <p className="text-small text-muted">Convenient location with peaceful, focused learning environment</p>
                </div>
              </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>
  );
}