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

import React, { useState } from "react";
import { motion } from "motion/react";
import { 
  Building, 
  Users, 
  Presentation, 
  Coffee,
  Play,
  Calendar,
  ArrowRight,
  Eye,
  X,
  ChevronLeft,
  ChevronRight
} from "lucide-react";
import { ImageWithFallback } from "./figma/ImageWithFallback";
import { BrandedTag } from "./about/BrandedTag";
import { PrimaryCTAButton } from "./PrimaryCTAButton";
import { Button } from "./ui/button";
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 { navigateTo } from "./Router";

// Calendar helper functions
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 formatDate = (date: Date) => {
  return date.toISOString().split('T')[0];
};

const isDateAvailable = (date: Date) => {
  const today = new Date();
  today.setHours(0, 0, 0, 0);
  const selectedDate = new Date(date);
  selectedDate.setHours(0, 0, 0, 0);
  
  // Available if it's today or in the future, and not a Sunday
  return selectedDate >= today && selectedDate.getDay() !== 0;
};

const facilities = [
  {
    id: 1,
    name: "Campus",
    description: "Our flagship campus offers comprehensive leadership development with state-of-the-art facilities.",
    icon: Building,
    image: "https://images.unsplash.com/photo-1497366216548-37526070297c?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1200&q=80",
    videoUrl: "https://www.youtube.com/embed/dQw4w9WgXcQ", // Virtual tour video
    capacity: "50-80",
    features: ["State-of-the-art facilities", "Comprehensive programs", "Modern infrastructure"]
  },
  {
    id: 2,
    name: "Classroom",
    description: "Interactive learning environment with flexible seating and cutting-edge educational technology.",
    icon: Users,
    image: "https://images.unsplash.com/photo-1562774053-701939374585?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1200&q=80",
    videoUrl: "https://www.youtube.com/embed/dQw4w9WgXcQ", // Virtual tour video
    capacity: "20-30",
    features: ["Interactive learning", "Flexible seating", "Educational technology"]
  },
  {
    id: 3,
    name: "Auditorium",
    description: "Premier presentation venue with theater-style seating and professional AV systems for impactful presentations.",
    icon: Presentation,
    image: "https://images.unsplash.com/photo-1540575467063-178a50c2df87?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1200&q=80",
    videoUrl: "https://www.youtube.com/embed/dQw4w9WgXcQ", // Virtual tour video
    capacity: "100-150",
    features: ["Theater-style seating", "Professional AV systems", "Impactful presentations"]
  },
  {
    id: 4,
    name: "Boardroom",
    description: "Executive meeting space designed for strategic discussions and high-level decision making with premium amenities.",
    icon: Coffee,
    image: "https://images.unsplash.com/photo-1497366754035-f200968a6e72?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1200&q=80",
    videoUrl: "https://www.youtube.com/embed/dQw4w9WgXcQ", // Virtual tour video
    capacity: "8-15",
    features: ["Executive meeting space", "Strategic discussions", "Premium amenities"]
  }
];

interface BookingFormData {
  companyName: string;
  contactName: string;
  email: string;
  phone: string;
  role: string;
  teamSize: string;
  facilityType: string;
  preferredDate: string;
  additionalRequirements: string;
}

interface FacilityCardProps {
  facility: typeof facilities[0];
  index: number;
}

function FacilityCard({ facility, index }: FacilityCardProps) {
  const IconComponent = facility.icon;

  return (
    <motion.div
      className="relative group h-full overflow-hidden"
      initial={{ opacity: 0, y: 60 }}
      whileInView={{ opacity: 1, y: 0 }}
      transition={{ duration: 0.7, delay: index * 0.15 }}
      viewport={{ once: true, margin: "-50px" }}
    >
      
      {/* Background Image - Full Height */}
      <div className="absolute inset-0">
        <ImageWithFallback
          src={facility.image}
          alt={facility.name}
          className="w-full h-full object-cover transition-transform duration-700 ease-out group-hover:scale-110"
        />
        {/* Dark overlay with hover effect */}
        <div className="absolute inset-0 bg-black/60 transition-all duration-500 ease-out group-hover:bg-black/40" />
      </div>

      {/* Content - Positioned at bottom of card */}
      <div className="relative z-10 h-full flex flex-col justify-end p-8 max-lg:p-6">
        {/* Icon */}
        <div className="flex justify-center mb-4">
          <div 
            className="w-16 h-16 rounded-2xl flex items-center justify-center bg-white/20 backdrop-blur-sm border border-white/30"
          >
            <IconComponent 
              className="w-8 h-8 text-white"
            />
          </div>
        </div>

        {/* Title */}
        <h3 className="text-3xl font-bold mb-3 text-white max-lg:text-2xl text-center">
          {facility.name}
        </h3>

        {/* Description */}
        <p className="text-white/90 leading-relaxed mb-6 text-base max-lg:text-sm text-center max-lg:mb-5 md:min-h-[110px]">
          {facility.description}
        </p>

        {/* Capacity Info */}
        <div className="flex justify-center">
          <div className="bg-white/20 backdrop-blur-sm rounded-lg px-4 py-2 border border-white/30">
            <p className="text-white text-sm font-medium">Capacity: {facility.capacity} people</p>
          </div>
        </div>
      </div>
    </motion.div>
  );
}

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

        {/* Calendar Footer - Compact */}
        <div className="pt-2 border-t border-gray-200">
          <div className="flex items-center justify-center gap-3 text-xs text-gray-500">
            <div className="flex items-center gap-1">
              <div className="w-2 h-2 rounded-full bg-primary"></div>
              <span>Selected</span>
            </div>
            <div className="flex items-center gap-1">
              <div className="w-2 h-2 rounded-full border border-gray-300"></div>
              <span>Available</span>
            </div>
          </div>
        </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">
                  {/* 
                    DEVELOPER NOTE: Replace this container with your preferred 360 viewer
                    Popular options:
                    - A-Frame (https://aframe.io/) for WebXR 360 content
                    - Three.js with 360 photo/video support
                    - Pannellum (https://pannellum.org/) for 360 photos
                    - Krpano (https://krpano.com/) for advanced 360 tours
                    - React 360 (https://facebook.github.io/react-360/)
                    
                    Current implementation: Fallback video iframe
                    Replace the entire div below with your 360 viewer component
                  */}
                  <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" // Change to "video" for video fallback
                  >
                    {/* Fallback: Video iframe - Replace this entire section with 360 viewer */}
                    <iframe
                      src={facility.videoUrl}
                      title={`${facility.name} Virtual Tour`}
                      className="w-full h-full"
                      allowFullScreen
                      frameBorder="0"
                    />
                    
                    {/* 360 Viewer Placeholder - Remove iframe above and uncomment/implement below */}
                    {/* 
                    Example A-Frame 360 implementation:
                    <a-scene 
                      embedded 
                      style={{width: '100%', height: '100%'}}
                      vr-mode-ui="enabled: false"
                    >
                      <a-sky src={facility.panoramaUrl || facility.image} />
                      <a-camera wasd-controls-enabled="false" look-controls="enabled: true" />
                    </a-scene>
                    */}
                    
                    {/* Alternative: Custom 360 Photo Viewer Container */}
                    {/*
                    <div className="w-full h-full" id={`pannellum-${facility.id}`}>
                      // Pannellum or other 360 viewer initialization
                    </div>
                    */}
                  </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">
                    {/* Selected Facility Info */}
                    {/* <div className="bg-blue-50 rounded p-2 border border-blue-100">
                      <div className="flex items-center gap-2">
                        <div 
                          className="w-6 h-6 rounded flex items-center justify-center"
                          style={{ backgroundColor: 'var(--color-primary)' }}
                        >
                          <facility.icon className="w-3 h-3 text-white" />
                        </div>
                        <div>
                          <p className="text-sm font-medium text-gray-900">{facility.name}</p>
                          <p className="text-xs text-gray-600">Capacity: {facility.capacity} people</p>
                        </div>
                      </div>
                    </div> */}

                    {/* 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>
  );
}

export function VirtualSpaceSection() {
  const [selectedFacility, setSelectedFacility] = useState<typeof facilities[0] | null>(null);
  const [isModalOpen, setIsModalOpen] = useState(false);

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

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

  return (
    <section className="relative overflow-hidden">
      {/* Full-Width Image Section with Overlaid Content */}
      <div className="relative h-screen min-h-[700px] virtual-learn-sec">
        {/* Facility Cards Grid - Single Row, Side by Side */}
        <div className="h-full grid grid-cols-4 max-lg:grid-cols-2 max-md:grid-cols-1">
          {facilities.map((facility, index) => (
            <FacilityCard
              key={facility.id}
              facility={facility}
              index={index}
            />
          ))}
        </div>

        {/* Overlaid Content - Centered at top of image section */}
        <div className="absolute top-0 left-0 right-0 z-20 py-16 max-md:py-12 section-margin-x ">
          <div className="max-w-4xl mx-auto text-center exp-our-head-desktop-sec">
            {/* Branded Tag */}
            <motion.div 
              initial={{ opacity: 0, y: -20 }}
              whileInView={{ opacity: 1, y: 0 }}
              transition={{ duration: 0.6 }}
              viewport={{ once: true }}
            >
              <BrandedTag 
                text="Virtual Learning Environment" 
                className="justify-center"
                variant="white"
              />
            </motion.div>

            {/* Main Heading */}
            <motion.h2 
              className="text-5xl font-bold leading-tight mb-4 max-lg:text-4xl max-md:text-3xl text-white"
              initial={{ opacity: 0, y: 30 }}
              whileInView={{ opacity: 1, y: 0 }}
              transition={{ duration: 0.8, delay: 0.2 }}
              viewport={{ once: true }}
            >
              Experience Our Space Virtually
            </motion.h2>

            {/* Subheading */}
            <motion.p 
              className="text-lg leading-relaxed max-w-2xl mx-auto max-lg:text-base mb-6 text-white/90"
              initial={{ opacity: 0, y: 20 }}
              whileInView={{ opacity: 1, y: 0 }}
              transition={{ duration: 0.8, delay: 0.4 }}
              viewport={{ once: true }}
            >
              Take a virtual walk through our state-of-the-art facility designed to inspire leadership excellence and foster collaborative learning.
            </motion.p>

            {/* Main CTA Button - Book Now */}
            <motion.div
              className="flex justify-center"
              initial={{ opacity: 0, y: 20 }}
              whileInView={{ opacity: 1, y: 0 }}
              transition={{ duration: 0.8, delay: 0.6 }}
              viewport={{ once: true }}
            >
              <div className="hero-slide-button">
                <PrimaryCTAButton 
                  text="Book Now"
                  onClick={handleBookNow}
                  ariaLabel="Book our virtual learning space and facilities"
                />
              </div>
            </motion.div>
          </div>
        </div>

        {/* Additional overlay for better text readability over images */}
        <div className="absolute top-0 left-0 right-0 h-80 bg-gradient-to-b from-black/70 via-black/40 to-transparent z-10 exp-our-head-desktop-sec" />
      </div>

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