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

const targetAudience = [
  {
    title: "Senior Executives & C-Suite Leaders",
    description: "CEOs, Presidents, and senior executives seeking personalized leadership development and strategic guidance",
    icon: User,
    challenges: ["Executive transition challenges", "Strategic decision making", "Leadership effectiveness", "Work-life integration"]
  },
  {
    title: "High-Potential Leaders",
    description: "Emerging leaders and high-potential individuals preparing for senior leadership roles",
    icon: Star,
    challenges: ["Leadership readiness", "Executive presence", "Strategic thinking", "Career advancement"]
  },
  {
    title: "Professional Development Teams",
    description: "HR and L&D professionals implementing coaching and mentoring programs organizationally",
    icon: Users,
    challenges: ["Program design", "Coach matching", "Impact measurement", "Scalability challenges"]
  }
];

const useCases = [
  {
    title: "Executive Transition",
    description: "When leaders need support navigating new roles or organizational changes",
    icon: User,
    scenario: "New executive appointments or significant role transitions"
  },
  {
    title: "Leadership Development",
    description: "When high-potential individuals need personalized development for advancement",
    icon: TrendingUp,
    scenario: "Talent pipeline development and succession planning needs"
  },
  {
    title: "Performance Optimization",
    description: "When leaders need to enhance their effectiveness and impact",
    icon: Target,
    scenario: "Performance gaps or need for enhanced leadership capability"
  },
  {
    title: "Strategic Challenges",
    description: "When executives face complex business challenges requiring strategic thinking",
    icon: Brain,
    scenario: "Major business transformations or strategic decision-making needs"
  }
];

const programTimeline = [
  {
    phase: "Phase 1: Assessment & Goal Setting",
    duration: "Month 1",
    activities: ["Leadership assessment", "Goal setting sessions", "Coach matching", "Development plan creation"],
    deliverables: ["Leadership profile", "Coaching agreement", "Development roadmap", "Success metrics"]
  },
  {
    phase: "Phase 2: Coaching & Development",
    duration: "Months 2-8",
    activities: ["Regular coaching sessions", "360-degree feedback", "Action learning projects", "Progress reviews"],
    deliverables: ["Enhanced leadership skills", "Behavioral changes", "Strategic insights", "Performance improvements"]
  },
  {
    phase: "Phase 3: Integration & Sustainability",
    duration: "Months 9-12",
    activities: ["Implementation support", "Mentoring relationships", "Peer learning", "Impact assessment"],
    deliverables: ["Sustained behavior change", "Mentoring capability", "Leadership impact", "Continued development plan"]
  }
];

const expectedOutcomes = [
  {
    metric: "87%",
    description: "Of leaders report improved leadership effectiveness",
    icon: User,
    category: "Leadership Impact"
  },
  {
    metric: "79%",
    description: "Enhancement in strategic thinking and decision-making",
    icon: Brain,
    category: "Strategic Capability"
  },
  {
    metric: "92%",
    description: "Satisfaction rate with coaching experience and outcomes",
    icon: Heart,
    category: "Program Satisfaction"
  },
  {
    metric: "71%",
    description: "Of participants promoted within 18 months",
    icon: TrendingUp,
    category: "Career Advancement"
  }
];

export function ExecutiveCoaching() {
  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-1573496359142-b8d87734a5a2?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">
                  Coaching & Mentoring
                </h1>
              </div>

              <p className="text-body-lg-white mb-8 max-w-3xl">
                <strong>Develop exceptional leaders through personalized coaching that drives 87% improvement in leadership effectiveness and accelerates career advancement.</strong>
              </p>

              <div className="flex justify-start">
                <PrimaryCTAButton
                  text="Book a Consultation"
                  onClick={() => navigateTo('/contact?topic=coaching-mentoring')}
                  ariaLabel="Book a consultation for coaching and mentoring"
                  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]">Personalized Leadership Development</h2>
              <div className="max-w-4xl mx-auto space-y-6">
                <p className="text-body-lg text-[#6F6F6F] leading-relaxed">
                  Coaching & Mentoring is a personalized leadership development approach that combines one-on-one executive coaching with strategic mentoring relationships. Our certified coaches work with leaders to enhance their effectiveness, navigate complex challenges, and accelerate their professional growth through tailored development experiences.
                </p>
                <div className="bg-[#04045B]/5 border-l-4 border-[#04045B] p-6 rounded-lg">
                  <p className="text-body-lg text-[#26231A] leading-relaxed">
                    <span className="font-semibold text-[#04045B]">The Business Problem It Solves:</span> Many talented leaders struggle to reach their full potential due to lack of personalized guidance, limited feedback, and insufficient support during critical transitions. Our coaching and mentoring programs provide the individualized attention and expertise needed for exceptional leadership development.
                  </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' }}
                  >
                    <MessageCircle className="w-8 h-8 text-white" />
                  </div>
                  <h4 className="text-h4 mb-4 text-[#26231A] group-hover:text-[#04045B] transition-colors duration-300">
                    Executive Coaching
                  </h4>
                  <p className="text-body text-[#6F6F6F] leading-relaxed">
                    Personalized coaching for senior leaders and executives to enhance performance and impact
                  </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' }}
                  >
                    <Network className="w-8 h-8 text-white" />
                  </div>
                  <h4 className="text-h4 mb-4 text-[#26231A] group-hover:text-[#04045B] transition-colors duration-300">
                    Strategic Mentoring
                  </h4>
                  <p className="text-body text-[#6F6F6F] leading-relaxed">
                    Long-term mentoring relationships for career development and leadership growth
                  </p>
                </div>
              </div>

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

      {/* 2. Who Is It For */}
      <section className="py-24 lg:py-32" style={{ backgroundColor: '#F9F9F9' }}>
        <div className="section-margin-x">
          <div className="max-w-6xl mx-auto">
            <div className="text-center mb-16">
              <BrandedTag text="Who Is It For?" />
              <h2 className="text-h2 mb-8">Target Audience</h2>
              <p className="text-body-lg text-muted max-w-3xl mx-auto">
                Designed for senior leaders, high-potential individuals, and organizations investing in personalized leadership development.
              </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">Use Case Scenarios</h2>
              <p className="text-body-lg text-muted max-w-3xl mx-auto">
                Coaching & Mentoring is most effective in these critical leadership development situations.
              </p>
            </div>

            <div className="space-y-6">
              {useCases.map((useCase, 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={() => setExpandedUseCase(expandedUseCase === 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-accent)' }}
                        >
                          <useCase.icon className="w-6 h-6 text-black" />
                        </div>
                        <div className="flex-1">
                          <h3 className="text-h4 mb-2">{useCase.title}</h3>
                          <p className="text-body text-muted mb-3">{useCase.description}</p>
                          <div className="text-small text-primary">
                            <strong>Trigger:</strong> {useCase.scenario}
                          </div>
                        </div>
                      </div>
                      <div className="ml-4">
                        {expandedUseCase === index ? (
                          <ChevronUp className="w-5 h-5 text-muted" />
                        ) : (
                          <ChevronDown className="w-5 h-5 text-muted" />
                        )}
                      </div>
                    </div>
                  </CardContent>
                </Card>
              ))}
            </div>
          </div>
        </div>
      </section>

      {/* 4. Our Approach */}
      <section className="py-24 lg:py-32" style={{ backgroundColor: '#F9F9F9' }}>
        <div className="section-margin-x">
          <div className="w-full">
            <div className="max-w-6xl mx-auto">
              <div className="text-center mb-16">
                <BrandedTag text="Our Approach" />
                <h2 className="text-h2 mb-8 text-[#26231A]">Comprehensive Coaching & Mentoring Framework</h2>
                <p className="text-body-lg text-[#6F6F6F] max-w-3xl mx-auto">
                  Our proven methodology combines individual coaching, strategic mentoring, and continuous development for sustainable leadership growth.
                </p>
              </div>

              {/* Flowchart Container with Connecting Lines */}
              <div className="relative mb-16 flex flex-col items-center">
                {/* Desktop: Horizontal Flowchart */}
                <div className="hidden lg:block w-full max-w-5xl">
                  <div className="relative">
                    {/* Row 1: Frameworks, Pedagogy, Delivery */}
                    <div className="grid grid-cols-3 gap-8 mb-12 relative w-full">
                      {/* Frameworks */}
                      <div className="bg-white border-2 border-[#04045B] rounded-xl p-6 hover:shadow-lg transition-all duration-300 relative z-10">
                        <div className="w-12 h-12 bg-[#04045B] rounded-lg flex items-center justify-center mb-4">
                          <Eye className="w-6 h-6 text-white" />
                        </div>
                        <h3 className="text-h4 text-[#26231A] mb-3">Assessment Frameworks</h3>
                        <p className="text-body text-[#6F6F6F] mb-4">
                          Comprehensive profiling and leadership capability evaluation
                        </p>
                        <div className="space-y-2">
                          <div className="text-small text-[#6F6F6F] bg-gray-50 px-3 py-2 rounded-lg">
                            Leadership Profiling
                          </div>
                          <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">
                            Psychometric Tools
                          </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">Coaching Pedagogy</h3>
                        <p className="text-body text-[#6F6F6F] mb-4">
                          Evidence-based coaching methodologies for transformation
                        </p>
                        <div className="space-y-2">
                          <div className="text-small text-[#6F6F6F] bg-gray-50 px-3 py-2 rounded-lg">
                            Solution-Focused
                          </div>
                          <div className="text-small text-[#6F6F6F] bg-gray-50 px-3 py-2 rounded-lg">
                            Strengths-Based
                          </div>
                          <div className="text-small text-[#6F6F6F] bg-gray-50 px-3 py-2 rounded-lg">
                            Goal-Oriented
                          </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 coaching formats for executive schedules
                        </p>
                        <div className="space-y-2">
                          <div className="text-small text-[#6F6F6F] bg-gray-50 px-3 py-2 rounded-lg">
                            One-on-One Coaching
                          </div>
                          <div className="text-small text-[#6F6F6F] bg-gray-50 px-3 py-2 rounded-lg">
                            Virtual & In-Person
                          </div>
                          <div className="text-small text-[#6F6F6F] bg-gray-50 px-3 py-2 rounded-lg">
                            Mentoring Circles
                          </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">
                      {/* Progress Tracking */}
                      <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">Progress Tracking</h3>
                        <p className="text-body text-[#6F6F6F] mb-4">
                          Continuous measurement of development and impact
                        </p>
                        <div className="space-y-2">
                          <div className="text-small text-[#6F6F6F] bg-gray-50 px-3 py-2 rounded-lg">
                            Goal Achievement
                          </div>
                          <div className="text-small text-[#6F6F6F] bg-gray-50 px-3 py-2 rounded-lg">
                            Behavior Change
                          </div>
                          <div className="text-small text-[#6F6F6F] bg-gray-50 px-3 py-2 rounded-lg">
                            Impact Metrics
                          </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>

                      {/* Mentoring 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">
                          <Network className="w-6 h-6 text-white" />
                        </div>
                        <h3 className="text-h4 text-[#26231A] mb-3">Mentoring Integration</h3>
                        <p className="text-body text-[#6F6F6F] mb-4">
                          Strategic guidance for long-term career development
                        </p>
                        <div className="space-y-2">
                          <div className="text-small text-[#6F6F6F] bg-gray-50 px-3 py-2 rounded-lg">
                            Senior Mentors
                          </div>
                          <div className="text-small text-[#6F6F6F] bg-gray-50 px-3 py-2 rounded-lg">
                            Peer Networks
                          </div>
                          <div className="text-small text-[#6F6F6F] bg-gray-50 px-3 py-2 rounded-lg">
                            Career Strategy
                          </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">
                          Accelerated leadership development with sustained behavior change, enhanced performance, and career advancement.
                        </p>
                        <div className="flex items-center gap-2 text-[#F8C301]">
                          <CheckCircle className="w-6 h-6" />
                          <span className="text-body text-white">Transformational Leadership Growth</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">
                        <Eye className="w-6 h-6 text-white" />
                      </div>
                      <h3 className="text-h4 text-[#26231A] mb-3">Assessment Frameworks</h3>
                      <p className="text-body text-[#6F6F6F] mb-4">
                        Comprehensive profiling and leadership capability evaluation
                      </p>
                      <div className="space-y-2">
                        <div className="text-small text-[#6F6F6F] bg-gray-50 px-3 py-2 rounded-lg">
                          Leadership Profiling
                        </div>
                        <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">
                          Psychometric Tools
                        </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">Coaching Pedagogy</h3>
                      <p className="text-body text-[#6F6F6F] mb-4">
                        Evidence-based coaching methodologies for transformation
                      </p>
                      <div className="space-y-2">
                        <div className="text-small text-[#6F6F6F] bg-gray-50 px-3 py-2 rounded-lg">
                          Solution-Focused
                        </div>
                        <div className="text-small text-[#6F6F6F] bg-gray-50 px-3 py-2 rounded-lg">
                          Strengths-Based
                        </div>
                        <div className="text-small text-[#6F6F6F] bg-gray-50 px-3 py-2 rounded-lg">
                          Goal-Oriented
                        </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 coaching formats for executive schedules
                      </p>
                      <div className="space-y-2">
                        <div className="text-small text-[#6F6F6F] bg-gray-50 px-3 py-2 rounded-lg">
                          One-on-One Coaching
                        </div>
                        <div className="text-small text-[#6F6F6F] bg-gray-50 px-3 py-2 rounded-lg">
                          Virtual & In-Person
                        </div>
                        <div className="text-small text-[#6F6F6F] bg-gray-50 px-3 py-2 rounded-lg">
                          Mentoring Circles
                        </div>
                      </div>
                    </div>
                    {/* Connector Arrow */}
                    <div className="flex justify-center my-4">
                      <ArrowRight className="w-8 h-8 text-[#F8C301] rotate-90" />
                    </div>
                  </div>

                  {/* Progress Tracking */}
                  <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">Progress Tracking</h3>
                      <p className="text-body text-[#6F6F6F] mb-4">
                        Continuous measurement of development and impact
                      </p>
                      <div className="space-y-2">
                        <div className="text-small text-[#6F6F6F] bg-gray-50 px-3 py-2 rounded-lg">
                          Goal Achievement
                        </div>
                        <div className="text-small text-[#6F6F6F] bg-gray-50 px-3 py-2 rounded-lg">
                          Behavior Change
                        </div>
                        <div className="text-small text-[#6F6F6F] bg-gray-50 px-3 py-2 rounded-lg">
                          Impact Metrics
                        </div>
                      </div>
                    </div>
                    {/* Connector Arrow */}
                    <div className="flex justify-center my-4">
                      <ArrowRight className="w-8 h-8 text-[#04045B] rotate-90" />
                    </div>
                  </div>

                  {/* Mentoring 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">
                        <Network className="w-6 h-6 text-white" />
                      </div>
                      <h3 className="text-h4 text-[#26231A] mb-3">Mentoring Integration</h3>
                      <p className="text-body text-[#6F6F6F] mb-4">
                        Strategic guidance for long-term career development
                      </p>
                      <div className="space-y-2">
                        <div className="text-small text-[#6F6F6F] bg-gray-50 px-3 py-2 rounded-lg">
                          Senior Mentors
                        </div>
                        <div className="text-small text-[#6F6F6F] bg-gray-50 px-3 py-2 rounded-lg">
                          Peer Networks
                        </div>
                        <div className="text-small text-[#6F6F6F] bg-gray-50 px-3 py-2 rounded-lg">
                          Career Strategy
                        </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">
                      Accelerated leadership development with sustained behavior change, enhanced performance, and career advancement.
                    </p>
                    <div className="flex items-center gap-2 text-[#F8C301]">
                      <CheckCircle className="w-6 h-6" />
                      <span className="text-body text-white">Transformational Leadership Growth</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 coaching and mentoring 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">94%</div>
                    <p className="text-body text-[#6F6F6F]">Goal Achievement Rate</p>
                  </div>

                  <div className="text-center bg-white rounded-lg p-6">
                    <div className="w-14 h-14 bg-[#F8C301] rounded-lg flex items-center justify-center mx-auto mb-3">
                      <Users className="w-7 h-7 text-white" />
                    </div>
                    <div className="text-h2 text-[#04045B] mb-2">88%</div>
                    <p className="text-body text-[#6F6F6F]">Leadership Effectiveness Growth</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">86%</div>
                    <p className="text-body text-[#6F6F6F]">Career Advancement Success</p>
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>
      </section>

      {/* 5. Sample Program Format */}
      <section className="py-24 lg:py-32" style={{ backgroundColor: '#FFFFFF' }}>
        <div className="section-margin-x">
          <div className="max-w-6xl mx-auto">
            <div className="text-center mb-16">
              <BrandedTag text="Sample Program Format" />
              <h2 className="text-h2 mb-8">12-Month Coaching & Mentoring Journey</h2>
              <p className="text-body-lg text-muted max-w-3xl mx-auto">
                A comprehensive 3-phase program designed to accelerate leadership development and career advancement.
              </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 Coaching Outcomes</h2>
              <p className="text-body-lg text-muted max-w-3xl mx-auto">
                Leaders typically see significant improvements in effectiveness, strategic capability, and career advancement.
              </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 Coaching Benefits</h3>
              <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6">
                <div className="text-center">
                  <MessageCircle className="w-8 h-8 text-primary mx-auto mb-3" />
                  <h4 className="text-h4 mb-2">Enhanced Communication</h4>
                  <p className="text-small text-muted">Improved leadership communication and interpersonal skills</p>
                </div>
                <div className="text-center">
                  <Target className="w-8 h-8 text-primary mx-auto mb-3" />
                  <h4 className="text-h4 mb-2">Goal Achievement</h4>
                  <p className="text-small text-muted">Better focus and achievement of personal and professional goals</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 Clarity</h4>
                  <p className="text-small text-muted">Enhanced strategic thinking and decision-making capability</p>
                </div>
              </div>
            </div>
          </div>
        </div>
      </section>

      {/* 7. Client Examples / Testimonials - Hero Section Design */}
      <TestimonialsSection
        title="Coaching & Mentoring 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 accelerate your leadership?
              <span
                className="italic"
                style={{ color: 'var(--color-brand-accent)' }}
              >
                {" "}Get in touch{" "}
              </span>
              for personalized coaching now.
            </h2>

            {/* CTA Button */}
            <StandardCTAButton
              text="Schedule a Coaching Consultation"
              onClick={() => navigateTo('/contact?topic=coaching-mentoring')}
              ariaLabel="Schedule a coaching and mentoring consultation"
            />

            {/* Supporting Text */}
            <p className="text-body-white mt-6 opacity-90">
              Connect with our executive coaching experts to discuss personalized leadership development that transforms your effectiveness and career trajectory.
            </p>
          </div>
        </div>
      </section>
    </div>
  );
}