import React, { useState, useEffect, useRef } from 'react';
import { Button } from './ui/button';
import { Card, CardContent, CardHeader, CardTitle } from './ui/card';
import { Badge } from './ui/badge';
import { Input } from './ui/input';
import { Label } from './ui/label';
import { Textarea } from './ui/textarea';
import { Accordion, AccordionContent, AccordionItem, AccordionTrigger } from './ui/accordion';
import { Tabs, TabsContent, TabsList, TabsTrigger } from './ui/tabs';
import { Separator } from './ui/separator';
import { Avatar, AvatarFallback, AvatarImage } from './ui/avatar';
import { 
  Clock, 
  Users, 
  Award, 
  Play, 
  Download, 
  ChevronRight, 
  ChevronLeft,
  Star,
  Calendar,
  Globe,
  Building2,
  User,
  Mail,
  Phone,
  MessageCircle,
  CheckCircle,
  BookOpen,
  Target,
  TrendingUp,
  Lightbulb,
  ArrowRight,
  ExternalLink,
  Quote,
  X,
  AlertCircle
} from 'lucide-react';
import { motion } from 'motion/react';
import { navigateTo } from './Router';
import { ImageWithFallback } from './figma/ImageWithFallback';
import { BrandedTag } from './about/BrandedTag';
import { PrimaryCTAButton } from './PrimaryCTAButton';
import { useCart } from './CartContext';
import { toast } from 'sonner@2.0.3';

// Mock data structure matching API contracts
const mockProgrammeData = {
  id: 'exec-leadership-2024',
  title: 'Executive Leadership Development Programme',
  subtitle: 'Transform Your Leadership Impact & Drive Organizational Excellence',
  duration: '6 Months',
  level: 'Executive',
  format: 'Hybrid',
  price: '₹2,50,000',
  originalPrice: '₹3,00,000',
  currency: 'INR',
  published: true,
  enrollmentStatus: 'open', // open, closed, enrolled, waitlist
  spotsLeft: 12,
  maxCapacity: 30,
  startDate: '2024-03-15',
  endDate: '2024-09-15',
  thumbnail: 'https://images.unsplash.com/photo-1560472354-b33ff0c44a43?w=800&h=600&fit=crop',
  ctaEnroll: 'Enroll Now',
  ctaBrochure: 'Download Brochure',
  highlights: [
    'Harvard Business School Curriculum',
    '360-Degree Leadership Assessment',
    'C-Suite Mentorship Program',
    'Global Leadership Simulation',
    'Executive Coaching Sessions'
  ],
  badges: ['Certified', 'Executive Level', 'Global Faculty'],
  previewVideoUrl: 'https://example.com/preview-video',
  deliveryMethods: ['In-Person Workshops', 'Virtual Sessions', 'Self-Paced Learning'],
  credentials: 'Executive Leadership Certificate from KLC & Harvard Business School',
  targetROI: '300% Leadership Effectiveness Improvement'
};

const mockOutcomes = [
  {
    title: 'Strategic Leadership Mastery',
    description: 'Develop advanced strategic thinking capabilities to lead organizational transformation and drive sustainable growth in complex business environments.'
  },
  {
    title: 'Executive Presence & Communication',
    description: 'Master executive-level communication skills, build commanding presence, and influence stakeholders at all organizational levels.'
  },
  {
    title: 'Digital Leadership & Innovation',
    description: 'Lead digital transformation initiatives, foster innovation culture, and navigate technological disruption with confidence.'
  },
  {
    title: 'Global Team Management',
    description: 'Excel at managing diverse, cross-cultural teams and driving performance across global markets and virtual environments.'
  }
];

const mockCurriculum = [
  {
    moduleNumber: 1,
    title: 'Leadership Foundations & Self-Mastery',
    duration: '2 Weeks',
    deliveryStyle: 'Hybrid',
    topics: [
      'Leadership Philosophy & Values',
      '360-Degree Assessment & Feedback',
      'Emotional Intelligence in Leadership',
      'Personal Leadership Brand Development'
    ]
  },
  {
    moduleNumber: 2,
    title: 'Strategic Thinking & Decision Making',
    duration: '3 Weeks',
    deliveryStyle: 'In-Person',
    topics: [
      'Strategic Analysis Frameworks',
      'Complex Problem Solving',
      'Risk Assessment & Management',
      'Data-Driven Decision Making'
    ]
  },
  {
    moduleNumber: 3,
    title: 'Leading High-Performance Teams',
    duration: '3 Weeks',
    deliveryStyle: 'Virtual + Simulation',
    topics: [
      'Team Dynamics & Psychology',
      'Performance Management Systems',
      'Conflict Resolution Strategies',
      'Building Trust & Accountability'
    ]
  },
  {
    moduleNumber: 4,
    title: 'Organizational Transformation',
    duration: '4 Weeks',
    deliveryStyle: 'Hybrid',
    topics: [
      'Change Management Methodologies',
      'Culture Transformation',
      'Digital Leadership Strategies',
      'Innovation & Disruption Management'
    ]
  }
];

const mockFaculty = [
  {
    id: 1,
    name: 'Dr. Sarah Johnson',
    title: 'Executive Leadership Expert',
    organization: 'Harvard Business School',
    bio: 'Former CEO of Fortune 500 companies with 25+ years of executive leadership experience.',
    image: 'https://images.unsplash.com/photo-1494790108755-2616b10a6e0c?w=150&h=150&fit=crop&crop=face',
    linkedinUrl: 'https://linkedin.com/in/dr-sarah-johnson',
    credentials: ['PhD in Organizational Psychology', 'Former CEO, Tech Global Inc.'],
    expertise: ['Strategic Leadership', 'Digital Transformation']
  },
  {
    id: 2,
    name: 'Prof. Michael Chen',
    title: 'Strategic Management Professor',
    organization: 'Stanford Graduate School',
    bio: 'Renowned strategy expert and author of 5 bestselling business books.',
    image: 'https://images.unsplash.com/photo-1472099645785-5658abf4ff4e?w=150&h=150&fit=crop&crop=face',
    linkedinUrl: 'https://linkedin.com/in/prof-michael-chen',
    credentials: ['MBA, Wharton', 'Author of "Strategy Excellence"'],
    expertise: ['Strategic Planning', 'Business Innovation']
  },
  {
    id: 3,
    name: 'Dr. Priya Sharma',
    title: 'Organizational Psychology Expert',
    organization: 'KLC Faculty',
    bio: 'Leading expert in leadership psychology and behavioral change.',
    image: 'https://images.unsplash.com/photo-1580489944761-15a19d654956?w=150&h=150&fit=crop&crop=face',
    linkedinUrl: 'https://linkedin.com/in/dr-priya-sharma',
    credentials: ['PhD in Psychology', 'Certified Executive Coach'],
    expertise: ['Leadership Psychology', 'Executive Coaching']
  }
];

const mockAudienceSegments = [
  {
    title: 'Senior Executives',
    description: 'C-suite leaders, VPs, and Directors ready to elevate their strategic impact',
    icon: <Award className="w-6 h-6" />
  },
  {
    title: 'High-Potential Leaders',
    description: 'Emerging leaders identified for executive-level responsibilities',
    icon: <TrendingUp className="w-6 h-6" />
  },
  {
    title: 'Entrepreneurs',
    description: 'Business owners scaling their organizations and leadership capabilities',
    icon: <Lightbulb className="w-6 h-6" />
  }
];

const mockUseCases = [
  'Leading organizational transformation initiatives',
  'Navigating complex stakeholder relationships',
  'Building and scaling high-performance teams',
  'Driving innovation and cultural change',
  'Managing global and virtual teams',
  'Developing next-generation leaders'
];

const mockTestimonials = [
  {
    id: 1,
    type: 'video',
    name: 'Robert Martinez',
    title: 'CEO, TechVenture Inc.',
    company: 'TechVenture Inc.',
    content: 'This programme transformed my leadership approach completely. The 360-degree feedback and executive coaching helped me unlock new levels of performance.',
    videoThumbnail: 'https://images.unsplash.com/photo-1507003211169-0a1dd7228f2d?w=300&h=200&fit=crop',
    videoUrl: 'https://example.com/testimonial-video-1',
    rating: 5,
    programmeCompleted: 'Executive Leadership 2023'
  },
  {
    id: 2,
    type: 'text',
    name: 'Lisa Zhang',
    title: 'VP Strategy, Global Corp',
    company: 'Global Corp',
    content: 'The strategic thinking frameworks and real-world case studies provided immediate value. I applied the learnings to lead a $50M digital transformation project successfully.',
    rating: 5,
    programmeCompleted: 'Executive Leadership 2023'
  },
  {
    id: 3,
    type: 'text',
    name: 'David Thompson',
    title: 'Founder & CEO, StartupX',
    company: 'StartupX',
    content: 'As a first-time CEO, this programme gave me the confidence and tools to scale my team from 10 to 100+ employees while maintaining our culture and performance.',
    rating: 5,
    programmeCompleted: 'Executive Leadership 2023'
  }
];

const mockEnrollmentOptions = [
  {
    type: 'individual',
    title: 'Individual Enrollment',
    price: '₹2,50,000',
    originalPrice: '₹3,00,000',
    features: [
      'Complete programme access',
      'Executive coaching sessions',
      'Peer learning network',
      'Digital resources & tools',
      'Certificate upon completion'
    ],
    ctaText: 'Enroll Now',
    popular: false
  },
  {
    type: 'corporate',
    title: 'Corporate Package (3+ enrollments)',
    price: '₹2,00,000',
    originalPrice: '₹2,50,000',
    priceNote: 'per person',
    features: [
      'Everything in Individual',
      'Customized company case studies',
      'Dedicated learning coordinator',
      'Leadership assessment reports',
      'Post-programme follow-up sessions'
    ],
    ctaText: 'Request Corporate Quote',
    popular: true
  },
  {
    type: 'enterprise',
    title: 'Enterprise Solution (10+ enrollments)',
    price: 'Custom Pricing',
    features: [
      'Everything in Corporate',
      'On-site delivery options',
      'Custom curriculum modules',
      'Executive advisory sessions',
      'ROI measurement framework'
    ],
    ctaText: 'Schedule Consultation',
    popular: false
  }
];

const mockFAQs = [
  {
    question: 'What are the programme timings and schedule?',
    answer: 'The programme runs over 6 months with 2-3 sessions per month. Each session is 2-3 hours, scheduled on weekends to accommodate working professionals. Specific dates are provided upon enrollment.'
  },
  {
    question: 'What certification will I receive?',
    answer: 'You will receive an Executive Leadership Certificate jointly issued by KLC and Harvard Business School upon successful completion of all modules and assessments.'
  },
  {
    question: 'Is there a refund policy?',
    answer: 'We offer a full refund if you cancel within 7 days of enrollment. After programme commencement, refunds are provided on a pro-rata basis for the first 30 days.'
  },
  {
    question: 'What technology requirements are needed?',
    answer: 'You need a reliable internet connection, computer/laptop with camera and microphone for virtual sessions. We provide access to our learning management system and digital resources.'
  },
  {
    question: 'Can I defer my enrollment to a later cohort?',
    answer: 'Yes, you can defer your enrollment to the next available cohort up to 6 months from your original start date without additional fees.'
  }
];

const mockRelatedProgrammes = [
  {
    id: 'strategic-leadership',
    title: 'Strategic Leadership Mastery',
    level: 'Advanced',
    duration: '4 Months',
    price: '₹1,80,000',
    thumbnail: 'https://images.unsplash.com/photo-1552581234-26160f608093?w=400&h=300&fit=crop',
    category: 'Leadership',
    description: 'Advanced strategic thinking and planning for senior leaders'
  },
  {
    id: 'digital-leadership',
    title: 'Digital Leadership Transformation',
    level: 'Executive',
    duration: '3 Months',
    price: '₹2,20,000',
    thumbnail: 'https://images.unsplash.com/photo-1551434678-e076c223a692?w=400&h=300&fit=crop',
    category: 'Digital',
    description: 'Leading digital transformation and innovation initiatives'
  },
  {
    id: 'global-leadership',
    title: 'Global Leadership Programme',
    level: 'Executive',
    duration: '8 Months',
    price: '₹3,50,000',
    thumbnail: 'https://images.unsplash.com/photo-1507003211169-0a1dd7228f2d?w=400&h=300&fit=crop',
    category: 'Global',
    description: 'Leading across cultures and global markets'
  }
];

interface ProgrammeDetailProps {
  slug?: string;
}

export function ProgrammeDetail({ slug }: ProgrammeDetailProps) {
  const [activeTab, setActiveTab] = useState('overview');
  const [selectedFaculty, setSelectedFaculty] = useState(0);
  const [showVideoModal, setShowVideoModal] = useState(false);
  const [selectedVideo, setSelectedVideo] = useState<string | null>(null);
  const [isSticky, setIsSticky] = useState(false);
  const [showBrochureForm, setShowBrochureForm] = useState(false);
  const [isSubmitting, setIsSubmitting] = useState(false);
  const [brochureFormData, setBrochureFormData] = useState({
    name: '',
    email: '',
    phone: '',
    company: '',
    designation: ''
  });

  const heroRef = useRef<HTMLDivElement>(null);
  const { addToCart } = useCart();

  // Sticky CTA logic
  useEffect(() => {
    const handleScroll = () => {
      if (heroRef.current) {
        const heroBottom = heroRef.current.offsetTop + heroRef.current.offsetHeight;
        setIsSticky(window.scrollY > heroBottom);
      }
    };

    window.addEventListener('scroll', handleScroll);
    return () => window.removeEventListener('scroll', handleScroll);
  }, []);

  // Mock API calls (replace with real API calls)
  const programme = mockProgrammeData;
  const outcomes = mockOutcomes;
  const curriculum = mockCurriculum;
  const faculty = mockFaculty;  
  const testimonials = mockTestimonials;
  const faqs = mockFAQs;
  const relatedProgrammes = mockRelatedProgrammes;

  // Handle enrollment based on status
  const handleEnrollment = (type: string = 'individual') => {
    if (programme.enrollmentStatus === 'enrolled') {
      navigateTo(`/dashboard/course/${programme.id}`);
      return;
    }

    if (programme.spotsLeft === 0) {
      // Handle waitlist
      toast.success('Added to waitlist! We\'ll notify you when spots become available.');
      return;
    }

    if (type === 'individual') {
      addToCart({
        id: programme.id,
        title: programme.title,
        thumbnail: programme.thumbnail,
        price: programme.price,
        originalPrice: programme.originalPrice,
        category: 'Executive Programme',
        level: programme.level
      });
      navigateTo('/cart');
    } else if (type === 'corporate') {
      navigateTo(`/contact?topic=corporate&programme=${programme.id}`);
    } else if (type === 'enterprise') {
      navigateTo(`/contact?topic=enterprise&programme=${programme.id}`);
    }
  };

  // Handle brochure download
  const handleBrochureDownload = async (e: React.FormEvent) => {
    e.preventDefault();
    setIsSubmitting(true);

    try {
      // Mock API call - replace with real endpoint
      // await fetch(`/api/leads/programme-brochure?programmeId=${programme.id}`, {
      //   method: 'POST',
      //   body: JSON.stringify(brochureFormData)
      // });
      
      // Simulate API delay
      await new Promise(resolve => setTimeout(resolve, 1000));
      
      toast.success('Brochure download started! Check your email for additional resources.');
      setShowBrochureForm(false);
      setBrochureFormData({ name: '', email: '', phone: '', company: '', designation: '' });
    } catch (error) {
      toast.error('Unable to process request. Please try again later.');
    } finally {
      setIsSubmitting(false);
    }
  };

  // Handle 404 for unpublished programmes
  if (!programme.published) {
    return (
      <div className="min-h-screen flex items-center justify-center" style={{ backgroundColor: '#FFFFFF' }}>
        <div className="text-center">
          <h1 className="text-h2 mb-4">Programme Not Found</h1>
          <p className="text-body-lg text-muted mb-8">
            The programme you're looking for is not available or has been unpublished.
          </p>
          <Button onClick={() => navigateTo('/learning-online')}>
            Browse All Programmes
          </Button>
        </div>
      </div>
    );
  }

  return (
    <div style={{ backgroundColor: '#FFFFFF' }}>
      {/* Enhanced Sticky CTA Bar */}
      {isSticky && (
        <motion.div 
          initial={{ opacity: 0, y: -10 }}
          animate={{ opacity: 1, y: 0 }}
          transition={{ duration: 0.3, ease: "easeOut" }}
          className="fixed top-16 left-0 right-0 z-40"
          style={{
            background: 'linear-gradient(135deg, rgba(255, 255, 255, 0.95) 0%, rgba(249, 250, 251, 0.98) 100%)',
            backdropFilter: 'blur(20px)',
            WebkitBackdropFilter: 'blur(20px)',
            borderBottom: '1px solid rgba(4, 4, 91, 0.08)',
            boxShadow: '0 8px 32px rgba(4, 4, 91, 0.12), 0 2px 8px rgba(0, 0, 0, 0.04)'
          }}
        >
          <div className="section-margin-x py-5">
            <div className="max-w-7xl mx-auto">
              <div className="flex items-center justify-between">
                {/* Left: Programme Information */}
                <div className="flex items-center gap-6">
                  {/* Programme Thumbnail */}
                  <div className="relative">
                    <div 
                      className="w-12 h-12 rounded-lg overflow-hidden border-2 border-white"
                      style={{
                        background: 'linear-gradient(135deg, var(--color-primary) 0%, #030359 100%)'
                      }}
                    >
                      <ImageWithFallback
                        src={programme.thumbnail}
                        alt={programme.title}
                        className="w-full h-full object-cover"
                      />
                    </div>
                    {/* Quality Badge */}
                    <div 
                      className="absolute -top-1 -right-1 w-5 h-5 rounded-full flex items-center justify-center text-white text-xs font-medium"
                      style={{ backgroundColor: 'var(--color-accent)' }}
                    >
                      <Award className="w-3 h-3" />
                    </div>
                  </div>
                  
                  {/* Programme Details */}
                  <div className="flex flex-col">
                    <h2 className="text-h4 mb-2 leading-tight max-w-xl line-clamp-1">
                      {programme.title}
                    </h2>
                    <div className="flex items-center gap-6">
                      {/* Meta Information - All Using Same Blue Color */}
                      <div className="flex items-center gap-4 text-small">
                        <div className="flex items-center gap-1.5 px-2.5 py-1 bg-blue-50 rounded-full">
                          <Clock className="w-3.5 h-3.5 text-primary" />
                          <span className="font-medium text-primary">{programme.duration}</span>
                        </div>
                        <div className="flex items-center gap-1.5 px-2.5 py-1 bg-blue-50 rounded-full">
                          <Award className="w-3.5 h-3.5 text-primary" />
                          <span className="font-medium text-primary">{programme.level}</span>
                        </div>
                        <div className="flex items-center gap-1.5 px-2.5 py-1 bg-blue-50 rounded-full">
                          <Users className="w-3.5 h-3.5 text-primary" />
                          <span className="font-medium text-primary">{programme.spotsLeft} spots left</span>
                        </div>
                      </div>
                      
                      {/* Price Display */}
                      <div className="flex items-center gap-2">
                        <span className="text-h4 font-bold text-primary">{programme.price}</span>
                        {programme.originalPrice && (
                          <span className="text-body text-muted line-through">{programme.originalPrice}</span>
                        )}
                      </div>
                    </div>
                  </div>
                </div>

                {/* Right: Action Buttons */}
                <div className="flex items-center gap-3">
                  {/* Secondary Action Button - No Shadow */}
                  <Button
                    variant="outline"
                    onClick={() => setShowBrochureForm(true)}
                    className="h-12 px-6 border-2 border-primary/20 text-primary hover:bg-primary/5 hover:border-primary/40 transition-all duration-200 backdrop-blur-sm"
                    style={{
                      background: 'rgba(4, 4, 91, 0.03)',
                      borderRadius: '10px'
                    }}
                  >
                    <Download className="w-4 h-4 mr-2" />
                    <span className="font-medium">Brochure</span>
                  </Button>
                  
                  {/* Primary CTA Button - No Shadow */}
                  <div className="relative">
                    <PrimaryCTAButton
                      text={programme.enrollmentStatus === 'enrolled' ? 'Go to Course' : 
                            programme.spotsLeft === 0 ? 'Join Waitlist' : 'Enroll Now'}
                      onClick={() => handleEnrollment()}
                      className="cta-text-black h-12 px-8 transition-all duration-200"
                    />
                    {/* Urgency Indicator */}
                    {programme.spotsLeft <= 5 && programme.spotsLeft > 0 && (
                      <div 
                        className="absolute -top-2 -right-2 px-2 py-0.5 rounded-full text-xs font-bold text-white animate-pulse"
                        style={{ backgroundColor: '#ef4444' }}
                      >
                        Only {programme.spotsLeft} left!
                      </div>
                    )}
                  </div>
                </div>
              </div>
            </div>
          </div>
          
          {/* Subtle Bottom Accent Line */}
          <div 
            className="absolute bottom-0 left-0 right-0 h-0.5"
            style={{
              background: 'linear-gradient(90deg, transparent 0%, var(--color-accent) 50%, transparent 100%)'
            }}
          />
        </motion.div>
      )}

      {/* Hero Section */}
      <section ref={heroRef} className="py-16" style={{ backgroundColor: '#FFFFFF' }}>
        <div className="section-margin-x">
          <div className="max-w-6xl mx-auto">
            <div className="grid grid-cols-1 lg:grid-cols-2 gap-12 items-start">
              
              {/* Left: Programme Info - REDESIGNED */}
              <div>
                {/* Keep as requested: BrandedTag (eyebrow text) */}
                <BrandedTag text="Executive Programme" />
                
                {/* Keep as requested: Title */}
                <h1 className="text-h2 mb-4">{programme.title}</h1>
                
                {/* Keep as requested: Subtitle */}
                <p className="text-body-lg text-muted mb-8">{programme.subtitle}</p>

                {/* REDESIGNED: Programme Meta Information as Pills */}
                <div className="flex flex-wrap gap-3 mb-8">
                  <Badge variant="secondary" className="bg-primary/5 text-primary border border-primary/20 px-4 py-2 text-small font-medium hover:bg-primary/10 transition-colors duration-200">
                    <Clock className="w-3 h-3 mr-2" />
                    Duration: {programme.duration}
                  </Badge>
                  <Badge variant="secondary" className="bg-primary/5 text-primary border border-primary/20 px-4 py-2 text-small font-medium hover:bg-primary/10 transition-colors duration-200">
                    <Award className="w-3 h-3 mr-2" />
                    Level: {programme.level}
                  </Badge>
                  <Badge variant="secondary" className="bg-primary/5 text-primary border border-primary/20 px-4 py-2 text-small font-medium hover:bg-primary/10 transition-colors duration-200">
                    <Globe className="w-3 h-3 mr-2" />
                    Format: {programme.format}
                  </Badge>
                  <Badge variant="secondary" className="bg-accent/5 text-accent border border-accent/20 px-4 py-2 text-small font-medium hover:bg-accent/10 transition-colors duration-200">
                    <Users className="w-3 h-3 mr-2" />
                    Spots Left: {programme.spotsLeft}
                  </Badge>
                </div>

                {/* REDESIGNED: Professional Badges Section */}
                <div className="mb-8">
                  <h3 className="text-subhead font-semibold text-black mb-4">Programme Features</h3>
                  <div className="flex flex-wrap gap-3">
                    {programme.badges.map((badge, index) => (
                      <Badge 
                        key={index} 
                        variant="secondary" 
                        className="bg-primary/5 text-primary border border-primary/20 px-4 py-2 text-small font-medium hover:bg-primary/10 transition-colors duration-200"
                      >
                        <CheckCircle className="w-3 h-3 mr-2" />
                        {badge}
                      </Badge>
                    ))}
                  </div>
                </div>

                {/* REDESIGNED: Enhanced Pricing Section */}
                <Card className="border border-gray-200 bg-white mb-8 shadow-sm">
                  <CardContent className="p-6">
                    <div className="flex items-center justify-between mb-4">
                      <div>
                        <p className="text-small font-medium text-muted mb-1">Programme Investment</p>
                        <div className="flex items-baseline gap-3">
                          <span className="text-h2 font-bold text-primary">{programme.price}</span>
                          {programme.originalPrice && (
                            <span className="text-body text-muted line-through">{programme.originalPrice}</span>
                          )}
                        </div>
                      </div>
                      <div className="text-right">
                        <div className="inline-flex items-center gap-2 px-3 py-2 bg-accent/20 rounded-full">
                          <Star className="w-4 h-4 text-accent" />
                          <span className="text-small font-medium text-black">Best Value</span>
                        </div>
                      </div>
                    </div>
                    <p className="text-small text-muted">Transform your leadership future with this comprehensive development programme</p>
                  </CardContent>
                </Card>

                {/* REDESIGNED: Professional CTA Buttons Layout */}
                <div className="flex gap-4">
                  <PrimaryCTAButton
                    text={programme.enrollmentStatus === 'enrolled' ? 'Go to Course' : 
                          programme.spotsLeft === 0 ? 'Join Waitlist' : 'Enroll Now'}
                    onClick={() => handleEnrollment()}
                    className="cta-text-black flex-1 justify-center"
                  />
                  <Button
                    variant="outline"
                    onClick={() => setShowBrochureForm(true)}
                    className="flex-1 h-12 border-2 border-primary/30 text-primary hover:bg-primary hover:text-white transition-all duration-200"
                    style={{ borderRadius: '10px' }}
                  >
                    <Download className="w-4 h-4 mr-2" />
                    Download Programme Brochure
                  </Button>
                </div>
              </div>

              {/* Right: Programme Snapshot */}
              <div>
                <Card className="card-shadow-elevated rounded-2xl">
                  <CardContent className="p-8">
                    {/* Preview Video */}
                    <div className="relative mb-6">
                      <div className="aspect-video bg-gray-100 rounded-xl overflow-hidden">
                        <ImageWithFallback
                          src={programme.thumbnail}
                          alt="Programme Preview"
                          className="w-full h-full object-cover"
                        />
                        <div className="absolute inset-0 bg-black/30 flex items-center justify-center">
                          <Button
                            size="lg"
                            className="bg-white/90 text-primary hover:bg-white rounded-full w-16 h-16 p-0 card-hover-lift"
                            onClick={() => {
                              setSelectedVideo(programme.previewVideoUrl);
                              setShowVideoModal(true);
                            }}
                          >
                            <Play className="w-6 h-6 ml-1" />
                          </Button>
                        </div>
                      </div>
                    </div>

                    {/* Key Highlights */}
                    <div className="mb-6">
                      <h3 className="text-h4 mb-4">Programme Highlights</h3>
                      <ul className="space-y-3">
                        {programme.highlights.map((highlight, index) => (
                          <li key={index} className="flex items-start gap-3">
                            <CheckCircle className="w-5 h-5 text-primary mt-0.5 flex-shrink-0" />
                            <span className="text-body">{highlight}</span>
                          </li>
                        ))}
                      </ul>
                    </div>

                    {/* Delivery Methods */}
                    <div className="mb-6">
                      <h4 className="text-subhead font-semibold mb-3">Delivery Methods</h4>
                      <div className="flex flex-wrap gap-2">
                        {programme.deliveryMethods.map((method, index) => (
                          <Badge key={index} variant="outline" className="rounded-lg">
                            {method}
                          </Badge>
                        ))}
                      </div>
                    </div>

                    {/* Credentials */}
                    <div>
                      <h4 className="text-subhead font-semibold mb-2">Certification</h4>
                      <p className="text-body text-muted">{programme.credentials}</p>
                    </div>
                  </CardContent>
                </Card>
              </div>
            </div>
          </div>
        </div>
      </section>

      {/* Enhanced Programme Content Tabs */}
      <section className="py-24 border-t border-gray-100" style={{ backgroundColor: '#FFFFFF' }}>
        <div className="section-margin-x">
          <div className="max-w-6xl mx-auto">
            <Tabs value={activeTab} onValueChange={setActiveTab} className="w-full">
              {/* Enhanced Tabs List */}
              <TabsList className="grid w-full grid-cols-2 md:grid-cols-3 lg:grid-cols-6 mb-12 h-auto p-2 bg-gray-200 rounded-2xl">
                <TabsTrigger 
                  value="overview" 
                  className="data-[state=active]:bg-white data-[state=active]:text-primary data-[state=active]:shadow-sm rounded-xl py-3 px-4 text-sm font-medium transition-all duration-200 hover:bg-white/50"
                >
                  Overview
                </TabsTrigger>
                <TabsTrigger 
                  value="curriculum" 
                  className="data-[state=active]:bg-white data-[state=active]:text-primary data-[state=active]:shadow-sm rounded-xl py-3 px-4 text-sm font-medium transition-all duration-200 hover:bg-white/50"
                >
                  Curriculum
                </TabsTrigger>
                <TabsTrigger 
                  value="faculty" 
                  className="data-[state=active]:bg-white data-[state=active]:text-primary data-[state=active]:shadow-sm rounded-xl py-3 px-4 text-sm font-medium transition-all duration-200 hover:bg-white/50"
                >
                  Faculty
                </TabsTrigger>
                <TabsTrigger 
                  value="testimonials" 
                  className="data-[state=active]:bg-white data-[state=active]:text-primary data-[state=active]:shadow-sm rounded-xl py-3 px-4 text-sm font-medium transition-all duration-200 hover:bg-white/50"
                >
                  Reviews
                </TabsTrigger>
                <TabsTrigger 
                  value="faq" 
                  className="data-[state=active]:bg-white data-[state=active]:text-primary data-[state=active]:shadow-sm rounded-xl py-3 px-4 text-sm font-medium transition-all duration-200 hover:bg-white/50"
                >
                  FAQ
                </TabsTrigger>
                <TabsTrigger 
                  value="enroll" 
                  className="data-[state=active]:bg-white data-[state=active]:text-primary data-[state=active]:shadow-sm rounded-xl py-3 px-4 text-sm font-medium transition-all duration-200 hover:bg-white/50"
                >
                  Enroll
                </TabsTrigger>
              </TabsList>

              {/* Enhanced Learning Outcomes */}
              <TabsContent value="overview" className="mt-0">
                <div className="space-y-16">
                  {/* Section: Learning Outcomes */}
                  <div>
                    <div className="text-center mb-12">
                      <h2 className="text-h2 mb-4">Learning Outcomes</h2>
                      <p className="text-body-lg text-muted max-w-3xl mx-auto">
                        Transform your leadership capabilities through our comprehensive curriculum designed for today's business challenges.
                      </p>
                    </div>
                    
                    <div className="grid grid-cols-1 lg:grid-cols-2 gap-8">
                      {outcomes.map((outcome, index) => (
                        <Card key={index} className="overflow-hidden rounded-2xl border border-gray-200 card-hover-lift h-fit bg-white shadow-sm">
                          <CardHeader className="bg-white border-b border-gray-100 p-6">
                            <div className="flex items-start gap-4">
                              <div className="w-12 h-12 bg-[#04045B] rounded-xl flex items-center justify-center flex-shrink-0">
                                <BookOpen className="w-5 h-5 text-white" />
                              </div>
                              <div className="flex-1 min-w-0">
                                <CardTitle className="text-h4 font-semibold leading-tight">
                                  {outcome.title}
                                </CardTitle>
                              </div>
                            </div>
                          </CardHeader>
                          <CardContent className="p-6">
                            <p className="text-body text-muted leading-relaxed">
                              {outcome.description}
                            </p>
                          </CardContent>
                        </Card>
                      ))}
                    </div>
                  </div>

                  {/* Section: Who Should Attend */}
                  <div>
                    <div className="text-center mb-12">
                      <h2 className="text-h2 mb-4">Who Should Attend</h2>
                      <p className="text-body-lg text-muted max-w-3xl mx-auto">
                        This programme is designed for leaders at various stages of their career journey.
                      </p>
                    </div>
                    
                    <div className="grid grid-cols-1 md:grid-cols-3 gap-8">
                      {mockAudienceSegments.map((segment, index) => (
                        <Card key={index} className="text-center card-hover-lift rounded-2xl border border-gray-200 bg-white shadow-sm">
                          <CardContent className="p-8">
                            <div className="w-20 h-20 bg-[#04045B] rounded-2xl flex items-center justify-center mx-auto mb-6">
                              <div className="text-white">
                                {segment.icon}
                              </div>
                            </div>
                            <h3 className="text-h4 font-semibold leading-tight">{segment.title}</h3>
                            <p className="text-body text-muted leading-relaxed">{segment.description}</p>
                          </CardContent>
                        </Card>
                      ))}
                    </div>
                  </div>

                  {/* Section: Use Cases */}
                  <div>
                    <div className="text-center mb-16">
                      <h2 className="text-h2 mb-4">Key Use Cases</h2>
                      <p className="text-body-lg text-muted max-w-3xl mx-auto">
                        Apply your learning to real-world leadership challenges and opportunities across diverse organizational contexts.
                      </p>
                    </div>
                    
                    <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-8">
                      <Card className="rounded-2xl border border-gray-200 bg-white shadow-sm overflow-hidden">
                        <CardContent className="p-8">
                          <div className="flex items-center justify-between mb-6">
                            <div className="w-16 h-16 bg-[#04045B] rounded-2xl flex items-center justify-center">
                              <Building2 className="w-8 h-8 text-white" />
                            </div>
                            <div className="w-8 h-8 bg-primary/5 rounded-full flex items-center justify-center">
                              <span className="text-small font-bold text-primary">01</span>
                            </div>
                          </div>
                          
                          <div className="space-y-4">
                            <h3 className="text-h4 font-semibold leading-tight">
                              Organizational Transformation
                            </h3>
                            <p className="text-body text-muted leading-relaxed">
                              Leading large-scale organizational change initiatives and digital transformation projects
                            </p>
                          </div>
                        </CardContent>
                      </Card>

                      <Card className="rounded-2xl border border-gray-200 bg-white shadow-sm overflow-hidden">
                        <CardContent className="p-8">
                          <div className="flex items-center justify-between mb-6">
                            <div className="w-16 h-16 bg-[#04045B] rounded-2xl flex items-center justify-center">
                              <Users className="w-8 h-8 text-white" />
                            </div>
                            <div className="w-8 h-8 bg-primary/5 rounded-full flex items-center justify-center">
                              <span className="text-small font-bold text-primary">02</span>
                            </div>
                          </div>
                          
                          <div className="space-y-4">
                            <h3 className="text-h4 font-semibold leading-tight">
                              Team Development
                            </h3>
                            <p className="text-body text-muted leading-relaxed">
                              Building high-performance teams and developing next-generation leaders within your organization
                            </p>
                          </div>
                        </CardContent>
                      </Card>

                      <Card className="rounded-2xl border border-gray-200 bg-white shadow-sm overflow-hidden">
                        <CardContent className="p-8">
                          <div className="flex items-center justify-between mb-6">
                            <div className="w-16 h-16 bg-[#04045B] rounded-2xl flex items-center justify-center">
                              <TrendingUp className="w-8 h-8 text-white" />
                            </div>
                            <div className="w-8 h-8 bg-primary/5 rounded-full flex items-center justify-center">
                              <span className="text-small font-bold text-primary">03</span>
                            </div>
                          </div>
                          
                          <div className="space-y-4">
                            <h3 className="text-h4 font-semibold leading-tight">
                              Strategic Planning
                            </h3>
                            <p className="text-body text-muted leading-relaxed">
                              Developing and implementing strategic initiatives that drive sustainable business growth
                            </p>
                          </div>
                        </CardContent>
                      </Card>

                      <Card className="rounded-2xl border border-gray-200 bg-white shadow-sm overflow-hidden">
                        <CardContent className="p-8">
                          <div className="flex items-center justify-between mb-6">
                            <div className="w-16 h-16 bg-[#04045B] rounded-2xl flex items-center justify-center">
                              <Globe className="w-8 h-8 text-white" />
                            </div>
                            <div className="w-8 h-8 bg-primary/5 rounded-full flex items-center justify-center">
                              <span className="text-small font-bold text-primary">04</span>
                            </div>
                          </div>
                          
                          <div className="space-y-4">
                            <h3 className="text-h4 font-semibold leading-tight">
                              Global Leadership
                            </h3>
                            <p className="text-body text-muted leading-relaxed">
                              Managing diverse, cross-cultural teams and leading in international business environments
                            </p>
                          </div>
                        </CardContent>
                      </Card>

                      <Card className="rounded-2xl border border-gray-200 bg-white shadow-sm overflow-hidden">
                        <CardContent className="p-8">
                          <div className="flex items-center justify-between mb-6">
                            <div className="w-16 h-16 bg-[#04045B] rounded-2xl flex items-center justify-center">
                              <Lightbulb className="w-8 h-8 text-white" />
                            </div>
                            <div className="w-8 h-8 bg-primary/5 rounded-full flex items-center justify-center">
                              <span className="text-small font-bold text-primary">05</span>
                            </div>
                          </div>
                          
                          <div className="space-y-4">
                            <h3 className="text-h4 font-semibold leading-tight">
                              Innovation Management
                            </h3>
                            <p className="text-body text-muted leading-relaxed">
                              Fostering innovation culture and leading creative problem-solving initiatives
                            </p>
                          </div>
                        </CardContent>
                      </Card>

                      <Card className="rounded-2xl border border-gray-200 bg-white shadow-sm overflow-hidden">
                        <CardContent className="p-8">
                          <div className="flex items-center justify-between mb-6">
                            <div className="w-16 h-16 bg-[#04045B] rounded-2xl flex items-center justify-center">
                              <Target className="w-8 h-8 text-white" />
                            </div>
                            <div className="w-8 h-8 bg-primary/5 rounded-full flex items-center justify-center">
                              <span className="text-small font-bold text-primary">06</span>
                            </div>
                          </div>
                          
                          <div className="space-y-4">
                            <h3 className="text-h4 font-semibold leading-tight">
                              Performance Excellence
                            </h3>
                            <p className="text-body text-muted leading-relaxed">
                              Driving operational excellence and achieving breakthrough performance results
                            </p>
                          </div>
                        </CardContent>
                      </Card>
                    </div>
                  </div>
                </div>
              </TabsContent>

              {/* Enhanced Curriculum Structure */}
              <TabsContent value="curriculum" className="mt-0">
                <div>
                  <div className="text-center mb-12">
                    <h2 className="text-h2 mb-4">Programme Curriculum</h2>
                    <p className="text-body-lg text-muted max-w-3xl mx-auto">
                      A comprehensive curriculum designed to build strategic leadership capabilities through progressive modules.
                    </p>
                  </div>
                  
                  <div className="grid grid-cols-1 lg:grid-cols-2 gap-8">
                    {curriculum.map((module, index) => (
                      <Card key={index} className="overflow-hidden rounded-2xl border border-gray-200 card-hover-lift h-fit bg-white shadow-sm">
                        <CardHeader className="bg-white border-b border-gray-100 p-6">
                          <div className="flex items-start gap-4">
                            <div className="w-12 h-12 bg-[#04045B] rounded-xl flex items-center justify-center flex-shrink-0">
                              <span className="text-subhead font-bold text-white">{module.moduleNumber}</span>
                            </div>
                            <div className="flex-1 min-w-0">
                              <CardTitle className="text-h4 font-semibold leading-tight">
                                {module.title}
                              </CardTitle>
                              <div className="flex flex-wrap items-center gap-2">
                                <Badge variant="outline" className="bg-white/80 rounded-lg text-xs px-2 py-1">{module.duration}</Badge>
                                <Badge variant="secondary" className="rounded-lg text-xs px-2 py-1">{module.deliveryStyle}</Badge>
                              </div>
                            </div>
                          </div>
                        </CardHeader>
                        <CardContent className="p-6">
                          <ul className="space-y-3">
                            {module.topics.map((topic, topicIndex) => (
                              <li key={topicIndex} className="flex items-start gap-3">
                                <CheckCircle className="w-4 h-4 text-primary mt-1 flex-shrink-0" />
                                <span className="text-body text-muted leading-relaxed">{topic}</span>
                              </li>
                            ))}
                          </ul>
                        </CardContent>
                      </Card>
                    ))}
                  </div>
                </div>
              </TabsContent>

              {/* Enhanced Faculty Profiles */}
              <TabsContent value="faculty" className="mt-0">
                <div>
                  <div className="text-center mb-12">
                    <h2 className="text-h2 mb-4">World-Class Faculty</h2>
                    <p className="text-body-lg text-muted max-w-3xl mx-auto">
                      Learn from industry leaders and renowned academics with decades of executive experience.
                    </p>
                  </div>
                  
                  <div className="grid grid-cols-1 lg:grid-cols-3 gap-8">
                    {faculty.map((member, index) => (
                      <Card key={index} className="text-center card-hover-lift rounded-2xl border border-gray-200 bg-white shadow-sm">
                        <CardContent className="p-8">
                          <Avatar className="w-28 h-28 mx-auto mb-6 ring-4 ring-gray-100">
                            <AvatarImage src={member.image} alt={member.name} />
                            <AvatarFallback className="bg-[#04045B] text-white text-xl font-semibold">
                              {member.name.split(' ').map(n => n[0]).join('')}
                            </AvatarFallback>
                          </Avatar>
                          
                          <h3 className="text-h4 mb-2 font-semibold">{member.name}</h3>
                          <p className="text-body text-primary font-medium mb-2">{member.title}</p>
                          <p className="text-small text-muted mb-4">{member.organization}</p>
                          <p className="text-body mb-6 leading-relaxed">{member.bio}</p>
                          
                          <div className="space-y-3 mb-6">
                            {member.credentials.map((credential, credIndex) => (
                              <Badge key={credIndex} variant="outline" className="text-xs mx-1 rounded-lg">
                                {credential}
                              </Badge>
                            ))}
                          </div>

                          <div className="flex flex-wrap justify-center gap-2 mb-6">
                            {member.expertise.map((skill, skillIndex) => (
                              <Badge key={skillIndex} variant="secondary" className="text-xs rounded-lg bg-primary/5 text-primary">
                                {skill}
                              </Badge>
                            ))}
                          </div>

                          <Button
                            variant="outline"
                            size="sm"
                            className="w-full rounded-xl border-2 hover:bg-primary hover:text-white transition-all duration-200"
                            onClick={() => window.open(member.linkedinUrl, '_blank')}
                          >
                            <ExternalLink className="w-4 h-4 mr-2" />
                            LinkedIn Profile
                          </Button>
                        </CardContent>
                      </Card>
                    ))}
                  </div>
                </div>
              </TabsContent>

              {/* Enhanced Testimonials - Landing Page Design */}
              <TabsContent value="testimonials" className="mt-0">
                <div>
                  <div className="text-center mb-12">
                    <h2 className="text-h2 mb-4">What Our Graduates Say</h2>
                    <p className="text-body-lg text-muted max-w-3xl mx-auto">
                      Hear from leaders who have transformed their careers through our programme.
                    </p>
                  </div>
                  
                  {/* Landing Page Testimonials Design */}
                  <div className="relative">
                    {/* Testimonials Cards Container */}
                    <div className="flex overflow-x-auto gap-6 py-4 pb-6 scrollbar-hide">
                      <div className="flex gap-6 px-2">
                        {testimonials.map((testimonial, index) => (
                          <motion.div
                            key={index}
                            className="testimonial-card bg-white rounded-xl border transition-all duration-300 flex-shrink-0 w-[350px] h-[300px] card-hover-lift"
                            style={{ 
                              borderColor: 'rgba(0, 0, 0, 0.1)',
                              boxShadow: '0 2px 8px rgba(0, 0, 0, 0.1)'
                            }}
                            initial={{ opacity: 0, y: 20 }}
                            whileInView={{ opacity: 1, y: 0 }}
                            transition={{ duration: 0.5 }}
                            viewport={{ once: true }}
                            whileHover={{ 
                              boxShadow: '0 8px 25px rgba(0, 0, 0, 0.15)',
                              transform: 'translateY(-4px)'
                            }}
                          >
                            {testimonial.type === 'video' ? (
                              <div 
                                className="relative h-full cursor-pointer overflow-hidden group rounded-xl"
                                onClick={() => {
                                  setSelectedVideo(testimonial.videoUrl!);
                                  setShowVideoModal(true);
                                }}
                              >
                                <ImageWithFallback
                                  src={testimonial.videoThumbnail!}
                                  alt={`${testimonial.name} video testimonial`}
                                  className="w-full h-full object-cover transition-transform duration-300 group-hover:scale-105"
                                />
                                
                                {/* Video Overlay with Gradient */}
                                <div className="absolute inset-0 bg-gradient-to-t from-black/60 via-black/20 to-transparent group-hover:from-black/70 transition-all duration-300" />
                                
                                {/* Play Button - Compact Design */}
                                <div className="absolute inset-0 flex items-center justify-center">
                                  <motion.div
                                    className="flex items-center justify-center w-16 h-16 bg-white/90 backdrop-blur-sm rounded-full shadow-lg"
                                    whileHover={{ scale: 1.1 }}
                                    whileTap={{ scale: 0.95 }}
                                  >
                                    <Play 
                                      className="w-7 h-7 ml-1 text-blue-600"
                                      fill="currentColor"
                                    />
                                  </motion.div>
                                </div>

                                {/* Video Label - Compact Style */}
                                <div className="absolute top-4 left-4">
                                  <div className="px-3 py-1 rounded-full text-xs font-medium text-white bg-blue-600">
                                    🎥 Video
                                  </div>
                                </div>

                                {/* Profile Info - Bottom Section */}
                                <div className="absolute bottom-0 left-0 right-0 p-4">
                                  <div className="flex items-center gap-3">
                                    <div className="w-10 h-10 bg-primary/10 rounded-full flex items-center justify-center flex-shrink-0">
                                      <User className="w-6 h-6 text-primary" />
                                    </div>
                                    <div className="min-w-0 flex-1">
                                      <h4 className="font-semibold text-white mb-1 text-sm">
                                        {testimonial.name}
                                      </h4>
                                      <p className="text-xs text-white/80 truncate">
                                        {testimonial.title}
                                        {testimonial.company && ` • ${testimonial.company}`}
                                      </p>
                                    </div>
                                    
                                    {/* Star Rating */}
                                    <div className="flex gap-1">
                                      {[1, 2, 3, 4, 5].map((star) => (
                                        <Star
                                          key={star}
                                          size={14}
                                          className={star <= testimonial.rating ? 'fill-current text-yellow-400' : 'text-white/40'}
                                        />
                                      ))}
                                    </div>
                                  </div>
                                </div>
                              </div>
                            ) : (
                              /* Text Testimonials - Compact Design */
                              <div className="h-full flex flex-col p-6">
                                {/* Header Section */}
                                <div className="flex items-start justify-between mb-4">
                                  <div className="flex items-center gap-3">
                                    <div className="w-12 h-12 bg-primary/10 rounded-full flex items-center justify-center flex-shrink-0">
                                      <User className="w-6 h-6 text-primary" />
                                    </div>
                                    <div className="min-w-0">
                                      <h4 className="font-semibold text-black mb-1 text-sm">
                                        {testimonial.name}
                                      </h4>
                                      <p className="text-xs text-gray-600">
                                        {testimonial.title}
                                      </p>
                                      {testimonial.company && (
                                        <p className="text-xs text-gray-500 font-medium">
                                          {testimonial.company}
                                        </p>
                                      )}
                                    </div>
                                  </div>
                                  
                                  {/* Star Rating - Top Right */}
                                  <div className="flex gap-1">
                                    {[1, 2, 3, 4, 5].map((star) => (
                                      <Star
                                        key={star}
                                        size={14}
                                        className={star <= testimonial.rating ? 'fill-current text-yellow-400' : 'text-gray-300'}
                                      />
                                    ))}
                                  </div>
                                </div>

                                {/* Quote Section - Compact Typography */}
                                <blockquote className="flex-1 mb-4">
                                  <div className="text-sm leading-relaxed text-black relative">
                                    <span className="text-4xl absolute -top-1 -left-1 leading-none opacity-20 text-blue-600">
                                      "
                                    </span>
                                    <span className="relative z-10">
                                      {testimonial.content}
                                    </span>
                                  </div>
                                </blockquote>

                                {/* Bottom Section */}
                                <div className="flex items-center justify-between">
                                  <div className="w-12 h-1 rounded-full bg-blue-600" />
                                  <Badge variant="outline" className="text-xs rounded-lg">
                                    {testimonial.programmeCompleted}
                                  </Badge>
                                </div>
                              </div>
                            )}
                          </motion.div>
                        ))}
                      </div>
                    </div>
                  </div>
                </div>
              </TabsContent>

              {/* Enhanced FAQ */}
              <TabsContent value="faq" className="mt-0">
                <div>
                  <div className="text-center mb-12">
                    <h2 className="text-h2 mb-4">Frequently Asked Questions</h2>
                    <p className="text-body-lg text-muted max-w-3xl mx-auto">
                      Find answers to common questions about the programme structure, requirements, and enrollment process.
                    </p>
                  </div>
                  
                  <div className="grid grid-cols-1 lg:grid-cols-2 gap-8">
                    {faqs.map((faq, index) => (
                      <Card key={index} className="overflow-hidden rounded-2xl border border-gray-200 card-hover-lift h-fit bg-white shadow-sm">
                        <CardHeader className="bg-white border-b border-gray-100 p-6">
                          <div className="flex items-start gap-4">
                            <div className="w-12 h-12 bg-[#04045B] rounded-xl flex items-center justify-center flex-shrink-0">
                              <MessageCircle className="w-5 h-5 text-white" />
                            </div>
                            <div className="flex-1 min-w-0">
                              <CardTitle className="text-h4 font-semibold leading-tight">
                                {faq.question}
                              </CardTitle>
                            </div>
                          </div>
                        </CardHeader>
                        <CardContent className="p-6">
                          <p className="text-body text-muted leading-relaxed">
                            {faq.answer}
                          </p>
                        </CardContent>
                      </Card>
                    ))}
                  </div>
                </div>
              </TabsContent>

              {/* Enhanced Enrollment Options */}
              <TabsContent value="enroll" className="mt-0">
                <div>
                  <div className="text-center mb-12">
                    <h2 className="text-h2 mb-4">Choose Your Enrollment Option</h2>
                    <p className="text-body-lg text-muted max-w-3xl mx-auto">
                      Select the enrollment option that best fits your learning needs and organizational requirements.
                    </p>
                  </div>
                  
                  <div className="grid grid-cols-1 md:grid-cols-3 gap-8">
                    {mockEnrollmentOptions.map((option, index) => (
                      <Card 
                        key={index} 
                        className={`relative card-hover-lift rounded-2xl border transition-all duration-300 bg-white shadow-sm ${
                          option.popular 
                            ? 'border-[#F8C301] border-2' 
                            : 'border-gray-200'
                        }`}
                      >
                        {option.popular && (
                          <div className="absolute -top-4 left-1/2 transform -translate-x-1/2">
                            <Badge 
                              className="text-white px-6 py-2 text-sm font-semibold rounded-xl shadow-lg"
                              style={{ backgroundColor: '#F8C301' }}
                            >
                              Most Popular
                            </Badge>
                          </div>
                        )}
                        <CardContent className="p-8">
                          <div className="text-center mb-6">
                            <h3 className="text-h4 mb-4 font-semibold">{option.title}</h3>
                            <div className="mb-4">
                              <div className="flex items-baseline justify-center gap-2">
                                <span className="text-h2 font-bold text-primary">{option.price}</span>
                                {option.originalPrice && (
                                  <span className="text-body text-muted line-through">{option.originalPrice}</span>
                                )}
                              </div>
                              {option.priceNote && (
                                <p className="text-small text-muted">{option.priceNote}</p>
                              )}
                            </div>
                          </div>
                          
                          <ul className="space-y-4 mb-8">
                            {option.features.map((feature, featureIndex) => (
                              <li key={featureIndex} className="flex items-start gap-3">
                                <CheckCircle className="w-5 h-5 text-primary mt-0.5 flex-shrink-0" />
                                <span className="text-body">{feature}</span>
                              </li>
                            ))}
                          </ul>
                          
                          <Button
                            onClick={() => handleEnrollment(option.type)}
                            className={`w-full h-12 rounded-xl font-semibold transition-all duration-200 ${
                              option.popular 
                                ? 'text-white shadow-lg' 
                                : 'border-2 hover:text-white'
                            }`}
                            style={{
                              backgroundColor: option.popular ? '#F8C301' : 'transparent',
                              borderColor: option.popular ? '#F8C301' : '#F8C301',
                              color: option.popular ? 'white' : '#F8C301'
                            }}
                            onMouseEnter={(e) => {
                              if (!option.popular) {
                                e.currentTarget.style.backgroundColor = '#F8C301';
                                e.currentTarget.style.color = 'white';
                              } else {
                                e.currentTarget.style.backgroundColor = '#E6AF01';
                              }
                            }}
                            onMouseLeave={(e) => {
                              if (!option.popular) {
                                e.currentTarget.style.backgroundColor = 'transparent';
                                e.currentTarget.style.color = '#F8C301';
                              } else {
                                e.currentTarget.style.backgroundColor = '#F8C301';
                              }
                            }}
                            variant={option.popular ? 'default' : 'outline'}
                          >
                            {option.ctaText}
                          </Button>
                        </CardContent>
                      </Card>
                    ))}
                  </div>
                </div>
              </TabsContent>
            </Tabs>
          </div>
        </div>
      </section>

      {/* Enhanced Related Programmes */}
      <section className="py-24 bg-gray-50/30" style={{ backgroundColor: 'rgba(249, 250, 251, 0.3)' }}>
        <div className="section-margin-x">
          <div className="max-w-6xl mx-auto">
            <div className="text-center mb-16">
              <h2 className="text-h2 mb-4">You Might Also Like</h2>
              <p className="text-body-lg text-muted max-w-3xl mx-auto">
                Explore related programmes to continue your leadership journey and expand your expertise across different domains.
              </p>
            </div>
            
            <div className="grid grid-cols-1 md:grid-cols-3 gap-8">
              {relatedProgrammes.map((related, index) => (
                <Card 
                  key={index} 
                  className="cursor-pointer card-hover-dramatic rounded-2xl border-0 card-shadow-base group overflow-hidden"
                >
                  <div className="aspect-video bg-gray-100 overflow-hidden relative">
                    <ImageWithFallback
                      src={related.thumbnail}
                      alt={related.title}
                      className="w-full h-full object-cover transition-transform duration-500 group-hover:scale-110"
                    />
                    <div className="absolute inset-0 bg-gradient-to-t from-black/20 to-transparent opacity-0 group-hover:opacity-100 transition-opacity duration-300" />
                    
                    {/* Top Badges */}
                    <div className="absolute top-4 left-4 flex gap-2">
                      <Badge className="bg-[#F8C301] text-white rounded-lg text-xs px-3 py-1 font-medium">
                        {related.category}
                      </Badge>
                      <Badge variant="secondary" className="bg-gray-100 text-gray-700 rounded-lg text-xs px-3 py-1 font-medium">
                        {related.level}
                      </Badge>
                    </div>
                  </div>
                  
                  <CardContent className="p-6">
                    <h3 className="text-h4 mb-3 font-semibold group-hover:text-primary transition-colors duration-200 leading-tight">
                      {related.title}
                    </h3>
                    <p className="text-body text-muted mb-4 leading-relaxed line-clamp-2">{related.description}</p>
                    
                    {/* Metadata Section */}
                    <div className="flex items-center justify-between mb-4">
                      <div className="flex items-center gap-4 text-small text-muted">
                        <span className="flex items-center gap-1">
                          <Clock className="w-4 h-4" />
                          {related.duration}
                        </span>
                        <span className="flex items-center gap-1">
                          <Users className="w-4 h-4" />
                          1,500+
                        </span>
                      </div>
                      <div className="flex items-center gap-1">
                        {[1, 2, 3, 4, 5].map((star) => (
                          <Star key={star} size={16} className="fill-current text-yellow-400" />
                        ))}
                        <span className="text-small text-muted ml-1">4.8</span>
                      </div>
                    </div>
                    
                    {/* Pricing Section */}
                    <div className="mb-6">
                      <div className="flex items-baseline gap-2">
                        <span className="text-h4 font-bold text-primary">{related.price}</span>
                        <span className="text-body text-muted line-through">₹49,999</span>
                        <span className="text-sm text-green-600 bg-green-50 px-2 py-1 rounded font-medium">Save 25%</span>
                      </div>
                    </div>
                    
                    {/* Action Buttons */}
                    <div className="flex gap-3">
                      <Button
                        variant="outline"
                        size="sm"
                        className="flex-1 rounded-xl border-2 hover:bg-gray-50 transition-all duration-200"
                        onClick={(e) => {
                          e.stopPropagation();
                          // Add to cart functionality
                        }}
                      >
                        Add to Cart
                      </Button>
                      <Button
                        size="sm"
                        className="flex-1 rounded-xl bg-primary hover:bg-primary/90 text-white transition-all duration-200"
                        onClick={(e) => {
                          e.stopPropagation();
                          navigateTo(`/course/${related.id}`);
                        }}
                      >
                        Learn More →
                      </Button>
                    </div>
                  </CardContent>
                </Card>
              ))}
            </div>
          </div>
        </div>
      </section>

      {/* Focused CTA Banner - Blue Box Design */}
      <section className="py-20 relative overflow-hidden">
        {/* Background Image */}
        <div 
          className="absolute inset-0 bg-cover bg-center bg-no-repeat"
          style={{
            backgroundImage: 'url(https://images.unsplash.com/photo-1560472354-b33ff0c44a43?w=1200&h=600&fit=crop)',
          }}
        />
        <div className="absolute inset-0 bg-black/40" />
        
        <div className="section-margin-x relative z-10">
          <div className="max-w-4xl mx-auto flex justify-center">
            
            {/* Blue Content Box */}
            <div 
              className="max-w-2xl p-12 rounded-2xl shadow-2xl"
              style={{ 
                backgroundColor: 'var(--color-primary)',
                border: '1px solid rgba(255, 255, 255, 0.1)'
              }}
            >
              <div className="text-center text-white">
                {/* Badge */}
                <div className="mb-6">
                  <span 
                    className="inline-flex items-center gap-2 px-4 py-2 rounded-full text-sm font-medium"
                    style={{
                      backgroundColor: 'rgba(248, 195, 1, 0.2)',
                      color: '#F8C301',
                      fontFamily: 'var(--font-family-base)',
                      backdropFilter: 'blur(10px)'
                    }}
                  >
                    ⭐ START NOW
                  </span>
                </div>
                
                {/* Headline */}
                <h2 className="text-h2-white mb-6">
                  Ready to Lead?{' '}
                  <span style={{ color: '#F8C301' }}>Join Today</span>
                </h2>
                
                {/* Description */}
                <p className="text-body-lg-white opacity-90 mb-8">
                  Transform your leadership potential with expert guidance and proven frameworks.
                </p>
                
                {/* CTA Button */}
                <div className="mb-6">
                  <PrimaryCTAButton
                    text="Schedule Consultation"
                    onClick={() => navigateTo(`/contact?topic=programme&programme=${programme.id}`)}
                    className="cta-banner-yellow"
                  />
                </div>
                
                {/* Support Text */}
                <p className="text-small-white opacity-75">
                  Speak with our experts • Free consultation • Custom solutions
                </p>
              </div>
            </div>
          </div>
        </div>
      </section>

      {/* Brochure Download Modal */}
      {showBrochureForm && (
        <div className="fixed inset-0 bg-black/50 flex items-center justify-center z-50 p-4">
          <div className="bg-white rounded-lg max-w-md w-full p-6">
            <div className="flex items-center justify-between mb-4">
              <h3 className="text-h4">Download Programme Brochure</h3>
              <Button
                variant="ghost"
                size="sm"
                onClick={() => setShowBrochureForm(false)}
              >
                <X className="w-4 h-4" />
              </Button>
            </div>
            
            <form onSubmit={handleBrochureDownload} className="space-y-4">
              <div>
                <Label htmlFor="name">Full Name *</Label>
                <Input
                  id="name"
                  required
                  value={brochureFormData.name}
                  onChange={(e) => setBrochureFormData({...brochureFormData, name: e.target.value})}
                />
              </div>
              <div>
                <Label htmlFor="email">Email Address *</Label>
                <Input
                  id="email"
                  type="email"
                  required
                  value={brochureFormData.email}
                  onChange={(e) => setBrochureFormData({...brochureFormData, email: e.target.value})}
                />
              </div>
              <div>
                <Label htmlFor="phone">Phone Number</Label>
                <Input
                  id="phone"
                  type="tel"
                  value={brochureFormData.phone}
                  onChange={(e) => setBrochureFormData({...brochureFormData, phone: e.target.value})}
                />
              </div>
              <div>
                <Label htmlFor="company">Company</Label>
                <Input
                  id="company"
                  value={brochureFormData.company}
                  onChange={(e) => setBrochureFormData({...brochureFormData, company: e.target.value})}
                />
              </div>
              <div>
                <Label htmlFor="designation">Designation</Label>
                <Input
                  id="designation"
                  value={brochureFormData.designation}
                  onChange={(e) => setBrochureFormData({...brochureFormData, designation: e.target.value})}
                />
              </div>
              
              <div className="flex gap-3 pt-4">
                <Button
                  type="button"
                  variant="outline"
                  onClick={() => setShowBrochureForm(false)}
                  className="flex-1"
                >
                  Cancel
                </Button>
                <Button
                  type="submit"
                  disabled={isSubmitting}
                  className="flex-1 bg-primary text-white"
                >
                  {isSubmitting ? 'Sending...' : 'Download Brochure'}
                </Button>
              </div>
            </form>
          </div>
        </div>
      )}

      {/* Video Modal */}
      {showVideoModal && selectedVideo && (
        <div className="fixed inset-0 bg-black/80 flex items-center justify-center z-50 p-4">
          <div className="relative max-w-4xl w-full">
            <Button
              variant="ghost"
              size="sm"
              onClick={() => {
                setShowVideoModal(false);
                setSelectedVideo(null);
              }}
              className="absolute -top-12 right-0 text-white hover:bg-white/20"
            >
              <X className="w-6 h-6" />
            </Button>
            <div className="aspect-video bg-black rounded-lg overflow-hidden">
              <iframe
                src={selectedVideo}
                className="w-full h-full"
                allowFullScreen
                title="Programme Video"
              />
            </div>
          </div>
        </div>
      )}
    </div>
  );
}