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';
import { TestimonialsSection } from '../TestimonialsSection';

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 */}
      <TestimonialsSection
        title="What Our Leaders Say"
        subtitle="Hear from executives and managers who have transformed their leadership approach through our comprehensive development programs."
        tagText="SUCCESS STORIES"
      />

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