import React, { useState, useEffect } from 'react';
import { navigateTo } from './Router';
import { Button } from './ui/button';
import { Card, CardContent, CardHeader, CardTitle } from './ui/card';
import { Badge } from './ui/badge';
import { Dialog, DialogContent, DialogDescription, DialogHeader, DialogTitle, DialogTrigger } from './ui/dialog';
import { Input } from './ui/input';
import { Label } from './ui/label';
import { Textarea } from './ui/textarea';
import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from './ui/select';
import { Accordion, AccordionContent, AccordionItem, AccordionTrigger } from './ui/accordion';
import { ImageWithFallback } from './figma/ImageWithFallback';
import {
  Play,
  Users,
  MapPin,
  Shield,
  Clock,
  CheckCircle,
  Star,
  Wifi,
  Coffee,
  Car,
  Utensils,
  HeadphonesIcon,
  Camera,
  Building,
  ChevronLeft,
  ChevronRight,
  Quote,
  Calendar,
  ArrowRight,
  Eye,
  UserCheck,
  Phone,
  Mail,
  Zap,
  Award,
  Target,
  X,
  ChevronDown,
  ChevronUp,
  Monitor,
  Lightbulb,
  Presentation,
  MessageCircle,
  TreePine,
  Bed,
  Maximize2,
  PlayCircle,
  BookOpen,
  Globe,
  Loader2
} from 'lucide-react';

interface BookingForm {
  companyName: string;
  contactName: string;
  email: string;
  phone: string;
  role: string;
  teamSize: string;
  facilityZone: string;
  additionalRequirements: string;
}

interface VirtualTourStop {
  id: string;
  title: string;
  description: string;
  image: string;
  features: string[];
  capacity?: string;
  equipment?: string[];
  keyHighlight: string;
  zone: number;
}

interface Testimonial {
  id: string;
  name: string;
  role: string;
  company: string;
  content: string;
  rating: number;
  image: string;
}

const virtualTourStops: VirtualTourStop[] = [
  {
    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. Perfect for keynotes, large workshops, and transformative learning experiences.',
    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'
    ],
    equipment: [
      'Professional AV system',
      'Wireless microphones',
      'Stage lighting',
      'Recording studio quality audio'
    ]
  },
  {
    id: 'collaboration-suites',
    title: 'Collaboration Suites',
    description: 'Foster deep connections and intensive learning in our intimate spaces perfect for small group work, coaching sessions, and high-impact workshops. Where meaningful conversations happen.',
    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'
    ],
    equipment: [
      '65" smart displays',
      'Video conferencing',
      'Whiteboard walls',
      'Individual charging stations'
    ]
  },
  {
    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. Experience the energy of outdoor education.',
    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'
    ],
    equipment: [
      'Outdoor-rated AV system',
      'Portable screens',
      'Weather-resistant furniture',
      'Garden lighting'
    ]
  },
  {
    id: 'residential-quarters',
    title: 'Residential Quarters',
    description: 'Extend your learning journey with comfortable accommodation for multi-day programs featuring hotel-standard amenities. Rest, recharge, and continue growing in our peaceful residential environment.',
    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'
    ],
    equipment: [
      'Smart TV',
      'Mini refrigerator',
      'Tea/coffee facilities',
      'Safe and storage'
    ]
  }
];

const testimonials: Testimonial[] = [
  {
    id: '1',
    name: 'Sarah Chen',
    role: 'Chief People Officer',
    company: 'Tech Innovations Ltd',
    content: 'The facility tour convinced us immediately. The spaces are not just beautiful, but thoughtfully designed for learning. Our leadership retreat here transformed our entire executive team.',
    rating: 5,
    image: 'https://images.unsplash.com/photo-1494790108755-2616b612d7c5?w=200&h=200&fit=crop'
  },
  {
    id: '2',
    name: 'Rajesh Sharma',
    role: 'Learning & Development Director',
    company: 'Global Manufacturing Corp',
    content: 'What impressed us most was the attention to detail. Every room is equipped with exactly what facilitators need. The residential component made our 3-day program seamless.',
    rating: 5,
    image: 'https://images.unsplash.com/photo-1472099645785-5658abf4ff4e?w=200&h=200&fit=crop'
  },
  {
    id: '3',
    name: 'Emily Rodriguez',
    role: 'Executive Assistant to CEO',
    company: 'Financial Services Group',
    content: 'Organizing our board retreat here was effortless. The team handled every detail, from catering to technology setup. Our executives still talk about the experience.',
    rating: 5,
    image: 'https://images.unsplash.com/photo-1580489944761-15a19d654956?w=200&h=200&fit=crop'
  },
  {
    id: '4',
    name: 'Michael Park',
    role: 'VP Strategy',
    company: 'Fortune 500 Consulting',
    content: 'The Training Amphitheater exceeded our expectations. The combination of premium amenities and cutting-edge technology created the perfect environment for our strategic planning session.',
    rating: 5,
    image: 'https://images.unsplash.com/photo-1507003211169-0a1dd7228f2d?w=200&h=200&fit=crop'
  },
  {
    id: '5',
    name: 'Dr. Priya Mehta',
    role: 'Director of Innovation',
    company: 'Healthcare Solutions Inc',
    content: 'The Collaboration Suites are game-changers. The flexible design and collaborative technology helped our team breakthrough creative barriers we\'d been facing for months.',
    rating: 5,
    image: 'https://images.unsplash.com/photo-1559839734-2b71ea197ec2?w=200&h=200&fit=crop'
  },
  {
    id: '6',
    name: 'James Wilson',
    role: 'Chief Operating Officer',
    company: 'International Trade Corp',
    content: 'From the moment we arrived, everything was flawless. The valet parking, gourmet catering, and residential quarters made this feel like a luxury executive retreat rather than a training facility.',
    rating: 5,
    image: 'https://images.unsplash.com/photo-1560250097-0b93528c311a?w=200&h=200&fit=crop'
  }
];

// Hero carousel data - Boardroom focused
const heroSlides = [
  {
    id: 'slide-1',
    image: 'https://images.unsplash.com/photo-1577791464704-3bbd2da56803?w=1920&h=1080&fit=crop',
    title: 'Executive',
    highlight: 'Boardrooms',
    description: 'Premium boardroom facilities designed for high-level strategic discussions and board meetings with cutting-edge technology and executive-grade amenities.'
  },
  {
    id: 'slide-2',
    image: 'https://images.unsplash.com/photo-1740933084056-078fac872bff?w=1920&h=1080&fit=crop',
    title: 'Collaboration',
    highlight: 'Boardrooms',
    description: 'Intimate boardroom spaces perfect for executive meetings, strategic planning sessions, and confidential discussions with state-of-the-art presentation technology.'
  },
  {
    id: 'slide-3',
    image: 'https://images.unsplash.com/photo-1599696850225-a0c950381056?w=1920&h=1080&fit=crop',
    title: 'Conference',
    highlight: 'Boardrooms',
    description: 'Large-scale boardroom facilities for corporate retreats, board presentations, and executive training sessions with professional AV systems and tiered seating.'
  }
];

export function VirtualTour() {
  const [currentStop, setCurrentStop] = useState(0);
  const [currentSlide, setCurrentSlide] = useState(0);
  const [isVirtualTourActive, setIsVirtualTourActive] = useState(false);
  const [isBookingModalOpen, setIsBookingModalOpen] = useState(false);
  const [expandedCard, setExpandedCard] = useState<string | null>(null);
  const [imageLoading, setImageLoading] = useState<Record<string, boolean>>({});
  const [tourImageLoading, setTourImageLoading] = useState(true);
  const [bookingForm, setBookingForm] = useState<BookingForm>({
    companyName: '',
    contactName: '',
    email: '',
    phone: '',
    role: '',
    teamSize: '',
    facilityZone: '',
    additionalRequirements: ''
  });

  useEffect(() => {
    document.title = 'Virtual Tour - Learning Facility | KLC';
    window.scrollTo(0, 0);
  }, []);

  const handleStartTour = () => {
    setIsVirtualTourActive(true);
    setCurrentStop(0);
    setTourImageLoading(true);
  };

  const handleNextStop = () => {
    if (currentStop < virtualTourStops.length - 1) {
      setCurrentStop(currentStop + 1);
      setTourImageLoading(true);
    }
  };

  const handlePrevStop = () => {
    if (currentStop > 0) {
      setCurrentStop(currentStop - 1);
      setTourImageLoading(true);
    }
  };

  const handleJumpToStop = (index: number) => {
    setCurrentStop(index);
    setTourImageLoading(true);
  };

  const handleBookingSubmit = (e: React.FormEvent) => {
    e.preventDefault();
    console.log('Booking submitted:', bookingForm);
    setIsBookingModalOpen(false);
    setBookingForm({
      companyName: '',
      contactName: '',
      email: '',
      phone: '',
      role: '',
      teamSize: '',
      facilityZone: '',
      additionalRequirements: ''
    });
  };

  const handleCardExpand = (cardId: string) => {
    setExpandedCard(cardId);
  };

  const handleImageLoad = (stopId: string) => {
    setImageLoading(prev => ({ ...prev, [stopId]: false }));
  };

  const handleImageError = (stopId: string) => {
    setImageLoading(prev => ({ ...prev, [stopId]: false }));
  };

  const handleTourImageLoad = () => {
    setTourImageLoading(false);
  };

  // Carousel navigation handlers
  const handleNextSlide = () => {
    setCurrentSlide((prev) => (prev === heroSlides.length - 1 ? 0 : prev + 1));
  };

  const handlePrevSlide = () => {
    setCurrentSlide((prev) => (prev === 0 ? heroSlides.length - 1 : prev - 1));
  };

  const handleSlideClick = (index: number) => {
    setCurrentSlide(index);
  };

  // Auto-advance carousel
  useEffect(() => {
    const timer = setInterval(() => {
      setCurrentSlide((prev) => (prev === heroSlides.length - 1 ? 0 : prev + 1));
    }, 6000);

    return () => clearInterval(timer);
  }, []);

  // Initialize image loading states
  useEffect(() => {
    const initialLoadingStates: Record<string, boolean> = {};
    virtualTourStops.forEach(stop => {
      initialLoadingStates[stop.id] = true;
    });
    setImageLoading(initialLoadingStates);
  }, []);

  return (
    <div className="min-h-screen" style={{ backgroundColor: '#F7F7FD' }}>
      {/* Hero Carousel Section */}
      <section className="relative h-[70vh] lg:h-[80vh] flex items-center justify-center overflow-hidden">
        {/* Carousel Background Images */}
        <div className="absolute inset-0 z-0">
          {heroSlides.map((slide, index) => (
            <div
              key={slide.id}
              className={`absolute inset-0 transition-opacity duration-1000 ${
                index === currentSlide ? 'opacity-100' : 'opacity-0'
              }`}
            >
              <ImageWithFallback
                src={slide.image}
                alt={`KLC Facility - ${slide.title} ${slide.highlight}`}
                className="w-full h-full object-cover"
              />
              <div 
                className="absolute inset-0"
                style={{
                  background: 'linear-gradient(to right, rgba(0, 0, 0, 0.75) 0%, rgba(0, 0, 0, 0.6) 50%, rgba(0, 0, 0, 0.4) 100%)'
                }}
              />
            </div>
          ))}
        </div>

        {/* Carousel Navigation Arrows */}
        <button
          onClick={handlePrevSlide}
          className="absolute left-8 top-1/2 -translate-y-1/2 z-20 w-12 h-12 bg-white/10 backdrop-blur-sm border border-white/20 rounded-full flex items-center justify-center text-white hover:bg-white/20 transition-all duration-300 group"
          aria-label="Previous slide"
        >
          <ChevronLeft className="w-6 h-6 group-hover:scale-110 transition-transform" />
        </button>

        <button
          onClick={handleNextSlide}
          className="absolute right-8 top-1/2 -translate-y-1/2 z-20 w-12 h-12 bg-white/10 backdrop-blur-sm border border-white/20 rounded-full flex items-center justify-center text-white hover:bg-white/20 transition-all duration-300 group"
          aria-label="Next slide"
        >
          <ChevronRight className="w-6 h-6 group-hover:scale-110 transition-transform" />
        </button>

        {/* Hero Content */}
        <div className="relative z-10 mx-auto section-margin-x h-full flex flex-col justify-center">
          <div className="max-w-6xl mx-auto text-center space-y-12">
            
            {/* Main Content */}
            <div className="text-white space-y-8 text-center">
              <Badge 
                className="text-small px-4 py-2 mb-6"
                style={{
                  backgroundColor: 'rgba(248, 195, 1, 0.2)',
                  color: 'var(--color-accent)',
                  border: '1px solid rgba(248, 195, 1, 0.3)',
                  fontFamily: 'var(--font-family-base)'
                }}
              >
                Premium Learning Facility
              </Badge>
              
              <div className="space-y-6">
                <h1 className="text-h1 text-white leading-tight">
                  {heroSlides[currentSlide].title}
                  <span className="block text-accent mt-2">{heroSlides[currentSlide].highlight}</span>
                </h1>
                
                <p className="text-body-lg text-white max-w-4xl mx-auto leading-relaxed opacity-95">
                  {heroSlides[currentSlide].description}
                </p>
              </div>
            </div>
          </div>
        </div>

        {/* Carousel Dots Indicator */}
        <div className="absolute bottom-8 left-1/2 transform -translate-x-1/2 z-20">
          <div className="flex gap-3">
            {heroSlides.map((_, index) => (
              <button
                key={index}
                onClick={() => handleSlideClick(index)}
                className={`w-3 h-3 rounded-full transition-all duration-300 ${
                  index === currentSlide 
                    ? 'bg-accent w-8' 
                    : 'bg-white/50 hover:bg-white/80'
                }`}
                aria-label={`Go to slide ${index + 1}`}
              />
            ))}
          </div>
        </div>
      </section>

      {/* Facility Stats Card */}
      <div className="relative z-30 -mt-20 mb-12">
        <div className="mx-auto section-margin-x">
          <div className="flex justify-center">
            <Card className="border border-border/30 shadow-lg rounded-xl overflow-hidden max-w-4xl w-full" style={{ backgroundColor: 'var(--color-bg-white)' }}>
              <CardContent className="p-6">
                <div className="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-4 gap-6 text-center">
                  
                  {/* Campus Size */}
                  <div className="flex flex-col items-center space-y-2">
                    <div className="flex items-center gap-2 text-primary">
                      <TreePine className="w-5 h-5" />
                      <span className="text-subhead">2 Acres</span>
                    </div>
                    <div className="text-body text-muted">
                      Campus
                    </div>
                  </div>

                  {/* Learning Zones */}
                  <div className="flex flex-col items-center space-y-2">
                    <div className="flex items-center gap-2 text-primary">
                      <Building className="w-5 h-5" />
                      <span className="text-subhead">4 Zones</span>
                    </div>
                    <div className="text-body text-muted">
                      Learning Zones
                    </div>
                  </div>

                  {/* Residential Rooms */}
                  <div className="flex flex-col items-center space-y-2">
                    <div className="flex items-center gap-2 text-primary">
                      <Bed className="w-5 h-5" />
                      <span className="text-subhead">40 Rooms</span>
                    </div>
                    <div className="text-body text-muted">
                      Residential
                    </div>
                  </div>

                  {/* Max Capacity */}
                  <div className="flex flex-col items-center space-y-2">
                    <div className="flex items-center gap-2 text-primary">
                      <Users className="w-5 h-5" />
                      <span className="text-subhead">120+</span>
                    </div>
                    <div className="text-body text-muted">
                      Max Capacity
                    </div>
                  </div>
                </div>
              </CardContent>
            </Card>
          </div>
        </div>
      </div>

      {/* Virtual Tour Section */}
      <section className="py-20" style={{ backgroundColor: 'rgba(0, 0, 0, 0.03)' }}>
        <div className="mx-auto section-margin-x">
          {!isVirtualTourActive ? (
            /* Tour Preview */
            <div className="text-center max-w-7xl mx-auto space-y-16">
              {/* Header Section */}
              <div className="space-y-6">
                <Badge 
                  className="text-small px-4 py-2"
                  style={{
                    backgroundColor: 'rgba(4, 4, 91, 0.1)',
                    color: 'var(--color-primary)',
                    border: '1px solid rgba(4, 4, 91, 0.2)',
                    fontFamily: 'var(--font-family-base)'
                  }}
                >
                  Interactive Experience
                </Badge>
                <h2 className="text-h2 max-w-4xl mx-auto">
                  Discover functional and inspiring learning spaces designed for you.
                </h2>
                <p className="text-body-lg text-muted leading-relaxed max-w-3xl mx-auto">
                  Our buildings combine premium elegance and state of the art interiors. Four distinct learning environments designed to inspire and transform.
                </p>
              </div>

              {/* Tour Cards */}
              <div className="relative overflow-hidden">
                <div className="flex gap-8 overflow-x-auto pb-4">
                  {virtualTourStops.map((stop, index) => (
                    <div key={stop.id} className="group relative flex-shrink-0">
                      <div 
                        className="relative w-80 h-[400px] lg:w-96 lg:h-[480px] overflow-hidden cursor-pointer transition-all duration-500 hover:shadow-2xl"
                        onClick={() => handleCardExpand(stop.id)}
                      >
                        {/* Loading State */}
                        {imageLoading[stop.id] && (
                          <div className="absolute inset-0 bg-muted/50 flex items-center justify-center z-10">
                            <Loader2 className="w-8 h-8 text-primary animate-spin" />
                          </div>
                        )}
                        
                        {/* Image */}
                        <ImageWithFallback
                          src={stop.image}
                          alt={stop.title}
                          className="w-full h-full object-cover transition-transform duration-700 group-hover:scale-105"
                          onLoad={() => handleImageLoad(stop.id)}
                          onError={() => handleImageError(stop.id)}
                        />
                        
                        {/* Overlay */}
                        <div className="absolute inset-0 bg-gradient-to-t from-black/60 via-transparent to-transparent"></div>
                        
                        {/* Icon */}
                        <div className="absolute top-8 left-8">
                          <div 
                            className="w-16 h-16 flex items-center justify-center border"
                            style={{ 
                              backgroundColor: 'rgba(255, 255, 255, 0.1)',
                              backdropFilter: 'blur(10px)',
                              borderColor: 'rgba(255, 255, 255, 0.2)'
                            }}
                          >
                            <Building className="w-8 h-8 text-white" />
                          </div>
                        </div>

                        {/* Title */}
                        <div className="absolute bottom-0 left-0 right-0 p-8">
                          <h3 className="text-subhead text-white text-left">
                            {stop.title}
                          </h3>
                        </div>

                        {/* Click Indicator */}
                        <div className="absolute inset-0 flex items-center justify-center opacity-0 group-hover:opacity-100 transition-all duration-300">
                          <div 
                            className="w-20 h-20 flex items-center justify-center border transform scale-75 group-hover:scale-100 transition-transform duration-300"
                            style={{
                              backgroundColor: 'rgba(255, 255, 255, 0.1)',
                              backdropFilter: 'blur(10px)',
                              borderColor: 'rgba(255, 255, 255, 0.3)'
                            }}
                          >
                            <Eye className="w-10 h-10 text-white" />
                          </div>
                        </div>
                      </div>
                    </div>
                  ))}
                </div>
              </div>

              {/* Space Modal */}
              <Dialog open={!!expandedCard} onOpenChange={() => setExpandedCard(null)}>
                <DialogContent className="max-w-2xl">
                  {expandedCard && (
                    <>
                      <DialogHeader className="pb-6">
                        <div className="text-center space-y-4">
                          <div 
                            className="w-20 h-20 rounded-2xl flex items-center justify-center mx-auto"
                            style={{ backgroundColor: 'rgba(4, 4, 91, 0.1)' }}
                          >
                            <Building className="w-10 h-10 text-primary" />
                          </div>
                          <div>
                            <DialogTitle className="text-h3 mb-2">
                              {virtualTourStops.find(stop => stop.id === expandedCard)?.title}
                            </DialogTitle>
                            <div className="flex items-center justify-center gap-6 text-body text-muted">
                              <span className="flex items-center gap-2">
                                <MapPin className="w-4 h-4" />
                                Zone {virtualTourStops.find(stop => stop.id === expandedCard)?.zone}
                              </span>
                              <span className="flex items-center gap-2">
                                <Users className="w-4 h-4" />
                                {virtualTourStops.find(stop => stop.id === expandedCard)?.capacity}
                              </span>
                            </div>
                          </div>
                        </div>
                      </DialogHeader>

                      <div className="py-6 space-y-8">
                        {/* Featured Image */}
                        <div className="relative h-64 rounded-2xl overflow-hidden">
                          <ImageWithFallback
                            src={virtualTourStops.find(stop => stop.id === expandedCard)?.image || ''}
                            alt={virtualTourStops.find(stop => stop.id === expandedCard)?.title || ''}
                            className="w-full h-full object-cover"
                          />
                          <div className="absolute inset-0 bg-gradient-to-t from-black/40 to-transparent"></div>
                          <div className="absolute top-6 left-6">
                            <Badge 
                              className="text-body px-4 py-2"
                              style={{
                                backgroundColor: 'var(--color-accent)',
                                color: 'var(--color-black)',
                                fontFamily: 'var(--font-family-base)'
                              }}
                            >
                              {virtualTourStops.find(stop => stop.id === expandedCard)?.keyHighlight}
                            </Badge>
                          </div>
                        </div>

                        {/* Description */}
                        <div className="text-center space-y-4">
                          <p className="text-body-lg text-muted leading-relaxed">
                            {virtualTourStops.find(stop => stop.id === expandedCard)?.description}
                          </p>
                        </div>

                        {/* Features */}
                        <div className="grid grid-cols-2 gap-4">
                          {virtualTourStops.find(stop => stop.id === expandedCard)?.features.slice(0, 4).map((feature, idx) => (
                            <div 
                              key={idx} 
                              className="flex items-center gap-3 rounded-lg p-4"
                              style={{ backgroundColor: 'rgba(0, 0, 0, 0.03)' }}
                            >
                              <CheckCircle className="w-5 h-5 text-green-600 flex-shrink-0" />
                              <span className="text-body">{feature}</span>
                            </div>
                          ))}
                        </div>

                        {/* Action Buttons */}
                        <div className="flex flex-col sm:flex-row gap-4 pt-4 border-t">
                          <Button
                            onClick={() => {
                              const stopIndex = virtualTourStops.findIndex(stop => stop.id === expandedCard);
                              setCurrentStop(stopIndex);
                              setIsVirtualTourActive(true);
                              setExpandedCard(null);
                            }}
                            className="text-body px-8 py-3 h-auto flex-1 group"
                            style={{
                              backgroundColor: 'var(--color-primary)',
                              color: 'white',
                              fontFamily: 'var(--font-family-base)'
                            }}
                          >
                            <Eye className="w-5 h-5 mr-2 group-hover:scale-110 transition-transform" />
                            Explore This Space
                          </Button>
                          <Button
                            variant="outline"
                            onClick={() => {
                              setIsBookingModalOpen(true);
                              setExpandedCard(null);
                            }}
                            className="text-body px-8 py-3 h-auto flex-1"
                            style={{
                              borderColor: 'var(--color-primary)',
                              color: 'var(--color-primary)',
                              fontFamily: 'var(--font-family-base)'
                            }}
                          >
                            <Calendar className="w-5 h-5 mr-2" />
                            Book Space
                          </Button>
                        </div>
                      </div>
                    </>
                  )}
                </DialogContent>
              </Dialog>
            </div>
          ) : (
            /* Active Virtual Tour */
            <div className="max-w-7xl mx-auto">
              {/* Tour Header */}
              <div className="text-center mb-12 space-y-4">
                <Badge 
                  className="text-body px-4 py-2"
                  style={{
                    backgroundColor: 'rgba(4, 4, 91, 0.1)',
                    color: 'var(--color-primary)',
                    border: '1px solid rgba(4, 4, 91, 0.2)',
                    fontFamily: 'var(--font-family-base)'
                  }}
                >
                  Virtual Tour Active
                </Badge>
                <h2 className="text-h2">
                  Exploring: {virtualTourStops[currentStop].title}
                </h2>
                <p className="text-body-lg text-muted">
                  Zone {virtualTourStops[currentStop].zone} of 4 • {virtualTourStops[currentStop].keyHighlight}
                </p>
              </div>

              <div className="grid lg:grid-cols-5 gap-12 items-start">
                {/* Tour Image */}
                <div className="lg:col-span-3 space-y-6">
                  <div className="relative h-96 lg:h-[600px] rounded-2xl overflow-hidden shadow-2xl">
                    {tourImageLoading && (
                      <div 
                        className="absolute inset-0 flex items-center justify-center z-10"
                        style={{ backgroundColor: 'rgba(0, 0, 0, 0.03)' }}
                      >
                        <div className="flex flex-col items-center gap-4">
                          <Loader2 className="w-8 h-8 text-primary animate-spin" />
                          <p className="text-body text-muted">Loading space...</p>
                        </div>
                      </div>
                    )}
                    <ImageWithFallback
                      src={virtualTourStops[currentStop].image}
                      alt={virtualTourStops[currentStop].title}
                      className="w-full h-full object-cover"
                      onLoad={handleTourImageLoad}
                    />
                    
                    {/* Tour Controls Overlay */}
                    <div className="absolute inset-0 bg-gradient-to-t from-black/50 via-transparent to-transparent">
                      <div className="absolute top-6 left-6 right-6">
                        <div className="flex items-center justify-between">
                          <Badge 
                            className="text-body px-4 py-2 shadow-lg"
                            style={{
                              backgroundColor: 'rgba(248, 195, 1, 0.9)',
                              color: 'var(--color-black)',
                              fontFamily: 'var(--font-family-base)'
                            }}
                          >
                            {currentStop + 1} of {virtualTourStops.length}
                          </Badge>
                          <div className="flex items-center gap-2">
                            <Button
                              variant="outline"
                              size="sm"
                              onClick={() => setIsVirtualTourActive(false)}
                              className="text-small px-3 py-2 h-auto"
                              style={{
                                backgroundColor: 'rgba(255, 255, 255, 0.8)',
                                borderColor: 'rgba(0, 0, 0, 0.1)',
                                color: 'var(--color-black)',
                                fontFamily: 'var(--font-family-base)'
                              }}
                            >
                              <X className="w-4 h-4 mr-1" />
                              Exit Tour
                            </Button>
                          </div>
                        </div>
                      </div>

                      <div className="absolute bottom-6 left-6 right-6">
                        <div className="flex items-center justify-between">
                          <div 
                            className="flex items-center gap-2 rounded-full px-4 py-2"
                            style={{
                              backgroundColor: 'rgba(255, 255, 255, 0.8)',
                              backdropFilter: 'blur(10px)'
                            }}
                          >
                            <Users className="w-4 h-4 text-primary" />
                            <span className="text-small">{virtualTourStops[currentStop].capacity}</span>
                          </div>
                          
                          <div className="flex gap-2">
                            <Button
                              variant="outline"
                              size="icon"
                              onClick={handlePrevStop}
                              disabled={currentStop === 0}
                              className="w-10 h-10 disabled:opacity-50"
                              style={{
                                backgroundColor: 'rgba(255, 255, 255, 0.8)',
                                borderColor: 'rgba(0, 0, 0, 0.1)',
                                color: 'var(--color-black)'
                              }}
                            >
                              <ChevronLeft className="w-4 h-4" />
                            </Button>
                            <Button
                              variant="outline"
                              size="icon"
                              onClick={handleNextStop}
                              disabled={currentStop === virtualTourStops.length - 1}
                              className="w-10 h-10 disabled:opacity-50"
                              style={{
                                backgroundColor: 'rgba(255, 255, 255, 0.8)',
                                borderColor: 'rgba(0, 0, 0, 0.1)',
                                color: 'var(--color-black)'
                              }}
                            >
                              <ChevronRight className="w-4 h-4" />
                            </Button>
                          </div>
                        </div>
                      </div>
                    </div>
                  </div>

                  {/* Progress */}
                  <div className="space-y-4">
                    <div className="flex gap-2">
                      {virtualTourStops.map((_, index) => (
                        <button
                          key={index}
                          onClick={() => handleJumpToStop(index)}
                          className={`h-2 flex-1 rounded-full transition-all duration-300 hover:scale-105 ${
                            index <= currentStop ? 'bg-accent' : 'bg-border hover:bg-muted'
                          }`}
                          aria-label={`Go to ${virtualTourStops[index].title}`}
                        />
                      ))}
                    </div>
                    <div className="flex justify-between text-small text-muted">
                      <span>Zone 1</span>
                      <span>Zone 4</span>
                    </div>
                  </div>

                  {/* Thumbnails */}
                  <div className="grid grid-cols-4 gap-2">
                    {virtualTourStops.map((stop, index) => (
                      <button
                        key={stop.id}
                        onClick={() => handleJumpToStop(index)}
                        className={`relative h-16 rounded-lg overflow-hidden border-2 transition-all duration-300 ${
                          index === currentStop 
                            ? 'border-accent shadow-lg scale-105' 
                            : 'border-transparent hover:border-border'
                        }`}
                      >
                        <ImageWithFallback
                          src={stop.image}
                          alt={stop.title}
                          className="w-full h-full object-cover"
                        />
                        <div className="absolute inset-0 bg-black/20"></div>
                        <div className="absolute bottom-1 left-1 right-1">
                          <div className="text-small text-white text-center truncate">
                            Zone {stop.zone}
                          </div>
                        </div>
                      </button>
                    ))}
                  </div>
                </div>

                {/* Tour Information */}
                <div className="lg:col-span-2 space-y-8">
                  <div className="sticky top-24 space-y-8">
                    <div className="space-y-4">
                      <div className="flex items-center gap-3">
                        <div 
                          className="w-12 h-12 rounded-xl flex items-center justify-center"
                          style={{ backgroundColor: 'rgba(4, 4, 91, 0.1)' }}
                        >
                          <Building className="w-6 h-6 text-primary" />
                        </div>
                        <div>
                          <h3 className="text-subhead">
                            {virtualTourStops[currentStop].title}
                          </h3>
                          <p className="text-body text-accent">
                            {virtualTourStops[currentStop].keyHighlight}
                          </p>
                        </div>
                      </div>
                      
                      <p className="text-body text-muted leading-relaxed">
                        {virtualTourStops[currentStop].description}
                      </p>
                      
                      {virtualTourStops[currentStop].capacity && (
                        <div 
                          className="flex items-center gap-2 text-body rounded-lg p-3"
                          style={{ backgroundColor: 'rgba(0, 0, 0, 0.03)' }}
                        >
                          <Users className="w-5 h-5 text-primary" />
                          <span>Capacity: {virtualTourStops[currentStop].capacity}</span>
                        </div>
                      )}
                    </div>

                    {/* Features */}
                    <div className="space-y-4">
                      <h4 className="text-subhead flex items-center gap-2">
                        <CheckCircle className="w-5 h-5 text-green-600" />
                        Key Features
                      </h4>
                      <div className="grid grid-cols-1 gap-3">
                        {virtualTourStops[currentStop].features.map((feature, index) => (
                          <div 
                            key={index} 
                            className="flex items-center gap-3 rounded-lg p-3"
                            style={{ backgroundColor: 'rgba(255, 255, 255, 0.5)' }}
                          >
                            <CheckCircle className="w-4 h-4 text-green-600 flex-shrink-0" />
                            <span className="text-body">{feature}</span>
                          </div>
                        ))}
                      </div>
                    </div>

                    {/* Equipment */}
                    {virtualTourStops[currentStop].equipment && (
                      <div className="space-y-4">
                        <h4 className="text-subhead flex items-center gap-2">
                          <Monitor className="w-5 h-5 text-primary" />
                          Equipment & Technology
                        </h4>
                        <div className="grid grid-cols-1 gap-3">
                          {virtualTourStops[currentStop].equipment.map((equipment, index) => (
                            <div 
                              key={index} 
                              className="flex items-center gap-3 rounded-lg p-3"
                              style={{ backgroundColor: 'rgba(255, 255, 255, 0.5)' }}
                            >
                              <div className="w-2 h-2 bg-primary rounded-full flex-shrink-0"></div>
                              <span className="text-body text-muted">{equipment}</span>
                            </div>
                          ))}
                        </div>
                      </div>
                    )}

                    {/* Actions */}
                    <div className="space-y-4 pt-4 border-t">
                      <button
                        onClick={() => setIsBookingModalOpen(true)}
                        className="brand-button-system w-full group shadow-lg"
                      >
                        <Calendar className="w-5 h-5 group-hover:scale-110 transition-transform" />
                        Book This Space
                      </button>
                      
                      <div className="grid grid-cols-2 gap-3">
                        <Button
                          variant="outline"
                          onClick={handlePrevStop}
                          disabled={currentStop === 0}
                          className="text-body px-4 py-3 h-auto"
                        >
                          <ChevronLeft className="w-4 h-4 mr-1" />
                          Previous
                        </Button>
                        <Button
                          variant="outline"
                          onClick={handleNextStop}
                          disabled={currentStop === virtualTourStops.length - 1}
                          className="text-body px-4 py-3 h-auto"
                        >
                          Next
                          <ChevronRight className="w-4 h-4 ml-1" />
                        </Button>
                      </div>
                    </div>
                  </div>
                </div>
              </div>
            </div>
          )}
        </div>
      </section>

      {/* Booking Modal */}
      <Dialog open={isBookingModalOpen} onOpenChange={setIsBookingModalOpen}>
        <DialogContent className="max-w-3xl max-h-[90vh] overflow-y-auto">
          <DialogHeader className="border-b pb-6">
            <div className="flex items-center gap-3 mb-2">
              <div 
                className="w-10 h-10 rounded-lg flex items-center justify-center"
                style={{ backgroundColor: 'rgba(0, 0, 0, 0.1)' }}
              >
                <Building className="w-5 h-5" />
              </div>
              <div>
                <DialogTitle className="text-subhead">Facility Exploration Request</DialogTitle>
                <DialogDescription className="text-body text-muted">
                  Discover our world-class learning environment
                </DialogDescription>
              </div>
            </div>
            
            <div 
              className="rounded-lg p-4 border"
              style={{
                backgroundColor: 'rgba(34, 197, 94, 0.1)',
                borderColor: 'rgba(34, 197, 94, 0.2)'
              }}
            >
              <div className="flex items-center gap-2 text-green-600 text-body">
                <CheckCircle className="w-4 h-4" />
                <span>Your exploration request will be processed within 24 hours</span>
              </div>
            </div>
          </DialogHeader>
          
          <form onSubmit={handleBookingSubmit} className="space-y-6 pt-6">
            <div className="grid grid-cols-2 gap-4">
              <div>
                <Label htmlFor="companyName" className="text-body">Organization Name *</Label>
                <Input
                  id="companyName"
                  value={bookingForm.companyName}
                  onChange={(e) => setBookingForm({...bookingForm, companyName: e.target.value})}
                  required
                  className="text-body min-h-[44px] mt-2"
                  placeholder="Enter your organization name"
                />
              </div>
              <div>
                <Label htmlFor="contactName" className="text-body">Contact Name *</Label>
                <Input
                  id="contactName"
                  value={bookingForm.contactName}
                  onChange={(e) => setBookingForm({...bookingForm, contactName: e.target.value})}
                  required
                  className="text-body min-h-[44px] mt-2"
                  placeholder="Your full name"
                />
              </div>
            </div>

            <div className="grid grid-cols-2 gap-4">
              <div>
                <Label htmlFor="email" className="text-body">Email Address *</Label>
                <Input
                  id="email"
                  type="email"
                  value={bookingForm.email}
                  onChange={(e) => setBookingForm({...bookingForm, email: e.target.value})}
                  required
                  className="text-body min-h-[44px] mt-2"
                  placeholder="your.email@organization.com"
                />
              </div>
              <div>
                <Label htmlFor="phone" className="text-body">Phone Number *</Label>
                <Input
                  id="phone"
                  value={bookingForm.phone}
                  onChange={(e) => setBookingForm({...bookingForm, phone: e.target.value})}
                  required
                  className="text-body min-h-[44px] mt-2"
                  placeholder="+91 98765 43210"
                />
              </div>
            </div>

            <div className="grid grid-cols-2 gap-4">
              <div>
                <Label htmlFor="role" className="text-body">Your Role</Label>
                <Select value={bookingForm.role} onValueChange={(value) => setBookingForm({...bookingForm, role: value})}>
                  <SelectTrigger className="text-body min-h-[44px] mt-2">
                    <SelectValue placeholder="Select your role" />
                  </SelectTrigger>
                  <SelectContent>
                    <SelectItem value="hr-director">HR Director</SelectItem>
                    <SelectItem value="learning-development">L&D Manager</SelectItem>
                    <SelectItem value="executive-assistant">Executive Assistant</SelectItem>
                    <SelectItem value="ceo-founder">CEO/Founder</SelectItem>
                    <SelectItem value="operations-head">Operations Head</SelectItem>
                    <SelectItem value="other">Other</SelectItem>
                  </SelectContent>
                </Select>
              </div>
              <div>
                <Label htmlFor="teamSize" className="text-body">Expected Group Size</Label>
                <Select value={bookingForm.teamSize} onValueChange={(value) => setBookingForm({...bookingForm, teamSize: value})}>
                  <SelectTrigger className="text-body min-h-[44px] mt-2">
                    <SelectValue placeholder="Select group size" />
                  </SelectTrigger>
                  <SelectContent>
                    <SelectItem value="1-10">1-10 people</SelectItem>
                    <SelectItem value="11-25">11-25 people</SelectItem>
                    <SelectItem value="26-50">26-50 people</SelectItem>
                    <SelectItem value="51-100">51-100 people</SelectItem>
                    <SelectItem value="100+">100+ people</SelectItem>
                  </SelectContent>
                </Select>
              </div>
            </div>

            <div className="grid grid-cols-2 gap-4">
              <div>
                <Label htmlFor="preferredDate" className="text-body">Preferred Visit Date</Label>
                <Input
                  id="preferredDate"
                  type="date"
                  className="text-body min-h-[44px] mt-2"
                />
              </div>
              <div>
                <Label htmlFor="facilityZone" className="text-body">Areas of Interest</Label>
                <Select value={bookingForm.facilityZone} onValueChange={(value) => setBookingForm({...bookingForm, facilityZone: value})}>
                  <SelectTrigger className="text-body min-h-[44px] mt-2">
                    <SelectValue placeholder="Select areas" />
                  </SelectTrigger>
                  <SelectContent>
                    <SelectItem value="training-halls">Learning Halls</SelectItem>
                    <SelectItem value="residential-quarters">Residential Quarters</SelectItem>
                    <SelectItem value="outdoor-pavilion">Outdoor Pavilion</SelectItem>
                    <SelectItem value="full-tour">Complete Facility Tour</SelectItem>
                  </SelectContent>
                </Select>
              </div>
            </div>

            <div>
              <Label htmlFor="additionalRequirements" className="text-body">Special Interests or Requirements</Label>
              <Textarea
                id="additionalRequirements"
                value={bookingForm.additionalRequirements}
                onChange={(e) => setBookingForm({...bookingForm, additionalRequirements: e.target.value})}
                placeholder="Please specify your interests: architectural features, learning environments, technology integration, sustainability aspects..."
                className="text-body min-h-[100px] mt-2"
              />
            </div>

            <div className="flex gap-4 pt-4 border-t">
              <Button
                type="button"
                variant="outline"
                onClick={() => setIsBookingModalOpen(false)}
                className="flex-1 text-body min-h-[44px]"
                style={{
                  borderColor: 'var(--color-black)',
                  color: 'var(--color-black)'
                }}
              >
                Cancel
              </Button>
              <Button 
                type="submit" 
                className="flex-1 text-body min-h-[44px]"
                style={{
                  backgroundColor: 'var(--color-black)',
                  color: 'white'
                }}
              >
                Submit Request
              </Button>
            </div>
          </form>
        </DialogContent>
      </Dialog>

      {/* FAQ Section */}
      <section className="py-20" style={{ backgroundColor: 'var(--color-bg-white)' }}>
        <div className="mx-auto section-margin-x">
          <div className="text-center max-w-3xl mx-auto space-y-6 mb-16">
            <Badge 
              className="text-body px-4 py-2"
              style={{
                backgroundColor: 'rgba(4, 4, 91, 0.1)',
                color: 'var(--color-primary)',
                border: '1px solid rgba(4, 4, 91, 0.2)',
                fontFamily: 'var(--font-family-base)'
              }}
            >
              Frequently Asked Questions
            </Badge>
            <h2 className="text-h2">
              Everything You Need to Know
            </h2>
            <p className="text-body-lg text-muted leading-relaxed">
              Get answers to common questions about booking and using our facility.
            </p>
          </div>

          <div className="max-w-3xl mx-auto">
            <Accordion type="single" collapsible className="space-y-4">
              <AccordionItem value="booking-process" className="border rounded-lg px-6" style={{ borderColor: 'var(--color-border)' }}>
                <AccordionTrigger className="text-subhead py-6">
                  What is the booking process?
                </AccordionTrigger>
                <AccordionContent className="text-body text-muted pb-6 leading-relaxed">
                  Our booking process is simple: submit your request through our form or contact us directly. We'll respond within 24 hours with availability, pricing, and a customized proposal. Once confirmed, we'll handle all setup details to ensure your event runs smoothly.
                </AccordionContent>
              </AccordionItem>

              <AccordionItem value="capacity-limits" className="border rounded-lg px-6" style={{ borderColor: 'var(--color-border)' }}>
                <AccordionTrigger className="text-subhead py-6">
                  What are the capacity limits for different spaces?
                </AccordionTrigger>
                <AccordionContent className="text-body text-muted pb-6 leading-relaxed">
                  Our spaces accommodate various group sizes: Training Amphitheater (80-120), Collaboration Suites (4-8), Outdoor Pavilion (20-40), and Residential Quarters (40 rooms). We can also combine spaces for larger events.
                </AccordionContent>
              </AccordionItem>

              <AccordionItem value="catering-options" className="border rounded-lg px-6" style={{ borderColor: 'var(--color-border)' }}>
                <AccordionTrigger className="text-subhead py-6">
                  What catering options are available?
                </AccordionTrigger>
                <AccordionContent className="text-body text-muted pb-6 leading-relaxed">
                  We offer comprehensive catering services including breakfast, lunch, dinner, and refreshment breaks. Our menu includes vegetarian, non-vegetarian, and special dietary options. We can customize menus based on your preferences and cultural requirements.
                </AccordionContent>
              </AccordionItem>

              <AccordionItem value="technology-support" className="border rounded-lg px-6" style={{ borderColor: 'var(--color-border)' }}>
                <AccordionTrigger className="text-subhead py-6">
                  What technology support is provided?
                </AccordionTrigger>
                <AccordionContent className="text-body text-muted pb-6 leading-relaxed">
                  All spaces include professional AV equipment, high-speed WiFi, interactive displays, and video conferencing capabilities. Our technical team provides on-site support throughout your event to ensure everything runs smoothly.
                </AccordionContent>
              </AccordionItem>

              <AccordionItem value="accommodation" className="border rounded-lg px-6" style={{ borderColor: 'var(--color-border)' }}>
                <AccordionTrigger className="text-subhead py-6">
                  Are accommodation facilities available?
                </AccordionTrigger>
                <AccordionContent className="text-body text-muted pb-6 leading-relaxed">
                  Yes, we have 40 single-occupancy residential rooms with en-suite bathrooms, work desks, and modern amenities. Perfect for multi-day programs, these rooms offer a comfortable stay with garden views and 24/7 security.
                </AccordionContent>
              </AccordionItem>

              <AccordionItem value="pricing-packages" className="border rounded-lg px-6" style={{ borderColor: 'var(--color-border)' }}>
                <AccordionTrigger className="text-subhead py-6">
                  How does pricing work?
                </AccordionTrigger>
                <AccordionContent className="text-body text-muted pb-6 leading-relaxed">
                  Pricing depends on the space(s) selected, duration, group size, and additional services required. We offer competitive rates with packages for full-day, multi-day, and residential programs. Contact us for a customized quote based on your specific needs.
                </AccordionContent>
              </AccordionItem>
            </Accordion>
          </div>
        </div>
      </section>

      {/* Final CTA Section */}
      <section 
        className="py-20"
        style={{
          background: 'linear-gradient(to right, var(--color-primary), var(--color-primary), rgba(4, 4, 91, 0.9))'
        }}
      >
        <div className="mx-auto section-margin-x text-center">
          <div className="max-w-4xl mx-auto space-y-8">
            <h2 className="text-h2 text-white">
              Ready to Transform Your Team?
            </h2>
            <p className="text-body-lg text-white leading-relaxed opacity-95">
              Experience the difference our world-class facility can make for your next leadership development program.
            </p>
            
            <div className="flex flex-col sm:flex-row gap-6 justify-center">
              <Button
                onClick={() => setIsBookingModalOpen(true)}
                size="lg"
                className="text-body-lg px-8 py-4 h-auto shadow-xl"
                style={{
                  backgroundColor: 'var(--color-accent)',
                  color: 'var(--color-black)',
                  fontFamily: 'var(--font-family-base)'
                }}
              >
                <Calendar className="w-6 h-6 mr-3" />
                Book Your Facility Tour
              </Button>
              
              <Button
                size="lg"
                onClick={() => navigateTo('/contact')}
                className="text-body-lg px-8 py-4 h-auto shadow-xl border-2"
                style={{
                  backgroundColor: 'white',
                  color: 'var(--color-primary)',
                  borderColor: 'white',
                  fontFamily: 'var(--font-family-base)'
                }}
              >
                Contact Our Team
              </Button>
            </div>
          </div>
        </div>
      </section>
    </div>
  );
}