'use client'

import { Suspense } from 'react'
import { useSearchParams } from 'next/navigation'
import { useTranslations } from 'next-intl'
import { Link } from '@/i18n/navigation'
import {
  ArrowRight,
  BarChart3,
  Briefcase,
  CheckCircle2,
  ClipboardList,
  Cpu,
  FileSearch,
  GitMerge,
  Globe,
  Layers,
  LineChart,
  RefreshCw,
  Settings2,
  Shield,
  ShieldCheck,
  Sparkles,
  TrendingUp,
  Users,
  Wallet,
  Zap,
} from 'lucide-react'
import { PageHero } from '@/components/page-hero'
import { services } from '@/lib/site-config'
import { useSiteData } from '@/contexts/site-data-context'

const consultingServices = [
  {
    icon: TrendingUp,
    title: 'Corporate Strategy & Business Transformation',
    desc: 'Define competitive direction, reshape business models, and lead enterprise-wide transformation programmes.',
  },
  {
    icon: Users,
    title: 'Executive Leadership Advisory',
    desc: 'Strengthen leadership pipelines, board effectiveness, and C-suite decision-making capability.',
  },
  {
    icon: GitMerge,
    title: 'Organizational Design & Restructuring',
    desc: 'Redesign structures, reporting lines, and governance frameworks to improve agility and accountability.',
  },
  {
    icon: Settings2,
    title: 'Business Process Improvement',
    desc: 'Streamline operations, eliminate waste, and embed continuous improvement across functions.',
  },
  {
    icon: BarChart3,
    title: 'Performance Management',
    desc: 'Build KPI frameworks, balanced scorecards, and performance cultures that drive measurable results.',
  },
  {
    icon: RefreshCw,
    title: 'Change Management',
    desc: 'Plan, communicate, and embed organisational change with structured methodologies and stakeholder engagement.',
  },
  {
    icon: Cpu,
    title: 'AI & Digital Transformation',
    desc: 'Develop AI strategies, digital roadmaps, and technology adoption frameworks for the modern enterprise.',
  },
  {
    icon: Shield,
    title: 'Risk Management & Internal Controls',
    desc: 'Identify, assess, and mitigate operational and financial risks through robust control frameworks.',
  },
  {
    icon: Layers,
    title: 'Enterprise Risk Management (ERM)',
    desc: 'Implement enterprise-wide risk frameworks aligned to ISO 31000 and international best practice.',
  },
  {
    icon: FileSearch,
    title: 'Internal Audit Advisory',
    desc: 'Strengthen internal audit functions, audit methodologies, and assurance reporting to boards.',
  },
  {
    icon: ShieldCheck,
    title: 'Governance, Risk & Compliance (GRC)',
    desc: 'Integrate governance, risk, and compliance into a unified framework that supports strategic objectives.',
  },
  {
    icon: Wallet,
    title: 'Financial Advisory & Cost Optimisation',
    desc: 'Improve financial performance through cost reduction, capital allocation, and financial restructuring.',
  },
  {
    icon: ClipboardList,
    title: 'Procurement & Supply Chain Advisory',
    desc: 'Optimise procurement strategies, supplier relationships, and supply chain resilience.',
  },
  {
    icon: Briefcase,
    title: 'Human Capital & HR Transformation',
    desc: 'Redesign HR operating models, talent strategies, and workforce planning for organisational growth.',
  },
  {
    icon: LineChart,
    title: 'Project Management Office (PMO)',
    desc: 'Establish or mature PMO functions to improve project delivery, governance, and portfolio oversight.',
  },
  {
    icon: Globe,
    title: 'Sustainability & ESG Consulting',
    desc: 'Develop ESG strategies, sustainability reporting frameworks, and responsible business practices.',
  },
]

const industries = [
  'Banking & Financial Services',
  'Government & Public Sector',
  'Oil & Gas',
  'Energy & Utilities',
  'Manufacturing',
  'Telecommunications',
  'Healthcare',
  'Education',
  'Aviation',
  'Logistics & Transportation',
  'Mining',
  'Hospitality & Tourism',
  'Insurance',
  'Real Estate',
  'Agriculture',
  'Retail & FMCG',
  'NGOs & Development Partners',
  'Technology & IT',
  'Pharmaceuticals',
  'Construction',
]

const expertiseBadges = [
  'Corporate Strategy',
  'Business Excellence',
  'Leadership',
  'AI Transformation',
  'Governance',
  'Risk',
  'Compliance',
  'Finance',
  'Internal Audit',
  'PMO',
  'Digital Innovation',
  'HR',
]

const approachSteps = [
  {
    step: 1,
    title: 'Discovery & Diagnosis',
    desc: 'Thorough analysis of your current state, challenges, and strategic opportunities through stakeholder interviews and data review.',
  },
  {
    step: 2,
    title: 'Strategy & Solution Design',
    desc: 'Develop evidence-based strategies, frameworks, and action plans tailored to your organisation\'s context.',
  },
  {
    step: 3,
    title: 'Roadmap & Planning',
    desc: 'Create detailed implementation roadmaps with clear milestones, owners, and success metrics.',
  },
  {
    step: 4,
    title: 'Implementation Support',
    desc: 'Work alongside your teams through execution — not just recommendations — to drive real adoption.',
  },
  {
    step: 5,
    title: 'Monitoring & Optimisation',
    desc: 'Track progress against KPIs, course-correct where needed, and embed sustainable capability.',
  },
]

const engagementModels = [
  {
    title: 'Project-Based',
    subtitle: 'Defined scope and timeline',
    points: ['3–6 month engagements', 'Specific deliverables', 'Clear ROI focus'],
  },
  {
    title: 'Retained Advisory',
    subtitle: 'Ongoing strategic support',
    points: ['6–24 month relationships', 'Regular senior engagement', 'Strategic partnership'],
  },
  {
    title: 'Blended Approach',
    subtitle: 'Consulting + training combined',
    points: ['Strategy + capability building', 'Sustainable knowledge transfer', 'Measurable impact'],
  },
]


const TOPIC_META = {
  curriculum: {
    serviceId: 'curriculum-development',
    eyebrow: 'Curriculum Development',
    title: 'Curriculum Development',
    highlights: [
      'Trainer and trainee manuals that guide delivery',
      'Step-by-step learning design with visual materials',
      'Built for classroom, online, and hybrid programmes',
      'Aligned to organisational capability goals',
    ],
    outcomes: [
      { title: 'Trainer manuals', text: 'Facilitator guides with session flow, timing, and delivery notes.' },
      { title: 'Participant materials', text: 'Clear workbooks and job aids that support workplace application.' },
      { title: 'Visual learning assets', text: 'Slides and visual tools designed for engagement and retention.' },
      { title: 'Quality review', text: 'Subject-matter validation before programmes go live.' },
    ],
  },
  evaluations: {
    serviceId: 'evaluations-research',
    eyebrow: 'Evaluations & Research',
    title: 'Evaluations & Business Research',
    highlights: [
      'Monitoring and evaluation support for programmes and projects',
      'Evidence that extracts relevant lessons from past and ongoing work',
      'Practical recommendations leadership can act on',
      'Clear reporting for donors, boards, and executive teams',
    ],
    outcomes: [
      { title: 'M&E frameworks', text: 'Indicators, baselines, and reporting structures that fit your context.' },
      { title: 'Programme evaluation', text: 'Independent assessment of outcomes, relevance, and effectiveness.' },
      { title: 'Business research', text: 'Focused studies that inform strategy and operational decisions.' },
      { title: 'Learning capture', text: 'Actionable lessons documented for continuous improvement.' },
    ],
  },
  translation: {
    serviceId: 'translation',
    eyebrow: 'Translation',
    title: 'Translation Services',
    highlights: [
      'Corporate, academic, and simultaneous translation support',
      'Multilingual programmes and document workflows',
      'Professional terminology for training and consultancy contexts',
      'Support for international cohorts and events',
    ],
    outcomes: [
      { title: 'Document translation', text: 'Accurate corporate and academic document localisation.' },
      { title: 'Simultaneous interpretation', text: 'Live language support for workshops, summits, and briefings.' },
      { title: 'Training materials', text: 'Multilingual manuals, slides, and participant packs.' },
      { title: 'Quality assurance', text: 'Terminology consistency across complex professional content.' },
    ],
  },
} as const

type TopicKey = keyof typeof TOPIC_META

function getServiceById(id: string) {
  return services.find((service) => service.id === id)
}


function TopicServiceView({ topic }: { topic: TopicKey }) {
  const t = useTranslations('services.consultancy')
  const meta = TOPIC_META[topic]
  const service = getServiceById(meta.serviceId)

  return (
    <main>
      <PageHero
        eyebrow={meta.eyebrow}
        title={meta.title}
        description={service?.description}
      >
        <div className="mt-8 flex flex-wrap gap-3">
          <Link
            href="/contact?subject=consultancy"
            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('intro.requestConsultation')}
            <ArrowRight className="h-4 w-4" />
          </Link>
          <Link
            href="/services/consultancy"
            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('topicNext.allServices')}
          </Link>
        </div>
      </PageHero>

      <section className="border-b border-border/70 bg-white py-16 sm:py-20 md:py-24">
        <div className="container-wide">
          <div className="grid gap-10 lg:grid-cols-[1.05fr_0.95fr] lg:gap-14">
            <div>
              <p className="text-[11px] font-bold uppercase tracking-[0.22em] text-secondary">
                {service?.subtitle ?? 'Service'}
              </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">
                {service?.title ?? meta.title}
              </h2>
              <p className="mt-4 text-base leading-7 text-muted-foreground sm:text-lg sm:leading-8">
                {service?.description}
              </p>
              <ul className="mt-6 space-y-3">
                {meta.highlights.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="grid gap-3 sm:grid-cols-2">
              {meta.outcomes.map((item, index) => (
                <article
                  key={item.title}
                  className="border border-border/80 bg-[oklch(0.985_0.008_343)] p-5 transition hover:border-secondary/40 hover:bg-white"
                >
                  <p className="font-mono text-xs text-accent">{String(index + 1).padStart(2, '0')}</p>
                  <h3 className="mt-2 text-base font-bold text-foreground">{item.title}</h3>
                  <p className="mt-2 text-sm leading-6 text-muted-foreground">{item.text}</p>
                </article>
              ))}
            </div>
          </div>
        </div>
      </section>

      <section className="relative overflow-hidden bg-[oklch(0.22_0.07_343)] py-16 text-white sm:py-20">
        <div className="container-wide relative">
          <div className="max-w-2xl">
            <p className="text-[11px] font-bold uppercase tracking-[0.22em] text-accent">{t('topicNext.eyebrow')}</p>
            <span className="mt-3 block h-0.5 w-10 bg-accent" aria-hidden />
            <h2 className="mt-5 font-heading text-3xl sm:text-4xl">{t('topicNext.title')}</h2>
            <p className="mt-4 text-base leading-7 text-white/75">
              {t('topicNext.description')}
            </p>
            <div className="mt-8 flex flex-col gap-3 sm:flex-row">
              <Link
                href="/contact?subject=consultancy"
                className="inline-flex h-12 items-center justify-center gap-2 bg-accent px-7 text-sm font-semibold text-accent-foreground transition hover:bg-accent/90"
              >
                {service?.cta ?? 'Talk to a consultant'}
                <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-7 text-sm font-semibold transition hover:border-accent hover:text-accent"
              >
                {t('cta.requestProposal')}
              </Link>
            </div>
          </div>
        </div>
      </section>
    </main>
  )
}

function ConsultancyHomeView() {
  const { site } = useSiteData()
  const t = useTranslations('services.consultancy')

  return (
    <main>
      <PageHero
        eyebrow={t('hero.eyebrow')}
        title={t('hero.title')}
        description={t('hero.description')}
      />

      <section className="border-b border-border/70 bg-white py-16 sm:py-20 md:py-24">
        <div className="container-wide">
          <div className="grid gap-8 lg:grid-cols-[1.2fr_0.8fr] lg:items-end lg:gap-12">
            <div>
              <p className="text-[11px] font-bold uppercase tracking-[0.22em] text-secondary">
                {t('intro.eyebrow')}
              </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('intro.title')}
              </h2>
              <p className="mt-4 max-w-3xl text-base leading-7 text-muted-foreground sm:text-lg sm:leading-8">
                {t('intro.description', { name: site.shortName })}
              </p>
            </div>
            <div className="flex flex-col gap-3 sm:flex-row lg:flex-col">
              <Link
                href="/contact?subject=consultancy"
                className="inline-flex h-12 items-center justify-center gap-2 bg-primary px-6 text-sm font-semibold text-primary-foreground transition hover:bg-primary/90"
              >
                {t('intro.requestConsultation')}
                <ArrowRight className="h-4 w-4" />
              </Link>
              <Link
                href="/contact?subject=proposal"
                className="inline-flex h-12 items-center justify-center border border-border px-6 text-sm font-semibold transition hover:border-primary hover:text-primary"
              >
                {t('intro.requestProposal')}
              </Link>
            </div>
          </div>
        </div>
      </section>

      <section className="border-b border-border/70 bg-[oklch(0.975_0.01_343)] py-10 sm:py-12">
        <div className="container-wide">
          <p className="mb-4 text-[11px] font-bold uppercase tracking-[0.18em] text-secondary">
            {t('expertise')}
          </p>
          <div className="flex flex-wrap gap-2">
            {expertiseBadges.map((badge) => (
              <span
                key={badge}
                className="inline-flex items-center gap-1.5 border border-border bg-white px-4 py-1.5 text-sm font-semibold text-foreground"
              >
                <Sparkles className="h-3 w-3 text-accent" />
                {badge}
              </span>
            ))}
          </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('whatWeDo.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('whatWeDo.title')}</h2>
            <p className="mt-4 text-base leading-7 text-muted-foreground">
              {t('whatWeDo.description')}
            </p>
          </div>
          <div className="grid gap-4 sm:grid-cols-2 xl:grid-cols-4">
            {consultingServices.map(({ icon: Icon, title, desc }, index) => (
              <article
                key={title}
                className="border border-border/80 bg-[oklch(0.985_0.008_343)] p-6 transition duration-300 hover:border-secondary/40 hover:bg-white 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">{desc}</p>
              </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('sectors.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('sectors.title')}</h2>
            <p className="mt-4 text-base leading-7 text-muted-foreground">
              {t('sectors.description')}
            </p>
          </div>
          <ul className="grid gap-3 sm:grid-cols-2 lg:grid-cols-3">
            {industries.map((industry) => (
              <li
                key={industry}
                className="flex items-center gap-3 border border-border/80 bg-white px-5 py-3.5"
              >
                <CheckCircle2 className="h-4 w-4 shrink-0 text-primary" />
                <span className="text-sm font-medium text-foreground">{industry}</span>
              </li>
            ))}
          </ul>
        </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('approach.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('approach.title')}</h2>
            <p className="mt-4 text-base leading-7 text-muted-foreground">
              {t('approach.description')}
            </p>
          </div>
          <ol className="mx-auto max-w-3xl space-y-3">
            {approachSteps.map((item) => (
              <li
                key={item.step}
                className="flex gap-5 border border-border/80 bg-[oklch(0.985_0.008_343)] 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(item.step).padStart(2, '0')}
                </span>
                <div>
                  <h3 className="text-lg font-bold text-foreground">{item.title}</h3>
                  <p className="mt-1.5 text-sm leading-6 text-muted-foreground">{item.desc}</p>
                </div>
              </li>
            ))}
          </ol>
        </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('engagement.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('engagement.title')}</h2>
          </div>
          <div className="grid gap-4 md:grid-cols-3">
            {engagementModels.map((model, index) => (
              <article
                key={model.title}
                className="border border-border/80 bg-white p-7 transition hover:border-secondary/40 hover:shadow-[0_16px_40px_rgba(15,23,42,0.06)]"
              >
                <p className="font-mono text-xs text-accent">{String(index + 1).padStart(2, '0')}</p>
                <h3 className="mt-3 text-xl font-bold text-foreground">{model.title}</h3>
                <p className="mt-1 text-sm text-muted-foreground">{model.subtitle}</p>
                <ul className="mt-5 space-y-2.5 border-t border-border/70 pt-5">
                  {model.points.map((point) => (
                    <li key={point} className="flex items-center gap-2.5 text-sm text-foreground">
                      <CheckCircle2 className="h-4 w-4 shrink-0 text-primary" />
                      {point}
                    </li>
                  ))}
                </ul>
              </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="grid gap-8 border border-border/80 bg-[oklch(0.985_0.008_343)] px-6 py-8 sm:px-8 lg:grid-cols-2 lg:items-center lg:gap-12 lg:p-12">
            <div>
              <p className="text-[11px] font-bold uppercase tracking-[0.22em] text-secondary">
                {t('partner.eyebrow')}
              </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('partner.title')}
              </h2>
              <p className="mt-4 text-base leading-7 text-muted-foreground">
                {t('partner.description')}
              </p>
              <Link
                href="/contact?subject=consultancy"
                className="mt-8 inline-flex h-12 items-center gap-2 bg-primary px-6 text-sm font-semibold text-primary-foreground transition hover:bg-primary/90"
              >
                {t('partner.start')}
                <ArrowRight className="h-4 w-4" />
              </Link>
            </div>
            <div className="grid gap-3 sm:grid-cols-2">
              {[
                { icon: Zap, title: 'Deep Industry Experience', desc: 'Consultants with 15–30+ years of domain expertise' },
                { icon: CheckCircle2, title: 'Practical Solutions', desc: 'Evidence-based strategies built for real-world implementation' },
                { icon: TrendingUp, title: 'Implementation Focus', desc: 'Active support through execution, not just recommendations' },
                { icon: Globe, title: 'Global Perspective', desc: 'Experience across 35+ countries and international best practice' },
              ].map(({ icon: Icon, title, desc }) => (
                <div key={title} className="border border-border/80 bg-white p-5">
                  <div className="mb-3 flex h-9 w-9 items-center justify-center bg-primary/8 text-primary">
                    <Icon className="h-4 w-4" />
                  </div>
                  <p className="text-sm font-bold text-foreground">{title}</p>
                  <p className="mt-1 text-xs leading-5 text-muted-foreground">{desc}</p>
                </div>
              ))}
            </div>
          </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">
          <h2 className="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')}
          </p>
          <div className="mt-8 flex flex-col justify-center gap-3 sm:flex-row">
            <Link
              href="/contact?subject=consultancy"
              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.requestConsultation')}
              <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.requestProposal')}
            </Link>
          </div>
        </div>
      </section>
    </main>
  )
}

function ConsultancyContent() {
  const searchParams = useSearchParams()
  const topic = searchParams.get('topic')

  if (topic === 'curriculum' || topic === 'evaluations' || topic === 'translation') {
    return <TopicServiceView topic={topic} />
  }

  return <ConsultancyHomeView />
}

function ConsultancyFallback() {
  const t = useTranslations('services.consultancy')
  return (
    <main>
      <PageHero
        eyebrow={t('hero.eyebrow')}
        title={t('hero.title')}
        description={t('hero.description')}
      />
    </main>
  )
}

export default function ConsultancyPage() {
  return (
    <Suspense fallback={<ConsultancyFallback />}>
      <ConsultancyContent />
    </Suspense>
  )
}