import React, { useEffect, useState } from 'react';
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,
  Building,
  Layers,
  UserCheck,
  Clock,
  MessageCircle,
  Heart
} from 'lucide-react';
import { Button } from '../ui/button';
import { navigateTo } from '../Router';
import { PrimaryCTAButton } from '../PrimaryCTAButton';
import { BrandedTag } from '../about/BrandedTag';
import { Card, CardContent } from '../ui/card';
import { ImageWithFallback } from '../figma/ImageWithFallback';
import { StandardCTAButton } from '../StandardCTAButton';
import { TestimonialsSection } from '../TestimonialsSection';

const targetAudience = [
  {
    title: "CHROs & Talent Leaders",
    description: "Senior HR executives responsible for leadership development and succession planning across the organization",
    icon: Users,
    challenges: ["Succession gaps", "Leadership bench strength", "Talent pipeline visibility", "Development ROI measurement"]
  },
  {
    title: "Business Leaders & CEOs",
    description: "Senior executives who need to ensure leadership continuity and build organizational capability",
    icon: Crown,
    challenges: ["Leadership continuity risk", "External hiring dependency", "Leadership quality consistency", "Succession readiness"]
  },
  {
    title: "Learning & Development Teams",
    description: "L&D professionals tasked with building comprehensive leadership development ecosystems",
    icon: Building,
    challenges: ["Program effectiveness", "Multi-level coordination", "Resource optimization", "Impact demonstration"]
  }
];

const useCases = [
  {
    title: "Succession Gap Crisis",
    description: "When critical leadership positions lack ready successors or pipeline depth",
    icon: Target,
    scenario: "More than 40% of key positions have no identified successors"
  },
  {
    title: "External Hiring Dependency",
    description: "When organizations rely heavily on external recruitment for leadership roles",
    icon: Building,
    scenario: "75%+ of leadership roles filled externally in the past 2 years"
  },
  {
    title: "Leadership Quality Inconsistency",
    description: "When leadership effectiveness varies significantly across levels and functions",
    icon: BarChart3,
    scenario: "Leadership effectiveness scores below 70% or high variation"
  },
  {
    title: "Talent Retention Issues",
    description: "When high-potential employees leave due to lack of development opportunities",
    icon: Users2,
    scenario: "High-potential talent turnover above 15% annually"
  }
];

const programTimeline = [
  {
    phase: "Phase 1: Assessment & Pipeline Mapping",
    duration: "Months 1-3",
    activities: ["Leadership assessment across levels", "Succession gap analysis", "High-potential identification", "Pipeline architecture design"],
    deliverables: ["Leadership capability assessment", "Succession readiness report", "Pipeline development strategy", "Individual development plans"]
  },
  {
    phase: "Phase 2: Multi-Level Development",
    duration: "Months 4-12",
    activities: ["Tier-specific development programs", "Cross-functional assignments", "Mentoring relationships", "Leadership simulations"],
    deliverables: ["Enhanced leadership capabilities", "Succession readiness improvement", "Leadership network expansion", "Real-world application projects"]
  },
  {
    phase: "Phase 3: Integration & Sustainability",
    duration: "Months 13-18",
    activities: ["Succession planning integration", "Leadership transitions", "Performance measurement", "Continuous pipeline refresh"],
    deliverables: ["Sustainable pipeline system", "Succession-ready candidates", "Leadership transition success", "Pipeline metrics dashboard"]
  }
];

const expectedOutcomes = [
  {
    metric: "85%",
    description: "Of participants promoted within 18 months of program completion",
    icon: TrendingUp,
    category: "Career Advancement"
  },
  {
    metric: "75%",
    description: "Reduction in external leadership hiring dependency",
    icon: Building,
    category: "Internal Succession"
  },
  {
    metric: "92%",
    description: "Improvement in leadership readiness scores across pipeline",
    icon: Target,
    category: "Leadership Quality"
  },
  {
    metric: "3.2x",
    description: "Faster time-to-productivity for internally developed leaders",
    icon: Zap,
    category: "Performance Impact"
  }
];

// Pipeline Development Testimonials Data
const pipelineTestimonials = [
  {
    id: 1,
    quote: "Our Leadership Pipeline Development program transformed our succession planning. Within 18 months, we went from having successors for only 30% of key positions to 85% succession readiness. Most importantly, we reduced external leadership hiring by 75%.",
    name: "Sarah Williams",
    title: "VP Human Resources",
    company: "Global Manufacturing Company",
    image: "https://images.unsplash.com/photo-1580489944761-15a19d654956?w=600&h=800&fit=crop&crop=face",
    hasVideo: true
  },
  {
    id: 2,
    quote: "The systematic approach to pipeline development gave us complete visibility into our leadership depth. We now have ready successors for 92% of critical positions and our internal promotion rate increased by 60%. The ROI has been exceptional.",
    name: "Michael Chen",
    title: "Chief Operating Officer",
    company: "TechForward Solutions",
    image: "https://images.unsplash.com/photo-1560472354-b33ff0c44a43?w=600&h=800&fit=crop&crop=face",
    hasVideo: true
  },
  {
    id: 3,
    quote: "KLC's pipeline framework revolutionized how we identify and develop future leaders. The comprehensive assessment and development pathways have built unprecedented leadership depth across all business units.",
    name: "Jennifer Rodriguez",
    title: "Chief People Officer",
    company: "Innovation Dynamics Inc",
    image: "https://images.unsplash.com/photo-1573496359142-b8d87734a5a2?w=600&h=800&fit=crop&crop=face",
    hasVideo: false
  },
  {
    id: 4,
    quote: "The pipeline development process helped us reduce critical role vacancy time by 70% and improved leadership quality scores across all levels. Our board confidence in succession planning has never been higher.",
    name: "David Park",
    title: "Senior Vice President",
    company: "Financial Services Corp",
    image: "https://images.unsplash.com/photo-1507003211169-0a1dd7228f2d?w=600&h=800&fit=crop&crop=face",
    hasVideo: true
  },
  {
    id: 5,
    quote: "Working with KLC transformed our entire approach to leadership development. We now have a robust pipeline that consistently produces high-quality leaders who drive business results and cultural transformation.",
    name: "Lisa Thompson",
    title: "Executive Director",
    company: "Healthcare Solutions Group",
    image: "https://images.unsplash.com/photo-1494790108755-2616b612b647?w=600&h=800&fit=crop&crop=face",
    hasVideo: false
  }
];

export function LeadershipPipelineDevelopment() {
  const [currentTestimonial, setCurrentTestimonial] = useState(1);
  const currentTestimonialData = pipelineTestimonials.find(t => t.id === currentTestimonial) || pipelineTestimonials[0];
  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-1600880292203-757bb62b4baf?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 Pipeline Development
                </h1>
              </div>

              <p className="text-body-lg-white mb-8 max-w-3xl">
                <strong>Build sustainable leadership pipelines that eliminate succession gaps and reduce external hiring by 75%.</strong>
              </p>

              <div className="flex justify-start">
                <PrimaryCTAButton
                  text="Book a Consultation"
                  onClick={() => navigateTo('/contact?topic=leadership-pipeline')}
                  ariaLabel="Book a consultation for leadership pipeline 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]">Comprehensive Leadership Pipeline System</h2>
                <div className="max-w-4xl mx-auto space-y-6">
                  <p className="text-body-lg text-[#6F6F6F] leading-relaxed">
                    Leadership Pipeline Development is a systematic approach to building sustainable leadership capability across all organizational levels. Our methodology identifies, develops, and transitions high-potential talent through structured programs that create ready-now successors for critical roles.
                  </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> Most organizations face succession gaps where 40%+ of key positions lack identified successors, leading to costly external hiring, leadership disruption, and competitive disadvantage.
                    </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' }}
                    >
                      <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">
                      Multi-Level Pipeline
                    </h4>
                    <p className="text-body text-[#6F6F6F] leading-relaxed">
                      Systematic leadership development across all organizational tiers with clear progression pathways
                    </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">
                      Succession Readiness
                    </h4>
                    <p className="text-body text-[#6F6F6F] leading-relaxed">
                      Creates identified, development-ready successors for all critical leadership positions
                    </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' }}
                    >
                      <Building className="w-8 h-8 text-white" />
                    </div>
                    <h4 className="text-h4 mb-4 text-[#26231A] group-hover:text-[#04045B] transition-colors duration-300">
                      75% Hiring Reduction
                    </h4>
                    <p className="text-body text-[#6F6F6F] leading-relaxed">
                      Significantly reduces dependency on external leadership hiring through internal capability building
                    </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 organizations and leaders responsible for building sustainable leadership capability and succession readiness.
              </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 Pipeline Development</h2>
              <p className="text-body-lg text-muted max-w-2xl mx-auto">
                Ideal for organizations facing leadership gaps and succession challenges.
              </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]">Systematic Pipeline Development Framework</h2>
                <p className="text-body-lg text-[#6F6F6F] max-w-3xl mx-auto">
                  Our proven methodology combines assessment, development planning, structured learning, and succession integration.
                </p>
              </div>

              {/* Clean Grid Layout */}
              {/* 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">
                          <Layers className="w-6 h-6 text-white" />
                        </div>
                        <h3 className="text-h4 text-[#26231A] mb-3">Frameworks Used</h3>
                        <p className="text-body text-[#6F6F6F] mb-4">
                          Establish competency models and leadership progression pathways
                        </p>
                        <div className="space-y-2">
                          <div className="text-small text-[#6F6F6F] bg-gray-50 px-3 py-2 rounded-lg">
                            Competency Models
                          </div>
                          <div className="text-small text-[#6F6F6F] bg-gray-50 px-3 py-2 rounded-lg">
                            Leadership Levels
                          </div>
                          <div className="text-small text-[#6F6F6F] bg-gray-50 px-3 py-2 rounded-lg">
                            Career Pathways
                          </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">
                          Apply evidence-based learning approaches for maximum impact
                        </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 options to suit organizational needs and schedules
                        </p>
                        <div className="space-y-2">
                          <div className="text-small text-[#6F6F6F] bg-gray-50 px-3 py-2 rounded-lg">
                            Workshops
                          </div>
                          <div className="text-small text-[#6F6F6F] bg-gray-50 px-3 py-2 rounded-lg">
                            Online Modules
                          </div>
                          <div className="text-small text-[#6F6F6F] bg-gray-50 px-3 py-2 rounded-lg">
                            Cohort Programs
                          </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 methods to measure progress and potential
                        </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">
                            Psychometrics
                          </div>
                          <div className="text-small text-[#6F6F6F] bg-gray-50 px-3 py-2 rounded-lg">
                            Simulations
                          </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">
                          <Heart 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 support throughout the development journey
                        </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">
                            Mentoring
                          </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">
                          A systematic, measurable leadership pipeline that accelerates talent development and succession readiness.
                        </p>
                        <div className="flex items-center gap-2 text-[#F8C301]">
                          <CheckCircle className="w-6 h-6" />
                          <span className="text-body text-white">Proven ROI on Leadership Investment</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">
                        <Layers className="w-6 h-6 text-white" />
                      </div>
                      <h3 className="text-h4 text-[#26231A] mb-3">Frameworks Used</h3>
                      <p className="text-body text-[#6F6F6F] mb-4">
                        Establish competency models and leadership progression pathways
                      </p>
                      <div className="space-y-2">
                        <div className="text-small text-[#6F6F6F] bg-gray-50 px-3 py-2 rounded-lg">
                          Competency Models
                        </div>
                        <div className="text-small text-[#6F6F6F] bg-gray-50 px-3 py-2 rounded-lg">
                          Leadership Levels
                        </div>
                        <div className="text-small text-[#6F6F6F] bg-gray-50 px-3 py-2 rounded-lg">
                          Career Pathways
                        </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">
                        Apply evidence-based learning approaches for maximum impact
                      </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 options to suit organizational needs and schedules
                      </p>
                      <div className="space-y-2">
                        <div className="text-small text-[#6F6F6F] bg-gray-50 px-3 py-2 rounded-lg">
                          Workshops
                        </div>
                        <div className="text-small text-[#6F6F6F] bg-gray-50 px-3 py-2 rounded-lg">
                          Online Modules
                        </div>
                        <div className="text-small text-[#6F6F6F] bg-gray-50 px-3 py-2 rounded-lg">
                          Cohort Programs
                        </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 methods to measure progress and potential
                      </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">
                          Psychometrics
                        </div>
                        <div className="text-small text-[#6F6F6F] bg-gray-50 px-3 py-2 rounded-lg">
                          Simulations
                        </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">
                        <Heart 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 support throughout the development journey
                      </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">
                          Mentoring
                        </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">
                      A systematic, measurable leadership pipeline that accelerates talent development and succession readiness.
                    </p>
                    <div className="flex items-center gap-2 text-[#F8C301]">
                      <CheckCircle className="w-6 h-6" />
                      <span className="text-body text-white">Proven ROI on Leadership Investment</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">85%</div>
                    <p className="text-body text-[#6F6F6F]">Promotion Readiness Acceleration</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">92%</div>
                    <p className="text-body text-[#6F6F6F]">Talent Retention Improvement</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">78%</div>
                    <p className="text-body text-[#6F6F6F]">Succession Planning Effectiveness</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">18-Month Pipeline Development Journey</h2>
              <p className="text-body-lg text-muted max-w-3xl mx-auto">
                A comprehensive 3-phase program designed to build sustainable leadership pipelines across organizational levels.
              </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 Pipeline Outcomes</h2>
              <p className="text-body-lg text-muted max-w-3xl mx-auto">
                Organizations typically see significant improvements in succession readiness, internal promotion rates, and leadership quality.
              </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 Pipeline Benefits</h3>
              <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6">
                <div className="text-center">
                  <Crown className="w-8 h-8 text-primary mx-auto mb-3" />
                  <h4 className="text-h4 mb-2">Leadership Quality</h4>
                  <p className="text-small text-muted">Consistent leadership excellence across all organizational levels</p>
                </div>
                <div className="text-center">
                  <Users2 className="w-8 h-8 text-primary mx-auto mb-3" />
                  <h4 className="text-h4 mb-2">Talent Retention</h4>
                  <p className="text-small text-muted">Higher retention of high-potential employees through development</p>
                </div>
                <div className="text-center">
                  <Compass className="w-8 h-8 text-primary mx-auto mb-3" />
                  <h4 className="text-h4 mb-2">Strategic Alignment</h4>
                  <p className="text-small text-muted">Leadership development aligned with business strategy and goals</p>
                </div>
              </div>
            </div>
          </div>
        </div>
      </section>

      {/* 7. Client Examples / Testimonials - Hero Section Design */}
      <TestimonialsSection
        title="Pipeline Development Success"
        subtitle=""
        tagText="Client 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 build your leadership pipeline?
              <span
                className="italic"
                style={{ color: 'var(--color-brand-accent)' }}
              >
                {" "}Get in touch{" "}
              </span>
              to eliminate succession gaps now.
            </h2>

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

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