import React, { useState, useEffect } from 'react';
import { Button } from './ui/button';
import { Badge } from './ui/badge';
import { Card, CardContent } from './ui/card';
import { ImageWithFallback } from './figma/ImageWithFallback';
import { navigateTo } from './Router';
import { BrandedTag } from './about/BrandedTag';
import { PrimaryCTAButton } from './PrimaryCTAButton';
import { StandardCTAButton } from './StandardCTAButton';
import {
  ArrowRight,
  CheckCircle,
  Settings,
  Calendar,
  Download,
  Network,
  Users,
  Target,
  Brain,
  Eye,
  TrendingUp,
  BarChart3,
  Award,
  Lightbulb,
  Shield,
  ChevronDown,
  ChevronUp,
  ArrowLeft,
  Star,
  Zap,
  Globe,
  Clock,
  BookOpen,
  MessageCircle,
  Building,
  Heart,
  Compass,
  User,
  UserCheck,
  Home,
  Car,
  Coffee,
  Wifi
} from 'lucide-react';
import { TestimonialsSection } from './TestimonialsSection';

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

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

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

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

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

  useEffect(() => {
    window.scrollTo(0, 0);
  }, []);

  return (
    <div style={{ backgroundColor: '#FFFFFF', fontFamily: 'var(--font-family-base)' }}>
      {/* Hero Section */}
      <section className="relative min-h-[85vh] flex flex-col">
        <div className="absolute inset-0 z-0">
          <div
            className="w-full h-full bg-cover bg-center bg-no-repeat"
            style={{
              backgroundImage: `url('https://images.unsplash.com/photo-1566073771259-6a8506099945?w=1920&h=1080&fit=crop')`
            }}
          />
          <div className="absolute inset-0 bg-gradient-to-r from-black/85 via-black/75 to-black/65"></div>
        </div>

        <div className="relative z-10 flex-1 flex items-center">
          <div className="w-full section-margin-x">
            <div className="max-w-4xl">
              {/* Back Navigation */}
              <div className="mb-8">
                <Button
                  variant="ghost"
                  onClick={() => navigateTo('/services')}
                  className="text-white hover:text-white hover:bg-white/10 p-2 -ml-2"
                >
                  <ArrowLeft className="w-4 h-4 mr-2" />
                  Back to Services
                </Button>
              </div>

              <div className="mb-8">
                <h1 className="text-h1-white">
                  Kautilya Facility
                </h1>
              </div>

              <p className="text-body-lg-white mb-8 max-w-3xl">
                <strong>Experience world-class residential learning at our premium campus with 96% client satisfaction and exceptional facilities designed for leadership excellence.</strong>
              </p>

              <div className="flex justify-start">
                <PrimaryCTAButton
                  text="Book a Consultation"
                  onClick={() => navigateTo('/contact?topic=kautilya-facility')}
                  ariaLabel="Book a consultation for Kautilya Facility"
                  className="primary-cta-button-blue cta-text-white"
                />
              </div>
            </div>
          </div>
        </div>
      </section>

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

      {/* 7. Client Examples / Testimonials - Hero Section Design */}
      <TestimonialsSection
        title="Kautilya Facility Success"
        subtitle=""
        tagText="Client Success Stories"
      />

      {/* 8. CTA Section - Hero Section Design */}
      <section className="relative h-[700px] overflow-hidden">
        {/* Background Image */}
        <div className="absolute inset-0">
          <ImageWithFallback
            src="https://images.unsplash.com/photo-1552664730-d307ca884978?w=2940&h=1960&fit=crop"
            alt="Professional team collaborating in modern office"
            className="w-full h-full object-cover"
          />

          {/* Subtle dark overlay for overall image */}
          <div className="absolute inset-0 bg-black/30" />

          {/* Gradient overlay for better text readability */}
          <div className="absolute inset-0 bg-gradient-to-r from-black/20 via-transparent to-black/60" />
        </div>

        {/* Content Container */}
        <div className="relative h-full flex items-center justify-end section-margin-x">
          {/* CTA Content Block */}
          <div
            className="bg-opacity-95 backdrop-blur-sm rounded-lg p-16 max-w-2xl"
            style={{ backgroundColor: 'var(--color-brand-primary)' }}
          >
            {/* Branded Tag */}
            <BrandedTag text="Next Steps" variant="white" />

            {/* Main Headline */}
            <h2 className="text-h2-white mb-8">
              Ready to experience Kautilya Facility?
              <span
                className="italic"
                style={{ color: 'var(--color-brand-accent)' }}
              >
                {" "}Get in touch{" "}
              </span>
              for world-class learning spaces.
            </h2>

            {/* CTA Button */}
            <StandardCTAButton
              text="Schedule a Facility Tour"
              onClick={() => navigateTo('/contact?topic=kautilya-facility')}
              ariaLabel="Schedule a Kautilya Facility tour"
            />

            {/* Supporting Text */}
            <p className="text-body-white mt-6 opacity-90">
              Connect with our facility experts to discuss hosting your next leadership program or strategic retreat at our world-class residential learning campus.
            </p>
          </div>
        </div>
      </section>
    </div>
  );
}