import {
  Award,
  BookOpen,
  CheckCircle,
  Clock,
  Download,
  ExternalLink,
  Lightbulb,
  MessageCircle,
  Play,
  Star,
  Target,
  TrendingUp,
  User,
  Users,
  X
} from 'lucide-react';
import { motion } from 'motion/react';
import React, { useEffect, useMemo, useRef, useState } from 'react';
import { useNavigate, useParams } from 'react-router-dom';
import { toast } from 'sonner';
import { useGetcoursebyidQuery } from '../redux/services/courseApi';
import { BrandedTag } from './about/BrandedTag';
import { useCart } from './CartContext';
import { ImageWithFallback } from './figma/ImageWithFallback';
import { PrimaryCTAButton } from './PrimaryCTAButton';
import { navigateTo } from './Router';
import { Avatar, AvatarFallback, AvatarImage } from './ui/avatar';
import { Badge } from './ui/badge';
import { Button } from './ui/button';
import { Card, CardContent, CardHeader, CardTitle } from './ui/card';
import {
  Dialog,
  DialogContent,
  DialogOverlay,
  DialogPortal
} from './ui/dialog';
import { Input } from './ui/input';
import { Label } from './ui/label';
import { Tabs, TabsContent, TabsList, TabsTrigger } from './ui/tabs';

// 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',
  methodologyDesc: 'Formulating Strategy is a theme that requires the exercise of leadership. Thus, the course starts with offering you an opportunity to review your lens to leadership and provides alternate perspectives to leadership',
  reviewCount: 24,
  rating: 4.8,
  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'
  }
];

const formatIndianPrice = (value: string | number | null | undefined) => {
  const amount = Number(value ?? 0);
  return `₹${amount.toLocaleString('en-IN')}`;
};

interface ProgrammeDetailProps {
  slug?: string;
}

export function ProgrammeDetail({ slug }: ProgrammeDetailProps) {
  const params = useParams<{ slug: string }>();
  const courseId = slug || params.slug || '';
  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 navigate = useNavigate();

  const heroRef = useRef<HTMLDivElement>(null);
  const { addToCart } = useCart();
  const {
    data: courseDetailResponse,
    isLoading,
    isError
  } = useGetcoursebyidQuery(courseId, {
    skip: !courseId
  });
  const courseDetail = courseDetailResponse?.data;

  const handleCourseClick = (courseId: string) => {
    navigate(`/course/${courseId}`);
    // Optionally scroll to top
    window.scrollTo(0, 0);
  };


  // Add this with your other useState declarations
  const [showCertificatePreview, setShowCertificatePreview] = useState(false);

  // 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);
  }, []);

  const programme = useMemo(() => {
    if (!courseDetail) return mockProgrammeData;

    const bestValue = Number(courseDetail.best_value ?? 0);
    const originalValue = Number(courseDetail.price ?? 0);
    const computedPrice = formatIndianPrice(bestValue);
    const computedOriginalPrice =
      originalValue > 0 && originalValue !== bestValue
        ? formatIndianPrice(originalValue)
        : undefined;

    return {
      ...mockProgrammeData,
      id: courseDetail.id,
      title: courseDetail.course_name || mockProgrammeData.title,
      subtitle: courseDetail.course_desc || mockProgrammeData.subtitle,
      duration: courseDetail.duration || mockProgrammeData.duration,
      // level: courseDetail.retail_type === 'public' ? 'Public' : 'Private',
      // format: courseDetail.retail_type === 'public' ? 'Cohort-based' : 'Self-paced',
      price: computedPrice,
      originalPrice: computedOriginalPrice,
      methodologyDesc: courseDetail.our_methodology_desc,
      reviewCount: courseDetail.total_reviews || 0,
      rating: Number(courseDetail.avg_rating ?? 0),
      published: courseDetail.course_status === 'publish',
      spotsLeft: courseDetail.total_lessons || mockProgrammeData.spotsLeft,
      maxCapacity: Math.max(courseDetail.total_lessons || 0, mockProgrammeData.maxCapacity),
      thumbnail: courseDetail.thumbnail_img || mockProgrammeData.thumbnail,
      badges: [
        courseDetail.course_category_name,
        courseDetail.retail_type === 'public' ? 'Public' : 'Private',
        courseDetail.is_certificate_available ? 'Certified' : 'Non-Certified'
      ].filter(Boolean),
      previewVideoUrl:
        courseDetail.reviews.find((review) => review.video_url)?.video_url ||
        mockProgrammeData.previewVideoUrl,
      highlights:
        courseDetail.course_learning_outcomes.slice(0, 5).map((item) => item.title) ||
        mockProgrammeData.highlights,
      deliveryMethods: courseDetail.modules.length
        ? courseDetail.modules.map((module) => module.module_name)
        : mockProgrammeData.deliveryMethods,
      credentials:
        courseDetail.course_certificate?.program_title ||
        courseDetail.course_certificate?.institution_name ||
        mockProgrammeData.credentials,
      targetROI: courseDetail.our_methodology_desc || mockProgrammeData.targetROI
    };
  }, [courseDetail]);

  const outcomes = useMemo(() => {
    if (!courseDetail?.course_learning_outcomes?.length) return mockOutcomes;

    return courseDetail.course_learning_outcomes.map((item) => ({
      title: item.title,
      description: item.description
    }));
  }, [courseDetail]);

  const curriculum = useMemo(() => {
    if (!courseDetail?.modules?.length) return mockCurriculum;

    return courseDetail.modules.map((module, index) => ({
      moduleNumber: index + 1,
      title: module.module_name,
      duration: `${module.lessons.length} lesson${module.lessons.length === 1 ? '' : 's'}`,
      deliveryStyle: module.lessons.some((lesson) => !lesson.is_lock_lesson) ? 'Self-Paced' : 'Locked',
      topics: module.lessons.map((lesson) => lesson.lesson_title)
    }));
  }, [courseDetail]);

  const faculty = useMemo(() => {
    if (!courseDetail?.course_facilities?.length) return mockFaculty;

    return courseDetail.course_facilities.map((member) => ({
      id: member.id,
      name: member.faculty_name,
      title: member.faculty_title,
      organization: member.faculty_organization_name,
      bio: member.faculty_biography,
      image: '',
      linkedinUrl: '',
      credentials: member.credentials.map((credential) => credential.credential_name),
      expertise: member.expertises || []
    }));
  }, [courseDetail]);

  const testimonials = useMemo(() => {
    if (!courseDetail?.reviews?.length) return mockTestimonials;

    return courseDetail.reviews.map((review) => ({
      id: review.id,
      type: review.video_url ? 'video' : 'text',
      name: review.reviewer_name,
      title: review.bio || 'Learner Review',
      company: courseDetail.course_category_name,
      content: review.comment,
      videoThumbnail: programme.thumbnail,
      videoUrl: review.video_url || '',
      rating: review.rating,
      programmeCompleted: courseDetail.course_name
    }));
  }, [courseDetail, programme.thumbnail]);

  const faqs = useMemo(() => {
    if (!courseDetail?.course_faqs?.length) return mockFAQs;
    return courseDetail.course_faqs;
  }, [courseDetail]);

  const audienceSegments = useMemo(() => {
    if (!courseDetail?.course_target_audiences?.length) return mockAudienceSegments;

    return courseDetail.course_target_audiences.map((segment, index) => ({
      title: segment.title,
      description: segment.description,
      icon: index % 3 === 0
        ? <Award className="w-6 h-6" />
        : index % 3 === 1
          ? <TrendingUp className="w-6 h-6" />
          : <Lightbulb className="w-6 h-6" />
    }));
  }, [courseDetail]);

  const useCases = useMemo(() => {
    if (!courseDetail?.modules?.length) return mockUseCases;
    return courseDetail.modules.flatMap((module) => module.lessons.map((lesson) => lesson.lesson_title)).slice(0, 6);
  }, [courseDetail]);

  const relatedProgrammes = mockRelatedProgrammes;

  useEffect(() => {
    setSelectedFaculty(0);
  }, [courseId]);

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

  if (isLoading) {
    return (
      <div className="min-h-screen flex items-center justify-center" style={{ backgroundColor: '#FFFFFF' }}>
        <div className="text-center">
          <div className="animate-spin rounded-full h-12 w-12 border-b-2 border-primary mx-auto mb-4"></div>
          <p className="text-gray-600">Loading programme details...</p>
        </div>
      </div>
    );
  }

  if (isError || !courseDetail) {
    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">
            We couldn't load the programme details right now.
          </p>
          <Button onClick={() => navigateTo('/learning-online')}>
            Browse All Programmes
          </Button>
        </div>
      </div>
    );
  }

  // 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 className="flex items-center gap-1.5 px-2.5 py-1 bg-blue-50 rounded-full">
                          <MessageCircle className="w-3.5 h-3.5 text-primary" />
                          <span className="font-medium text-primary">{programme.reviewCount} reviews</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>
                  <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">
                    <MessageCircle className="w-3 h-3 mr-2" />
                    Reviews: {programme.reviewCount}
                  </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>
                      {courseDetail?.course_certificate ? (
                        <div>
                          {/* Certificate Available Message */}
                          <p className="text-body text-muted mb-4">
                            Certificate Available <span className="text-muted">upon completion</span>
                          </p>
                          <div
                            className="border border-gray-200 rounded-lg p-4 bg-[#fbf9fa] cursor-pointer hover:shadow-md transition-shadow duration-300">
                            {/* Certificate Preview */}
                            <h5 className="text-small font-semibold text-black mb-3">Certificate Preview:</h5>

                            {/* Certificate Card - Exact design from image */}
                            <div className="border-2 border-[#04045b] border rounded-lg p-4 bg-white cursor-pointer hover:shadow-md transition-shadow duration-300">
                              <div
                                className="border-2 border-[#04045b] border rounded-lg p-4 bg-white cursor-pointer hover:shadow-md transition-shadow duration-300"
                                onClick={() => setShowCertificatePreview(true)}
                              >
                                <div className="text-center">
                                  {/* Title */}
                                  <h3 className="text-md font-medium font-serif text-[#04045b] mb-4">Certificate of Completion</h3>

                                  {/* Body Text */}
                                  <p className="text-gray-600 mb-2 text-small-extra">This is to certify that</p>
                                  <span className="text-xl font-semibold text-primary mb-2 text-sm border-b border-black">
                                    [Learner Name]
                                  </span>
                                  <p className="text-gray-600 mb-2 text-small-extra">has successfully completed</p>
                                  <p className="text-md font-medium text-gray-800 mb-2 text-small">
                                    {courseDetail.course_certificate.program_title || programme.title}
                                  </p>
                                  <p className="text-gray-600 mb-2 text-small-extra">offered by</p>
                                  <p className="text-md font-medium text-gray-800 mb-2 text-small">
                                    {courseDetail.course_certificate.institution_name || "Kautilya Leadership Centre"}
                                  </p>

                                  {/* Footer with Signature and Date */}
                                  <div className="flex justify-between items-center mt-4 pt-4 border-t border-gray-200">
                                    <div className="text-left">
                                      <div className="mb-1">
                                        {courseDetail.course_certificate.digital_signature_url ? (
                                          <img
                                            src={courseDetail.course_certificate.digital_signature_url}
                                            alt="Signature"
                                            className="h-6 object-contain"
                                          />
                                        ) : (
                                          <div className="w-24 h-10 border-b border-gray-400"></div>
                                        )}
                                      </div>
                                      <p className="text-xs text-gray-500">Signature</p>
                                    </div>
                                    <div className="text-right">
                                      <p className="text-xs text-gray-500 mb-1">Date</p>
                                      <p className="text-xs text-gray-700">
                                        {new Date().toLocaleDateString('en-US', { year: 'numeric', month: 'long', day: 'numeric' })}
                                      </p>
                                    </div>
                                  </div>
                                </div>
                              </div>
                            </div>
                          </div>
                        </div>
                      ) : (
                        <p className="text-body text-muted">{programme.credentials}</p>
                      )}
                    </div>

                    {/* Certificate Preview Modal - Full View */}
                    {courseDetail?.course_certificate && (
                      <Dialog open={showCertificatePreview} onOpenChange={setShowCertificatePreview}>
                        <DialogPortal>
                          <DialogOverlay className="fixed inset-0 bg-black/70 z-[9999]" />
                          <DialogContent className="fixed left-[50%] top-[50%] translate-x-[-50%] translate-y-[-50%] w-full max-w-3xl z-[9999] focus:outline-none bg-transparent border-none shadow-none p-0">
                            <div className="relative">
                              {/* <DialogClose asChild>
                                <button
                                  className="absolute -top-12 right-0 text-white hover:bg-white/20 rounded-full p-1 z-10 focus:outline-none"
                                  aria-label="Close"
                                >
                                  <X className="w-5 h-5" />
                                </button>
                              </DialogClose> */}

                              {/* Certificate Card - Authentic Certificate Style */}
                              <div className="bg-white rounded-lg shadow-2xl overflow-hidden max-h-[90vh] overflow-y-auto custom-scrollbar">
                                {/* Decorative Border */}
                                <div className="p-1 bg-gradient-to-r from-amber-400 via-yellow-500 to-amber-400">
                                  <div className="bg-white p-2">
                                    {/* Inner Border */}
                                    <div className="border-2 border-amber-200 p-6 md:p-10">
                                      {/* Certificate Content */}
                                      <div className="text-center">
                                        {/* Decorative Top Border */}
                                        <div className="flex justify-center mb-6">
                                          <div className="h-1 w-20 bg-amber-400 rounded-full"></div>
                                        </div>

                                        {/* Certificate Title */}
                                        <h2 className="text-3xl md:text-4xl font-serif font-bold text-gray-800 mb-2">
                                          Certificate of Completion
                                        </h2>

                                        {/* Decorative Line */}
                                        <div className="w-24 h-0.5 bg-amber-400 mx-auto mb-6"></div>

                                        {/* Body Text */}
                                        <p className="text-gray-600 text-lg mb-4">This is to certify that</p>

                                        {/* Learner Name */}
                                        <p className="text-3xl md:text-4xl font-serif font-bold text-amber-700 mb-4 border-b-2 border-amber-200 inline-block px-8 pb-2">
                                          [Learner Name]
                                        </p>

                                        <p className="text-gray-600 text-lg mt-6 mb-4">has successfully completed</p>

                                        {/* Program Title */}
                                        <p className="text-2xl md:text-3xl font-serif font-semibold text-gray-800 mb-4">
                                          {courseDetail.course_certificate.program_title || programme.title}
                                        </p>

                                        <p className="text-gray-600 text-lg mb-4">offered by</p>

                                        {/* Institution Name */}
                                        <p className="text-2xl md:text-3xl font-serif font-semibold text-gray-800 mb-8">
                                          {courseDetail.course_certificate.institution_name || "Kautilya Leadership Centre"}
                                        </p>

                                        {/* Certificate ID */}
                                        {courseDetail.course_certificate.id && (
                                          <div className="mb-6">
                                            <p className="text-xs text-gray-400">
                                              Certificate ID: {courseDetail.course_certificate.id}
                                            </p>
                                          </div>
                                        )}

                                        {/* Footer with Signature and Date */}
                                        <div className="flex flex-col md:flex-row justify-between items-center gap-6 mt-8 pt-6 border-t border-amber-200">
                                          {/* Signature Section */}
                                          <div className="text-center md:text-left flex-1">
                                            {courseDetail.course_certificate.digital_signature_url ? (
                                              <div className="mb-2">
                                                <img
                                                  src={courseDetail.course_certificate.digital_signature_url}
                                                  alt="Signature"
                                                  className="h-14 object-contain mx-auto md:mx-0"
                                                />
                                                <div className="w-32 h-px bg-gray-300 mx-auto md:mx-0 mt-1"></div>
                                              </div>
                                            ) : (
                                              <div className="mb-2">
                                                <div className="w-32 h-12 border-b border-gray-400 mx-auto md:mx-0"></div>
                                              </div>
                                            )}
                                            <p className="text-sm font-medium text-gray-700">Authorized Signature</p>
                                            {courseDetail.course_certificate.signatory_name && (
                                              <p className="text-xs text-gray-500 mt-1">{courseDetail.course_certificate.signatory_name}</p>
                                            )}
                                            {courseDetail.course_certificate.signatory_title && (
                                              <p className="text-xs text-gray-400">{courseDetail.course_certificate.signatory_title}</p>
                                            )}
                                          </div>

                                          {/* Date Section */}
                                          <div className="text-center flex-1">
                                            <p className="text-sm font-medium text-gray-700 mb-1">Date of Issue</p>
                                            <p className="text-base text-gray-800 font-serif">
                                              {new Date().toLocaleDateString('en-US', { year: 'numeric', month: 'long', day: 'numeric' })}
                                            </p>
                                          </div>

                                          {/* Seal/Logo Section */}
                                          <div className="text-center flex-1">
                                            {courseDetail.course_certificate.company_logo_url ? (
                                              <img
                                                src={courseDetail.course_certificate.company_logo_url}
                                                alt="Institution Logo"
                                                className="h-16 w-16 object-contain mx-auto"
                                              />
                                            ) : (
                                              <div className="w-16 h-16 rounded-full border-2 border-amber-400 flex items-center justify-center mx-auto">
                                                <span className="text-2xl">🎓</span>
                                              </div>
                                            )}
                                          </div>
                                        </div>

                                        {/* Decorative Bottom Border */}
                                        <div className="flex justify-center mt-8">
                                          <div className="h-1 w-20 bg-amber-400 rounded-full"></div>
                                        </div>

                                        {/* Verification Note */}
                                        <p className="text-xs text-gray-400 mt-6">
                                          This certificate is digitally verified and can be authenticated online
                                        </p>
                                      </div>
                                    </div>
                                  </div>
                                </div>
                              </div>
                            </div>
                          </DialogContent>
                        </DialogPortal>
                      </Dialog>
                    )}
                  </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-5 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>
              </TabsList>

              {/* Overview Tab - Who will benefit from this course? */}
              <TabsContent value="overview" className="mt-0">
                <div className="space-y-16">
                  {/* Section: Who will benefit from this course? */}
                  <div>
                    <div className="text-center mb-12">
                      <h2 className="text-h2 mb-4">Who will benefit from this course?</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>

                    <Card className="rounded-2xl border border-gray-200 bg-white shadow-sm">
                      <CardContent className="p-8">
                        <div className="flex items-start gap-4 mb-6">
                          <div className="w-12 h-12 bg-[#04045B] rounded-xl flex items-center justify-center flex-shrink-0">
                            <Users className="w-5 h-5 text-white" />
                          </div>
                          <div className="flex-1">
                            <h3 className="text-h4 font-semibold mb-4">Target Audience</h3>
                            <p className="text-body text-muted leading-relaxed">
                              You will find this course useful if you are responsible to craft the strategy of the institution or are someone who contributes to shaping the company or business strategy.
                            </p>
                          </div>
                        </div>

                        <div className="grid grid-cols-1 md:grid-cols-3 gap-6 mt-8">
                          {audienceSegments.map((segment, index) => (
                            <div key={index} className="text-center p-6 bg-gray-50 rounded-xl">
                              <div className="w-16 h-16 bg-[#04045B] rounded-2xl flex items-center justify-center mx-auto mb-4">
                                <div className="text-white">
                                  {segment.icon}
                                </div>
                              </div>
                              <h4 className="text-subhead font-semibold mb-2">{segment.title}</h4>
                              <p className="text-small text-muted">{segment.description}</p>
                            </div>
                          ))}
                        </div>
                      </CardContent>
                    </Card>
                  </div>
                </div>
              </TabsContent>

              {/* Enhanced Curriculum Structure */}
              <TabsContent value="curriculum" className="mt-0">
                <div className="space-y-16">
                  {/* Section: What will you learn through this course? */}
                  <div>
                    <div className="text-center mb-12">
                      <h2 className="text-h2 mb-4">What will you learn through this course?</h2>
                      <p className="text-body-lg text-muted max-w-3xl mx-auto">
                        This course will help you understand the role of leadership in shaping strategy.
                      </p>
                    </div>

                    <Card className="rounded-2xl border border-gray-200 bg-white shadow-sm">
                      <CardContent className="p-8">
                        <div className="flex items-start gap-4 mb-6">
                          <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">
                            <h3 className="text-h4 font-semibold mb-4">Learning Outcomes</h3>
                            <p className="text-body text-muted leading-relaxed">
                              This course will help you understand the role of leadership in shaping strategy. You will learn the personal resources you need (characteristics or traits, we refer to them as leadership orientations) to enable you to think strategically and formulate strategy.
                            </p>
                          </div>
                        </div>

                        <div className="grid grid-cols-1 lg:grid-cols-2 gap-6 mt-8">
                          {outcomes.map((outcome, index) => (
                            <div key={index} className="p-6 bg-gray-50 rounded-xl">
                              <h4 className="text-subhead font-semibold mb-3">{outcome.title}</h4>
                              <p className="text-body text-muted leading-relaxed">{outcome.description}</p>
                            </div>
                          ))}
                        </div>
                      </CardContent>
                    </Card>
                  </div>

                  {/* Section: How is the learning structured? */}
                  <div>
                    <div className="text-center mb-12">
                      <h2 className="text-h2 mb-4">How is the learning structured?</h2>
                      <p className="text-body-lg text-muted max-w-3xl mx-auto">
                        This course is designed to help you uncover dimensions through bite-size, easy to consume learning units.
                      </p>
                    </div>

                    <Card className="rounded-2xl border border-gray-200 bg-white shadow-sm">
                      <CardContent className="p-8">
                        <div className="flex items-start gap-4 mb-6">
                          <div className="w-12 h-12 bg-[#04045B] rounded-xl flex items-center justify-center flex-shrink-0">
                            <Lightbulb className="w-5 h-5 text-white" />
                          </div>
                          <div className="flex-1">
                            <h3 className="text-h4 font-semibold mb-4">Learning Structure</h3>
                            <div className="space-y-4 text-body text-muted leading-relaxed">
                              <p>
                                This course is designed to help you uncover the dimensions mentioned above by breaking it down to learning units that are bite size and easy to consume. It is structured to help you understand the content, learn its application and reflect on your behaviour relating to it. It offers a structure to skills practice to continue beyond the course as well.
                              </p>
                              <p>
                                The content is structured for you to absorb, internalise, reflect, be self-aware and practice building skill in that unit of content before proceeding to the next. We recommend you learn by spending time observing, reflecting and drawing deeper insights from your environment and watching others relating to the content as well. As you progress reflect and identify the areas you want to develop and practice skills beyond the course.
                              </p>
                              <p>
                                Deep involvement in each unit of content before moving to the next will heighten your learning experience of the program.
                              </p>
                            </div>
                          </div>
                        </div>

                        {/* Learning Structure Visual */}
                        <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-4 mt-8">
                          <div className="text-center p-4 bg-blue-50 rounded-xl">
                            <div className="w-12 h-12 bg-[#04045B] rounded-full flex items-center justify-center mx-auto mb-3">
                              <span className="text-white font-bold">1</span>
                            </div>
                            <h4 className="text-subhead font-semibold mb-2">Absorb</h4>
                            <p className="text-small text-muted">Learn and understand core concepts</p>
                          </div>
                          <div className="text-center p-4 bg-blue-50 rounded-xl">
                            <div className="w-12 h-12 bg-[#04045B] rounded-full flex items-center justify-center mx-auto mb-3">
                              <span className="text-white font-bold">2</span>
                            </div>
                            <h4 className="text-subhead font-semibold mb-2">Reflect</h4>
                            <p className="text-small text-muted">Self-awareness and introspection</p>
                          </div>
                          <div className="text-center p-4 bg-blue-50 rounded-xl">
                            <div className="w-12 h-12 bg-[#04045B] rounded-full flex items-center justify-center mx-auto mb-3">
                              <span className="text-white font-bold">3</span>
                            </div>
                            <h4 className="text-subhead font-semibold mb-2">Practice</h4>
                            <p className="text-small text-muted">Apply skills in real situations</p>
                          </div>
                          <div className="text-center p-4 bg-blue-50 rounded-xl">
                            <div className="w-12 h-12 bg-[#04045B] rounded-full flex items-center justify-center mx-auto mb-3">
                              <span className="text-white font-bold">4</span>
                            </div>
                            <h4 className="text-subhead font-semibold mb-2">Develop</h4>
                            <p className="text-small text-muted">Continuous skill building</p>
                          </div>
                        </div>
                      </CardContent>
                    </Card>
                  </div>

                  {/* Section: Programme Curriculum Modules */}
                  <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>
                </div>
              </TabsContent>

              {/* Enhanced Faculty Profiles */}
              <TabsContent value="faculty" className="mt-0">
                <div className="space-y-16">
                  {/* Section: Approach to the Course */}
                  <div>
                    <div className="text-center mb-12">
                      <h2 className="text-h2 mb-4">Approach to the Course</h2>
                      <p className="text-body-lg text-muted max-w-3xl mx-auto">
                        Formulating Strategy is a theme that requires the exercise of leadership.
                      </p>
                    </div>

                    <Card className="rounded-2xl border border-gray-200 bg-white shadow-sm">
                      <CardContent className="p-8">
                        <div className="flex items-start gap-4 mb-6">
                          <div className="w-12 h-12 bg-[#04045B] rounded-xl flex items-center justify-center flex-shrink-0">
                            <Target className="w-5 h-5 text-white" />
                          </div>
                          <div className="flex-1">
                            <h3 className="text-h4 font-semibold mb-4">Our Methodology</h3>
                            <div className="space-y-4 text-body text-muted leading-relaxed">
                              <p>
                                {programme.methodologyDesc}
                              </p>
                            </div>
                          </div>
                        </div>
                      </CardContent>
                    </Card>
                  </div>

                  {/* Section: World-Class Faculty */}
                  <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>
                </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>


            </Tabs>
          </div>
        </div>
      </section>

      {/* Enhanced Related Programmes */}
      {(courseDetail?.recommended_courses && courseDetail.recommended_courses.length > 0) && (
        <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 courses to continue your learning journey and expand your expertise across different domains.
                </p>
              </div>

              {courseDetail?.recommended_courses && courseDetail.recommended_courses.length > 0 ? (
                <div className="grid grid-cols-1 md:grid-cols-3 gap-8">
                  {courseDetail.recommended_courses.map((course: any, index: number) => {
                    // Calculate average rating from reviews
                    const avgRating = course.recommended_course_reviews && course.recommended_course_reviews.length > 0
                      ? course.recommended_course_reviews.reduce((sum: number, review: any) => sum + review.rating, 0) / course.recommended_course_reviews.length
                      : 4.5;

                    // Format price
                    const formattedPrice = formatIndianPrice(course.best_value);
                    const originalPrice = course.price ? formatIndianPrice(course.price) : null;

                    return (
                      <Card
                        key={course.id || index}
                        className="cursor-pointer card-hover-dramatic rounded-2xl border-0 card-shadow-base group overflow-hidden"
                        onClick={() => handleCourseClick(course.id)}
                      >
                        <div className="aspect-video bg-gray-100 overflow-hidden relative">
                          <ImageWithFallback
                            src={course.thumbnail_img || "https://images.unsplash.com/photo-1552581234-26160f608093?w=400&h=300&fit=crop"}
                            alt={course.course_name}
                            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">
                              {course.course_category_name || "Course"}
                            </Badge>
                            <Badge variant="secondary" className="bg-gray-100 text-gray-700 rounded-lg text-xs px-3 py-1 font-medium">
                              {course.duration || "Self-Paced"} Hours
                            </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">
                            {course.course_name}
                          </h3>
                          <p className="text-body text-muted mb-4 leading-relaxed line-clamp-2">
                            {course.course_desc || "Discover new skills and advance your career with this comprehensive course."}
                          </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" />
                                {course.duration
                                  ? `${course.duration} ${course.duration === 1 ? "Hour" : "Hours"}`
                                  : "20 hours"}
                              </span>
                              <span className="flex items-center gap-1">
                                <Users className="w-4 h-4" />
                                {course.total_lessons || 1500}+
                                {/* lessons */}
                              </span>
                            </div>
                            <div className="flex items-center gap-1">
                              {[1, 2, 3, 4, 5].map((star) => (
                                <Star
                                  key={star}
                                  size={16}
                                  className={star <= Math.round(avgRating) ? 'fill-current text-yellow-400' : 'text-gray-300'}
                                />
                              ))}
                              <span className="text-small text-muted ml-1">{avgRating.toFixed(1)}</span>
                            </div>
                          </div>

                          {/* Pricing Section */}
                          <div className="mb-6">
                            <div className="flex items-baseline gap-2">
                              <span className="text-h4 font-bold text-primary">{formattedPrice}</span>
                              {originalPrice && originalPrice !== formattedPrice && (
                                <span className="text-body text-muted line-through">{originalPrice}</span>
                              )}
                              {originalPrice && originalPrice !== formattedPrice && (
                                <span className="text-sm text-green-600 bg-green-50 px-2 py-1 rounded font-medium">
                                  Save {Math.round(((parseFloat(course.price) - parseFloat(course.best_value)) / parseFloat(course.price)) * 100)}%
                                </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: any) => {
                                e.stopPropagation();
                                // Add to cart functionality
                                addToCart({
                                  id: course.id,
                                  title: course.course_name,
                                  thumbnail: course.thumbnail_img,
                                  price: formattedPrice,
                                  originalPrice: originalPrice || undefined,
                                  category: course.course_category_name || 'Course',
                                  level: 'Intermediate'
                                });
                                toast.success(`${course.course_name} added to cart!`);
                              }}
                            >
                              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: any) => {
                                e.stopPropagation();
                                handleCourseClick(course.id);
                              }}
                            >
                              Learn More →
                            </Button>
                          </div>
                        </CardContent>
                      </Card>
                    );
                  })}
                </div>
              ) : (
                // Fallback to mock data if no recommended courses
                <div className="grid grid-cols-1 md:grid-cols-3 gap-8">
                  {mockRelatedProgrammes.map((related, index) => (
                    <Card
                      key={index}
                      className="cursor-pointer card-hover-dramatic rounded-2xl border-0 card-shadow-base group overflow-hidden"
                      onClick={() => handleCourseClick(related.id)}
                    >
                      <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: any) => {
                              e.stopPropagation();
                              addToCart({
                                id: related.id,
                                title: related.title,
                                thumbnail: related.thumbnail,
                                price: related.price,
                                originalPrice: '₹49,999',
                                category: related.category,
                                level: related.level
                              });
                              toast.success(`${related.title} added to cart!`);
                            }}
                          >
                            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: any) => {
                              e.stopPropagation();
                              handleCourseClick(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>
  );
}
