import React, { useState, useRef, useEffect } from 'react';
import { Button } from './ui/button';
import { Card, CardContent } from './ui/card';
import { Badge } from './ui/badge';
import { Input } from './ui/input';
import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from './ui/select';
import { ImageWithFallback } from './figma/ImageWithFallback';
import { PrimaryCTAButton } from './PrimaryCTAButton';
import { navigateTo } from './Router';
import {
  Search,
  Calendar,
  Clock,
  Users,
  Play,
  Filter,
  Grid,
  List,
  ChevronLeft,
  ChevronRight,
  X,
  TrendingUp,
  Award,
  Globe
} from 'lucide-react';

// Comprehensive webinar data
const webinarsData = [
  {
    id: '1',
    slug: 'leadership-in-digital-age',
    title: 'Leadership in the Digital Age: Navigating Change and Innovation',
    description: 'Discover how modern leaders can adapt and thrive in an increasingly digital world. This comprehensive webcast covers digital transformation strategies, leading remote teams, and fostering innovation.',
    presenter: 'Dr. Sarah Mitchell',
    presenterTitle: 'Chief Digital Transformation Officer',
    company: 'Global Leadership Institute',
    date: '2024-02-15',
    time: '2:00 PM EST',
    duration: '90 minutes',
    attendees: '2,400+',
    category: 'Digital Transformation',
    tags: ['Leadership', 'Digital Strategy', 'Innovation', 'Change Management'],
    thumbnail: 'https://images.unsplash.com/photo-1560472355-536de3962603?w=600&h=400&fit=crop',
    status: 'Available',
    featured: true,
    level: 'Advanced',
    format: 'Hybrid',
    rating: 4.8,
    price: 'Free'
  },
  {
    id: '2',
    slug: 'building-resilient-teams',
    title: 'Building Resilient Teams: Strategies for Sustainable Performance',
    description: 'Learn proven methodologies for creating teams that can withstand challenges and maintain high performance under pressure.',
    presenter: 'Marcus Rodriguez',
    presenterTitle: 'Director of Organizational Development',
    company: 'Excellence Consulting',
    date: '2024-02-08',
    time: '1:00 PM EST',
    duration: '75 minutes',
    attendees: '1,850+',
    category: 'Team Development',
    tags: ['Team Building', 'Resilience', 'Performance', 'Leadership'],
    thumbnail: 'https://images.unsplash.com/photo-1522071820081-009f0129c71c?w=600&h=400&fit=crop',
    status: 'Available',
    featured: true,
    level: 'Intermediate',
    format: 'In Person',
    rating: 4.9,
    price: 'Free'
  },
  {
    id: '3',
    slug: 'strategic-decision-making',
    title: 'Strategic Decision Making: Tools and Frameworks for Leaders',
    description: 'Master the art of strategic thinking and decision-making with proven frameworks and methodologies used by top executives.',
    presenter: 'Dr. Emily Chen',
    presenterTitle: 'Strategic Leadership Consultant',
    company: 'Strategy First',
    date: '2024-01-25',
    time: '3:00 PM EST',
    duration: '60 minutes',
    attendees: '3,200+',
    category: 'Strategy',
    tags: ['Strategic Thinking', 'Decision Making', 'Leadership', 'Planning'],
    thumbnail: 'https://images.unsplash.com/photo-1507003211169-0a1dd7228f2d?w=600&h=400&fit=crop',
    status: 'Available',
    featured: false,
    level: 'Advanced',
    format: 'Virtual',
    rating: 4.7,
    price: 'Free'
  },
  {
    id: '4',
    slug: 'emotional-intelligence-workplace',
    title: 'Emotional Intelligence in the Workplace: Leading with Empathy',
    description: 'Explore the critical role of emotional intelligence in effective leadership and learn practical techniques for developing empathy and emotional awareness.',
    presenter: 'Jennifer Adams',
    presenterTitle: 'Executive Coach & EQ Specialist',
    company: 'Empathy Leadership Group',
    date: '2024-01-18',
    time: '2:30 PM EST',
    duration: '85 minutes',
    attendees: '2,100+',
    category: 'Personal Development',
    tags: ['Emotional Intelligence', 'Empathy', 'Communication', 'Leadership'],
    thumbnail: 'https://images.unsplash.com/photo-1559027615-cd4628902d4a?w=600&h=400&fit=crop',
    status: 'Recorded',
    featured: false,
    level: 'Intermediate',
    format: 'Hybrid',
    rating: 4.6,
    price: 'Free'
  },
  {
    id: '5',
    slug: 'crisis-leadership-management',
    title: 'Crisis Leadership: Managing Through Uncertainty and Change',
    description: 'Learn essential crisis leadership skills and strategies for guiding organizations through challenging times and uncertainty.',
    presenter: 'David Park',
    presenterTitle: 'Crisis Management Expert',
    company: 'Risk Management Solutions',
    date: '2024-01-10',
    time: '1:30 PM EST',
    duration: '70 minutes',
    attendees: '2,800+',
    category: 'Crisis Management',
    tags: ['Crisis Leadership', 'Change Management', 'Communication', 'Strategy'],
    thumbnail: 'https://images.unsplash.com/photo-1552664730-d307ca884978?w=600&h=400&fit=crop',
    status: 'Live',
    featured: false,
    level: 'Advanced',
    format: 'Virtual',
    rating: 4.8,
    price: 'Free'
  },
  {
    id: '6',
    slug: 'future-workplace-trends',
    title: 'The Future of Work: Preparing for Tomorrow\'s Workplace',
    description: 'Discover emerging workplace trends and learn how to prepare your organization and teams for the future of work.',
    presenter: 'Lisa Thompson',
    presenterTitle: 'Future of Work Analyst',
    company: 'Tomorrow Institute',
    date: '2024-01-05',
    time: '4:00 PM EST',
    duration: '80 minutes',
    attendees: '1,950+',
    category: 'Future of Work',
    tags: ['Future Trends', 'Workplace Evolution', 'Technology', 'Leadership'],
    thumbnail: 'https://images.unsplash.com/photo-1600880292203-757bb62b4baf?w=600&h=400&fit=crop',
    status: 'Upcoming',
    featured: false,
    level: 'Beginner',
    format: 'Hybrid',
    rating: 4.5,
    price: 'Free'
  },
  {
    id: '7',
    slug: 'ai-leadership-transformation',
    title: 'AI-Powered Leadership: Transforming Decision Making',
    description: 'Explore how artificial intelligence is reshaping leadership practices and learn to leverage AI tools for better decision-making.',
    presenter: 'Dr. Alex Kim',
    presenterTitle: 'AI Strategy Director',
    company: 'AI Leadership Labs',
    date: '2024-03-15',
    time: '2:00 PM EST',
    duration: '75 minutes',
    attendees: '3,500+',
    category: 'Technology Leadership',
    tags: ['Artificial Intelligence', 'Decision Making', 'Technology', 'Innovation'],
    thumbnail: 'https://images.unsplash.com/photo-1677442136019-21780ecad995?w=600&h=400&fit=crop',
    status: 'Upcoming',
    featured: true,
    level: 'Advanced',
    format: 'Virtual',
    rating: 4.9,
    price: 'Free'
  },
  {
    id: '8',
    slug: 'sustainable-leadership-live',
    title: 'Sustainable Leadership: Building for the Future - LIVE SESSION',
    description: 'Join us LIVE as we discuss sustainable leadership practices and environmental responsibility in business leadership.',
    presenter: 'Maria Santos',
    presenterTitle: 'Sustainability Leadership Expert',
    company: 'Green Leadership Council',
    date: '2024-02-20',
    time: '1:00 PM EST',
    duration: '90 minutes',
    attendees: '2,200+',
    category: 'Sustainable Leadership',
    tags: ['Sustainability', 'Environmental Leadership', 'Future Business', 'Corporate Responsibility'],
    thumbnail: 'https://images.unsplash.com/photo-1542601906990-b4d3fb778b09?w=600&h=400&fit=crop',
    status: 'Live',
    featured: true,
    level: 'Intermediate',
    format: 'Virtual',
    rating: 4.7,
    price: 'Free'
  },
  {
    id: '9',
    slug: 'cross-cultural-leadership',
    title: 'Cross-Cultural Leadership: Leading Global Teams Effectively',
    description: 'Develop the skills needed to lead diverse, multicultural teams across different time zones and cultural contexts.',
    presenter: 'Dr. Raj Patel',
    presenterTitle: 'Global Leadership Specialist',
    company: 'International Business Academy',
    date: '2024-02-25',
    time: '11:00 AM EST',
    duration: '65 minutes',
    attendees: '1,750+',
    category: 'Global Leadership',
    tags: ['Cross-Cultural', 'Global Teams', 'Diversity', 'Communication'],
    thumbnail: 'https://images.unsplash.com/photo-1573164713714-d95e436ab8d6?w=600&h=400&fit=crop',
    status: 'Available',
    featured: false,
    level: 'Intermediate',
    format: 'Virtual',
    rating: 4.6,
    price: 'Free'
  }
];

// Filter configurations
const categories = ['All Categories', 'Digital Transformation', 'Team Development', 'Strategy', 'Personal Development', 'Crisis Management', 'Future of Work', 'Technology Leadership', 'Sustainable Leadership', 'Global Leadership'];
const formats = ['All Formats', 'Virtual', 'Hybrid', 'In Person'];
const levels = ['All Levels', 'Beginner', 'Intermediate', 'Advanced'];
const statuses = ['All Status', 'Available', 'Live', 'Upcoming', 'Recorded', 'Featured'];
const sortOptions = [
  { value: 'Most Popular', label: 'Most Popular' },
  { value: 'newest', label: 'Newest First' },
  { value: 'oldest', label: 'Oldest First' },
  { value: 'title', label: 'Title A-Z' },
  { value: 'duration', label: 'Duration' },
  { value: 'rating', label: 'Highest Rated' }
];

export function WebinarsPage() {
  const [searchTerm, setSearchTerm] = useState('');
  const [selectedCategory, setSelectedCategory] = useState('All Categories');
  const [selectedFormat, setSelectedFormat] = useState('All Formats');
  const [selectedLevel, setSelectedLevel] = useState('All Levels');
  const [selectedStatus, setSelectedStatus] = useState('All Status');
  const [sortBy, setSortBy] = useState('Most Popular');
  const [viewType, setViewType] = useState<'grid' | 'list'>('grid');
  const [currentPage, setCurrentPage] = useState(1);
  const webinarsPerPage = 9;
  const containerRef = useRef<HTMLDivElement>(null);

  // Filter and sort webinars
  const filteredWebinars = webinarsData.filter(webinar => {
    const matchesSearch = webinar.title.toLowerCase().includes(searchTerm.toLowerCase()) ||
                         webinar.description.toLowerCase().includes(searchTerm.toLowerCase()) ||
                         webinar.presenter.toLowerCase().includes(searchTerm.toLowerCase()) ||
                         webinar.tags.some(tag => tag.toLowerCase().includes(searchTerm.toLowerCase()));
    const matchesCategory = selectedCategory === 'All Categories' || webinar.category === selectedCategory;
    const matchesFormat = selectedFormat === 'All Formats' || webinar.format === selectedFormat;
    const matchesLevel = selectedLevel === 'All Levels' || webinar.level === selectedLevel;
    const matchesStatus = selectedStatus === 'All Status' || 
                         webinar.status === selectedStatus || 
                         (selectedStatus === 'Featured' && webinar.featured);
    
    return matchesSearch && matchesCategory && matchesFormat && matchesLevel && matchesStatus;
  }).sort((a, b) => {
    switch (sortBy) {
      case 'newest':
        return new Date(b.date).getTime() - new Date(a.date).getTime();
      case 'oldest':
        return new Date(a.date).getTime() - new Date(b.date).getTime();
      case 'title':
        return a.title.localeCompare(b.title);
      case 'duration':
        return parseInt(b.duration) - parseInt(a.duration);
      case 'rating':
        return b.rating - a.rating;
      default:
        return 0;
    }
  });

  // Statistics
  const stats = {
    total: webinarsData.length,
    available: webinarsData.filter(w => w.status === 'Available').length,
    live: webinarsData.filter(w => w.status === 'Live').length,
    upcoming: webinarsData.filter(w => w.status === 'Upcoming').length,
    recorded: webinarsData.filter(w => w.status === 'Recorded').length,
    featured: webinarsData.filter(w => w.featured).length,
    avgRating: (webinarsData.reduce((sum, w) => sum + w.rating, 0) / webinarsData.length).toFixed(1)
  };

  // Paginate results
  const totalPages = Math.ceil(filteredWebinars.length / webinarsPerPage);
  const currentWebinars = filteredWebinars.slice((currentPage - 1) * webinarsPerPage, currentPage * webinarsPerPage);

  const formatDate = (dateString: string) => {
    return new Date(dateString).toLocaleDateString('en-US', {
      year: 'numeric',
      month: 'long',
      day: 'numeric'
    });
  };

  const clearAllFilters = () => {
    setSearchTerm('');
    setSelectedCategory('All Categories');
    setSelectedFormat('All Formats');
    setSelectedLevel('All Levels');
    setSelectedStatus('All Status');
    setSortBy('Most Popular');
  };

  const hasActiveFilters = searchTerm || 
                          selectedCategory !== 'All Categories' || 
                          selectedFormat !== 'All Formats' || 
                          selectedLevel !== 'All Levels' ||
                          selectedStatus !== 'All Status';

  const renderStars = (rating: number) => {
    return Array.from({ length: 5 }, (_, i) => (
      <span key={i} className={`text-sm ${i < Math.floor(rating) ? 'text-yellow-400' : 'text-gray-300'}`}>★</span>
    ));
  };

  return (
    <div style={{ backgroundColor: '#FFFFFF' }}>
      {/* Hero Section with Background Image */}
      <section className="relative h-[500px] overflow-hidden">
        {/* Background Image */}
        <div className="absolute inset-0">
          <ImageWithFallback
            src="https://images.unsplash.com/photo-1552664730-d307ca884978?crop=entropy&cs=tinysrgb&fit=max&fm=jpg&ixid=M3w3Nzg4Nzd8MHwxfHNlYXJjaHwxfHxidXNpbmVzcyUyMHByZXNlbnRhdGlvbiUyMHdlYmluYXIlMjBjb25mZXJlbmNlfGVufDF8fHx8MTc1NTg1NDI3MHww&ixlib=rb-4.1.0&q=80&w=1080"
            alt="Professional webinar and conference presentation"
            className="w-full h-full object-cover"
          />
          <div className="absolute inset-0 bg-black/60" />
        </div>

        {/* Hero Content */}
        <div className="relative h-full flex flex-col justify-center section-margin-x">
          <div className="text-center max-w-4xl mx-auto">
            <div className="branded-tag-system-white mb-6">
              <span className="dot"></span>
              <span className="text">Expert Leadership Insights</span>
            </div>
            
            <h1 className="text-h1-white mb-6">
              Transform Your Leadership<br />
              Through Expert Webcasts
            </h1>
            
            <p className="text-body-lg-white max-w-3xl mx-auto mb-8">
              Access world-class leadership development content from industry experts. 
              Join thousands of leaders who are advancing their skills through our 
              comprehensive webcast library.
            </p>

            <div className="flex flex-col sm:flex-row items-center justify-center gap-4">
              <PrimaryCTAButton
                text="Browse All Webcasts"
                onClick={() => {
                  const filtersSection = document.getElementById('webinars-filters');
                  if (filtersSection) {
                    filtersSection.scrollIntoView({ behavior: 'smooth' });
                  }
                }}
                className="cta-text-black"
              />
              <Button 
                variant="outline" 
                size="lg"
                className="bg-white/10 text-white border-white/30 hover:bg-white/20 backdrop-blur-sm"
                onClick={() => navigateTo('/contact?topic=webinars')}
              >
                <Calendar className="w-5 h-5 mr-2" />
                Schedule a Session
              </Button>
            </div>
          </div>
        </div>

        {/* Statistics Strip at Bottom */}
        <div className="absolute bottom-0 left-0 right-0">
          <div className="bg-black/80 backdrop-blur-sm px-8 py-6">
            <div className="section-margin-x">
              <div className="grid grid-cols-2 md:grid-cols-4 gap-8 text-center">
                <div>
                  <div className="text-h2-white mb-2">{stats.total}+</div>
                  <div className="text-small-white">Expert Webcasts</div>
                </div>
                <div>
                  <div className="text-h2-white mb-2">{stats.live + stats.upcoming}</div>
                  <div className="text-small-white">Live & Upcoming</div>
                </div>
                <div>
                  <div className="text-h2-white mb-2">25K+</div>
                  <div className="text-small-white">Total Attendees</div>
                </div>
                <div>
                  <div className="text-h2-white mb-2">{stats.avgRating}/5</div>
                  <div className="text-small-white">Average Rating</div>
                </div>
              </div>
            </div>
          </div>
        </div>
      </section>

      {/* Search and Controls Section */}
      <section id="webinars-filters" className="py-8" style={{ backgroundColor: '#FFFFFF' }}>
        <div className="section-margin-x">
          {/* Search and View Controls */}
          <div className="flex flex-col lg:flex-row gap-6 mb-8">
            {/* Search Bar */}
            <div className="relative max-w-md flex-1">
              <Search className="absolute left-3 top-1/2 transform -translate-y-1/2 text-gray-400 w-4 h-4" />
              <Input
                type="text"
                placeholder="Search webcasts, presenters, topics..."
                value={searchTerm}
                onChange={(e) => setSearchTerm(e.target.value)}
                className="pl-10 pr-4 py-3 text-body rounded-lg border border-gray-300 focus:border-blue-500 focus:ring-2 focus:ring-blue-200 transition-all duration-200 w-full bg-gray-50"
                style={{
                  fontSize: 'var(--font-body)',
                  fontFamily: 'var(--font-family-base)',
                  height: '48px'
                }}
              />
            </div>

            {/* Controls */}
            <div className="flex items-center gap-4">
              {/* View Toggle */}
              <div className="flex items-center border border-gray-300 rounded-lg overflow-hidden">
                <button
                  onClick={() => setViewType('grid')}
                  className={`p-2 transition-colors ${
                    viewType === 'grid' 
                      ? 'text-white' 
                      : 'bg-white text-gray-600 hover:bg-gray-50'
                  }`}
                  style={{
                    backgroundColor: viewType === 'grid' ? 'var(--color-primary)' : undefined
                  }}
                  aria-label="Grid view"
                >
                  <Grid className="w-4 h-4" />
                </button>
                <button
                  onClick={() => setViewType('list')}
                  className={`p-2 transition-colors ${
                    viewType === 'list' 
                      ? 'text-white' 
                      : 'bg-white text-gray-600 hover:bg-gray-50'
                  }`}
                  style={{
                    backgroundColor: viewType === 'list' ? 'var(--color-primary)' : undefined
                  }}
                  aria-label="List view"
                >
                  <List className="w-4 h-4" />
                </button>
              </div>

              {/* Sort */}
              <Select value={sortBy} onValueChange={setSortBy}>
                <SelectTrigger className="w-48 text-body">
                  <SelectValue placeholder="Sort by" />
                </SelectTrigger>
                <SelectContent>
                  {sortOptions.map((option) => (
                    <SelectItem key={option.value} value={option.value}>
                      {option.label}
                    </SelectItem>
                  ))}
                </SelectContent>
              </Select>
            </div>
          </div>

          {/* Filters */}
          <div className="grid grid-cols-2 md:grid-cols-5 gap-4 mb-6">
            <Select value={selectedCategory} onValueChange={setSelectedCategory}>
              <SelectTrigger>
                <SelectValue placeholder="Category" />
              </SelectTrigger>
              <SelectContent>
                {categories.map((category) => (
                  <SelectItem key={category} value={category}>
                    {category}
                  </SelectItem>
                ))}
              </SelectContent>
            </Select>

            <Select value={selectedFormat} onValueChange={setSelectedFormat}>
              <SelectTrigger>
                <SelectValue placeholder="Format" />
              </SelectTrigger>
              <SelectContent>
                {formats.map((format) => (
                  <SelectItem key={format} value={format}>
                    {format}
                  </SelectItem>
                ))}
              </SelectContent>
            </Select>

            <Select value={selectedLevel} onValueChange={setSelectedLevel}>
              <SelectTrigger>
                <SelectValue placeholder="Level" />
              </SelectTrigger>
              <SelectContent>
                {levels.map((level) => (
                  <SelectItem key={level} value={level}>
                    {level}
                  </SelectItem>
                ))}
              </SelectContent>
            </Select>

            <Select value={selectedStatus} onValueChange={setSelectedStatus}>
              <SelectTrigger>
                <SelectValue placeholder="Status" />
              </SelectTrigger>
              <SelectContent>
                {statuses.map((status) => (
                  <SelectItem key={status} value={status}>
                    {status}
                  </SelectItem>
                ))}
              </SelectContent>
            </Select>

            {hasActiveFilters && (
              <Button
                variant="outline"
                onClick={clearAllFilters}
                className="text-gray-600 hover:text-gray-800"
              >
                <X className="w-4 h-4 mr-2" />
                Clear All
              </Button>
            )}
          </div>

          <div className="text-small text-gray-600 mb-8">
            Showing {currentWebinars.length} of {filteredWebinars.length} webcasts
          </div>
        </div>
      </section>

      {/* Webinars Content */}
      <section className="pb-16" style={{ backgroundColor: '#FFFFFF' }}>
        <div className="section-margin-x">
          {currentWebinars.length === 0 ? (
            <div className="text-center py-16">
              <div className="w-16 h-16 mx-auto mb-4 bg-gray-100 rounded-full flex items-center justify-center">
                <Search className="w-8 h-8 text-gray-400" />
              </div>
              <h3 className="text-h4 mb-4">No webcasts found</h3>
              <p className="text-body text-gray-600 mb-6">
                Try adjusting your filters or search terms to find relevant content.
              </p>
              <Button onClick={clearAllFilters} variant="outline">
                Clear All Filters
              </Button>
            </div>
          ) : (
            <>
              {/* Grid View */}
              {viewType === 'grid' && (
                <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-8">
                  {currentWebinars.map((webinar) => (
                    <Card 
                      key={webinar.id}
                      className="overflow-hidden hover:shadow-xl transition-all duration-300 cursor-pointer group border-0 shadow-lg"
                      onClick={() => navigateTo(`/webinar/${webinar.slug}`)}
                    >
                      <div className="aspect-video w-full bg-gray-100 overflow-hidden relative">
                        <ImageWithFallback
                          src={webinar.thumbnail}
                          alt={webinar.title}
                          className="w-full h-full object-cover group-hover:scale-105 transition-transform duration-300"
                        />
                        
                        {/* Status Badge */}
                        <div className="absolute top-4 left-4">
                          {webinar.status === 'Live' && (
                            <Badge className="bg-red-600 text-white border-red-600 animate-pulse">
                              LIVE
                            </Badge>
                          )}
                          {webinar.status === 'Upcoming' && (
                            <Badge className="bg-blue-600 text-white border-blue-600">
                              Upcoming
                            </Badge>
                          )}
                          {webinar.status === 'Recorded' && (
                            <Badge className="bg-green-600 text-white border-green-600">
                              Replay Available
                            </Badge>
                          )}
                        </div>
                        
                        {webinar.featured && (
                          <div className="absolute top-4 right-4">
                            <Badge className="bg-yellow-500 text-white border-yellow-500">
                              <Award className="w-3 h-3 mr-1" />
                              Featured
                            </Badge>
                          </div>
                        )}

                        {/* Play Button Overlay */}
                        <div className="absolute inset-0 bg-black bg-opacity-40 flex items-center justify-center opacity-0 group-hover:opacity-100 transition-opacity duration-300">
                          <Button
                            variant="secondary"
                            size="lg"
                            className="bg-white text-black hover:bg-gray-100"
                          >
                            <Play className="w-5 h-5 mr-2" />
                            {webinar.status === 'Live' ? 'Join Live' : webinar.status === 'Upcoming' ? 'Register' : 'Watch'}
                          </Button>
                        </div>
                      </div>

                      <CardContent className="p-6">
                        {/* Meta Info */}
                        <div className="flex items-center gap-2 mb-3">
                          <Badge variant="outline" className="text-xs">
                            {webinar.format}
                          </Badge>
                          <Badge variant="outline" className="text-xs">
                            {webinar.level}
                          </Badge>
                          <div className="flex items-center gap-1 ml-auto">
                            {renderStars(webinar.rating)}
                            <span className="text-xs text-gray-600 ml-1">{webinar.rating}</span>
                          </div>
                        </div>
                        
                        <h3 className="text-h4 mb-3 group-hover:text-blue-600 transition-colors line-clamp-2">
                          {webinar.title}
                        </h3>
                        
                        <p className="text-small text-gray-600 mb-4 line-clamp-2">
                          {webinar.description}
                        </p>

                        {/* Presenter Info */}
                        <div className="flex items-center mb-4">
                          <div className="w-10 h-10 bg-gray-200 rounded-full flex items-center justify-center mr-3">
                            <Users className="w-5 h-5 text-gray-400" />
                          </div>
                          <div>
                            <div className="text-small font-medium">{webinar.presenter}</div>
                            <div className="text-xs text-gray-500">{webinar.presenterTitle}</div>
                          </div>
                        </div>

                        {/* Details */}
                        <div className="flex items-center justify-between text-small text-gray-500 mb-4">
                          <div className="flex items-center gap-4">
                            <div className="flex items-center gap-1">
                              <Clock className="w-4 h-4" />
                              <span>{webinar.duration}</span>
                            </div>
                            <div className="flex items-center gap-1">
                              <Users className="w-4 h-4" />
                              <span>{webinar.attendees}</span>
                            </div>
                          </div>
                          <div className="flex items-center gap-1">
                            <Globe className="w-4 h-4" />
                            <span>{webinar.format}</span>
                          </div>
                        </div>

                        {/* Date and Price */}
                        <div className="flex items-center justify-between">
                          <div className="text-small text-gray-600">
                            {formatDate(webinar.date)}
                          </div>
                          <div className="text-small font-medium text-green-600">
                            {webinar.price}
                          </div>
                        </div>
                      </CardContent>
                    </Card>
                  ))}
                </div>
              )}

              {/* List View */}
              {viewType === 'list' && (
                <div className="space-y-6">
                  {currentWebinars.map((webinar) => (
                    <Card 
                      key={webinar.id}
                      className="overflow-hidden hover:shadow-xl transition-all duration-300 cursor-pointer border-0 shadow-lg"
                      onClick={() => navigateTo(`/webinar/${webinar.slug}`)}
                    >
                      <div className="flex">
                        <div className="w-80 h-48 bg-gray-100 overflow-hidden relative flex-shrink-0">
                          <ImageWithFallback
                            src={webinar.thumbnail}
                            alt={webinar.title}
                            className="w-full h-full object-cover"
                          />
                          {webinar.featured && (
                            <div className="absolute top-4 right-4">
                              <Badge className="bg-yellow-500 text-white border-yellow-500">
                                <Award className="w-3 h-3 mr-1" />
                                Featured
                              </Badge>
                            </div>
                          )}
                        </div>
                        <CardContent className="flex-1 p-6">
                          <div className="flex items-start justify-between mb-4">
                            <div className="flex items-center gap-2">
                              <Badge variant="outline" className="text-xs">
                                {webinar.format}
                              </Badge>
                              <Badge variant="outline" className="text-xs">
                                {webinar.level}
                              </Badge>
                              {webinar.status === 'Live' && (
                                <Badge className="bg-red-600 text-white border-red-600 animate-pulse">
                                  LIVE
                                </Badge>
                              )}
                              {webinar.status === 'Upcoming' && (
                                <Badge className="bg-blue-600 text-white border-blue-600">
                                  Upcoming
                                </Badge>
                              )}
                              {webinar.status === 'Recorded' && (
                                <Badge className="bg-green-600 text-white border-green-600">
                                  Replay Available
                                </Badge>
                              )}
                            </div>
                            <div className="flex items-center gap-1">
                              {renderStars(webinar.rating)}
                              <span className="text-xs text-gray-600 ml-1">{webinar.rating}</span>
                            </div>
                          </div>
                          
                          <h3 className="text-h4 mb-3 hover:text-blue-600 transition-colors">
                            {webinar.title}
                          </h3>
                          
                          <p className="text-small text-gray-600 mb-4">
                            {webinar.description}
                          </p>

                          <div className="flex items-center justify-between">
                            <div className="flex items-center gap-6 text-small text-gray-500">
                              <div className="flex items-center gap-1">
                                <Clock className="w-4 h-4" />
                                <span>{webinar.duration}</span>
                              </div>
                              <div className="flex items-center gap-1">
                                <Users className="w-4 h-4" />
                                <span>{webinar.attendees}</span>
                              </div>
                              <div className="flex items-center gap-2">
                                <span>By {webinar.presenter}</span>
                              </div>
                            </div>
                            <div className="flex items-center gap-4">
                              <div className="text-small text-gray-600">
                                {formatDate(webinar.date)}
                              </div>
                              <div className="text-small font-medium text-green-600">
                                {webinar.price}
                              </div>
                            </div>
                          </div>
                        </CardContent>
                      </div>
                    </Card>
                  ))}
                </div>
              )}

              {/* Pagination */}
              {totalPages > 1 && (
                <div className="flex items-center justify-center gap-2 mt-12">
                  <Button
                    variant="outline"
                    size="sm"
                    onClick={() => setCurrentPage(prev => Math.max(1, prev - 1))}
                    disabled={currentPage === 1}
                  >
                    <ChevronLeft className="w-4 h-4" />
                    Previous
                  </Button>
                  
                  <div className="flex items-center gap-1">
                    {Array.from({ length: Math.min(totalPages, 7) }, (_, i) => {
                      let page;
                      if (totalPages <= 7) {
                        page = i + 1;
                      } else if (currentPage <= 4) {
                        page = i + 1;
                      } else if (currentPage >= totalPages - 3) {
                        page = totalPages - 6 + i;
                      } else {
                        page = currentPage - 3 + i;
                      }
                      
                      return (
                        <Button
                          key={page}
                          variant={currentPage === page ? "default" : "outline"}
                          size="sm"
                          onClick={() => setCurrentPage(page)}
                          className="w-10 h-10 p-0"
                          style={{
                            backgroundColor: currentPage === page ? 'var(--color-primary)' : undefined,
                            color: currentPage === page ? 'white' : undefined
                          }}
                        >
                          {page}
                        </Button>
                      );
                    })}
                  </div>
                  
                  <Button
                    variant="outline"
                    size="sm"
                    onClick={() => setCurrentPage(prev => Math.min(totalPages, prev + 1))}
                    disabled={currentPage === totalPages}
                  >
                    Next
                    <ChevronRight className="w-4 h-4" />
                  </Button>
                </div>
              )}
            </>
          )}
        </div>
      </section>

      {/* CTA Section */}
      <section className="py-16 bg-gray-50">
        <div className="section-margin-x text-center">
          <div className="max-w-3xl mx-auto">
            <h2 className="text-h2 mb-6">Ready to Transform Your Leadership?</h2>
            <p className="text-body-lg text-gray-600 mb-8">
              Join thousands of professionals who are advancing their careers through our expert-led webcasts. 
              Start your leadership transformation today.
            </p>
            <div className="flex flex-col sm:flex-row items-center justify-center gap-4">
              <PrimaryCTAButton
                text="Get Started Today"
                onClick={() => navigateTo('/contact?topic=leadership-development')}
                className="cta-text-black"
              />
              <Button 
                variant="outline" 
                size="lg"
                onClick={() => navigateTo('/about/our-expertise')}
              >
                <TrendingUp className="w-5 h-5 mr-2" />
                Learn More About Us
              </Button>
            </div>
          </div>
        </div>
      </section>
    </div>
  );
}