KLC-Website-Frontend/src/components/services/LeadershipDevelopment.tsx

import React, { useEffect, useState } from 'react';
import { Button } from '../ui/button';
import { Badge } from '../ui/badge';
import { Card, CardContent } from '../ui/card';
import { ImageWithFallback } from '../figma/ImageWithFallback';
import { navigateTo } from '../Router';
import { BrandedTag } from '../about/BrandedTag';
import { PrimaryCTAButton } from '../PrimaryCTAButton';
import { StandardCTAButton } from '../StandardCTAButton';
import { 
  ArrowRight,
  CheckCircle,
  Settings,
  Calendar,
  Download,
  Network,
  Users,
  Target,
  Brain,
  Eye,
  TrendingUp,
  BarChart3,
  Award,
  Lightbulb,
  Shield,
  ChevronDown,
  ChevronUp,
  ArrowLeft,
  Star,
  Zap,
  Globe,
  Crown,
  Compass,
  Users2,
  Clock,
  MessageCircle,
  Building,
  UserCheck
} from 'lucide-react';

const targetAudience = [
  {
    title: "C-Suite Executives",
    description: "CEOs, Presidents, and C-level executives leading organizational transformation and strategic initiatives",
    icon: Crown,
    challenges: ["Strategic leadership complexity", "Board accountability", "Organizational transformation", "Executive presence"]
  },
  {
    title: "Senior Directors & VPs",
    description: "Senior leaders responsible for major business units and strategic functions across the organization",
    icon: Users2,
    challenges: ["Cross-functional leadership", "Strategic execution", "P&L responsibility", "Stakeholder management"]
  },
  {
    title: "High-Potential Leaders",
    description: "Emerging leaders identified for accelerated development and future executive roles",
    icon: Star,
    challenges: ["Executive readiness", "Leadership capability gaps", "Career advancement", "Strategic thinking"]
  }
];

const useCases = [
  {
    title: "Leadership Effectiveness Gap",
    description: "When current leadership capabilities don't match organizational strategic needs",
    icon: Target,
    scenario: "Leadership effectiveness scores below industry benchmarks"
  },
  {
    title: "Strategic Transformation",
    description: "When organizations undergo major strategic shifts requiring enhanced leadership capability",
    icon: TrendingUp,
    scenario: "Digital transformation, M&A, or business model changes"
  },
  {
    title: "Executive Presence Development",
    description: "When leaders need to strengthen influence, communication, and stakeholder confidence",
    icon: Crown,
    scenario: "Promotion to C-suite or board-level responsibilities"
  },
  {
    title: "Organizational Performance",
    description: "When leadership development is needed to drive measurable business results",
    icon: BarChart3,
    scenario: "Performance gaps in key business metrics or strategic goals"
  }
];

const programTimeline = [
  {
    phase: "Phase 1: Assessment & Design",
    duration: "Months 1-2",
    activities: ["360-degree leadership assessment", "Strategic leadership competency evaluation", "Executive presence analysis", "Custom program design"],
    deliverables: ["Leadership assessment report", "Development roadmap", "Program curriculum", "Success metrics"]
  },
  {
    phase: "Phase 2: Core Development",
    duration: "Months 3-6",
    activities: ["Executive leadership workshops", "Strategic thinking development", "Leadership simulations", "Peer learning circles"],
    deliverables: ["Enhanced strategic capability", "Leadership toolkit", "Peer network", "Action learning projects"]
  },
  {
    phase: "Phase 3: Application & Integration",
    duration: "Months 7-12",
    activities: ["Executive coaching sessions", "Real-world application", "Stakeholder feedback", "Continuous improvement"],
    deliverables: ["Measurable leadership improvement", "Business impact results", "Sustainability plan", "Long-term development strategy"]
  }
];

const expectedOutcomes = [
  {
    metric: "94%",
    description: "Of executives show improved strategic leadership effectiveness",
    icon: Compass,
    category: "Strategic Leadership"
  },
  {
    metric: "91%",
    description: "Improvement in executive presence and stakeholder confidence",
    icon: Crown,
    category: "Executive Presence"
  },
  {
    metric: "83%",
    description: "Improvement in organizational performance metrics",
    icon: TrendingUp,
    category: "Business Impact"
  },
  {
    metric: "87%",
    description: "Of participants promoted within 18 months",
    icon: Star,
    category: "Career Advancement"
  }
];

export function LeadershipDevelopment() {
  const [expandedUseCase, setExpandedUseCase] = useState<number | null>(null);
  const [expandedPhase, setExpandedPhase] = useState<number | null>(0);

  useEffect(() => {
    window.scrollTo(0, 0);
  }, []);

  return (
    <div style={{ backgroundColor: '#FFFFFF', fontFamily: 'var(--font-family-base)' }}>
      {/* Hero Section */}
      <section className="relative min-h-[85vh] flex flex-col">
        <div className="absolute inset-0 z-0">
          <div 
            className="w-full h-full bg-cover bg-center bg-no-repeat"
            style={{
              backgroundImage: `url('https://images.unsplash.com/photo-1560472354-b33ff0c44a43?w=1920&h=1080&fit=crop')`
            }}
          />
          <div className="absolute inset-0 bg-gradient-to-r from-black/85 via-black/75 to-black/65"></div>
        </div>

        <div className="relative z-10 flex-1 flex items-center">
          <div className="w-full section-margin-x">
            <div className="max-w-4xl">
              {/* Back Navigation */}
              <div className="mb-8">
                <Button 
                  variant="ghost" 
                  onClick={() => navigateTo('/services')}
                  className="text-white hover:text-white hover:bg-white/10 p-2 -ml-2"
                >
                  <ArrowLeft className="w-4 h-4 mr-2" />
                  Back to Services
                </Button>
              </div>

              <div className="mb-8">
                <h1 className="text-h1-white">
                  Leadership Development
                </h1>
              </div>
              
              <p className="text-body-lg-white mb-8 max-w-3xl">
                <strong>Transform senior executives into visionary leaders who drive 94% better strategic outcomes and organizational performance.</strong>
              </p>

              <div className="flex justify-start">
                <PrimaryCTAButton 
                  text="Book a Consultation"
                  onClick={() => navigateTo('/contact?topic=leadership-development')}
                  ariaLabel="Book a consultation for leadership development"
                  className="primary-cta-button-blue cta-text-white"
                />
              </div>
            </div>
          </div>
        </div>
      </section>

      {/* 1. What Is This Service */}
      <section className="py-24 lg:py-32" style={{ backgroundColor: '#FFFFFF' }}>
        <div className="section-margin-x">
          <div className="w-full section-margin-x">
            <div className="max-w-6xl mx-auto">
              <div className="text-center mb-12">
                <BrandedTag text="What Is This Service?" />
                <h2 className="text-h2 mb-8 text-[#26231A]">Executive Leadership Development</h2>
                <div className="max-w-4xl mx-auto space-y-6">
                  <p className="text-body-lg text-[#6F6F6F] leading-relaxed">
                    Leadership Development is a comprehensive executive transformation program designed to elevate senior leaders' strategic thinking, executive presence, and organizational impact. Our approach combines proven leadership frameworks with real-world application to create visionary leaders who drive exceptional business results.
                  </p>
                  <div className="bg-[#04045B]/5 border-l-4 border-[#04045B] p-6 rounded-lg">
                    <p className="text-body-lg text-[#26231A] leading-relaxed">
                      <span className="font-semibold text-[#04045B]">The Business Problem It Solves:</span> Many talented leaders struggle to reach their full potential due to lack of personalized guidance, limited feedback, and insufficient support during critical transitions. Traditional leadership training often fails to address the complex challenges executives face in today's dynamic business environment.
                    </p>
                  </div>
                </div>
              </div>

              <div className="grid grid-cols-1 md:grid-cols-3 gap-8">
                <div className="group bg-white border border-gray-200 rounded-xl p-8 hover:border-[#04045B]/20 hover:shadow-lg transition-all duration-300">
                  <div className="flex flex-col items-center text-center">
                    <div 
                      className="w-16 h-16 rounded-xl flex items-center justify-center mb-6 group-hover:scale-105 transition-transform duration-300"
                      style={{ backgroundColor: '#04045B' }}
                    >
                      <Crown className="w-8 h-8 text-white" />
                    </div>
                    <h4 className="text-h4 mb-4 text-[#26231A] group-hover:text-[#04045B] transition-colors duration-300">
                      Executive Excellence
                    </h4>
                    <p className="text-body text-[#6F6F6F] leading-relaxed">
                      Comprehensive development for C-suite and senior leaders focused on strategic transformation
                    </p>
                  </div>
                </div>

                <div className="group bg-white border border-gray-200 rounded-xl p-8 hover:border-[#04045B]/20 hover:shadow-lg transition-all duration-300">
                  <div className="flex flex-col items-center text-center">
                    <div 
                      className="w-16 h-16 rounded-xl flex items-center justify-center mb-6 group-hover:scale-105 transition-transform duration-300"
                      style={{ backgroundColor: '#04045B' }}
                    >
                      <Target className="w-8 h-8 text-white" />
                    </div>
                    <h4 className="text-h4 mb-4 text-[#26231A] group-hover:text-[#04045B] transition-colors duration-300">
                      Strategic Impact
                    </h4>
                    <p className="text-body text-[#6F6F6F] leading-relaxed">
                      Focus on measurable business results and organizational performance improvements
                    </p>
                  </div>
                </div>

                <div className="group bg-white border border-gray-200 rounded-xl p-8 hover:border-[#04045B]/20 hover:shadow-lg transition-all duration-300">
                  <div className="flex flex-col items-center text-center">
                    <div 
                      className="w-16 h-16 rounded-xl flex items-center justify-center mb-6 group-hover:scale-105 transition-transform duration-300"
                      style={{ backgroundColor: '#04045B' }}
                    >
                      <TrendingUp className="w-8 h-8 text-white" />
                    </div>
                    <h4 className="text-h4 mb-4 text-[#26231A] group-hover:text-[#04045B] transition-colors duration-300">
                      94% Success Rate
                    </h4>
                    <p className="text-body text-[#6F6F6F] leading-relaxed">
                      Proven track record with 94% of executives showing improved strategic leadership effectiveness
                    </p>
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>
      </section>

      {/* 2. Who Is It For */}
      <section className="py-24 lg:py-32" style={{ backgroundColor: '#F9F9F9' }}>
        <div className="section-margin-x">
          <div className="max-w-6xl mx-auto">
            <div className="text-center mb-16">
              <BrandedTag text="Who Is It For?" />
              <h2 className="text-h2 mb-8">Target Audience</h2>
              <p className="text-body-lg text-muted max-w-3xl mx-auto">
                Designed for senior executives and high-potential leaders who drive organizational strategy and transformation.
              </p>
            </div>

            <div className="grid grid-cols-1 lg:grid-cols-3 gap-8">
              {targetAudience.map((audience, index) => (
                <Card key={index} className="h-full hover:shadow-lg transition-all duration-300">
                  <CardContent className="p-8">
                    <div className="flex items-center gap-4 mb-6">
                      <div 
                        className="w-16 h-16 rounded-2xl flex items-center justify-center"
                        style={{ backgroundColor: 'var(--color-primary)' }}
                      >
                        <audience.icon className="w-8 h-8 text-white" />
                      </div>
                    </div>
                    <h3 className="text-h4 mb-4">{audience.title}</h3>
                    <p className="text-body text-muted mb-6">{audience.description}</p>
                    <div>
                      <h4 className="text-small font-semibold text-primary mb-3">Common Challenges:</h4>
                      <ul className="space-y-2">
                        {audience.challenges.map((challenge, challengeIndex) => (
                          <li key={challengeIndex} className="text-small text-muted flex items-start gap-2">
                            <div className="w-1 h-1 bg-primary rounded-full mt-2 flex-shrink-0"></div>
                            {challenge}
                          </li>
                        ))}
                      </ul>
                    </div>
                  </CardContent>
                </Card>
              ))}
            </div>
          </div>
        </div>
      </section>

      {/* 3. When to Use It */}
      <section className="py-24 lg:py-32" style={{ backgroundColor: '#FFFFFF' }}>
        <div className="section-margin-x">
          <div className="max-w-6xl mx-auto">
            <div className="text-center mb-16">
              <BrandedTag text="When to Use It?" />
              <h2 className="text-h2 mb-8">When Organizations Need Executive Leadership Development</h2>
              <p className="text-body-lg text-muted max-w-2xl mx-auto">
                Ideal for organizations seeking to elevate strategic leadership and drive transformational change.
              </p>
            </div>

            <div className="grid grid-cols-1 md:grid-cols-2 gap-8">
              {useCases.map((useCase, index) => (
                <div 
                  key={index}
                  className="bg-white rounded-xl border border-gray-200 p-6 hover:border-[#04045B] hover:shadow-lg transition-all duration-300"
                >
                  {/* Icon and Title */}
                  <div className="flex items-start gap-4 mb-4">
                    <div 
                      className="w-12 h-12 rounded-lg flex items-center justify-center flex-shrink-0"
                      style={{ backgroundColor: '#04045B' }}
                    >
                      <useCase.icon className="w-6 h-6 text-white" />
                    </div>
                    <div className="flex-1">
                      <h3 className="text-h4 mb-2 text-[#26231A]">
                        {useCase.title}
                      </h3>
                      <p className="text-body text-muted">
                        {useCase.description}
                      </p>
                    </div>
                  </div>

                  {/* Trigger Indicator */}
                  <div className="flex items-center gap-2 text-small text-[#04045B] bg-[#04045B]/5 px-3 py-2 rounded-lg">
                    <div className="w-2 h-2 rounded-full bg-[#F8C301]" />
                    <span className="font-medium">
                      {useCase.scenario}
                    </span>
                  </div>
                </div>
              ))}
            </div>
          </div>
        </div>
      </section>

      {/* 4. Our Approach */}
      <section className="py-24 lg:py-32" style={{ backgroundColor: '#F9F9F9' }}>
        <div className="section-margin-x">
          <div className="w-full section-margin-x">
            <div className="max-w-6xl mx-auto">
              <div className="text-center mb-16">
                <BrandedTag text="Our Approach" />
                <h2 className="text-h2 mb-8 text-[#26231A]">Comprehensive Executive Leadership Framework</h2>
                <p className="text-body-lg text-[#6F6F6F] max-w-3xl mx-auto">
                  Our proven methodology combines strategic assessment, executive coaching, experiential learning, and real-world application.
                </p>
              </div>

              <div className="grid grid-cols-1 lg:grid-cols-2 gap-16 items-start">
                {/* Left Column - Core Frameworks */}
                <div>
                  <h3 className="text-h3 mb-8 text-[#26231A]">Core Frameworks & Methodologies</h3>
                  <div className="space-y-8">
                    <div className="flex items-start gap-4">
                      <div 
                        className="w-10 h-10 rounded-lg flex items-center justify-center flex-shrink-0"
                        style={{ backgroundColor: '#04045B' }}
                      >
                        <Eye className="w-5 h-5 text-white" />
                      </div>
                      <div className="flex-1">
                        <h4 className="text-h4 mb-3 text-[#26231A]">360-Degree Leadership Assessment</h4>
                        <p className="text-body text-[#6F6F6F] leading-relaxed">
                          Comprehensive evaluation of leadership capabilities, strategic readiness, and executive presence
                        </p>
                      </div>
                    </div>
                    
                    <div className="flex items-start gap-4">
                      <div 
                        className="w-10 h-10 rounded-lg flex items-center justify-center flex-shrink-0"
                        style={{ backgroundColor: '#04045B' }}
                      >
                        <Brain className="w-5 h-5 text-white" />
                      </div>
                      <div className="flex-1">
                        <h4 className="text-h4 mb-3 text-[#26231A]">Strategic Leadership Development</h4>
                        <p className="text-body text-[#6F6F6F] leading-relaxed">
                          Frameworks for strategic thinking, vision creation, and organizational transformation
                        </p>
                      </div>
                    </div>
                    
                    <div className="flex items-start gap-4">
                      <div 
                        className="w-10 h-10 rounded-lg flex items-center justify-center flex-shrink-0"
                        style={{ backgroundColor: '#04045B' }}
                      >
                        <Network className="w-5 h-5 text-white" />
                      </div>
                      <div className="flex-1">
                        <h4 className="text-h4 mb-3 text-[#26231A]">Executive Coaching Integration</h4>
                        <p className="text-body text-[#6F6F6F] leading-relaxed">
                          One-on-one coaching support with experienced executive coaches throughout the journey
                        </p>
                      </div>
                    </div>
                    
                    <div className="flex items-start gap-4">
                      <div 
                        className="w-10 h-10 rounded-lg flex items-center justify-center flex-shrink-0"
                        style={{ backgroundColor: '#04045B' }}
                      >
                        <BarChart3 className="w-5 h-5 text-white" />
                      </div>
                      <div className="flex-1">
                        <h4 className="text-h4 mb-3 text-[#26231A]">Real-World Application</h4>
                        <p className="text-body text-[#6F6F6F] leading-relaxed">
                          Strategic projects and business challenges that drive immediate organizational impact
                        </p>
                      </div>
                    </div>
                  </div>
                </div>

                {/* Right Column - Delivery Modes */}
                <div className="bg-white border border-gray-200 rounded-xl p-8">
                  <h4 className="text-h4 mb-8 text-[#26231A]">Delivery Modes & Assessments</h4>
                  <div className="space-y-6">
                    <div className="flex items-start gap-4 pb-6 border-b border-gray-100 last:border-b-0 last:pb-0">
                      <div className="w-2 h-2 rounded-full bg-[#04045B] mt-2 flex-shrink-0"></div>
                      <div className="flex-1">
                        <h5 className="text-body font-semibold mb-2 text-[#26231A]">Executive Workshops</h5>
                        <p className="text-small text-[#6F6F6F] leading-relaxed">
                          Intensive strategic leadership workshops with peer learning and expert facilitation
                        </p>
                      </div>
                    </div>
                    
                    <div className="flex items-start gap-4 pb-6 border-b border-gray-100 last:border-b-0 last:pb-0">
                      <div className="w-2 h-2 rounded-full bg-[#F8C301] mt-2 flex-shrink-0"></div>
                      <div className="flex-1">
                        <h5 className="text-body font-semibold mb-2 text-[#26231A]">Leadership Simulations</h5>
                        <p className="text-small text-[#6F6F6F] leading-relaxed">
                          Business simulations and strategic decision-making exercises for practical application
                        </p>
                      </div>
                    </div>
                    
                    <div className="flex items-start gap-4 pb-6 border-b border-gray-100 last:border-b-0 last:pb-0">
                      <div className="w-2 h-2 rounded-full bg-[#04045B] mt-2 flex-shrink-0"></div>
                      <div className="flex-1">
                        <h5 className="text-body font-semibold mb-2 text-[#26231A]">Executive Coaching</h5>
                        <p className="text-small text-[#6F6F6F] leading-relaxed">
                          Individual coaching sessions with experienced executive coaches for personalized development
                        </p>
                      </div>
                    </div>
                    
                    <div className="flex items-start gap-4 pb-6 border-b border-gray-100 last:border-b-0 last:pb-0">
                      <div className="w-2 h-2 rounded-full bg-[#F8C301] mt-2 flex-shrink-0"></div>
                      <div className="flex-1">
                        <h5 className="text-body font-semibold mb-2 text-[#26231A]">Impact Measurement</h5>
                        <p className="text-small text-[#6F6F6F] leading-relaxed">
                          Ongoing assessment and measurement of leadership effectiveness and business impact
                        </p>
                      </div>
                    </div>
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>
      </section>

      {/* 5. Sample Program Format */}
      <section className="py-24 lg:py-32" style={{ backgroundColor: '#FFFFFF' }}>
        <div className="section-margin-x">
          <div className="max-w-6xl mx-auto">
            <div className="text-center mb-16">
              <BrandedTag text="Sample Program Format" />
              <h2 className="text-h2 mb-8">12-Month Executive Development Journey</h2>
              <p className="text-body-lg text-muted max-w-3xl mx-auto">
                A comprehensive 3-phase program designed to transform executives into visionary leaders.
              </p>
            </div>

            <div className="space-y-8">
              {programTimeline.map((phase, index) => (
                <Card 
                  key={index}
                  className="border border-gray-200 hover:border-primary/20 transition-all duration-300 hover:shadow-lg"
                >
                  <CardContent className="p-0">
                    <div
                      className="flex items-center justify-between p-6 cursor-pointer"
                      onClick={() => setExpandedPhase(expandedPhase === index ? null : index)}
                    >
                      <div className="flex items-start gap-4 flex-1">
                        <div 
                          className="w-12 h-12 rounded-xl flex items-center justify-center flex-shrink-0"
                          style={{ backgroundColor: 'var(--color-primary)' }}
                        >
                          <span className="text-white font-semibold">{index + 1}</span>
                        </div>
                        <div className="flex-1">
                          <h3 className="text-h4 mb-2">{phase.phase}</h3>
                          <div className="flex items-center gap-2 mb-3">
                            <Clock className="w-4 h-4 text-muted" />
                            <span className="text-small text-muted">{phase.duration}</span>
                          </div>
                        </div>
                      </div>
                      <div className="ml-4">
                        {expandedPhase === index ? (
                          <ChevronUp className="w-5 h-5 text-muted" />
                        ) : (
                          <ChevronDown className="w-5 h-5 text-muted" />
                        )}
                      </div>
                    </div>

                    {expandedPhase === index && (
                      <div className="px-6 pb-6 border-t border-gray-100">
                        <div className="pt-6 grid grid-cols-1 lg:grid-cols-2 gap-8">
                          <div>
                            <h4 className="text-h4 mb-4">Key Activities</h4>
                            <ul className="space-y-3">
                              {phase.activities.map((activity, activityIndex) => (
                                <li key={activityIndex} className="flex items-start gap-3">
                                  <CheckCircle className="w-4 h-4 text-primary flex-shrink-0 mt-1" />
                                  <span className="text-body text-muted">{activity}</span>
                                </li>
                              ))}
                            </ul>
                          </div>
                          <div>
                            <h4 className="text-h4 mb-4">Deliverables & Outcomes</h4>
                            <ul className="space-y-3">
                              {phase.deliverables.map((deliverable, deliverableIndex) => (
                                <li key={deliverableIndex} className="flex items-start gap-3">
                                  <Star className="w-4 h-4 text-accent flex-shrink-0 mt-1" />
                                  <span className="text-body text-muted">{deliverable}</span>
                                </li>
                              ))}
                            </ul>
                          </div>
                        </div>
                      </div>
                    )}
                  </CardContent>
                </Card>
              ))}
            </div>
          </div>
        </div>
      </section>

      {/* 6. Impact You Can Expect */}
      <section className="py-24 lg:py-32" style={{ backgroundColor: '#F9F9F9' }}>
        <div className="section-margin-x">
          <div className="max-w-6xl mx-auto">
            <div className="text-center mb-16">
              <BrandedTag text="Impact You Can Expect" />
              <h2 className="text-h2 mb-8">Measurable Leadership Outcomes</h2>
              <p className="text-body-lg text-muted max-w-3xl mx-auto">
                Organizations typically see significant improvements in leadership effectiveness, strategic execution, and business performance.
              </p>
            </div>

            {/* Outcomes Grid */}
            <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-8">
              {expectedOutcomes.map((outcome, index) => (
                <Card key={index} className="text-center bg-white hover:shadow-lg transition-all duration-300">
                  <CardContent className="p-8">
                    <div 
                      className="w-16 h-16 rounded-2xl flex items-center justify-center mx-auto mb-6"
                      style={{ backgroundColor: 'var(--color-primary)' }}
                    >
                      <outcome.icon className="w-8 h-8 text-white" />
                    </div>
                    <div className="text-5xl font-medium mb-4" style={{ color: 'var(--color-primary)' }}>
                      {outcome.metric}
                    </div>
                    <p className="text-body text-muted mb-2">{outcome.description}</p>
                    <p className="text-small text-primary font-medium">{outcome.category}</p>
                  </CardContent>
                </Card>
              ))}
            </div>

            <div className="mt-16 bg-white p-8 rounded-2xl shadow-lg">
              <h3 className="text-h3 mb-6 text-center">Additional Strategic Benefits</h3>
              <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6">
                <div className="text-center">
                  <Brain className="w-8 h-8 text-primary mx-auto mb-3" />
                  <h4 className="text-h4 mb-2">Strategic Thinking</h4>
                  <p className="text-small text-muted">Enhanced ability to navigate complex business challenges</p>
                </div>
                <div className="text-center">
                  <Network className="w-8 h-8 text-primary mx-auto mb-3" />
                  <h4 className="text-h4 mb-2">Stakeholder Influence</h4>
                  <p className="text-small text-muted">Improved ability to influence and engage key stakeholders</p>
                </div>
                <div className="text-center">
                  <Globe className="w-8 h-8 text-primary mx-auto mb-3" />
                  <h4 className="text-h4 mb-2">Organizational Impact</h4>
                  <p className="text-small text-muted">Measurable improvements in business results and performance</p>
                </div>
              </div>
            </div>
          </div>
        </div>
      </section>

      {/* 7. Client Examples / Testimonials - Hero Section Design */}
      <section 
        className="relative py-20 flex items-center"
        style={{ backgroundColor: '#F7F7FD' }}
      >
        <div className="w-full section-margin-x">
          {/* Branded Tag */}
          <div className="flex justify-center mb-8">
            <div className="inline-flex items-center gap-3 bg-[rgba(248,195,1,0.1)] px-4 py-2 rounded-lg">
              <div className="w-[7px] h-[7px] bg-[#f8c301] rounded-full" />
              <span className="text-[#26231a] text-base uppercase tracking-wider font-light">
                SUCCESS STORIES
              </span>
            </div>
          </div>

          {/* Main heading */}
          <h2 className="text-h2 text-center mb-6 text-[#26231A]">
            What Our Leaders Say
          </h2>

          {/* Subtitle */}
          <p className="text-center text-[#6F6F6F] text-lg max-w-2xl mx-auto mb-12">
            Hear from executives and managers who have transformed their leadership approach through our comprehensive development programs.
          </p>

          {/* Navigation Controls */}
          <div className="flex justify-end mb-6">
            <div className="flex gap-2">
              <button 
                className="w-12 h-12 rounded-full border-2 border-[#E5E7EB] bg-white flex items-center justify-center hover:border-[#04045B] hover:bg-[#04045B] hover:text-white transition-all duration-300"
                onClick={() => {
                  const container = document.getElementById('testimonials-container');
                  if (container) {
                    container.scrollBy({ left: -400, behavior: 'smooth' });
                  }
                }}
              >
                <ArrowLeft className="w-5 h-5" />
              </button>
              <button 
                className="w-12 h-12 rounded-full border-2 border-[#E5E7EB] bg-white flex items-center justify-center hover:border-[#04045B] hover:bg-[#04045B] hover:text-white transition-all duration-300"
                onClick={() => {
                  const container = document.getElementById('testimonials-container');
                  if (container) {
                    container.scrollBy({ left: 400, behavior: 'smooth' });
                  }
                }}
              >
                <ArrowRight className="w-5 h-5" />
              </button>
            </div>
          </div>

          {/* Testimonials Carousel */}
          <div 
            id="testimonials-container"
            className="flex gap-6 overflow-x-auto scrollbar-hide pb-4"
            style={{ scrollSnapType: 'x mandatory' }}
          >
            {/* Testimonial Card 1 */}
            <div className="flex-shrink-0 w-[380px] bg-white rounded-xl shadow-lg overflow-hidden" style={{ scrollSnapAlign: 'start' }}>
              <div className="relative h-48 bg-gradient-to-br from-[#04045B] to-[#030359]">
                <div className="absolute top-4 left-4 bg-[#04045B] text-white px-2 py-1 rounded text-xs font-medium">
                  VIDEO
                </div>
                <div className="absolute inset-0 flex items-center justify-center">
                  <div className="w-16 h-16 bg-white/90 rounded-full flex items-center justify-center">
                    <ArrowRight className="w-8 h-8 text-[#04045B] ml-1" />
                  </div>
                </div>
                <div className="absolute bottom-4 left-4 flex items-center gap-3">
                  <ImageWithFallback
                    src="https://images.unsplash.com/photo-1560472354-b33ff0c44a43?w=100&h=100&fit=crop&crop=face"
                    alt="David Thompson"
                    className="w-12 h-12 rounded-full border-2 border-white"
                  />
                  <div>
                    <div className="text-white font-semibold text-sm">David Thompson</div>
                    <div className="text-white/80 text-xs">Senior VP</div>
                    <div className="text-white/60 text-xs">Enterprise Solutions</div>
                  </div>
                </div>
                <div className="absolute bottom-4 right-4 flex gap-1">
                  {[...Array(5)].map((_, i) => (
                    <Star key={i} className="w-4 h-4 fill-[#F8C301] text-[#F8C301]" />
                  ))}
                </div>
              </div>
              <div className="p-6">
                <p className="text-[#26231A] text-sm leading-relaxed">
                  The personalized coaching and development programs have been game-changing for our organization's leadership pipeline and succession planning initiatives.
                </p>
              </div>
            </div>

            {/* Testimonial Card 2 */}
            <div className="flex-shrink-0 w-[380px] bg-white rounded-xl shadow-lg overflow-hidden" style={{ scrollSnapAlign: 'start' }}>
              <div className="relative h-48">
                <ImageWithFallback
                  src="https://images.unsplash.com/photo-1522071820081-009f0129c71c?w=380&h=192&fit=crop"
                  alt="Team meeting"
                  className="w-full h-full object-cover"
                />
                <div className="absolute top-4 left-4 bg-[#04045B] text-white px-2 py-1 rounded text-xs font-medium">
                  VIDEO
                </div>
                <div className="absolute inset-0 flex items-center justify-center">
                  <div className="w-16 h-16 bg-white/90 rounded-full flex items-center justify-center">
                    <ArrowRight className="w-8 h-8 text-[#04045B] ml-1" />
                  </div>
                </div>
                <div className="absolute bottom-4 left-4 flex items-center gap-3">
                  <ImageWithFallback
                    src="https://images.unsplash.com/photo-1580489944761-15a19d654956?w=100&h=100&fit=crop&crop=face"
                    alt="Lisa Wang"
                    className="w-12 h-12 rounded-full border-2 border-white"
                  />
                  <div>
                    <div className="text-white font-semibold text-sm">Lisa Wang</div>
                    <div className="text-white/80 text-xs">Product Manager</div>
                    <div className="text-white/60 text-xs">Digital Innovation</div>
                  </div>
                </div>
                <div className="absolute bottom-4 right-4 flex gap-1">
                  {[...Array(5)].map((_, i) => (
                    <Star key={i} className="w-4 h-4 fill-[#F8C301] text-[#F8C301]" />
                  ))}
                </div>
              </div>
              <div className="p-6">
                <p className="text-[#26231A] text-sm leading-relaxed">
                  The leadership development program fundamentally transformed my approach to strategic leadership. Within 6 months, our strategic execution improved by 65%.
                </p>
              </div>
            </div>

            {/* Testimonial Card 3 */}
            <div className="flex-shrink-0 w-[380px] bg-white rounded-xl shadow-lg overflow-hidden" style={{ scrollSnapAlign: 'start' }}>
              <div className="relative h-48 bg-gradient-to-br from-[#04045B] to-[#030359]">
                <div className="absolute top-4 left-4 bg-[#04045B] text-white px-2 py-1 rounded text-xs font-medium">
                  VIDEO
                </div>
                <div className="absolute inset-0 flex items-center justify-center">
                  <div className="w-16 h-16 bg-white/90 rounded-full flex items-center justify-center">
                    <ArrowRight className="w-8 h-8 text-[#04045B] ml-1" />
                  </div>
                </div>
                <div className="absolute bottom-4 left-4 flex items-center gap-3">
                  <ImageWithFallback
                    src="https://images.unsplash.com/photo-1507003211169-0a1dd7228f2d?w=100&h=100&fit=crop&crop=face"
                    alt="Robert Kim"
                    className="w-12 h-12 rounded-full border-2 border-white"
                  />
                  <div>
                    <div className="text-white font-semibold text-sm">Robert Kim</div>
                    <div className="text-white/80 text-xs">Regional Director</div>
                    <div className="text-white/60 text-xs">Global Corp</div>
                  </div>
                </div>
                <div className="absolute bottom-4 right-4 flex gap-1">
                  {[...Array(5)].map((_, i) => (
                    <Star key={i} className="w-4 h-4 fill-[#F8C301] text-[#F8C301]" />
                  ))}
                </div>
              </div>
              <div className="p-6">
                <p className="text-[#26231A] text-sm leading-relaxed">
                  The leadership development programs provided by KLC have been instrumental in building a more cohesive and effective leadership team across our organization.
                </p>
              </div>
            </div>

            {/* Testimonial Card 4 */}
            <div className="flex-shrink-0 w-[380px] bg-white rounded-xl shadow-lg overflow-hidden" style={{ scrollSnapAlign: 'start' }}>
              <div className="relative h-48">
                <ImageWithFallback
                  src="https://images.unsplash.com/photo-1552664730-d307ca884978?w=380&h=192&fit=crop"
                  alt="Executive meeting"
                  className="w-full h-full object-cover"
                />
                <div className="absolute top-4 left-4 bg-[#04045B] text-white px-2 py-1 rounded text-xs font-medium">
                  VIDEO
                </div>
                <div className="absolute inset-0 flex items-center justify-center">
                  <div className="w-16 h-16 bg-white/90 rounded-full flex items-center justify-center">
                    <ArrowRight className="w-8 h-8 text-[#04045B] ml-1" />
                  </div>
                </div>
                <div className="absolute bottom-4 left-4 flex items-center gap-3">
                  <ImageWithFallback
                    src="https://images.unsplash.com/photo-1573496359142-b8d87734a5a2?w=100&h=100&fit=crop&crop=face"
                    alt="Sarah Chen"
                    className="w-12 h-12 rounded-full border-2 border-white"
                  />
                  <div>
                    <div className="text-white font-semibold text-sm">Sarah Chen</div>
                    <div className="text-white/80 text-xs">Chief Executive Officer</div>
                    <div className="text-white/60 text-xs">TechForward Solutions</div>
                  </div>
                </div>
                <div className="absolute bottom-4 right-4 flex gap-1">
                  {[...Array(5)].map((_, i) => (
                    <Star key={i} className="w-4 h-4 fill-[#F8C301] text-[#F8C301]" />
                  ))}
                </div>
              </div>
              <div className="p-6">
                <p className="text-[#26231A] text-sm leading-relaxed">
                  KLC's leadership development programs have completely changed how we approach team building and strategic planning. The results speak for themselves.
                </p>
              </div>
            </div>
          </div>
        </div>
      </section>

      {/* 8. CTA Section - Hero Section Design */}
      <section className="relative h-[700px] overflow-hidden">
        {/* Background Image */}
        <div className="absolute inset-0">
          <ImageWithFallback
            src="https://images.unsplash.com/photo-1552664730-d307ca884978?w=2940&h=1960&fit=crop"
            alt="Professional team collaborating in modern office"
            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-brand-primary)' }}
          >
            {/* Branded Tag */}
            <BrandedTag text="Next Steps" variant="white" />

            {/* Main Headline */}
            <h2 className="text-h2-white mb-8">
              Ready to transform your leadership? 
              <span 
                className="italic"
                style={{ color: 'var(--color-brand-accent)' }}
              >
                {" "}Get in touch{" "}
              </span>
              to drive exceptional strategic outcomes.
            </h2>

            {/* CTA Button */}
            <StandardCTAButton 
              text="Schedule a Leadership Consultation"
              onClick={() => navigateTo('/contact?topic=leadership-development')}
              ariaLabel="Schedule a leadership development consultation"
            />

            {/* Supporting Text */}
            <p className="text-body-white mt-6 opacity-90">
              Connect with our leadership development experts to discuss building visionary leadership capability in your organization.
            </p>
          </div>
        </div>
      </section>
    </div>
  );
}