'use client'

import { useTranslations } from 'next-intl'
import { Link } from '@/i18n/navigation'
import {
  ArrowRight,
  Award,
  BarChart3,
  BookOpen,
  BrainCircuit,
  CheckCircle2,
  ClipboardList,
  Compass,
  Globe,
  HeartHandshake,
  Lightbulb,
  MessageSquare,
  RefreshCw,
  Shield,
  Sparkles,
  Target,
  TrendingUp,
  Users,
  Video,
  Zap,
} from 'lucide-react'
import { PageHero } from '@/components/page-hero'
import { ContactForm } from '@/components/enquiry-form'
import { useSiteData } from '@/contexts/site-data-context'

const stats = [
  { value: '92%', label: 'Report improved leadership effectiveness' },
  { value: '89%', label: 'Achieve or exceed coaching goals' },
  { value: '95%', label: 'Would recommend to a colleague' },
  { value: '87%', label: 'Feel more confident in their role' },
]

const coachingAreas = [
  {
    icon: TrendingUp,
    title: 'Leadership Effectiveness',
    text: 'Sharpen your leadership style, decision-making, and ability to inspire high-performance teams.',
  },
  {
    icon: BrainCircuit,
    title: 'Strategic Thinking',
    text: 'Develop the long-range perspective and systems thinking required at board and C-suite level.',
  },
  {
    icon: Award,
    title: 'Executive Presence',
    text: 'Build the gravitas, communication authority, and credibility that define exceptional executives.',
  },
  {
    icon: Compass,
    title: 'Career Navigation',
    text: 'Manage transitions, promotions, and pivots with clarity and confidence at every career stage.',
  },
  {
    icon: HeartHandshake,
    title: 'Emotional Intelligence',
    text: 'Strengthen self-awareness, empathy, and interpersonal effectiveness in high-stakes environments.',
  },
  {
    icon: Target,
    title: 'Performance Acceleration',
    text: 'Identify and remove the personal blockers limiting your output, influence, and organisational impact.',
  },
  {
    icon: Users,
    title: 'Team & Stakeholder Dynamics',
    text: 'Navigate complex stakeholder relationships, board dynamics, and cross-functional team leadership.',
  },
  {
    icon: RefreshCw,
    title: 'Change & Resilience',
    text: 'Lead through uncertainty, organisational transformation, and high-pressure change programmes.',
  },
]

const models = [
  {
    icon: MessageSquare,
    title: 'Individual Executive Coaching',
    audience: 'CEOs, Directors, Senior Leaders',
    desc: 'Deeply personalised one-on-one coaching designed around your specific goals, challenges, and leadership context.',
    features: [
      'Dedicated senior coach',
      'Monthly 90-minute sessions',
      '6–12 month engagement',
      'Between-session support',
      'Confidential & structured',
    ],
  },
  {
    icon: Users,
    title: 'Team Coaching',
    audience: 'Leadership Teams & Boards',
    desc: 'Collective coaching that improves team dynamics, shared decision-making, and collective leadership capability.',
    features: [
      'Team diagnostic assessment',
      'Group and individual sessions',
      'Conflict resolution focus',
      'Shared goal alignment',
      'Enhanced collaboration',
    ],
  },
  {
    icon: Zap,
    title: 'Transition Coaching',
    audience: 'New Executives & Role Changes',
    desc: 'Accelerated coaching for leaders stepping into new roles, organisations, or levels of responsibility.',
    features: [
      'First 90-day roadmap',
      'Stakeholder mapping',
      'Rapid onboarding support',
      'Role clarity sessions',
      'Confidence building',
    ],
  },
]

const process = [
  {
    icon: ClipboardList,
    title: 'Discovery Session',
    desc: 'A confidential 60-minute conversation to understand your goals, context, and what success looks like.',
  },
  {
    icon: Target,
    title: 'Goal Setting',
    desc: 'We co-create a focused coaching contract with clear objectives, milestones, and success measures.',
  },
  {
    icon: MessageSquare,
    title: 'Coaching Sessions',
    desc: 'Regular 90-minute sessions — in person, virtual, or hybrid — structured around your evolving priorities.',
  },
  {
    icon: BarChart3,
    title: 'Progress Reviews',
    desc: 'Mid-programme check-ins to assess progress, recalibrate goals, and ensure momentum is maintained.',
  },
  {
    icon: Sparkles,
    title: 'Sustained Impact',
    desc: 'Closing session with a personal action plan and optional follow-up support to embed lasting change.',
  },
]

const whyChoose = [
  'Coaches with C-suite and board-level experience',
  'International coaching across 40+ countries',
  'Fully confidential — no reporting to your organisation',
  'In-person, virtual, or hybrid delivery',
  'Structured yet flexible engagement models',
  'Globally recognised coaching methodologies',
  'Sector expertise: government, banking, multinationals',
  'Measurable outcomes with clear KPIs',
]

const deliveryFormats = [
  { icon: MessageSquare, label: 'In-Person' },
  { icon: Video, label: 'Virtual (Zoom / Meet)' },
  { icon: Globe, label: 'International Travel' },
  { icon: Lightbulb, label: 'Hybrid' },
]

const enquiryBenefits = [
  'Free 60-minute discovery session',
  'No obligation — explore the fit first',
  'Matched to the right coach for your context',
]

export default function CoachingPage() {
  const { site } = useSiteData()
  const t = useTranslations('services.coaching')

  return (
    <main>
      <PageHero
        eyebrow={t('hero.eyebrow')}
        title={t('hero.title')}
        description={t('hero.description')}
      >
        <div className="mt-8 flex flex-wrap gap-3">
          <Link
            href="/contact?subject=coaching"
            className="inline-flex h-12 items-center justify-center gap-2 border border-white/30 bg-white/5 px-7 text-sm font-semibold text-white transition hover:border-accent hover:text-accent"
          >
            {t('hero.schedule')}
            <ArrowRight className="h-4 w-4" />
          </Link>
          <Link
            href="/contact?subject=advisor"
            className="inline-flex h-12 items-center justify-center border border-white/30 px-7 text-sm font-semibold text-white transition hover:border-accent hover:text-accent"
          >
            {t('hero.advisor')}
          </Link>
        </div>
      </PageHero>

      <section className="border-b border-border/70 bg-[oklch(0.975_0.01_343)] py-10 sm:py-12">
        <div className="container-wide">
          <div className="grid grid-cols-2 gap-6 md:grid-cols-4 md:gap-8">
            {stats.map(({ value, label }) => (
              <div key={label} className="text-center md:text-left">
                <p className="font-heading text-3xl text-primary sm:text-4xl">{value}</p>
                <p className="mt-1.5 text-sm leading-5 text-muted-foreground">{label}</p>
              </div>
            ))}
          </div>
        </div>
      </section>

      <section className="border-b border-border/70 bg-white py-16 sm:py-20 md:py-24">
        <div className="container-wide">
          <div className="grid items-start gap-10 lg:grid-cols-[1.1fr_0.9fr] lg:gap-14">
            <div>
              <p className="text-[11px] font-bold uppercase tracking-[0.22em] text-secondary">
                {t('why.eyebrow', { name: site.shortName })}
              </p>
              <span className="mt-3 block h-0.5 w-10 bg-accent" aria-hidden />
              <h2 className="mt-5 font-heading text-3xl text-foreground sm:text-4xl">
                {t('why.title')}
              </h2>
              <p className="mt-4 text-base leading-7 text-muted-foreground sm:text-lg sm:leading-8">
                {t('why.description')}
              </p>
              <ul className="mt-6 space-y-3">
                {whyChoose.map((item) => (
                  <li key={item} className="flex items-start gap-3 text-sm text-foreground sm:text-base">
                    <CheckCircle2 className="mt-0.5 h-4 w-4 shrink-0 text-primary" />
                    {item}
                  </li>
                ))}
              </ul>
            </div>
            <div className="space-y-4">
              <div className="border border-border/80 bg-[oklch(0.985_0.008_343)] p-7">
                <p className="text-[11px] font-bold uppercase tracking-[0.18em] text-secondary">
                  {t('why.delivery')}
                </p>
                <div className="mt-5 grid grid-cols-2 gap-3">
                  {deliveryFormats.map(({ icon: Icon, label }) => (
                    <div
                      key={label}
                      className="flex items-center gap-3 border border-border/80 bg-white px-4 py-3"
                    >
                      <Icon className="h-4 w-4 shrink-0 text-primary" />
                      <span className="text-sm font-semibold text-foreground">{label}</span>
                    </div>
                  ))}
                </div>
              </div>
              <div className="border border-border/80 bg-white p-7">
                <div className="mb-3 flex h-10 w-10 items-center justify-center bg-primary/8 text-primary">
                  <Shield className="h-5 w-5" />
                </div>
                <p className="text-base font-bold text-foreground">{t('why.confidentialTitle')}</p>
                <p className="mt-2 text-sm leading-6 text-muted-foreground">
                  {t('why.confidentialText')}
                </p>
              </div>
            </div>
          </div>
        </div>
      </section>

      <section className="border-b border-border/70 bg-[oklch(0.975_0.01_343)] py-16 sm:py-20 md:py-24">
        <div className="container-wide">
          <div className="mx-auto mb-10 max-w-3xl text-center md:mb-12">
            <p className="text-[11px] font-bold uppercase tracking-[0.22em] text-secondary">{t('focus.eyebrow')}</p>
            <span className="mx-auto mt-3 block h-0.5 w-10 bg-accent" aria-hidden />
            <h2 className="mt-4 font-heading text-3xl text-foreground sm:text-4xl">{t('focus.title')}</h2>
            <p className="mt-4 text-base leading-7 text-muted-foreground">
              {t('focus.description')}
            </p>
          </div>
          <div className="grid gap-4 sm:grid-cols-2 xl:grid-cols-4">
            {coachingAreas.map(({ icon: Icon, title, text }, index) => (
              <article
                key={title}
                className="border border-border/80 bg-white p-6 transition duration-300 hover:border-secondary/40 hover:shadow-[0_16px_40px_rgba(15,23,42,0.06)]"
              >
                <div className="flex items-center justify-between">
                  <span className="flex h-11 w-11 items-center justify-center bg-primary/8 text-primary">
                    <Icon className="h-5 w-5" />
                  </span>
                  <span className="font-mono text-xs text-muted-foreground">
                    {String(index + 1).padStart(2, '0')}
                  </span>
                </div>
                <h3 className="mt-5 text-base font-bold leading-snug text-foreground">{title}</h3>
                <p className="mt-2 text-sm leading-6 text-muted-foreground">{text}</p>
              </article>
            ))}
          </div>
        </div>
      </section>

      <section className="border-b border-border/70 bg-white py-16 sm:py-20 md:py-24">
        <div className="container-wide">
          <div className="mx-auto mb-10 max-w-3xl text-center md:mb-12">
            <p className="text-[11px] font-bold uppercase tracking-[0.22em] text-secondary">
              {t('models.eyebrow')}
            </p>
            <span className="mx-auto mt-3 block h-0.5 w-10 bg-accent" aria-hidden />
            <h2 className="mt-4 font-heading text-3xl text-foreground sm:text-4xl">
              {t('models.title')}
            </h2>
          </div>
          <div className="grid gap-4 md:grid-cols-3">
            {models.map(({ icon: Icon, title, audience, desc, features }, index) => (
              <article
                key={title}
                className="flex flex-col border border-border/80 bg-[oklch(0.985_0.008_343)] transition hover:border-secondary/40 hover:bg-white hover:shadow-[0_16px_40px_rgba(15,23,42,0.06)]"
              >
                <div className="flex flex-1 flex-col p-7">
                  <div className="flex items-center justify-between">
                    <span className="flex h-11 w-11 items-center justify-center bg-primary/8 text-primary">
                      <Icon className="h-5 w-5" />
                    </span>
                    <span className="font-mono text-xs text-accent">
                      {String(index + 1).padStart(2, '0')}
                    </span>
                  </div>
                  <p className="mt-5 text-[11px] font-bold uppercase tracking-[0.16em] text-secondary">
                    {audience}
                  </p>
                  <h3 className="mt-2 text-lg font-bold text-foreground">{title}</h3>
                  <p className="mt-2 text-sm leading-6 text-muted-foreground">{desc}</p>
                  <ul className="mt-5 space-y-2.5 border-t border-border/70 pt-5">
                    {features.map((feature) => (
                      <li key={feature} className="flex items-center gap-2.5 text-sm text-foreground">
                        <CheckCircle2 className="h-4 w-4 shrink-0 text-primary" />
                        {feature}
                      </li>
                    ))}
                  </ul>
                </div>
                <div className="border-t border-border/70 p-5">
                  <Link
                    href="/contact?subject=coaching"
                    className="inline-flex h-11 w-full items-center justify-center gap-2 bg-primary px-5 text-sm font-semibold text-primary-foreground transition hover:bg-primary/90"
                  >
                    {t('models.enquire')}
                    <ArrowRight className="h-4 w-4" />
                  </Link>
                </div>
              </article>
            ))}
          </div>
        </div>
      </section>

      <section className="border-b border-border/70 bg-[oklch(0.975_0.01_343)] py-16 sm:py-20 md:py-24">
        <div className="container-wide">
          <div className="mx-auto mb-10 max-w-3xl text-center md:mb-12">
            <p className="text-[11px] font-bold uppercase tracking-[0.22em] text-secondary">{t('journey.eyebrow')}</p>
            <span className="mx-auto mt-3 block h-0.5 w-10 bg-accent" aria-hidden />
            <h2 className="mt-4 font-heading text-3xl text-foreground sm:text-4xl">
              {t('journey.title')}
            </h2>
            <p className="mt-4 text-base leading-7 text-muted-foreground">
              {t('journey.description')}
            </p>
          </div>
          <ol className="space-y-3">
            {process.map(({ icon: Icon, title, desc }, index) => (
              <li
                key={title}
                className="flex gap-5 border border-border/80 bg-white px-5 py-5 sm:px-6 sm:py-6"
              >
                <span className="flex h-11 w-11 shrink-0 items-center justify-center bg-primary font-mono text-sm font-bold text-primary-foreground">
                  {String(index + 1).padStart(2, '0')}
                </span>
                <div className="min-w-0 flex-1">
                  <div className="flex items-center gap-3">
                    <Icon className="h-4 w-4 shrink-0 text-primary" />
                    <h3 className="text-lg font-bold text-foreground">{title}</h3>
                  </div>
                  <p className="mt-1.5 text-sm leading-6 text-muted-foreground">{desc}</p>
                </div>
              </li>
            ))}
          </ol>
        </div>
      </section>

      <section className="border-b border-border/70 bg-white py-16 sm:py-20 md:py-24">
        <div className="container-wide">
          <div className="grid items-start gap-10 lg:grid-cols-2 lg:gap-14">
            <div className="space-y-5 lg:sticky lg:top-24">
              <p className="text-[11px] font-bold uppercase tracking-[0.22em] text-secondary">
                {t('started.eyebrow')}
              </p>
              <span className="block h-0.5 w-10 bg-accent" aria-hidden />
              <h2 className="font-heading text-3xl text-foreground sm:text-4xl">
                {t('started.title')}
              </h2>
              <p className="text-base leading-7 text-muted-foreground">
                {t('started.description')}
              </p>
              <ul className="space-y-3">
                {enquiryBenefits.map((item) => (
                  <li key={item} className="flex items-center gap-3 text-sm text-foreground">
                    <CheckCircle2 className="h-4 w-4 shrink-0 text-primary" />
                    {item}
                  </li>
                ))}
              </ul>
              <div className="border border-border/80 bg-[oklch(0.985_0.008_343)] p-5">
                <BookOpen className="mb-2 h-5 w-5 text-primary" />
                <p className="text-sm font-bold text-foreground">{t('started.typicalTitle')}</p>
                <p className="mt-1 text-sm text-muted-foreground">
                  {t('started.typicalText')}
                </p>
              </div>
            </div>
            <ContactForm />
          </div>
        </div>
      </section>

      <section className="relative overflow-hidden bg-[oklch(0.22_0.07_343)] py-16 text-white sm:py-20">
        <div
          className="pointer-events-none absolute inset-0"
          style={{
            backgroundImage:
              'radial-gradient(ellipse 50% 45% at 20% 30%, oklch(0.50 0.09 179 / 0.3), transparent)',
          }}
          aria-hidden
        />
        <div className="container-wide relative text-center">
          <p className="text-[11px] font-bold uppercase tracking-[0.22em] text-accent">
            {t('cta.eyebrow')}
          </p>
          <span className="mx-auto mt-3 block h-0.5 w-10 bg-accent" aria-hidden />
          <h2 className="mt-5 font-heading text-3xl sm:text-4xl">
            {t('cta.title')}
          </h2>
          <p className="mx-auto mt-4 max-w-xl text-white/75">
            {t('cta.description', { name: site.shortName })}
          </p>
          <div className="mt-8 flex flex-col justify-center gap-3 sm:flex-row">
            <Link
              href="/contact?subject=coaching"
              className="inline-flex h-12 items-center justify-center gap-2 bg-accent px-8 text-sm font-semibold text-accent-foreground transition hover:bg-accent/90"
            >
              {t('cta.schedule')}
              <ArrowRight className="h-4 w-4" />
            </Link>
            <Link
              href="/contact?subject=proposal"
              className="inline-flex h-12 items-center justify-center border border-white/25 px-8 text-sm font-semibold transition hover:border-accent hover:text-accent"
            >
              {t('cta.proposal')}
            </Link>
          </div>
        </div>
      </section>
    </main>
  )
}