import React, { useState, useEffect } from 'react';
import { navigateTo } from '../Router';
import { Button } from '../ui/button';
import { Badge } from '../ui/badge';
import { Card, CardContent } from '../ui/card';
import { ImageWithFallback } from '../figma/ImageWithFallback';
import { PrimaryCTAButton } from '../PrimaryCTAButton';
import { CourseCard } from '../CourseCard';
import { useCart } from '../CartContext';
import {
  ServiceCard,
  ThemeCard, 
  ProgramCard,
  FeatureCard,
  CaseStudyCard,
  StickyTabs
} from '../ExpertiseSections';
import {
  expertisePillars,
  consultingServices,
  developmentThemes,
  featuredPrograms,
  platformFeatures,
  caseStudies
} from '../../data/ourExpertiseData';
import { 
  ArrowRight, 
  Users, 
  TrendingUp, 
  Star, 
  Globe, 
  CheckCircle, 
  Brain, 
  Target,
  Award,
  Activity,
  BarChart3,
  PieChart,
  Sparkles,
  Play,
  Download,
  Clock,
  Zap,
  Shield,
  Compass,
  Rocket,
  Building,
  BookOpen,
  Lightbulb,
  Settings,
  ChevronLeft,
  ChevronRight
} from 'lucide-react';
import { ConsultingServicesCarousel } from '../ReusableCarousel';

export function OurExpertise() {
  const [activeTab, setActiveTab] = useState('consulting');
  const [isTabsSticky, setIsTabsSticky] = useState(false);
  const { addToCart } = useCart();

  useEffect(() => {
    document.title = 'Our Expertise - About Us | KLC';
    window.scrollTo(0, 0);
    
    // Handle sticky tabs behavior
    const handleScroll = () => {
      const tabsElement = document.getElementById('sticky-tabs');
      if (tabsElement) {
        const rect = tabsElement.getBoundingClientRect();
        setIsTabsSticky(rect.top <= 80); // 80px is roughly navbar height + padding
      }
    };

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

  const scrollToSection = (sectionId: string) => {
    setActiveTab(sectionId);
    const section = document.getElementById(sectionId);
    if (section) {
      const offset = 140; // Account for sticky tabs height
      const elementPosition = section.getBoundingClientRect().top;
      const offsetPosition = elementPosition + window.pageYOffset - offset;
      
      window.scrollTo({
        top: offsetPosition,
        behavior: 'smooth'
      });
    }
  };

  // Cart functionality for course cards
  const handleAddToCart = (item: any) => {
    const cartItem = {
      id: item.id,
      title: item.title,
      thumbnail: item.thumbnail,
      price: item.price,
      originalPrice: item.originalPrice,
      category: item.category,
      level: item.level
    };
    addToCart(cartItem);
  };

  return (
    <div className="min-h-screen our-expertise-page" style={{ backgroundColor: '#FFFFFF' }}>
      {/* Hero Section - Services Page Style */}
      <section className="relative min-h-[90vh] flex flex-col">
        <div className="absolute inset-0 z-0">
          <ImageWithFallback
            src="https://images.unsplash.com/photo-1522071820081-009f0129c71c?w=1920&h=1080&fit=crop"
            alt="Leadership expertise and consulting - Our Expertise"
            className="w-full h-full object-cover"
          />
          <div className="absolute inset-0 bg-gradient-to-r from-black/80 via-black/70 to-black/60"></div>
        </div>

        <div className="relative z-10 flex-1 flex items-center">
          <div className="mx-auto section-margin-x">
            <div className="text-center max-w-5xl mx-auto">
              <div className="branded-tag-system-white mb-8 justify-center">
                <div className="dot"></div>
                <span className="text">Knowledge Leadership Centre</span>
              </div>
              
              <h1 className="text-h1-white mb-6">
                Our Expertise
              </h1>
              
              <p className="text-body-lg-white mb-8 max-w-2xl mx-auto">
                Deep expertise across leadership development, consulting, cultural competence, executive coaching, 
                management development, and world-class learning facilities.
              </p>

              <div className="flex flex-col sm:flex-row gap-4 mb-12 justify-center">
                <PrimaryCTAButton
                  text="Explore Our Services"
                  onClick={() => navigateTo('/services/leadership-development')}
                  className="management-dev-primary-cta"
                />
                
                <Button 
                  onClick={() => navigateTo('/contact')}
                  className="management-dev-glassmorphic-btn text-body px-8 py-4 min-h-[52px] border text-white transition-all duration-300"
                  style={{
                    fontFamily: 'var(--font-family-base)'
                  }}
                >
                  <Download className="w-5 h-5 mr-2" />
                  Download Catalogue
                </Button>
              </div>
            </div>
          </div>
        </div>

        {/* Statistics Section - Embedded in Hero */}
        <div className="relative z-10 border-t border-white/20 backdrop-blur-sm bg-black/20">
          <div className="mx-auto section-margin-x py-8">
            <div className="grid grid-cols-2 lg:grid-cols-4 gap-8 text-center max-w-5xl mx-auto">
              <div>
                <div className="text-h2-white mb-2">152+</div>
                <div className="text-small-white opacity-90">Organizations Transformed</div>
              </div>
              <div>
                <div className="text-h2-white mb-2">2,000+</div>
                <div className="text-small-white opacity-90">Leaders Developed</div>
              </div>
              <div>
                <div className="text-h2-white mb-2">50+</div>
                <div className="text-small-white opacity-90">Senior Experts</div>
              </div>
              <div>
                <div className="text-h2-white mb-2">5,000+</div>
                <div className="text-small-white opacity-90">Platform Users</div>
              </div>
            </div>
          </div>
        </div>
      </section>

      {/* Enhanced Sticky Expertise Tabs */}
      <div id="sticky-tabs">
        <StickyTabs 
          pillars={expertisePillars}
          activeTab={activeTab}
          onTabClick={scrollToSection}
          isSticky={isTabsSticky}
        />
      </div>

      {/* Expertise Overview - Clean Standard Design */}
      <section className="py-20" style={{ backgroundColor: '#FFFFFF' }}>
        <div className="mx-auto section-margin-x">
          <div className="text-center mb-16">
            <h2 className="text-h2 mb-6">Four Pillars of Excellence</h2>
            <p className="text-body-lg text-muted max-w-3xl mx-auto leading-relaxed">
              Comprehensive leadership solutions built on four foundational pillars that drive 
              organizational transformation and sustainable success across industries worldwide.
            </p>
          </div>

          {/* Four Pillars - Horizontal Layout like Three Pillars */}
          <div className="grid lg:grid-cols-4 gap-8 max-w-7xl mx-auto">
            {[
              {
                icon: Users,
                title: "Consulting & Advisory",
                description: "Strategic organizational transformation through expert consultation and advisory services that drive measurable business results.",
                mainStat: { label: "Organizations Served", value: "152+", color: "text-primary" },
                chartType: "barChart",
                chartData: [
                  { label: "Success Rate", value: 96, maxValue: 100, color: "#04045B" },
                  { label: "Client Retention", value: 89, maxValue: 100, color: "#04045B" },
                  { label: "Completion Rate", value: 94, maxValue: 100, color: "#04045B" },
                  { label: "ROI Achievement", value: 85, maxValue: 100, color: "#04045B" }
                ]
              },
              {
                icon: TrendingUp,
                title: "Leadership Development",
                description: "Comprehensive development programs for leaders at every organizational level designed to build capabilities and drive transformation.",
                mainStat: { label: "Leaders Developed", value: "2,000+", color: "text-primary" },
                chartType: "circularProgress",
                circularData: [
                  { label: "Program Effectiveness", value: 88, color: "#04045B" },
                  { label: "Skills Application", value: 82, color: "#04045B" },
                  { label: "Career Advancement", value: 76, color: "#04045B" }
                ]
              },
              {
                icon: Star,
                title: "Expert Consultation",
                description: "Personalized guidance from industry thought leaders and senior practitioners who bring decades of real-world experience.",
                mainStat: { label: "Senior Experts", value: "50+", color: "text-primary" },
                chartType: "radialChart",
                radialData: [
                  { label: "Experience", value: "20+ yrs", segment: 85, color: "#04045B" },
                  { label: "Industries", value: "15+", segment: 75, color: "#04045B" },
                  { label: "Satisfaction", value: "98%", segment: 98, color: "#04045B" },
                  { label: "Success Rate", value: "94%", segment: 94, color: "#04045B" }
                ]
              },
              {
                icon: Globe,
                title: "Online Platform",
                description: "State-of-the-art digital learning platform with cutting-edge technology and interactive experiences for modern learning.",
                mainStat: { label: "Active Users", value: "5,000+", color: "text-primary" },
                chartType: "areaChart",
                areaData: [
                  { period: "2020", users: 1200, engagement: 78 },
                  { period: "2021", users: 2100, engagement: 82 },
                  { period: "2022", users: 3200, engagement: 86 },
                  { period: "2023", users: 4100, engagement: 89 },
                  { period: "2024", users: 5000, engagement: 92 }
                ]
              }
            ].map((pillar, index) => (
              <div key={pillar.title} className="group">
                <Card className="border-0 shadow-sm hover:shadow-xl transition-all duration-300 h-full bg-white p-0">
                  <CardContent className="p-8">
                    {/* Icon */}
                    <div 
                      className="w-16 h-16 rounded-xl flex items-center justify-center mb-6 group-hover:scale-110 transition-transform duration-300"
                      style={{ backgroundColor: 'rgba(4, 4, 91, 0.08)' }}
                    >
                      <pillar.icon className="w-8 h-8 text-primary" />
                    </div>
                    
                    {/* Title */}
                    <h3 className="text-h4 mb-4 text-black leading-tight">
                      {pillar.title}
                    </h3>
                    
                    {/* Description */}
                    <p className="text-body text-muted leading-relaxed mb-6">
                      {pillar.description}
                    </p>

                    {/* Main Stat */}
                    <div className="mb-6">
                      <div className="text-small text-muted mb-1">{pillar.mainStat.label}</div>
                      <div className={`text-3xl font-bold ${pillar.mainStat.color}`}>
                        {pillar.mainStat.value}
                      </div>
                    </div>

                    {/* Graph-Type Data Visualizations - Consistent Typography & Thickness */}
                    <div className="space-y-4">
                      {/* Bar Chart Visualization - Consistent 4px thickness */}
                      {pillar.chartType === "barChart" && (
                        <div className="space-y-3">
                          {pillar.chartData.map((item, itemIndex) => (
                            <div key={item.label} className="space-y-2">
                              <div className="flex justify-between items-center">
                                <span className="text-xs text-muted font-medium">{item.label}</span>
                                <span className="text-sm font-bold text-primary">{item.value}%</span>
                              </div>
                              <div className="w-full bg-gray-200 rounded-full h-1 overflow-hidden">
                                <div 
                                  className="h-1 rounded-full transition-all duration-1000 ease-out"
                                  style={{ 
                                    width: `${item.value}%`,
                                    backgroundColor: item.color,
                                    height: '4px',
                                    animationDelay: `${itemIndex * 200}ms`
                                  }}
                                ></div>
                              </div>
                            </div>
                          ))}
                        </div>
                      )}

                      {/* Circular Progress Visualization - Consistent 4px stroke */}
                      {pillar.chartType === "circularProgress" && (
                        <div className="grid grid-cols-3 gap-4">
                          {pillar.circularData.map((item, itemIndex) => (
                            <div key={item.label} className="flex flex-col items-center">
                              <div className="relative w-16 h-16 mb-3">
                                <svg className="w-16 h-16 transform -rotate-90" viewBox="0 0 64 64">
                                  <circle
                                    cx="32"
                                    cy="32"
                                    r="28"
                                    stroke="rgba(4, 4, 91, 0.1)"
                                    strokeWidth="4"
                                    fill="none"
                                  />
                                  <circle
                                    cx="32"
                                    cy="32"
                                    r="28"
                                    stroke={item.color}
                                    strokeWidth="4"
                                    fill="none"
                                    strokeDasharray={`${2 * Math.PI * 28}`}
                                    strokeDashoffset={`${2 * Math.PI * 28 * (1 - item.value / 100)}`}
                                    className="transition-all duration-1500 ease-out"
                                    strokeLinecap="round"
                                    style={{ animationDelay: `${itemIndex * 300}ms` }}
                                  />
                                </svg>
                                <div className="absolute inset-0 flex items-center justify-center">
                                  <span className="text-sm font-bold text-primary">{item.value}%</span>
                                </div>
                              </div>
                              <span className="text-xs text-muted text-center leading-tight">{item.label}</span>
                            </div>
                          ))}
                        </div>
                      )}

                      {/* Radial Chart Visualization - Consistent 4px stroke */}
                      {pillar.chartType === "radialChart" && (
                        <div className="relative">
                          <div className="w-full h-32 flex items-center justify-center mb-4">
                            <svg className="w-32 h-32" viewBox="0 0 128 128">
                              {pillar.radialData.map((item, itemIndex) => {
                                const radius = 45 - (itemIndex * 8);
                                const circumference = 2 * Math.PI * radius;
                                const strokeDasharray = circumference;
                                const strokeDashoffset = circumference * (1 - item.segment / 100);
                                return (
                                  <circle
                                    key={item.label}
                                    cx="64"
                                    cy="64"
                                    r={radius}
                                    stroke={item.color}
                                    strokeWidth="4"
                                    fill="none"
                                    strokeDasharray={strokeDasharray}
                                    strokeDashoffset={strokeDashoffset}
                                    className="transition-all duration-1000 ease-out"
                                    strokeLinecap="round"
                                    style={{ 
                                      animationDelay: `${itemIndex * 200}ms`,
                                      opacity: 1 - (itemIndex * 0.1)
                                    }}
                                    transform="rotate(-90 64 64)"
                                  />
                                );
                              })}
                            </svg>
                          </div>
                          <div className="grid grid-cols-2 gap-2">
                            {pillar.radialData.map((item, itemIndex) => (
                              <div key={item.label} className="text-center">
                                <div className="text-sm font-bold text-primary">{item.value}</div>
                                <div className="text-xs text-muted">{item.label}</div>
                              </div>
                            ))}
                          </div>
                        </div>
                      )}

                      {/* Area Chart Visualization - Consistent 4px stroke */}
                      {pillar.chartType === "areaChart" && (
                        <div className="space-y-4">
                          <div className="w-full h-24 relative">
                            <svg className="w-full h-full" viewBox="0 0 300 96" preserveAspectRatio="none">
                              <defs>
                                <linearGradient id={`areaGradient-${index}`} x1="0%" y1="0%" x2="0%" y2="100%">
                                  <stop offset="0%" stopColor="#04045B" stopOpacity="0.3"/>
                                  <stop offset="100%" stopColor="#04045B" stopOpacity="0.05"/>
                                </linearGradient>
                              </defs>
                              {/* Area fill */}
                              <path
                                d={`M 0 ${96 - (pillar.areaData[0].engagement * 0.8)} 
                                   L ${60} ${96 - (pillar.areaData[1].engagement * 0.8)} 
                                   L ${120} ${96 - (pillar.areaData[2].engagement * 0.8)} 
                                   L ${180} ${96 - (pillar.areaData[3].engagement * 0.8)} 
                                   L ${240} ${96 - (pillar.areaData[4].engagement * 0.8)} 
                                   L 240 96 L 0 96 Z`}
                                fill={`url(#areaGradient-${index})`}
                                className="transition-all duration-1000 ease-out"
                              />
                              {/* Line - Consistent 4px stroke */}
                              <path
                                d={`M 0 ${96 - (pillar.areaData[0].engagement * 0.8)} 
                                   L ${60} ${96 - (pillar.areaData[1].engagement * 0.8)} 
                                   L ${120} ${96 - (pillar.areaData[2].engagement * 0.8)} 
                                   L ${180} ${96 - (pillar.areaData[3].engagement * 0.8)} 
                                   L ${240} ${96 - (pillar.areaData[4].engagement * 0.8)}`}
                                stroke="#04045B"
                                strokeWidth="4"
                                fill="none"
                                className="transition-all duration-1000 ease-out"
                              />
                              {/* Data points - Consistent 4px radius */}
                              {pillar.areaData.map((point, pointIndex) => (
                                <circle
                                  key={point.period}
                                  cx={pointIndex * 60}
                                  cy={96 - (point.engagement * 0.8)}
                                  r="4"
                                  fill="#04045B"
                                  className="transition-all duration-1000 ease-out"
                                  style={{ animationDelay: `${pointIndex * 200}ms` }}
                                />
                              ))}
                            </svg>
                          </div>
                          <div className="flex justify-between">
                            {pillar.areaData.map((point) => (
                              <div key={point.period} className="text-center">
                                <div className="text-sm font-bold text-primary">{point.engagement}%</div>
                                <div className="text-xs text-muted">{point.period}</div>
                              </div>
                            ))}
                          </div>
                        </div>
                      )}
                    </div>
                  </CardContent>
                </Card>
              </div>
            ))}
          </div>

          {/* CTA Section */}
          <div className="flex justify-end mt-12">
            <PrimaryCTAButton 
              text="Explore All Services"
              onClick={() => navigateTo('/services')}
              ariaLabel="Explore all our services"
            />
          </div>
        </div>
      </section>

      {/* Consulting & Advisory Section - Reusable Carousel Design */}
      <section id="consulting" className="py-24" style={{ backgroundColor: 'rgba(247, 247, 253, 0.3)' }}>
        <div className="mx-auto section-margin-x">
          {/* Using the new reusable carousel component */}
          <ConsultingServicesCarousel consultingServices={consultingServices} />
        </div>
      </section>

      {/* Leadership Development Section - Split Layout */}
      <section id="leadership-development" className="py-24" style={{ backgroundColor: '#FFFFFF' }}>
        <div className="mx-auto section-margin-x">
          {/* Leadership Development Framework - Our Vision Style */}
          <div className="max-w-7xl mx-auto mb-16">
            <div className="grid lg:grid-cols-3 gap-16 items-start">
              {/* Left Content - Framework Description */}
              <div className="lg:col-span-2">
                <div className="branded-tag-system mb-6">
                  <div className="dot"></div>
                  <span className="text">PROPRIETARY FRAMEWORK</span>
                </div>
                
                <h2 className="text-h2 mb-6">Leadership Development Framework</h2>
                
                <p className="text-body-lg text-muted mb-12 leading-relaxed max-w-2xl">
                  Our research-backed framework examines four critical dimensions that define 
                  leadership effectiveness and drive organizational results. This methodology 
                  helps leaders understand their natural orientations and develop adaptive capabilities.
                </p>

                {/* Framework Dimensions - Clean Grid Layout */}
                <div className="mb-12">
                  {/* Framework Dimensions Grid */}
                  <div className="grid grid-cols-2 gap-8">
                    {[
                      { 
                        icon: Target, 
                        title: "Strategic Leadership", 
                        desc: "Vision-driven & systems thinking approaches",
                        position: "top-left",
                        delay: "0.1s"
                      },
                      { 
                        icon: Brain, 
                        title: "Adaptive Mindset", 
                        desc: "Innovation & change resilience capability",
                        position: "top-right", 
                        delay: "0.2s"
                      },
                      { 
                        icon: Zap, 
                        title: "Influence Mastery", 
                        desc: "Authority & authentic leadership presence",
                        position: "bottom-left",
                        delay: "0.3s"
                      },
                      { 
                        icon: Users, 
                        title: "Relational Intelligence", 
                        desc: "Team & stakeholder engagement excellence",
                        position: "bottom-right",
                        delay: "0.4s"
                      }
                    ].map((item, i) => {
                      const Icon = item.icon;
                      return (
                        <div 
                          key={item.title}
                          className="p-6 bg-white/80 backdrop-blur-sm rounded-2xl border border-gray-200/50"
                          style={{
                            animationDelay: item.delay,
                            animation: 'fade-scale-in 0.8s ease-out both'
                          }}
                        >
                          <div className="flex items-center gap-3 mb-4">
                            <div className="w-12 h-12 rounded-xl flex items-center justify-center bg-primary/10">
                              <Icon className="w-6 h-6 text-primary" />
                            </div>
                            <div className="flex-1">
                              <h3 className="text-h4 mb-2">{item.title}</h3>
                            </div>
                          </div>
                          <p className="text-small text-muted leading-snug">{item.desc}</p>
                        </div>
                      );
                    })}
                  </div>
                </div>

                {/* Enhanced CTA with image background and overlay */}
                <div 
                  className="relative rounded-2xl p-8 text-center overflow-hidden"
                  style={{
                    backgroundImage: `url('https://images.unsplash.com/photo-1624555130296-e551faf8969b?crop=entropy&cs=tinysrgb&fit=max&fm=jpg&ixid=M3w3Nzg4Nzd8MHwxfHNlYXJjaHwxfHxidXNpbmVzcyUyMGxlYWRlcnNoaXAlMjB0ZWFtJTIwbWVldGluZ3xlbnwxfHx8fDE3NTU1OTM1ODF8MA&ixlib=rb-4.1.0&q=80&w=1080&utm_source=figma&utm_medium=referral')`,
                    backgroundSize: 'cover',
                    backgroundPosition: 'center',
                    backgroundRepeat: 'no-repeat'
                  }}
                >
                  {/* 80% Black Overlay */}
                  <div className="absolute inset-0 bg-black/80 rounded-2xl"></div>
                  
                  {/* Content */}
                  <div className="relative z-10 text-center">
                    <h3 className="text-h3 text-white mb-4">Ready to Transform Your Leadership?</h3>
                    <p className="text-body text-white mb-6 max-w-md mx-auto">
                      Discover how our framework can accelerate your leadership development journey.
                    </p>
                    <div className="flex justify-center">
                      <PrimaryCTAButton 
                        text="Explore Framework"
                        onClick={() => navigateTo('/services/leadership-development')}
                        ariaLabel="Explore leadership development framework"
                        className="cta-banner-yellow"
                      />
                    </div>
                  </div>
                </div>
              </div>

              {/* Right Sidebar - How It Applies */}
              <div className="lg:sticky lg:top-24 h-fit">
                <div className="space-y-6">
                  <h3 className="text-h3 mb-6">How It Applies</h3>
                  <p className="text-body text-muted mb-8 leading-relaxed">
                    Practical applications that guide transformational growth across key development areas.
                  </p>
                  
                  <div className="space-y-4">
                    {developmentThemes.slice(0, 4).map((theme, index) => {
                      // Icon mapping for different themes
                      const getThemeIcon = (index) => {
                        switch (index) {
                          case 0: return <Target className="w-6 h-6 text-primary" />;
                          case 1: return <Lightbulb className="w-6 h-6 text-primary" />;
                          case 2: return <Users className="w-6 h-6 text-primary" />;
                          case 3: return <Award className="w-6 h-6 text-primary" />;
                          default: return <Settings className="w-6 h-6 text-primary" />;
                        }
                      };

                      return (
                        <div 
                          key={theme.title}
                          className="p-6 bg-white rounded-xl border border-gray-100 shadow-sm"
                          style={{
                            animationDelay: `${0.6 + index * 0.1}s`,
                            animation: 'slide-in-right 0.6s ease-out both'
                          }}
                        >
                          <div className="flex items-start gap-4">
                            {/* Theme Icon */}
                            <div className="w-12 h-12 rounded-lg bg-primary/10 flex items-center justify-center flex-shrink-0">
                              {getThemeIcon(index)}
                            </div>
                            
                            {/* Theme Content */}
                            <div className="flex-1 space-y-2">
                              <h4 className="text-h4 leading-tight">
                                {theme.title}
                              </h4>
                              <p className="text-body text-muted leading-relaxed">
                                {theme.description}
                              </p>
                            </div>
                          </div>
                        </div>
                      );
                    })}
                  </div>
                </div>
              </div>
            </div>
          </div>

          {/* Featured Programs Section - Course/Program Cards Style */}
          <div className="max-w-7xl mx-auto">
            <div className="text-center mb-16">
              <div className="branded-tag-system mb-6 justify-center">
                <div className="dot"></div>
                <span className="text">FEATURED PROGRAMS</span>
              </div>
              <h2 className="text-h2 mb-6">Transform Your Leadership Journey</h2>
              <p className="text-body-lg text-muted max-w-3xl mx-auto leading-relaxed">
                Comprehensive leadership development programs designed by industry experts to accelerate your growth and drive organizational success.
              </p>
            </div>

            {/* Unified Course/Program Cards Grid */}
            <div className="max-w-7xl mx-auto">
              {/* Course Cards Grid - 4 Cards Horizontally */}
              <div className="grid lg:grid-cols-3 md:grid-cols-2 grid-cols-1 gap-6">
                {featuredPrograms.slice(0, 3).map((program, index) => (
                  <CourseCard 
                    key={program.id} 
                    course={program}
                    onClick={() => navigateTo(`/course/${program.id}`)}
                    onAddToCart={handleAddToCart}
                  />
                ))}
              </div>
              
              {/* CTA Button - Bottom Right */}
              <div className="flex justify-end mt-8">
                <PrimaryCTAButton 
                  text="Explore All Courses"
                  onClick={() => navigateTo('/learning-online')}
                  ariaLabel="Explore all available courses on our online learning platform"
                  icon={ArrowRight}
                />
              </div>
            </div>
          </div>
        </div>
      </section>

      {/* Platform Features Section - Redesigned Layout */}
      <section id="platform-features" className="py-24" style={{ backgroundColor: '#FFFFFF' }}>
        <div className="mx-auto section-margin-x">
          {/* Header */}
          <div className="text-center mb-20">
            <Badge 
              className="mb-6 text-body px-4 py-2"
              style={{
                backgroundColor: 'rgba(4, 4, 91, 0.1)',
                color: 'var(--color-primary)',
                border: 'none'
              }}
            >
              Digital Innovation
            </Badge>
            <h2 className="text-h2 mb-6">Learning Platform Features</h2>
            <p className="text-body-lg text-muted max-w-3xl mx-auto leading-relaxed">
              Experience leadership development through our cutting-edge digital platform designed 
              to maximize engagement, retention, and practical application of new skills.
            </p>
          </div>

          {/* Main Layout - Split Design */}
          <div className="max-w-7xl mx-auto">
            <div className="grid lg:grid-cols-12 gap-8 items-stretch mb-16">
              
              {/* Left Column - Enhanced Platform Spotlight */}
              <div className="lg:col-span-5">
                <div className="h-full bg-white rounded-2xl border border-gray-100 p-8 shadow-sm hover:shadow-md transition-shadow duration-300">
                  
                  {/* Header with Icon and Badge */}
                  <div className="mb-6">
                    <div className="flex items-start gap-4">
                      <div className="w-16 h-16 rounded-xl bg-primary/10 flex items-center justify-center flex-shrink-0">
                        <Zap className="w-8 h-8 text-primary" />
                      </div>
                      <div className="flex-1">
                        <div className="mb-3">
                          <span className="inline-flex items-center px-3 py-1 rounded-full text-xs font-medium bg-accent/15 text-black">
                            ✨ Flagship Feature
                          </span>
                        </div>
                        <h3 className="text-h4 mb-0 leading-tight">Interactive Learning Platform</h3>
                      </div>
                    </div>
                  </div>
                  
                  {/* Enhanced Description */}
                  <div className="mb-8">
                    <p className="text-body text-muted leading-relaxed mb-4">
                      Immersive, hands-on learning modules that adapt to individual learning styles with real-world scenarios and personalized feedback systems.
                    </p>
                    
                    {/* Key Features List */}
                    <div className="space-y-2">
                      <div className="flex items-center gap-2 text-sm text-muted">
                        <div className="w-1.5 h-1.5 rounded-full bg-accent"></div>
                        <span>AI-powered personalization</span>
                      </div>
                      <div className="flex items-center gap-2 text-sm text-muted">
                        <div className="w-1.5 h-1.5 rounded-full bg-accent"></div>
                        <span>Interactive simulations</span>
                      </div>
                      <div className="flex items-center gap-2 text-sm text-muted">
                        <div className="w-1.5 h-1.5 rounded-full bg-accent"></div>
                        <span>Real-time feedback</span>
                      </div>
                    </div>
                  </div>
                  
                  {/* Performance Metrics - Redesigned */}
                  <div className="bg-gray-50 rounded-xl p-6 mb-8">
                    <div className="grid grid-cols-3 gap-4">
                      <div className="text-center">
                        <div className="text-2xl font-bold text-primary mb-1">98%</div>
                        <div className="text-xs text-muted">Engagement Rate</div>
                      </div>
                      <div className="text-center border-l border-r border-gray-200">
                        <div className="text-2xl font-bold text-primary mb-1">15+</div>
                        <div className="text-xs text-muted">Learning Formats</div>
                      </div>
                      <div className="text-center">
                        <div className="text-2xl font-bold text-primary mb-1">24/7</div>
                        <div className="text-xs text-muted">Platform Access</div>
                      </div>
                    </div>
                  </div>
                  
                  {/* Action Buttons - Redesigned */}
                  <div className="flex flex-col sm:flex-row gap-3">
                    <PrimaryCTAButton 
                      text="Try Demo"
                      onClick={() => navigateTo('/learning-online')}
                      ariaLabel="Try platform demo"
                      className="flex-1 sm:flex-none"
                    />
                    <Button 
                      variant="outline" 
                      className="px-6 border-gray-300 text-black hover:bg-gray-50 transition-colors"
                      onClick={() => navigateTo('/learning-online')}
                    >
                      <Play className="w-4 h-4 mr-2" />
                      Watch Video
                    </Button>
                  </div>
                </div>
              </div>

              {/* Right Column - Modern Analytics Dashboard */}
              <div className="lg:col-span-7">
                <div className="h-full bg-white rounded-2xl border border-gray-100 p-8 shadow-sm hover:shadow-md transition-shadow duration-300">
                  
                  {/* Dashboard Header */}
                  <div className="flex items-center justify-between mb-8">
                    <div>
                      <h4 className="text-h4 mb-2">Platform Performance</h4>
                      <p className="text-small text-muted">Real-time analytics and insights</p>
                    </div>
                    <div className="flex items-center gap-2">
                      <div className="w-2 h-2 rounded-full bg-green-500 animate-pulse"></div>
                      <span className="text-xs font-medium text-green-600 uppercase tracking-wider">Live</span>
                    </div>
                  </div>
                  
                  {/* Key Metrics Grid - Redesigned */}
                  <div className="grid grid-cols-2 lg:grid-cols-4 gap-4 mb-10">
                    <div className="bg-blue-50 rounded-xl p-4 text-center">
                      <div className="w-10 h-10 rounded-lg bg-primary/10 mx-auto mb-3 flex items-center justify-center">
                        <Users className="w-5 h-5 text-primary" />
                      </div>
                      <div className="text-xl font-bold text-primary mb-1">5,247</div>
                      <div className="text-xs text-muted">Active Learners</div>
                    </div>
                    
                    <div className="bg-green-50 rounded-xl p-4 text-center">
                      <div className="w-10 h-10 rounded-lg bg-green-100 mx-auto mb-3 flex items-center justify-center">
                        <Award className="w-5 h-5 text-green-600" />
                      </div>
                      <div className="text-xl font-bold text-green-600 mb-1">1,892</div>
                      <div className="text-xs text-muted">Completions</div>
                    </div>
                    
                    <div className="bg-purple-50 rounded-xl p-4 text-center">
                      <div className="w-10 h-10 rounded-lg bg-purple-100 mx-auto mb-3 flex items-center justify-center">
                        <BookOpen className="w-5 h-5 text-purple-600" />
                      </div>
                      <div className="text-xl font-bold text-purple-600 mb-1">127</div>
                      <div className="text-xs text-muted">Active Courses</div>
                    </div>
                    
                    <div className="bg-orange-50 rounded-xl p-4 text-center">
                      <div className="w-10 h-10 rounded-lg bg-orange-100 mx-auto mb-3 flex items-center justify-center">
                        <Globe className="w-5 h-5 text-orange-600" />
                      </div>
                      <div className="text-xl font-bold text-orange-600 mb-1">45</div>
                      <div className="text-xs text-muted">Countries</div>
                    </div>
                  </div>
                  
                  {/* Performance Indicators - Enhanced Design */}
                  <div className="space-y-6">
                    <div>
                      <div className="flex items-center justify-between mb-3">
                        <div className="flex items-center gap-2">
                          <div className="w-3 h-3 rounded-full bg-primary"></div>
                          <span className="text-sm font-medium">Course Completion</span>
                        </div>
                        <span className="text-sm font-bold text-primary">94%</span>
                      </div>
                      <div className="w-full bg-gray-100 rounded-full h-2 overflow-hidden">
                        <div className="bg-primary h-2 rounded-full transition-all duration-1000" style={{ width: '94%' }}></div>
                      </div>
                    </div>
                    
                    <div>
                      <div className="flex items-center justify-between mb-3">
                        <div className="flex items-center gap-2">
                          <div className="w-3 h-3 rounded-full bg-green-500"></div>
                          <span className="text-sm font-medium">User Satisfaction</span>
                        </div>
                        <span className="text-sm font-bold text-green-600">96%</span>
                      </div>
                      <div className="w-full bg-gray-100 rounded-full h-2 overflow-hidden">
                        <div className="bg-green-500 h-2 rounded-full transition-all duration-1000" style={{ width: '96%' }}></div>
                      </div>
                    </div>
                    
                    <div>
                      <div className="flex items-center justify-between mb-3">
                        <div className="flex items-center gap-2">
                          <div className="w-3 h-3 rounded-full bg-purple-500"></div>
                          <span className="text-sm font-medium">Mobile Engagement</span>
                        </div>
                        <span className="text-sm font-bold text-purple-600">78%</span>
                      </div>
                      <div className="w-full bg-gray-100 rounded-full h-2 overflow-hidden">
                        <div className="bg-purple-500 h-2 rounded-full transition-all duration-1000" style={{ width: '78%' }}></div>
                      </div>
                    </div>
                  </div>
                  
                  {/* Bottom Action */}
                  <div className="mt-8 pt-6 border-t border-gray-100">
                    <button
                      onClick={() => navigateTo('/learning-online')}
                      className="text-sm text-primary hover:text-primary/80 font-medium flex items-center gap-1 transition-colors"
                    >
                      View detailed analytics
                      <ArrowRight className="w-4 h-4" />
                    </button>
                  </div>
                </div>
              </div>
            </div>

            {/* Feature Cards Grid - Redesigned */}
            <div className="grid lg:grid-cols-4 md:grid-cols-2 gap-6">
              {platformFeatures.slice(0, 4).map((feature, index) => (
                <Card key={feature.title} className="group bg-white border border-gray-100 hover:border-primary/30 shadow-sm hover:shadow-lg transition-all duration-300 overflow-hidden">
                  <CardContent className="p-6">
                    {/* Feature Icon */}
                    <div className="w-12 h-12 rounded-xl bg-primary/10 flex items-center justify-center mb-4 group-hover:bg-primary/20 transition-colors">
                      <feature.icon className="w-6 h-6 text-primary" />
                    </div>
                    
                    {/* Feature Title */}
                    <h4 className="text-h4 mb-3 group-hover:text-primary transition-colors leading-tight">
                      {feature.title}
                    </h4>
                    
                    {/* Feature Description */}
                    <p className="text-body text-muted mb-4 leading-relaxed line-clamp-3">
                      {feature.description}
                    </p>
                    
                    {/* Feature Highlight */}
                    <div className="flex items-center gap-2 text-sm">
                      <div className="w-2 h-2 rounded-full bg-accent"></div>
                      <span className="text-primary font-medium">Key Feature</span>
                    </div>
                  </CardContent>
                </Card>
              ))}
            </div>

            {/* Additional Features - Compact List */}
            {platformFeatures.length > 4 && (
              <div className="mt-12 bg-gray-50 rounded-2xl p-8">
                <h4 className="text-h4 mb-6 text-center">Additional Platform Capabilities</h4>
                <div className="grid md:grid-cols-2 lg:grid-cols-3 gap-4">
                  {platformFeatures.slice(4).map((feature, index) => (
                    <div key={feature.title} className="flex items-start gap-3 p-4 bg-white rounded-lg hover:shadow-md transition-shadow">
                      <div className="w-8 h-8 rounded-lg bg-primary/10 flex items-center justify-center flex-shrink-0">
                        <feature.icon className="w-4 h-4 text-primary" />
                      </div>
                      <div>
                        <h5 className="font-semibold text-black mb-1">{feature.title}</h5>
                        <p className="text-sm text-muted leading-relaxed">{feature.description}</p>
                      </div>
                    </div>
                  ))}
                </div>
              </div>
            )}
          </div>

          {/* Enhanced CTA Section */}
          <div className="text-center mt-16 bg-gradient-to-r from-gray-50 to-blue-50 rounded-2xl p-12">
            <h3 className="text-h3 mb-4">Ready to Transform Your Learning Experience?</h3>
            <p className="text-body-lg text-muted mb-8 max-w-2xl mx-auto">
              Join thousands of leaders who are accelerating their development through our innovative platform.
            </p>
            <div className="flex flex-col sm:flex-row gap-4 justify-center">
              <PrimaryCTAButton 
                text="Explore Platform"
                onClick={() => navigateTo('/learning-online')}
                ariaLabel="Explore our learning platform"
              />
              <Button 
                variant="outline" 
                size="lg"
                className="border-primary text-primary hover:bg-primary hover:text-white transition-colors"
                onClick={() => navigateTo('/contact')}
              >
                Schedule Demo
              </Button>
            </div>
          </div>
        </div>
      </section>

      {/* Case Studies Section - Success Stories */}
      <section id="case-studies" className="py-24" style={{ backgroundColor: '#FFFFFF' }}>
        <div className="mx-auto section-margin-x">
          <div className="text-center mb-16">
            <Badge 
              className="mb-6 text-body px-4 py-2"
              style={{
                backgroundColor: 'rgba(4, 4, 91, 0.1)',
                color: 'var(--color-primary)',
                border: 'none'
              }}
            >
              Success Stories
            </Badge>
            <h2 className="text-h2 mb-6">Transformational Results</h2>
            <p className="text-body-lg text-muted max-w-3xl mx-auto leading-relaxed">
              Real organizations achieving measurable leadership transformation through our comprehensive 
              development programs and strategic consulting approach.
            </p>
          </div>

          <div className="grid lg:grid-cols-2 gap-8 max-w-6xl mx-auto">
            {caseStudies.map((caseStudy, index) => (
              <CaseStudyCard key={caseStudy.title} caseStudy={caseStudy} index={index} />
            ))}
          </div>

          {/* CTA Section */}
          <div className="text-center mt-12">
            <PrimaryCTAButton 
              text="Read More Stories"
              onClick={() => navigateTo('/about/our-impact')}
              ariaLabel="Read more success stories"
            />
          </div>
        </div>
      </section>
      {/* CTA Section - Expertise Banner Style */}
      <section className="relative h-[700px] overflow-hidden">
        {/* Background Image */}
        <div className="absolute inset-0">
          <ImageWithFallback
            src="https://images.unsplash.com/photo-1559523161-0fc0d8b38a7a?w=2940&h=1200&fit=crop"
            alt="Expert consultation and leadership development"
            className="w-full h-full object-cover"
          />
          
          {/* Subtle dark overlay for overall image */}
          <div className="absolute inset-0 bg-black/30" />
          
          {/* Gradient overlay for better text readability */}
          <div className="absolute inset-0 bg-gradient-to-r from-black/20 via-transparent to-black/60" />
        </div>

        {/* Content Container */}
        <div className="relative h-full flex items-center justify-end section-margin-x">
          {/* CTA Content Block */}
          <div 
            className="bg-opacity-95 backdrop-blur-sm rounded-lg p-16 max-w-2xl"
            style={{ 
              backgroundColor: 'var(--color-primary)'
            }}
          >
            {/* Branded Tag */}
            <div className="mb-6">
              <div className="branded-tag-system-white">
                <div className="dot"></div>
                <span className="text">
                  Expert Guidance
                </span>
              </div>
            </div>

            {/* Main Headline */}
            <h2 className="text-h2-white leading-tight mb-8">
              Ready to Leverage Our Expertise?
              <span 
                className="italic"
                style={{ color: 'var(--color-accent)' }}
              >
                {" "}Partner with industry{" "}
              </span>
              leaders today.
            </h2>

            {/* CTA Button */}
            <PrimaryCTAButton 
              text="Connect With Our Experts"
              onClick={() => navigateTo('/contact')}
              ariaLabel="Connect with our leadership development experts"
              className="cta-banner-yellow"
            />
          </div>
        </div>
      </section>

    </div>
  );
}