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="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>
      </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">
            <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>

              {/* Flowchart Container with Connecting Lines */}
              <div className="relative mb-16 flex flex-col items-center">
                {/* Desktop: Horizontal Flowchart */}
                <div className="hidden lg:block w-full max-w-5xl">
                  <div className="relative">
                    {/* Row 1: Frameworks, Pedagogy, Delivery */}
                    <div className="grid grid-cols-3 gap-8 mb-12 relative w-full">
                      {/* Frameworks */}
                      <div className="bg-white border-2 border-[#04045B] rounded-xl p-6 hover:shadow-lg transition-all duration-300 relative z-10">
                        <div className="w-12 h-12 bg-[#04045B] rounded-lg flex items-center justify-center mb-4">
                          <Lightbulb className="w-6 h-6 text-white" />
                        </div>
                        <h3 className="text-h4 text-[#26231A] mb-3">Strategic Frameworks</h3>
                        <p className="text-body text-[#6F6F6F] mb-4">
                          Executive leadership models and strategic thinking frameworks
                        </p>
                        <div className="space-y-2">
                          <div className="text-small text-[#6F6F6F] bg-gray-50 px-3 py-2 rounded-lg">
                            Leadership Models
                          </div>
                          <div className="text-small text-[#6F6F6F] bg-gray-50 px-3 py-2 rounded-lg">
                            Strategic Thinking
                          </div>
                          <div className="text-small text-[#6F6F6F] bg-gray-50 px-3 py-2 rounded-lg">
                            Vision Creation
                          </div>
                        </div>
                      </div>

                      {/* Arrow 1→2 */}
                      <div className="absolute top-1/2 left-[calc(33.33%-2rem)] -translate-y-1/2 z-0 flex items-center">
                        <div className="w-16 h-0.5 bg-[#F8C301]"></div>
                        <ArrowRight className="w-6 h-6 text-[#F8C301] -ml-1" />
                      </div>

                      {/* Pedagogy */}
                      <div className="bg-white border-2 border-[#F8C301] rounded-xl p-6 hover:shadow-lg transition-all duration-300 relative z-10">
                        <div className="w-12 h-12 bg-[#F8C301] rounded-lg flex items-center justify-center mb-4">
                          <Brain className="w-6 h-6 text-white" />
                        </div>
                        <h3 className="text-h4 text-[#26231A] mb-3">Learning Pedagogy</h3>
                        <p className="text-body text-[#6F6F6F] mb-4">
                          Executive development through experiential and action learning
                        </p>
                        <div className="space-y-2">
                          <div className="text-small text-[#6F6F6F] bg-gray-50 px-3 py-2 rounded-lg">
                            Experiential Learning
                          </div>
                          <div className="text-small text-[#6F6F6F] bg-gray-50 px-3 py-2 rounded-lg">
                            Action Learning
                          </div>
                          <div className="text-small text-[#6F6F6F] bg-gray-50 px-3 py-2 rounded-lg">
                            Peer Learning
                          </div>
                        </div>
                      </div>

                      {/* Arrow 2→3 */}
                      <div className="absolute top-1/2 left-[calc(66.66%-2rem)] -translate-y-1/2 z-0 flex items-center">
                        <div className="w-16 h-0.5 bg-[#04045B]"></div>
                        <ArrowRight className="w-6 h-6 text-[#04045B] -ml-1" />
                      </div>

                      {/* Delivery Modes */}
                      <div className="bg-white border-2 border-[#04045B] rounded-xl p-6 hover:shadow-lg transition-all duration-300 relative z-10">
                        <div className="w-12 h-12 bg-[#04045B] rounded-lg flex items-center justify-center mb-4">
                          <Settings className="w-6 h-6 text-white" />
                        </div>
                        <h3 className="text-h4 text-[#26231A] mb-3">Delivery Modes</h3>
                        <p className="text-body text-[#6F6F6F] mb-4">
                          Flexible formats designed for executive schedules
                        </p>
                        <div className="space-y-2">
                          <div className="text-small text-[#6F6F6F] bg-gray-50 px-3 py-2 rounded-lg">
                            Executive Workshops
                          </div>
                          <div className="text-small text-[#6F6F6F] bg-gray-50 px-3 py-2 rounded-lg">
                            Leadership Simulations
                          </div>
                          <div className="text-small text-[#6F6F6F] bg-gray-50 px-3 py-2 rounded-lg">
                            Strategic Projects
                          </div>
                        </div>
                      </div>
                    </div>

                    {/* Vertical Connector - Center Flow Down */}
                    <div className="flex justify-center mb-6">
                      <div className="flex flex-col items-center">
                        <div className="w-0.5 h-12 bg-[#F8C301]"></div>
                        <ArrowRight className="w-6 h-6 text-[#F8C301] rotate-90" />
                      </div>
                    </div>

                    {/* Row 2: Assessment, Coaching */}
                    <div className="grid grid-cols-2 gap-8 w-full max-w-3xl mx-auto mb-12 relative">
                      {/* Assessment Integration */}
                      <div className="bg-white border-2 border-[#F8C301] rounded-xl p-6 hover:shadow-lg transition-all duration-300 relative z-10">
                        <div className="w-12 h-12 bg-[#F8C301] rounded-lg flex items-center justify-center mb-4">
                          <BarChart3 className="w-6 h-6 text-white" />
                        </div>
                        <h3 className="text-h4 text-[#26231A] mb-3">Assessment Integration</h3>
                        <p className="text-body text-[#6F6F6F] mb-4">
                          Comprehensive evaluation to measure executive readiness
                        </p>
                        <div className="space-y-2">
                          <div className="text-small text-[#6F6F6F] bg-gray-50 px-3 py-2 rounded-lg">
                            360° Feedback
                          </div>
                          <div className="text-small text-[#6F6F6F] bg-gray-50 px-3 py-2 rounded-lg">
                            Leadership Assessment
                          </div>
                          <div className="text-small text-[#6F6F6F] bg-gray-50 px-3 py-2 rounded-lg">
                            Impact Measurement
                          </div>
                        </div>
                      </div>

                      {/* Arrow 4→5 */}
                      <div className="absolute top-1/2 left-1/2 -translate-x-1/2 -translate-y-1/2 z-0 flex items-center">
                        <div className="w-16 h-0.5 bg-[#04045B]"></div>
                        <ArrowRight className="w-6 h-6 text-[#04045B] -ml-1" />
                      </div>

                      {/* Coaching Integration */}
                      <div className="bg-white border-2 border-[#04045B] rounded-xl p-6 hover:shadow-lg transition-all duration-300 relative z-10">
                        <div className="w-12 h-12 bg-[#04045B] rounded-lg flex items-center justify-center mb-4">
                          <UserCheck className="w-6 h-6 text-white" />
                        </div>
                        <h3 className="text-h4 text-[#26231A] mb-3">Coaching Integration</h3>
                        <p className="text-body text-[#6F6F6F] mb-4">
                          Personalized executive coaching throughout development
                        </p>
                        <div className="space-y-2">
                          <div className="text-small text-[#6F6F6F] bg-gray-50 px-3 py-2 rounded-lg">
                            Executive Coaching
                          </div>
                          <div className="text-small text-[#6F6F6F] bg-gray-50 px-3 py-2 rounded-lg">
                            Strategic Advisement
                          </div>
                          <div className="text-small text-[#6F6F6F] bg-gray-50 px-3 py-2 rounded-lg">
                            Peer Coaching
                          </div>
                        </div>
                      </div>
                    </div>

                    {/* Final Vertical Connector - Center Flow Down to Outcome */}
                    <div className="flex justify-center mb-6">
                      <div className="flex flex-col items-center">
                        <div className="w-0.5 h-12 bg-[#04045B]"></div>
                        <ArrowRight className="w-6 h-6 text-[#04045B] rotate-90" />
                      </div>
                    </div>

                    {/* Row 3: Expected Outcome - Centered */}
                    <div className="flex justify-center w-full">
                      <div className="bg-[#04045B] text-white rounded-xl p-8 w-full max-w-2xl border-4 border-[#F8C301] shadow-xl">
                        <div className="flex items-center gap-3 mb-4">
                          <TrendingUp className="w-10 h-10 text-[#F8C301]" />
                          <h3 className="text-h4 text-white">Expected Outcome</h3>
                        </div>
                        <p className="text-body text-white mb-4">
                          Transformational executive leaders with strategic capability, executive presence, and proven business impact.
                        </p>
                        <div className="flex items-center gap-2 text-[#F8C301]">
                          <CheckCircle className="w-6 h-6" />
                          <span className="text-body text-white">Enhanced Leadership Effectiveness</span>
                        </div>
                      </div>
                    </div>
                  </div>
                </div>

                {/* Tablet & Mobile: Vertical Flowchart */}
                <div className="lg:hidden space-y-8">
                  {/* Frameworks */}
                  <div className="relative">
                    <div className="bg-white border-2 border-[#04045B] rounded-xl p-6 hover:shadow-lg transition-all duration-300">
                      <div className="w-12 h-12 bg-[#04045B] rounded-lg flex items-center justify-center mb-4">
                        <Lightbulb className="w-6 h-6 text-white" />
                      </div>
                      <h3 className="text-h4 text-[#26231A] mb-3">Strategic Frameworks</h3>
                      <p className="text-body text-[#6F6F6F] mb-4">
                        Executive leadership models and strategic thinking frameworks
                      </p>
                      <div className="space-y-2">
                        <div className="text-small text-[#6F6F6F] bg-gray-50 px-3 py-2 rounded-lg">
                          Leadership Models
                        </div>
                        <div className="text-small text-[#6F6F6F] bg-gray-50 px-3 py-2 rounded-lg">
                          Strategic Thinking
                        </div>
                        <div className="text-small text-[#6F6F6F] bg-gray-50 px-3 py-2 rounded-lg">
                          Vision Creation
                        </div>
                      </div>
                    </div>
                    {/* Connector Arrow */}
                    <div className="flex justify-center my-4">
                      <ArrowRight className="w-8 h-8 text-[#F8C301] rotate-90" />
                    </div>
                  </div>

                  {/* Pedagogy */}
                  <div className="relative">
                    <div className="bg-white border-2 border-[#F8C301] rounded-xl p-6 hover:shadow-lg transition-all duration-300">
                      <div className="w-12 h-12 bg-[#F8C301] rounded-lg flex items-center justify-center mb-4">
                        <Brain className="w-6 h-6 text-white" />
                      </div>
                      <h3 className="text-h4 text-[#26231A] mb-3">Learning Pedagogy</h3>
                      <p className="text-body text-[#6F6F6F] mb-4">
                        Executive development through experiential and action learning
                      </p>
                      <div className="space-y-2">
                        <div className="text-small text-[#6F6F6F] bg-gray-50 px-3 py-2 rounded-lg">
                          Experiential Learning
                        </div>
                        <div className="text-small text-[#6F6F6F] bg-gray-50 px-3 py-2 rounded-lg">
                          Action Learning
                        </div>
                        <div className="text-small text-[#6F6F6F] bg-gray-50 px-3 py-2 rounded-lg">
                          Peer Learning
                        </div>
                      </div>
                    </div>
                    {/* Connector Arrow */}
                    <div className="flex justify-center my-4">
                      <ArrowRight className="w-8 h-8 text-[#04045B] rotate-90" />
                    </div>
                  </div>

                  {/* Delivery Modes */}
                  <div className="relative">
                    <div className="bg-white border-2 border-[#04045B] rounded-xl p-6 hover:shadow-lg transition-all duration-300">
                      <div className="w-12 h-12 bg-[#04045B] rounded-lg flex items-center justify-center mb-4">
                        <Settings className="w-6 h-6 text-white" />
                      </div>
                      <h3 className="text-h4 text-[#26231A] mb-3">Delivery Modes</h3>
                      <p className="text-body text-[#6F6F6F] mb-4">
                        Flexible formats designed for executive schedules
                      </p>
                      <div className="space-y-2">
                        <div className="text-small text-[#6F6F6F] bg-gray-50 px-3 py-2 rounded-lg">
                          Executive Workshops
                        </div>
                        <div className="text-small text-[#6F6F6F] bg-gray-50 px-3 py-2 rounded-lg">
                          Leadership Simulations
                        </div>
                        <div className="text-small text-[#6F6F6F] bg-gray-50 px-3 py-2 rounded-lg">
                          Strategic Projects
                        </div>
                      </div>
                    </div>
                    {/* Connector Arrow */}
                    <div className="flex justify-center my-4">
                      <ArrowRight className="w-8 h-8 text-[#F8C301] rotate-90" />
                    </div>
                  </div>

                  {/* Assessment Integration */}
                  <div className="relative">
                    <div className="bg-white border-2 border-[#F8C301] rounded-xl p-6 hover:shadow-lg transition-all duration-300">
                      <div className="w-12 h-12 bg-[#F8C301] rounded-lg flex items-center justify-center mb-4">
                        <BarChart3 className="w-6 h-6 text-white" />
                      </div>
                      <h3 className="text-h4 text-[#26231A] mb-3">Assessment Integration</h3>
                      <p className="text-body text-[#6F6F6F] mb-4">
                        Comprehensive evaluation to measure executive readiness
                      </p>
                      <div className="space-y-2">
                        <div className="text-small text-[#6F6F6F] bg-gray-50 px-3 py-2 rounded-lg">
                          360° Feedback
                        </div>
                        <div className="text-small text-[#6F6F6F] bg-gray-50 px-3 py-2 rounded-lg">
                          Leadership Assessment
                        </div>
                        <div className="text-small text-[#6F6F6F] bg-gray-50 px-3 py-2 rounded-lg">
                          Impact Measurement
                        </div>
                      </div>
                    </div>
                    {/* Connector Arrow */}
                    <div className="flex justify-center my-4">
                      <ArrowRight className="w-8 h-8 text-[#04045B] rotate-90" />
                    </div>
                  </div>

                  {/* Coaching Integration */}
                  <div className="relative">
                    <div className="bg-white border-2 border-[#04045B] rounded-xl p-6 hover:shadow-lg transition-all duration-300">
                      <div className="w-12 h-12 bg-[#04045B] rounded-lg flex items-center justify-center mb-4">
                        <UserCheck className="w-6 h-6 text-white" />
                      </div>
                      <h3 className="text-h4 text-[#26231A] mb-3">Coaching Integration</h3>
                      <p className="text-body text-[#6F6F6F] mb-4">
                        Personalized executive coaching throughout development
                      </p>
                      <div className="space-y-2">
                        <div className="text-small text-[#6F6F6F] bg-gray-50 px-3 py-2 rounded-lg">
                          Executive Coaching
                        </div>
                        <div className="text-small text-[#6F6F6F] bg-gray-50 px-3 py-2 rounded-lg">
                          Strategic Advisement
                        </div>
                        <div className="text-small text-[#6F6F6F] bg-gray-50 px-3 py-2 rounded-lg">
                          Peer Coaching
                        </div>
                      </div>
                    </div>
                    {/* Connector Arrow */}
                    <div className="flex justify-center my-4">
                      <ArrowRight className="w-8 h-8 text-[#F8C301] rotate-90" />
                    </div>
                  </div>

                  {/* Expected Outcome */}
                  <div className="bg-[#04045B] text-white rounded-xl p-8 border-4 border-[#F8C301] shadow-xl">
                    <div className="flex items-center gap-3 mb-4">
                      <TrendingUp className="w-10 h-10 text-[#F8C301]" />
                      <h3 className="text-h4 text-white">Expected Outcome</h3>
                    </div>
                    <p className="text-body text-white mb-4">
                      Transformational executive leaders with strategic capability, executive presence, and proven business impact.
                    </p>
                    <div className="flex items-center gap-2 text-[#F8C301]">
                      <CheckCircle className="w-6 h-6" />
                      <span className="text-body text-white">Enhanced Leadership Effectiveness</span>
                    </div>
                  </div>
                </div>
              </div>

              {/* Framework Effectiveness */}
              <div className="bg-gray-50 rounded-xl p-8">
                <div className="text-center mb-8">
                  <h3 className="text-h3 text-[#26231A] mb-4">Framework Effectiveness</h3>
                  <p className="text-body text-[#6F6F6F] max-w-2xl mx-auto">
                    Our systematic approach delivers measurable results across key leadership development metrics.
                  </p>
                </div>
                
                <div className="grid grid-cols-1 md:grid-cols-3 gap-6">
                  <div className="text-center bg-white rounded-lg p-6">
                    <div className="w-14 h-14 bg-[#04045B] rounded-lg flex items-center justify-center mx-auto mb-3">
                      <Target className="w-7 h-7 text-white" />
                    </div>
                    <div className="text-h2 text-[#04045B] mb-2">92%</div>
                    <p className="text-body text-[#6F6F6F]">Leadership Effectiveness Increase</p>
                  </div>
                  
                  <div className="text-center bg-white rounded-lg p-6">
                    <div className="w-14 h-14 bg-[#F8C301] rounded-lg flex items-center justify-center mx-auto mb-3">
                      <Users className="w-7 h-7 text-white" />
                    </div>
                    <div className="text-h2 text-[#04045B] mb-2">88%</div>
                    <p className="text-body text-[#6F6F6F]">Executive Presence Enhancement</p>
                  </div>
                  
                  <div className="text-center bg-white rounded-lg p-6">
                    <div className="w-14 h-14 bg-[#04045B] rounded-lg flex items-center justify-center mx-auto mb-3">
                      <TrendingUp className="w-7 h-7 text-white" />
                    </div>
                    <div className="text-h2 text-[#04045B] mb-2">85%</div>
                    <p className="text-body text-[#6F6F6F]">Strategic Impact Improvement</p>
                  </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>
  );
}