import React, { useEffect, useState } from 'react';
import { navigateTo } from '../Router';
import { PrimaryCTAButton } from '../PrimaryCTAButton';
import { Button } from '../ui/button';
import { Card, CardContent } from '../ui/card';
import { Badge } from '../ui/badge';
import { ImageWithFallback } from '../figma/ImageWithFallback';
import { BrandedTag } from './BrandedTag';
import {
  Eye,
  Target,
  Users,
  Brain,
  TrendingUp,
  Lightbulb,
  ArrowRight,
  CheckCircle,
  Globe,
  BarChart3,
  Layers,
  Compass
} from 'lucide-react';

// Vision pillars data
const visionPillars = [
  {
    title: "World-Class Institution in Leadership",
    description: "Establishing ourselves as a premier global institution recognized for excellence in leadership thought and practice, setting industry standards for development methodologies.",
    icon: Globe,
    gradient: "from-blue-600 to-blue-700",
    mainStat: {
      label: "Global Recognition",
      value: "+96%",
      color: "text-primary"
    },
    chartData: [
      { label: "2020", value: 20 },
      { label: "2021", value: 45 },
      { label: "2022", value: 70 },
      { label: "2023", value: 85 },
      { label: "2024", value: 96 }
    ],
    metrics: [
      { label: "Excellence", value: "94%", color: "text-primary" },
      { label: "Recognition", value: "91%", color: "text-primary" }
    ]
  },
  {
    title: "Partnership-Driven Capacity Building",
    description: "Collaborating with institutions to build sustainable leadership capacity and capability that drives organizational transformation and long-term success.",
    icon: Users,
    gradient: "from-yellow-500 to-yellow-600",
    mainStat: {
      label: "Partnership Growth",
      value: "+78%",
      color: "text-primary"
    },
    progressMetrics: [
      { label: "Partner Satisfaction", value: 82, color: "#F8C301" },
      { label: "Capacity Building", value: 76, color: "#04045B" },
      { label: "Retention Rate", value: 84, color: "#F8C301" }
    ],
    metrics: []
  },
  {
    title: "Individual Leadership Discovery",
    description: "Facilitating individuals to discover and develop their personal leadership resources, unlocking their unique potential to create meaningful impact.",
    icon: Compass,
    gradient: "from-purple-600 to-indigo-600",
    mainStat: {
      label: "Development Speed",
      value: "65%",
      color: "text-primary"
    },
    topMetrics: [
      { label: "Speed", value: "65%", color: "text-primary" },
      { label: "Alignment", value: "89%", color: "text-primary" }
    ],
    bottomMetrics: [
      { label: "Quality", value: "91%", color: "text-primary" },
      { label: "Time Reduction", value: "-65%", color: "text-primary" },
      { label: "Impact", value: "89%", color: "text-primary" }
    ]
  }
];

// Approach timeline data
const approachSteps = [
  {
    title: "Client Context Alignment",
    description: "Deep understanding of unique organizational challenges, culture, and strategic objectives through comprehensive assessment and stakeholder engagement.",
    details: [
      "Organizational diagnostic and culture assessment",
      "Leadership capability gap analysis", 
      "Strategic business alignment review",
      "Stakeholder needs analysis"
    ],
    icon: Target
  },
  {
    title: "Research Anchored Methodology",
    description: "Evidence-based methodologies and frameworks grounded in behavioral science, leadership psychology, and proven best practices from global research.",
    details: [
      "Latest research in leadership effectiveness",
      "Behavioral science applications",
      "Validated assessment tools and frameworks",
      "Global best practice integration"
    ],
    icon: Brain
  },
  {
    title: "Co-Created Program Design",
    description: "Collaborative program development with clients, ensuring solutions are tailored, practical, and aligned with specific organizational needs and constraints.",
    details: [
      "Joint design workshops with key stakeholders",
      "Customized learning journeys and pathways",
      "Practical application focus",
      "Measurable outcome definition"
    ],
    icon: Lightbulb
  }
];

// Leadership orientations preview
const leadershipOrientations = [
  {
    orientation: "Thinking",
    description: "How leaders process information, make decisions, and approach complex challenges",
    aspects: ["Strategic thinking", "Systems thinking", "Critical analysis", "Creative problem-solving"]
  },
  {
    orientation: "Risk Appetite", 
    description: "Leaders' comfort with uncertainty, innovation, and calculated risk-taking",
    aspects: ["Innovation tolerance", "Change agility", "Calculated risk-taking", "Uncertainty navigation"]
  },
  {
    orientation: "Power",
    description: "How leaders use influence, authority, and positional power to drive results",
    aspects: ["Influence strategies", "Authority dynamics", "Empowerment approaches", "Decision rights"]
  },
  {
    orientation: "Interpersonal/Political",
    description: "Leaders' ability to navigate relationships, coalitions, and organizational dynamics",
    aspects: ["Relationship building", "Coalition management", "Stakeholder engagement", "Political savvy"]
  }
];

export function OurVision() {
  const [activeStep, setActiveStep] = useState(0);

  useEffect(() => {
    document.title = 'Our Vision - About Us | KLC';
    window.scrollTo(0, 0);
  }, []);

  // Auto-advance timeline steps
  useEffect(() => {
    const interval = setInterval(() => {
      setActiveStep((prev) => (prev + 1) % approachSteps.length);
    }, 4000);

    return () => clearInterval(interval);
  }, []);

  return (
    <div className="min-h-screen" style={{ backgroundColor: '#FFFFFF' }}>
      {/* Hero Section - Our Impact 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-1552664730-d307ca884978?w=1920&h=1080&fit=crop"
            alt="Leadership vision and transformation - Our Vision"
            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 Vision
              </h1>
              
              <p className="text-body-lg-white mb-8 max-w-2xl mx-auto">
                Building the next generation of transformational leaders who drive organizational 
                success and create lasting positive impact worldwide through excellence in leadership development.
              </p>

              <div className="flex flex-col sm:flex-row gap-4 mb-12 justify-center">
                <PrimaryCTAButton
                  text="Explore Our Approach"
                  onClick={() => document.getElementById('vision-pillars')?.scrollIntoView({ behavior: 'smooth' })}
                  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)'
                  }}
                >
                  <ArrowRight className="w-5 h-5 mr-2" />
                  Get Started
                </Button>
              </div>
            </div>
          </div>
        </div>

        {/* Vision 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">3</div>
                <div className="text-small-white opacity-90">Vision Pillars</div>
              </div>
              <div>
                <div className="text-h2-white mb-2">96%</div>
                <div className="text-small-white opacity-90">Client Success Rate</div>
              </div>
              <div>
                <div className="text-h2-white mb-2">25+</div>
                <div className="text-small-white opacity-90">Years Experience</div>
              </div>
              <div>
                <div className="text-h2-white mb-2">Global</div>
                <div className="text-small-white opacity-90">Impact Reach</div>
              </div>
            </div>
          </div>
        </div>
      </section>

      {/* Vision Pillars - Redesigned */}
      <section id="vision-pillars" className="py-20" 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'
              }}
            >
              Foundation
            </Badge>
            <h2 className="text-h2 mb-6">Three Pillars of Our Vision</h2>
            <p className="text-body-lg text-muted max-w-3xl mx-auto leading-relaxed">
              Our comprehensive approach to leadership development is built on three foundational pillars 
              that guide everything we do and drive measurable transformation.
            </p>
          </div>

          <div className="grid lg:grid-cols-3 gap-12 max-w-7xl mx-auto">
            {visionPillars.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)' }}
                    >
                      {React.createElement(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>

                    {/* Data Visualization Section */}
                    {/* First Pillar: Bar Chart */}
                    {index === 0 && (
                      <>
                        <div className="mb-6">
                          <div className="flex items-end justify-between gap-1 h-20 mb-2">
                            {pillar.chartData.map((item, barIndex) => (
                              <div key={item.label} className="flex flex-col items-center flex-1">
                                <div 
                                  className="w-full rounded-t-sm transition-all duration-1000 delay-300"
                                  style={{ 
                                    height: `${item.value}%`,
                                    backgroundColor: barIndex >= 3 ? '#04045B' : '#E5E7EB',
                                    minHeight: '8px'
                                  }}
                                ></div>
                                <div className="text-xs text-muted mt-1">{item.label}</div>
                              </div>
                            ))}
                          </div>
                        </div>
                        
                        <div className="grid grid-cols-2 gap-4">
                          {pillar.metrics.map((metric, metricIndex) => (
                            <div key={metric.label} className="text-center">
                              <div className={`text-2xl font-bold ${metric.color}`}>
                                {metric.value}
                              </div>
                              <div className="text-small text-muted">
                                {metric.label}
                              </div>
                            </div>
                          ))}
                        </div>
                      </>
                    )}

                    {/* Second Pillar: Progress Bars */}
                    {index === 1 && (
                      <div className="space-y-4">
                        {pillar.progressMetrics.map((metric, metricIndex) => (
                          <div key={metric.label}>
                            <div className="flex justify-between items-center mb-2">
                              <span className="text-small text-muted">{metric.label}</span>
                              <span className="text-small font-medium text-black">{metric.value}%</span>
                            </div>
                            <div className="w-full bg-gray-200 rounded-full h-2">
                              <div 
                                className="h-2 rounded-full transition-all duration-1000"
                                style={{ 
                                  width: `${metric.value}%`,
                                  backgroundColor: metric.color,
                                  animationDelay: `${(metricIndex + 1) * 200}ms`
                                }}
                              ></div>
                            </div>
                          </div>
                        ))}
                      </div>
                    )}

                    {/* Third Pillar: Multiple Metrics Grid */}
                    {index === 2 && (
                      <>
                        {/* Top Metrics */}
                        <div className="grid grid-cols-2 gap-4 mb-6">
                          {pillar.topMetrics.map((metric, metricIndex) => (
                            <div key={metric.label} className="text-center">
                              <div className="text-small text-muted mb-1">{metric.label}</div>
                              <div className={`text-2xl font-bold ${metric.color}`}>
                                {metric.value}
                              </div>
                            </div>
                          ))}
                        </div>

                        {/* Bottom Metrics */}
                        <div className="grid grid-cols-3 gap-3">
                          {pillar.bottomMetrics.map((metric, metricIndex) => (
                            <div key={metric.label} className="text-center">
                              <div className={`text-lg font-bold ${metric.color}`}>
                                {metric.value}
                              </div>
                              <div className="text-xs text-muted">
                                {metric.label}
                              </div>
                            </div>
                          ))}
                        </div>
                      </>
                    )}
                  </CardContent>
                </Card>
              </div>
            ))}
          </div>
        </div>
      </section>

      {/* How Our Work Aligns - Redesigned Interactive Timeline */}
      <section className="py-20" style={{ background: 'linear-gradient(135deg, rgba(247, 247, 253, 0.3) 0%, rgba(248, 195, 1, 0.05) 100%)' }}>
        <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'
              }}
            >
              Methodology
            </Badge>
            <h2 className="text-h2 mb-6">Our Strategic Approach</h2>
            <p className="text-body-lg text-muted max-w-3xl mx-auto leading-relaxed">
              A clear step-by-step process that drives measurable impact and lasting transformation.
            </p>
          </div>

          <div className="flex flex-col lg:flex-row gap-12 max-w-6xl mx-auto">
            {/* Timeline Steps - Left Side */}
            <div className="flex lg:flex-col gap-6 lg:w-1/3">
              {/* Progress Indicator */}
              <div className="hidden lg:block text-center mb-6">
                <div className="text-small text-muted font-medium">
                  Step {activeStep + 1} of {approachSteps.length}
                </div>
                <div className="w-full rounded-full h-2 mt-2" style={{ backgroundColor: 'rgba(4, 4, 91, 0.1)' }}>
                  <div 
                    className="h-2 rounded-full transition-all duration-500 ease-out"
                    style={{ 
                      backgroundColor: 'var(--color-primary)',
                      width: `${((activeStep + 1) / approachSteps.length) * 100}%`
                    }}
                  ></div>
                </div>
              </div>

              {/* Step Buttons */}
              {approachSteps.map((step, index) => (
                <button 
                  key={step.title}
                  onClick={() => setActiveStep(index)}
                  className={`group flex items-center gap-4 px-6 py-4 rounded-xl border-2 transition-all duration-300 text-left w-full
                    ${activeStep === index 
                      ? 'bg-primary text-white border-primary shadow-lg' 
                      : 'bg-white text-black hover:shadow-md hover:scale-105'
                    }
                  `}
                  style={{
                    borderColor: activeStep === index ? 'var(--color-primary)' : 'rgba(4, 4, 91, 0.2)',
                    backgroundColor: activeStep === index ? 'var(--color-primary)' : '#FFFFFF'
                  }}
                  onMouseEnter={(e) => {
                    if (activeStep !== index) {
                      e.currentTarget.style.borderColor = 'var(--color-primary)';
                    }
                  }}
                  onMouseLeave={(e) => {
                    if (activeStep !== index) {
                      e.currentTarget.style.borderColor = 'rgba(4, 4, 91, 0.2)';
                    }
                  }}
                >
                  {/* Step Number */}
                  <div 
                    className={`w-10 h-10 flex items-center justify-center rounded-full font-bold text-lg transition-all duration-300
                      ${activeStep === index 
                        ? 'bg-white text-primary' 
                        : 'bg-primary text-white group-hover:scale-110'
                      }
                    `}
                  >
                    {index + 1}
                  </div>
                  
                  {/* Step Info */}
                  <div className="flex-1 min-w-0">
                    <div 
                      className={`font-medium text-body leading-tight transition-colors duration-300
                        ${activeStep === index ? 'text-white' : 'text-black'}
                      `}
                    >
                      {step.title}
                    </div>
                    
                    {/* Step Icon */}
                    <div className="mt-2">
                      {React.createElement(step.icon, { 
                        className: `w-5 h-5 transition-all duration-300 ${
                          activeStep === index ? 'text-white' : 'text-primary'
                        }` 
                      })}
                    </div>
                  </div>
                </button>
              ))}
            </div>

            {/* Active Step Content - Right Side */}
            <div className="flex-1 lg:w-2/3">
              <Card 
                className="border-0 shadow-xl transition-all duration-500 ease-out bg-white"
                style={{ minHeight: '500px' }}
              >
                <CardContent className="p-8 lg:p-10">
                  {/* Mobile Progress Indicator */}
                  <div className="lg:hidden text-center mb-6">
                    <div className="text-small text-muted font-medium">
                      Step {activeStep + 1} of {approachSteps.length}
                    </div>
                    <div className="w-full rounded-full h-2 mt-2" style={{ backgroundColor: 'rgba(4, 4, 91, 0.1)' }}>
                      <div 
                        className="h-2 rounded-full transition-all duration-500 ease-out"
                        style={{ 
                          backgroundColor: 'var(--color-primary)',
                          width: `${((activeStep + 1) / approachSteps.length) * 100}%`
                        }}
                      ></div>
                    </div>
                  </div>

                  {/* Step Content */}
                  <div className="mb-8 fade-in animate-in duration-700">
                    <div className="flex items-center gap-4 mb-6">
                      <div 
                        className="w-16 h-16 rounded-xl flex items-center justify-center transition-transform duration-300 hover:scale-110"
                        style={{ backgroundColor: 'rgba(4, 4, 91, 0.1)' }}
                      >
                        {React.createElement(approachSteps[activeStep].icon, { 
                          className: "w-8 h-8 text-primary" 
                        })}
                      </div>
                      <div>
                        <h3 className="text-h3 text-black leading-tight">
                          {approachSteps[activeStep].title}
                        </h3>
                        <div className="text-small text-primary font-medium mt-1">
                          Step {activeStep + 1} of {approachSteps.length}
                        </div>
                      </div>
                    </div>
                    
                    <p className="text-body-lg text-muted leading-relaxed mb-8">
                      {approachSteps[activeStep].description}
                    </p>
                  </div>

                  {/* Key Components Accordion-Style */}
                  <div className="mb-8">
                    <h4 className="text-h4 text-black mb-6">Key Components</h4>
                    <div className="space-y-3">
                      {approachSteps[activeStep].details.map((detail, index) => (
                        <div key={index} className="group">
                          <div 
                            className="flex items-start gap-3 p-4 rounded-lg transition-all duration-300 cursor-pointer hover:scale-102"
                            style={{ 
                              backgroundColor: 'rgba(4, 4, 91, 0.05)',
                            }}
                            onMouseEnter={(e) => {
                              e.currentTarget.style.backgroundColor = 'rgba(4, 4, 91, 0.08)';
                            }}
                            onMouseLeave={(e) => {
                              e.currentTarget.style.backgroundColor = 'rgba(4, 4, 91, 0.05)';
                            }}
                          >
                            <div className="w-6 h-6 rounded-full bg-primary flex items-center justify-center flex-shrink-0 mt-0.5 group-hover:scale-110 transition-transform duration-300">
                              <CheckCircle className="w-4 h-4 text-white" />
                            </div>
                            <span className="text-body text-black leading-relaxed">{detail}</span>
                          </div>
                        </div>
                      ))}
                    </div>
                  </div>

                  {/* CTA Button - Always Visible */}
                  <div className="pt-6" style={{ borderTop: '1px solid rgba(4, 4, 91, 0.1)' }}>
                    <PrimaryCTAButton 
                      text="Learn More About Our Approach"
                      onClick={() => navigateTo('/services/consulting')}
                    />
                  </div>
                </CardContent>
              </Card>
            </div>
          </div>
        </div>
      </section>

      {/* Leadership Framework CTA - Redesigned */}
      <section className="py-20" style={{ backgroundColor: '#FFFFFF' }}>
        <div className="mx-auto section-margin-x">
          <div className="max-w-7xl mx-auto">
            <div className="grid lg:grid-cols-2 gap-16 items-center">
              {/* Content Side */}
              <div>
                {/* Modern Pill Badge */}
                <div className="inline-flex items-center gap-3 px-6 py-3 rounded-full mb-8 shadow-sm transition-all duration-300 hover:shadow-md"
                     style={{
                       backgroundColor: 'rgba(248, 195, 1, 0.12)',
                       border: '1px solid rgba(248, 195, 1, 0.2)'
                     }}>
                  <div className="w-3 h-3 rounded-full animate-pulse"
                       style={{ backgroundColor: 'var(--color-accent)' }} />
                  <span className="text-small font-semibold text-black uppercase tracking-wide">
                    Proprietary Framework
                  </span>
                </div>
                
                <h3 className="text-h2 mb-8 text-black leading-tight">
                  Leadership Orientations Framework
                </h3>
                
                <p className="text-body-lg text-muted mb-10 leading-relaxed">
                  Our research-backed framework examines four critical dimensions that define 
                  leadership effectiveness and drive organizational results. This proprietary 
                  methodology helps leaders understand their natural orientations and develop 
                  adaptive capabilities.
                </p>
                
                {/* Enhanced Framework Items */}
                <div className="grid grid-cols-2 gap-6 mb-12">
                  {[
                    { 
                      label: 'Thinking', 
                      desc: 'Strategic & analytical approaches',
                      icon: Brain,
                      color: '#FFFFFF',
                      accentColor: 'var(--color-primary)'
                    },
                    { 
                      label: 'Risk Appetite', 
                      desc: 'Innovation & change tolerance',
                      icon: TrendingUp,
                      color: '#FFFFFF',
                      accentColor: 'var(--color-primary)'
                    },
                    { 
                      label: 'Power', 
                      desc: 'Influence & authority usage',
                      icon: Target,
                      color: '#FFFFFF',
                      accentColor: 'var(--color-primary)'
                    },
                    { 
                      label: 'Interpersonal', 
                      desc: 'Relationship & political navigation',
                      icon: Users,
                      color: '#FFFFFF',
                      accentColor: 'var(--color-primary)'
                    }
                  ].map((item, index) => {
                    const Icon = item.icon;
                    return (
                      <Card 
                        key={item.label} 
                        className="border border-gray-200 shadow-md hover:shadow-lg transition-all duration-300 hover:-translate-y-2 cursor-pointer group overflow-hidden"
                        style={{ backgroundColor: item.color }}
                      >
                        <CardContent className="p-6 relative">
                          {/* Subtle background pattern */}
                          <div 
                            className="absolute inset-0 opacity-5 transition-opacity duration-300 group-hover:opacity-10"
                            style={{
                              backgroundImage: 'radial-gradient(circle at 80% 20%, rgba(4,4,91,0.1) 0%, transparent 50%)'
                            }}
                          />
                          
                          <div className="relative z-10">
                            <div className="flex items-start gap-4 mb-4">
                              <div 
                                className="w-12 h-12 rounded-xl flex items-center justify-center transition-all duration-300 group-hover:scale-110 group-hover:rotate-3"
                                style={{ 
                                  backgroundColor: item.accentColor,
                                  boxShadow: '0 4px 12px rgba(4,4,91,0.25)'
                                }}
                              >
                                <Icon 
                                  className="w-6 h-6 text-white"
                                />
                              </div>
                              
                              <div className="flex-1">
                                <h4 className="text-subhead text-black mb-2 font-semibold group-hover:text-primary transition-colors">
                                  {item.label}
                                </h4>
                                <p className="text-small text-muted leading-relaxed">
                                  {item.desc}
                                </p>
                              </div>
                            </div>
                            
                            {/* Enhanced progress indicator */}
                            <div className="mt-4">
                              <div className="h-1.5 bg-gray-100 rounded-full overflow-hidden shadow-inner">
                                <div 
                                  className="h-full rounded-full transition-all duration-1000 group-hover:w-full"
                                  style={{ 
                                    width: '60%',
                                    backgroundColor: item.accentColor,
                                    boxShadow: '0 0 8px rgba(4,4,91,0.3)'
                                  }}
                                />
                              </div>
                            </div>
                            
                            {/* Floating accent */}
                            <div 
                              className="absolute top-4 right-4 w-2 h-2 rounded-full opacity-60 group-hover:opacity-100 transition-opacity duration-300"
                              style={{ backgroundColor: item.accentColor }}
                            />
                          </div>
                        </CardContent>
                      </Card>
                    );
                  })}
                </div>
                
                <PrimaryCTAButton 
                  text="Explore Our Framework"
                  onClick={() => navigateTo('/about/our-expertise')}
                />
              </div>

              {/* Enhanced Visual Side */}
              <div className="relative">
                <Card 
                  className="border border-gray-200 shadow-2xl overflow-hidden"
                  style={{ 
                    background: '#FFFFFF'
                  }}
                >
                  <CardContent className="p-10 relative">
                    {/* Sophisticated Background Pattern */}
                    <div 
                      className="absolute inset-0 opacity-5"
                      style={{
                        backgroundImage: `
                          radial-gradient(circle at 25% 25%, rgba(4,4,91,0.3) 0%, transparent 40%),
                          radial-gradient(circle at 75% 75%, rgba(4,4,91,0.1) 0%, transparent 40%),
                          linear-gradient(45deg, rgba(4,4,91,0.05) 0%, transparent 30%, rgba(4,4,91,0.05) 70%, transparent 100%)
                        `
                      }}
                    />
                    
                    {/* Geometric accent elements */}
                    <div className="absolute top-8 right-8 w-16 h-16 border border-blue-300 opacity-30 rounded-lg rotate-12" />
                    <div className="absolute bottom-8 left-8 w-12 h-12 bg-blue-300 opacity-15 rounded-full" />
                    
                    {/* Content */}
                    <div className="relative z-10">
                      {/* Header */}
                      <div className="text-center mb-10">
                        <div 
                          className="w-20 h-20 rounded-2xl flex items-center justify-center mx-auto mb-6 relative overflow-hidden"
                          style={{ 
                            backgroundColor: 'var(--color-primary)',
                            border: '1px solid rgba(4, 4, 91, 0.3)'
                          }}
                        >
                          {/* Inner glow */}
                          <div className="absolute inset-2 rounded-xl bg-gradient-to-br from-white/20 to-transparent" />
                          <BarChart3 className="w-10 h-10 text-white relative z-10" />
                        </div>
                        <h4 className="text-h4 text-black mb-3 font-semibold">Framework Impact</h4>
                        <p className="text-body text-muted">
                          Proven results across organizations
                        </p>
                      </div>

                      {/* Enhanced Infographic Stats */}
                      <div className="space-y-8">
                        {/* Leadership Effectiveness */}
                        <div className="flex items-center gap-6">
                          <div className="relative">
                            {/* Circular progress ring */}
                            <svg className="w-20 h-20 transform -rotate-90" viewBox="0 0 80 80">
                              <circle
                                cx="40"
                                cy="40"
                                r="30"
                                stroke="rgba(4, 4, 91, 0.2)"
                                strokeWidth="4"
                                fill="none"
                              />
                              <circle
                                cx="40"
                                cy="40"
                                r="30"
                                stroke="var(--color-primary)"
                                strokeWidth="4"
                                fill="none"
                                strokeDasharray={`${2 * Math.PI * 30}`}
                                strokeDashoffset={`${2 * Math.PI * 30 * (1 - 89 / 100)}`}
                                className="transition-all duration-2000 ease-out"
                                strokeLinecap="round"
                              />
                            </svg>
                            <div className="absolute inset-0 flex items-center justify-center">
                              <span className="text-xl font-bold text-blue-600">89%</span>
                            </div>
                          </div>
                          <div className="flex-1">
                            <div className="text-body-lg text-black font-semibold mb-2">Leadership Effectiveness</div>
                            <div className="text-small text-muted mb-3">Improvement in 6 months</div>
                            {/* Horizontal progress bar */}
                            <div className="h-2 bg-gray-200 rounded-full overflow-hidden">
                              <div 
                                className="h-full rounded-full transition-all duration-2000 ease-out"
                                style={{ 
                                  width: '89%',
                                  background: 'linear-gradient(90deg, var(--color-primary) 0%, rgba(4, 4, 91, 0.8) 100%)'
                                }}
                              />
                            </div>
                          </div>
                        </div>

                        {/* Self-Awareness Growth */}
                        <div className="flex items-center gap-6">
                          <div className="relative">
                            {/* Circular progress ring */}
                            <svg className="w-20 h-20 transform -rotate-90" viewBox="0 0 80 80">
                              <circle
                                cx="40"
                                cy="40"
                                r="30"
                                stroke="rgba(4, 4, 91, 0.2)"
                                strokeWidth="4"
                                fill="none"
                              />
                              <circle
                                cx="40"
                                cy="40"
                                r="30"
                                stroke="var(--color-primary)"
                                strokeWidth="4"
                                fill="none"
                                strokeDasharray={`${2 * Math.PI * 30}`}
                                strokeDashoffset={`${2 * Math.PI * 30 * (1 - 92 / 100)}`}
                                className="transition-all duration-2000 ease-out"
                                strokeLinecap="round"
                                style={{ transitionDelay: '0.5s' }}
                              />
                            </svg>
                            <div className="absolute inset-0 flex items-center justify-center">
                              <span className="text-xl font-bold text-blue-600">92%</span>
                            </div>
                          </div>
                          <div className="flex-1">
                            <div className="text-body-lg text-black font-semibold mb-2">Self-Awareness Growth</div>
                            <div className="text-small text-muted mb-3">Better decision making</div>
                            {/* Horizontal progress bar */}
                            <div className="h-2 bg-gray-200 rounded-full overflow-hidden">
                              <div 
                                className="h-full rounded-full transition-all duration-2000 ease-out"
                                style={{ 
                                  width: '92%',
                                  background: 'linear-gradient(90deg, var(--color-primary) 0%, rgba(4, 4, 91, 0.8) 100%)',
                                  transitionDelay: '0.5s'
                                }}
                              />
                            </div>
                          </div>
                        </div>

                        {/* Team Performance */}
                        <div className="flex items-center gap-6">
                          <div className="relative">
                            {/* Circular progress ring */}
                            <svg className="w-20 h-20 transform -rotate-90" viewBox="0 0 80 80">
                              <circle
                                cx="40"
                                cy="40"
                                r="30"
                                stroke="rgba(4, 4, 91, 0.2)"
                                strokeWidth="4"
                                fill="none"
                              />
                              <circle
                                cx="40"
                                cy="40"
                                r="30"
                                stroke="var(--color-primary)"
                                strokeWidth="4"
                                fill="none"
                                strokeDasharray={`${2 * Math.PI * 30}`}
                                strokeDashoffset={`${2 * Math.PI * 30 * (1 - 76 / 100)}`}
                                className="transition-all duration-2000 ease-out"
                                strokeLinecap="round"
                                style={{ transitionDelay: '1s' }}
                              />
                            </svg>
                            <div className="absolute inset-0 flex items-center justify-center">
                              <span className="text-xl font-bold text-blue-600">76%</span>
                            </div>
                          </div>
                          <div className="flex-1">
                            <div className="text-body-lg text-black font-semibold mb-2">Team Performance</div>
                            <div className="text-small text-muted mb-3">Enhanced collaboration</div>
                            {/* Horizontal progress bar */}
                            <div className="h-2 bg-gray-200 rounded-full overflow-hidden">
                              <div 
                                className="h-full rounded-full transition-all duration-2000 ease-out"
                                style={{ 
                                  width: '76%',
                                  background: 'linear-gradient(90deg, var(--color-primary) 0%, rgba(4, 4, 91, 0.8) 100%)',
                                  transitionDelay: '1s'
                                }}
                              />
                            </div>
                          </div>
                        </div>
                      </div>

                      {/* Bottom accent with trust indicator */}
                      <div className="flex items-center justify-center mt-10 pt-8 border-t border-gray-200">
                        <div className="flex items-center gap-4">
                          <div className="flex items-center gap-2">
                            <CheckCircle className="w-5 h-5 text-blue-500" />
                            <span className="text-small text-black font-medium">500+ Organizations</span>
                          </div>
                          <div className="w-1 h-1 bg-blue-500 rounded-full" />
                          <div className="flex items-center gap-2">
                            <CheckCircle className="w-5 h-5 text-blue-500" />
                            <span className="text-small text-black font-medium">Proven Results</span>
                          </div>
                        </div>
                      </div>
                    </div>
                  </CardContent>
                </Card>
              </div>
            </div>
          </div>
        </div>
      </section>
      {/* CTA Section - Vision Banner Style */}
      <section className="relative h-[700px] overflow-hidden">
        {/* Background Image */}
        <div className="absolute inset-0">
          <ImageWithFallback
            src="https://images.unsplash.com/photo-1600880292203-757bb62b4baf?w=2940&h=1200&fit=crop"
            alt="Visionary leadership team planning strategy"
            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">
                  Transform Your Vision
                </span>
              </div>
            </div>

            {/* Main Headline */}
            <h2 className="text-h2-white leading-tight mb-8">
              Ready to Build Your Leadership Vision?
              <span 
                className="italic"
                style={{ color: 'var(--color-accent)' }}
              >
                {" "}Start your transformation{" "}
              </span>
              journey today.
            </h2>

            {/* CTA Button */}
            <PrimaryCTAButton 
              text="Explore Our Services"
              onClick={() => navigateTo('/services/leadership-development')}
              ariaLabel="Explore our leadership development services"
              className="cta-banner-yellow"
            />
          </div>
        </div>
      </section>

    </div>
  );
}