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';

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="w-full section-margin-x">
            <div className="max-w-6xl mx-auto">
              <div className="text-center mb-12">
                <BrandedTag text="What Is This Service?" />
                <h2 className="text-h2 mb-8 text-[#26231A]">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>
        </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 section-margin-x">
            <div className="max-w-6xl mx-auto">
              <div className="text-center mb-16">
                <BrandedTag text="Our Approach" />
                <h2 className="text-h2 mb-8 text-[#26231A]">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>

              <div className="grid grid-cols-1 lg:grid-cols-2 gap-16 items-start">
                {/* Left Column - Core Frameworks */}
                <div>
                  <h3 className="text-h3 mb-8 text-[#26231A]">Core Frameworks & Methodologies</h3>
                  <div className="space-y-8">
                    <div className="flex items-start gap-4">
                      <div 
                        className="w-10 h-10 rounded-lg flex items-center justify-center flex-shrink-0"
                        style={{ backgroundColor: '#04045B' }}
                      >
                        <Eye className="w-5 h-5 text-white" />
                      </div>
                      <div className="flex-1">
                        <h4 className="text-h4 mb-3 text-[#26231A]">Talent Assessment & Identification</h4>
                        <p className="text-body text-[#6F6F6F] leading-relaxed">
                          Systematic identification of high-potential talent using validated assessment tools
                        </p>
                      </div>
                    </div>
                    
                    <div className="flex items-start gap-4">
                      <div 
                        className="w-10 h-10 rounded-lg flex items-center justify-center flex-shrink-0"
                        style={{ backgroundColor: '#04045B' }}
                      >
                        <Target className="w-5 h-5 text-white" />
                      </div>
                      <div className="flex-1">
                        <h4 className="text-h4 mb-3 text-[#26231A]">Multi-Level Development Programs</h4>
                        <p className="text-body text-[#6F6F6F] leading-relaxed">
                          Tier-specific programs for emerging leaders, managers, and executives
                        </p>
                      </div>
                    </div>
                    
                    <div className="flex items-start gap-4">
                      <div 
                        className="w-10 h-10 rounded-lg flex items-center justify-center flex-shrink-0"
                        style={{ backgroundColor: '#04045B' }}
                      >
                        <Users className="w-5 h-5 text-white" />
                      </div>
                      <div className="flex-1">
                        <h4 className="text-h4 mb-3 text-[#26231A]">Mentoring & Coaching Integration</h4>
                        <p className="text-body text-[#6F6F6F] leading-relaxed">
                          Comprehensive support through mentoring relationships and executive coaching
                        </p>
                      </div>
                    </div>
                    
                    <div className="flex items-start gap-4">
                      <div 
                        className="w-10 h-10 rounded-lg flex items-center justify-center flex-shrink-0"
                        style={{ backgroundColor: '#04045B' }}
                      >
                        <Building className="w-5 h-5 text-white" />
                      </div>
                      <div className="flex-1">
                        <h4 className="text-h4 mb-3 text-[#26231A]">Succession Planning Integration</h4>
                        <p className="text-body text-[#6F6F6F] leading-relaxed">
                          Direct integration with organizational succession planning and talent management
                        </p>
                      </div>
                    </div>
                  </div>
                </div>

                {/* Right Column - Delivery Modes */}
                <div className="bg-white border border-gray-200 rounded-xl p-8">
                  <h4 className="text-h4 mb-8 text-[#26231A]">Delivery Modes & Support</h4>
                  <div className="space-y-6">
                    <div className="flex items-start gap-4 pb-6 border-b border-gray-100 last:border-b-0 last:pb-0">
                      <div className="w-2 h-2 rounded-full bg-[#04045B] mt-2 flex-shrink-0"></div>
                      <div className="flex-1">
                        <h5 className="text-body font-semibold mb-2 text-[#26231A]">Assessment Centers</h5>
                        <p className="text-small text-[#6F6F6F] leading-relaxed">
                          Comprehensive leadership potential evaluation and 360-degree feedback
                        </p>
                      </div>
                    </div>
                    
                    <div className="flex items-start gap-4 pb-6 border-b border-gray-100 last:border-b-0 last:pb-0">
                      <div className="w-2 h-2 rounded-full bg-[#F8C301] mt-2 flex-shrink-0"></div>
                      <div className="flex-1">
                        <h5 className="text-body font-semibold mb-2 text-[#26231A]">Development Cohorts</h5>
                        <p className="text-small text-[#6F6F6F] leading-relaxed">
                          Structured learning programs with peer networks and group projects
                        </p>
                      </div>
                    </div>
                    
                    <div className="flex items-start gap-4 pb-6 border-b border-gray-100 last:border-b-0 last:pb-0">
                      <div className="w-2 h-2 rounded-full bg-[#04045B] mt-2 flex-shrink-0"></div>
                      <div className="flex-1">
                        <h5 className="text-body font-semibold mb-2 text-[#26231A]">Stretch Assignments</h5>
                        <p className="text-small text-[#6F6F6F] leading-relaxed">
                          Real-world leadership opportunities and cross-functional projects
                        </p>
                      </div>
                    </div>
                    
                    <div className="flex items-start gap-4 pb-6 border-b border-gray-100 last:border-b-0 last:pb-0">
                      <div className="w-2 h-2 rounded-full bg-[#F8C301] mt-2 flex-shrink-0"></div>
                      <div className="flex-1">
                        <h5 className="text-body font-semibold mb-2 text-[#26231A]">Succession Reviews</h5>
                        <p className="text-small text-[#6F6F6F] leading-relaxed">
                          Regular talent reviews and succession readiness assessments
                        </p>
                      </div>
                    </div>
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>
      </section>

      {/* 5. Sample Program Format */}
      <section className="py-24 lg:py-32" style={{ backgroundColor: '#FFFFFF' }}>
        <div className="section-margin-x">
          <div className="max-w-6xl mx-auto">
            <div className="text-center mb-16">
              <BrandedTag text="Sample Program Format" />
              <h2 className="text-h2 mb-8">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 */}
      <section 
        className="relative py-20 flex items-center"
        style={{ backgroundColor: '#F7F7FD' }}
      >
        <div className="w-full section-margin-x">
          {/* Branded Tag */}
          <div className="flex justify-center mb-12">
            <div className="inline-flex items-center gap-3 bg-[rgba(248,195,1,0.1)] px-4 py-2 rounded-lg">
              <div className="w-[7px] h-[7px] bg-[#f8c301] rounded-full" />
              <span className="text-[#26231a] text-lg lg:text-lg md:text-base sm:text-sm uppercase tracking-wider font-light">
                Client Success Stories
              </span>
            </div>
          </div>

          {/* Main heading */}
          <h2 
            className="text-h2 leading-tight mb-8 text-center"
            style={{ color: 'var(--color-brand-primary)' }}
          >
            Pipeline Development Success
          </h2>

          {/* Navigation Controls */}
          <div className="flex justify-end mb-6">
            <div className="flex gap-2">
              <button 
                className="w-12 h-12 rounded-full border-2 border-[#E5E7EB] bg-white flex items-center justify-center hover:border-[#04045B] hover:bg-[#04045B] hover:text-white transition-all duration-300 disabled:opacity-50 disabled:cursor-not-allowed"
                onClick={() => {
                  const currentIndex = pipelineTestimonials.findIndex(t => t.id === currentTestimonial);
                  const prevIndex = currentIndex > 0 ? currentIndex - 1 : pipelineTestimonials.length - 1;
                  setCurrentTestimonial(pipelineTestimonials[prevIndex].id);
                }}
              >
                <ArrowLeft className="w-5 h-5" />
              </button>
              <button 
                className="w-12 h-12 rounded-full border-2 border-[#E5E7EB] bg-white flex items-center justify-center hover:border-[#04045B] hover:bg-[#04045B] hover:text-white transition-all duration-300 disabled:opacity-50 disabled:cursor-not-allowed"
                onClick={() => {
                  const currentIndex = pipelineTestimonials.findIndex(t => t.id === currentTestimonial);
                  const nextIndex = currentIndex < pipelineTestimonials.length - 1 ? currentIndex + 1 : 0;
                  setCurrentTestimonial(pipelineTestimonials[nextIndex].id);
                }}
              >
                <ArrowRight className="w-5 h-5" />
              </button>
            </div>
          </div>

          {/* Split Layout Container with Max Width - Exact Home Page Design */}
          <div className="max-w-5xl mx-auto">
            <div className="flex h-[400px] rounded-2xl overflow-hidden shadow-2xl">
              {/* Left Side - Video Testimonial */}
              <div 
                className="flex-1 relative group cursor-pointer"
                onClick={() => {
                  // Video testimonial click handler
                  console.log('Play video testimonial');
                }}
              >
                <div className="relative w-full h-full overflow-hidden">
                  {/* Video Thumbnail */}
                  <ImageWithFallback
                    src={currentTestimonialData.image}
                    alt={currentTestimonialData.name}
                    className="w-full h-full object-cover transition-transform duration-500 group-hover:scale-105"
                  />
                  
                  {/* Dark overlay on hover */}
                  <div className="absolute inset-0 bg-black/20 opacity-0 group-hover:opacity-100 transition-opacity duration-300" />
                  
                  {/* Centered Play Button Overlay */}
                  {currentTestimonialData.hasVideo && (
                    <div className="absolute inset-0 flex items-center justify-center">
                      <div className="flex items-center justify-center w-16 h-16 bg-white/90 backdrop-blur-sm rounded-full shadow-lg group-hover:scale-110 transition-all duration-300">
                        <ArrowRight 
                          className="w-7 h-7 ml-1 text-blue-600" 
                          fill="currentColor"
                        />
                      </div>
                    </div>
                  )}

                  {/* Watch Video Text */}
                  {currentTestimonialData.hasVideo && (
                    <div className="absolute bottom-4 left-4 text-white">
                      <div className="bg-black/30 backdrop-blur-sm rounded-lg px-3 py-1">
                        <span className="text-xs font-medium">▶ Video</span>
                      </div>
                    </div>
                  )}
                </div>
              </div>

              {/* Right Side - Text Testimonial with White Background */}
              <div 
                className="flex-1 flex items-center justify-center p-8 relative"
                style={{ backgroundColor: 'white' }}
              >
                {/* Large Opening Quotation Mark */}
                <div 
                  className="absolute top-4 left-4 text-3xl opacity-30"
                  style={{ color: 'var(--color-brand-primary)' }}
                >
                  "
                </div>

                <div className="space-y-4 max-w-lg relative z-10">
                  {/* Quote with Compact Typography */}
                  <blockquote 
                    className="text-lg leading-relaxed font-medium transition-all duration-500"
                    style={{ 
                      fontFamily: 'var(--font-family-brand)',
                      color: 'var(--color-brand-black)'
                    }}
                  >
                    {currentTestimonialData.quote}
                  </blockquote>

                  {/* Attribution */}
                  <div className="space-y-1 pt-3">
                    <div 
                      className="text-base font-semibold transition-all duration-500"
                      style={{ color: 'var(--color-brand-primary)' }}
                    >
                      {currentTestimonialData.name}
                    </div>
                    <div 
                      className="text-xs transition-all duration-500"
                      style={{ color: 'var(--color-brand-gray-muted)' }}
                    >
                      {currentTestimonialData.title} {currentTestimonialData.company && `at ${currentTestimonialData.company}`}
                    </div>
                  </div>

                  {/* Testimonial Navigation Dots */}
                  <div className="flex items-center space-x-2 pt-4">
                    {pipelineTestimonials.map((testimonial, index) => (
                      <button
                        key={testimonial.id}
                        className={`w-2 h-2 rounded-full transition-all duration-300 ${
                          testimonial.id === currentTestimonial 
                            ? 'opacity-100' 
                            : 'opacity-30 hover:opacity-60'
                        }`}
                        style={{ 
                          backgroundColor: testimonial.id === currentTestimonial 
                            ? 'var(--color-brand-accent)' 
                            : 'var(--color-brand-gray-muted)' 
                        }}
                        onClick={() => setCurrentTestimonial(testimonial.id)}
                      />
                    ))}
                  </div>
                </div>

                {/* Large Closing Quotation Mark */}
                <div 
                  className="absolute bottom-4 right-4 text-3xl opacity-30"
                  style={{ color: 'var(--color-brand-primary)' }}
                >
                  "
                </div>
              </div>
            </div>
          </div>
        </div>
      </section>

      {/* 8. CTA Section - Hero Section Design */}
      <section className="relative h-[700px] overflow-hidden">
        {/* Background Image */}
        <div className="absolute inset-0">
          <ImageWithFallback
            src="https://images.unsplash.com/photo-1552664730-d307ca884978?w=2940&h=1960&fit=crop"
            alt="Professional team collaborating in modern office"
            className="w-full h-full object-cover"
          />
          
          {/* Subtle dark overlay for overall image */}
          <div className="absolute inset-0 bg-black/30" />
          
          {/* Gradient overlay for better text readability */}
          <div className="absolute inset-0 bg-gradient-to-r from-black/20 via-transparent to-black/60" />
        </div>

        {/* Content Container */}
        <div className="relative h-full flex items-center justify-end section-margin-x">
          {/* CTA Content Block */}
          <div 
            className="bg-opacity-95 backdrop-blur-sm rounded-lg p-16 max-w-2xl"
            style={{ backgroundColor: 'var(--color-brand-primary)' }}
          >
            {/* Branded Tag */}
            <BrandedTag text="Next Steps" variant="white" />

            {/* Main Headline */}
            <h2 className="text-h2-white mb-8">
              Ready to 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>
  );
}