import { Link } from '@/i18n/navigation'
import {
  ArrowRight,
  BookOpen,
  BriefcaseBusiness,
  Building2,
  CheckCircle2,
  ClipboardList,
  FlaskConical,
  Globe,
  GraduationCap,
  HeartHandshake,
  Landmark,
  Layers,
  LineChart,
  MessageSquare,
  Microscope,
  MonitorPlay,
  Plane,
  RefreshCw,
  Settings2,
  ShieldCheck,
  Sparkles,
  Star,
  TrendingUp,
  Trophy,
  Users,
  Zap,
} from 'lucide-react'
import { getTranslations } from 'next-intl/server'
import { PageHero } from '@/components/page-hero'
import { ClientsSection } from '@/components/clients-section'
import { GoogleReviews } from '@/components/google-reviews'
import { ContactForm } from '@/components/enquiry-form'
import { getStaticSiteSettings } from '@/lib/site-settings'

const benefits = [
  {
    icon: Settings2,
    title: 'Organisation-Specific Curriculum',
    text: 'Every programme is built from scratch around your strategic priorities, industry context, and team capability gaps.',
  },
  {
    icon: Globe,
    title: 'International Expert Faculty',
    text: 'Facilitators with hands-on experience across governments, central banks, multinationals, and regulatory bodies worldwide.',
  },
  {
    icon: FlaskConical,
    title: 'Practical Case Studies',
    text: 'Real scenarios drawn from your sector — not generic textbook examples — so learning transfers directly to the workplace.',
  },
  {
    icon: Star,
    title: 'Executive Coaching',
    text: 'One-on-one and group coaching woven into the programme to accelerate individual leadership development.',
  },
  {
    icon: Layers,
    title: 'Action Learning Projects',
    text: 'Participants tackle live organisational challenges during the programme, delivering immediate business value.',
  },
  {
    icon: LineChart,
    title: 'Measurable ROI',
    text: 'Pre- and post-programme assessments with clear KPIs ensure you can demonstrate the impact of your investment.',
  },
  {
    icon: HeartHandshake,
    title: 'Post-Programme Support',
    text: 'Follow-up coaching, implementation check-ins, and alumni resources to sustain learning beyond the classroom.',
  },
  {
    icon: MonitorPlay,
    title: 'Digital Learning Resources',
    text: 'Participants retain lifetime access to digital toolkits, recordings, and reference materials after the programme.',
  },
]

const process = [
  {
    icon: MessageSquare,
    title: 'Consultation',
    desc: 'We meet with your leadership team to understand strategic goals, culture, and the specific capability gaps you need to close.',
  },
  {
    icon: Microscope,
    title: 'Training Needs Analysis',
    desc: 'A structured TNA — surveys, interviews, and competency mapping — gives us a precise picture of where development is needed.',
  },
  {
    icon: ClipboardList,
    title: 'Programme Design',
    desc: 'Our curriculum team designs a bespoke learning journey: modules, case studies, assessments, and delivery schedule.',
  },
  {
    icon: ShieldCheck,
    title: 'Expert Validation',
    desc: 'Subject-matter experts and your internal stakeholders review and sign off the programme before delivery begins.',
  },
  {
    icon: GraduationCap,
    title: 'Delivery',
    desc: 'Senior facilitators deliver the programme on-site, virtually, or in a hybrid format — wherever your team is located.',
  },
  {
    icon: TrendingUp,
    title: 'Impact Measurement',
    desc: 'Post-programme evaluation against agreed KPIs, with a full impact report shared with your leadership team.',
  },
  {
    icon: RefreshCw,
    title: 'Continuous Improvement',
    desc: 'Feedback loops and follow-up sessions ensure the programme evolves with your organisation over time.',
  },
]

const deliveryModels = [
  {
    title: 'On-Site',
    desc: 'Delivered at your premises or a venue of your choice — anywhere in the world.',
    icon: Building2,
  },
  {
    title: 'Virtual',
    desc: 'Live instructor-led sessions via Zoom or Google Meet with full interactivity.',
    icon: MonitorPlay,
  },
  {
    title: 'Hybrid',
    desc: 'Blend in-person and online participation for distributed teams across locations.',
    icon: Layers,
  },
  {
    title: 'Executive Retreat',
    desc: 'Immersive off-site programmes in Bangkok or international destinations.',
    icon: Plane,
  },
]

const durations = ['1-Day Workshop', '3-Day Intensive', '5-Day Programme', 'Executive Diploma', 'Custom Duration']

const audiences = ['Board Members & Directors', 'C-Suite Executives', 'Senior Managers', 'Middle Management', 'Technical Specialists', 'Cross-Functional Teams']

const industries = [
  { icon: Landmark, name: 'Government & Public Sector' },
  { icon: BriefcaseBusiness, name: 'Banking & Finance' },
  { icon: Zap, name: 'Oil, Gas & Energy' },
  { icon: ShieldCheck, name: 'Regulatory Bodies' },
  { icon: Globe, name: 'International Organisations' },
  { icon: Users, name: 'NGOs & Development' },
  { icon: FlaskConical, name: 'Healthcare & Pharma' },
  { icon: Plane, name: 'Aviation & Transport' },
]

const programmeAreas = [
  { icon: Trophy, name: 'Leadership & Governance', href: '/courses?category=leadership' },
  { icon: LineChart, name: 'Finance & Accounting', href: '/courses?category=finance' },
  { icon: ShieldCheck, name: 'Internal Audit & Risk', href: '/courses?category=finance-and-audit' },
  { icon: ClipboardList, name: 'Procurement & Contracts', href: '/courses?category=procurement-and-contracts' },
  { icon: Sparkles, name: 'Artificial Intelligence', href: '/courses?category=artificial-intelligence' },
  { icon: Users, name: 'Human Resources', href: '/courses?category=human-resources' },
  { icon: Settings2, name: 'Project Management', href: '/courses?category=project-management' },
  { icon: MessageSquare, name: 'Communication Skills', href: '/courses?category=communication' },
  { icon: Globe, name: 'ESG & Sustainability', href: '/courses?category=environment-social-safeguard' },
  { icon: MonitorPlay, name: 'Digital Transformation', href: '/courses?category=information-technology' },
  { icon: Landmark, name: 'Banking & Regulation', href: '/courses?category=banking' },
  { icon: BookOpen, name: 'Mini-MBAs', href: '/courses?category=mini-mbas' },
]

const whyChoose = [
  'Fully customised curriculum — no off-the-shelf content',
  'International trainers with real-world sector experience',
  'Practical, application-focused learning methodology',
  'Flexible delivery worldwide — on-site, virtual, or hybrid',
  'Post-training implementation support and coaching',
  'Globally recognised executive certificates',
  'Proven track record with governments and multinationals',
  'Programmes delivered across 70+ countries',
]

const stats = [
  { value: '70+', label: 'Countries Reached' },
  { value: '500+', label: 'Organisations Trained' },
  { value: '15,000+', label: 'Executives Developed' },
  { value: '98%', label: 'Client Satisfaction' },
]


export default async function BespokeTrainingPage() {
  const t = await getTranslations('training.bespoke')
  const site = getStaticSiteSettings()

  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=proposal"
            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"
          >
            Request a Proposal
            <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"
          >
            Talk to a Consultant
          </Link>
        </div>
      </PageHero>

      <section className="border-b border-border/70 bg-white">
        <div className="container-wide py-10 sm:py-12">
          <dl className="grid grid-cols-2 gap-4 lg:grid-cols-4">
            {stats.map(({ value, label }) => (
              <div key={label} className="border-l-2 border-accent/80 pl-4">
                <dt className="text-[10px] font-bold uppercase tracking-[0.14em] text-muted-foreground sm:text-[11px]">
                  {label}
                </dt>
                <dd className="mt-2 font-heading text-3xl text-primary sm:text-4xl">{value}</dd>
              </div>
            ))}
          </dl>
        </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="grid items-center gap-12 lg:grid-cols-2 lg:gap-14">
            <div>
              <p className="text-[11px] font-bold uppercase tracking-[0.22em] text-secondary">
                Why {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">
                Why Global Organisations Choose {site.shortName}
              </h2>
              <p className="mt-4 text-base leading-7 text-muted-foreground">
                From ministries and central banks to Fortune 500 corporations and international NGOs,
                organisations across 70+ countries trust {site.shortName} to design and deliver executive learning
                that drives measurable performance improvement.
              </p>
              <ul className="mt-6 space-y-3">
                {whyChoose.map((item) => (
                  <li key={item} className="flex items-start gap-3 text-sm text-foreground">
                    <CheckCircle2 className="mt-0.5 h-4 w-4 shrink-0 text-primary" />
                    {item}
                  </li>
                ))}
              </ul>
            </div>
            <div className="grid grid-cols-2 gap-3">
              {industries.map(({ icon: Icon, name }) => (
                <div
                  key={name}
                  className="flex items-center gap-3 border border-border/80 bg-white p-4 transition hover:border-secondary/40"
                >
                  <div className="flex h-10 w-10 shrink-0 items-center justify-center bg-primary/8 text-primary">
                    <Icon className="h-5 w-5" />
                  </div>
                  <span className="text-sm font-semibold text-foreground">{name}</span>
                </div>
              ))}
            </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="mx-auto mb-10 max-w-3xl text-center md:mb-12">
            <p className="text-[11px] font-bold uppercase tracking-[0.22em] text-secondary">What You Get</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">
              Every Bespoke Programme Includes
            </h2>
          </div>
          <div className="grid gap-4 sm:grid-cols-2 xl:grid-cols-4">
            {benefits.map(({ icon: Icon, title, text }, 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-sm font-bold 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-[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">How It Works</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">Our 7-Step Process</h2>
            <p className="mt-4 text-base text-muted-foreground">
              From first conversation to sustained impact — a rigorous, collaborative process that ensures every programme delivers.
            </p>
          </div>
          <ol className="grid gap-4 sm:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4">
            {process.map(({ icon: Icon, title, desc }, i) => (
              <li
                key={title}
                className="border border-border/80 bg-white p-6 transition hover:border-secondary/40"
              >
                <div className="flex items-center justify-between gap-3">
                  <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(i + 1).padStart(2, '0')}</span>
                </div>
                <h3 className="mt-4 text-sm font-bold text-foreground">{title}</h3>
                <p className="mt-2 text-xs leading-5 text-muted-foreground sm:text-sm sm:leading-6">{desc}</p>
              </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="mx-auto mb-10 max-w-3xl text-center md:mb-12">
            <p className="text-[11px] font-bold uppercase tracking-[0.22em] text-secondary">Flexibility</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">
              Tailored to Your Organisation
            </h2>
          </div>
          <div className="grid gap-4 md:grid-cols-2 xl:grid-cols-4">
            <div className="border border-border/80 bg-[oklch(0.985_0.008_343)] p-6">
              <p className="mb-4 text-[11px] font-bold uppercase tracking-[0.16em] text-secondary">Delivery Models</p>
              <div className="space-y-3">
                {deliveryModels.map(({ icon: Icon, title, desc }) => (
                  <div key={title} className="flex items-start gap-3">
                    <div className="flex h-8 w-8 shrink-0 items-center justify-center bg-primary/8 text-primary">
                      <Icon className="h-4 w-4" />
                    </div>
                    <div>
                      <p className="text-sm font-semibold text-foreground">{title}</p>
                      <p className="text-xs text-muted-foreground">{desc}</p>
                    </div>
                  </div>
                ))}
              </div>
            </div>
            <div className="border border-border/80 bg-[oklch(0.985_0.008_343)] p-6">
              <p className="mb-4 text-[11px] font-bold uppercase tracking-[0.16em] text-secondary">Programme Duration</p>
              <div className="space-y-2">
                {durations.map((d) => (
                  <div key={d} className="flex items-center gap-2 text-sm text-foreground">
                    <CheckCircle2 className="h-4 w-4 shrink-0 text-primary" />
                    {d}
                  </div>
                ))}
              </div>
            </div>
            <div className="border border-border/80 bg-[oklch(0.985_0.008_343)] p-6">
              <p className="mb-4 text-[11px] font-bold uppercase tracking-[0.16em] text-secondary">Audience</p>
              <div className="space-y-2">
                {audiences.map((a) => (
                  <div key={a} className="flex items-center gap-2 text-sm text-foreground">
                    <CheckCircle2 className="h-4 w-4 shrink-0 text-primary" />
                    {a}
                  </div>
                ))}
              </div>
            </div>
            <div className="border border-border/80 bg-[oklch(0.985_0.008_343)] p-6">
              <p className="mb-4 text-[11px] font-bold uppercase tracking-[0.16em] text-secondary">Industries</p>
              <div className="space-y-2">
                {industries.map(({ name }) => (
                  <div key={name} className="flex items-center gap-2 text-sm text-foreground">
                    <CheckCircle2 className="h-4 w-4 shrink-0 text-primary" />
                    {name}
                  </div>
                ))}
              </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">Subject Areas</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">
              Key Programme Categories
            </h2>
            <p className="mt-4 text-base text-muted-foreground">
              We design bespoke programmes across all major executive education disciplines.
            </p>
          </div>
          <div className="grid gap-3 sm:grid-cols-2 md:grid-cols-3 xl:grid-cols-4">
            {programmeAreas.map(({ icon: Icon, name, href }) => (
              <Link
                key={name}
                href={href}
                className="group flex items-center gap-3 border border-border/80 bg-white p-4 transition hover:border-secondary/40 hover:shadow-[0_12px_28px_rgba(15,23,42,0.06)]"
              >
                <div className="flex h-10 w-10 shrink-0 items-center justify-center bg-primary/8 text-primary transition group-hover:bg-primary group-hover:text-primary-foreground">
                  <Icon className="h-5 w-5" />
                </div>
                <span className="text-sm font-semibold text-foreground">{name}</span>
                <ArrowRight className="ml-auto h-4 w-4 shrink-0 text-muted-foreground opacity-0 transition group-hover:opacity-100" />
              </Link>
            ))}
          </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-center gap-10 border border-border/80 bg-[oklch(0.985_0.008_343)] p-8 lg:grid-cols-2 lg:p-12">
            <div>
              <p className="text-[11px] font-bold uppercase tracking-[0.22em] text-secondary">Global Reach</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">
                Programmes Delivered Across 70+ Countries
              </h2>
              <p className="mt-4 text-base leading-7 text-muted-foreground">
                From Bangkok to Nairobi, Riyadh to London — {site.shortName} has designed and delivered
                executive programmes for organisations on every continent. Our international faculty
                and global delivery capability mean your team can learn wherever they are.
              </p>
              <div className="mt-5 flex flex-wrap gap-2">
                {['Asia-Pacific', 'Middle East', 'Africa', 'Europe', 'Americas', 'Central Asia'].map((region) => (
                  <span
                    key={region}
                    className="border border-primary/20 bg-primary/5 px-3 py-1 text-xs font-semibold text-primary"
                  >
                    {region}
                  </span>
                ))}
              </div>
            </div>
            <div className="grid grid-cols-2 gap-3">
              {stats.map(({ value, label }) => (
                <div key={label} className="border border-border/80 bg-white p-6 text-center">
                  <p className="font-heading text-3xl text-primary">{value}</p>
                  <p className="mt-1 text-sm text-muted-foreground">{label}</p>
                </div>
              ))}
            </div>
          </div>
        </div>
      </section>

      <ClientsSection variant="strip" />

      <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">
            <p className="text-[11px] font-bold uppercase tracking-[0.22em] text-secondary">Client Voices</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">
              What Our Clients Say
            </h2>
            <p className="mt-4 text-base text-muted-foreground">
              Feedback from executives, directors, and government officials who have experienced {site.shortName} bespoke programmes.
            </p>
          </div>
          <GoogleReviews compact={false} />
        </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-12 lg:grid-cols-2">
            <div className="space-y-5 lg:sticky lg:top-24">
              <p className="text-[11px] font-bold uppercase tracking-[0.22em] text-secondary">Get Started</p>
              <span className="block h-0.5 w-10 bg-accent" aria-hidden />
              <h2 className="font-heading text-3xl text-foreground sm:text-4xl">
                Request Your Bespoke Programme
              </h2>
              <p className="text-base leading-7 text-muted-foreground">
                Tell us about your organisation and goals. Our advisory team will follow up
                with a tailored programme recommendation.
              </p>
              <ul className="space-y-3">
                {[
                  'Free initial consultation',
                  'No obligation proposal',
                  'Dedicated programme advisor',
                ].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>
            <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 15% 30%, oklch(0.50 0.09 179 / 0.3), transparent)',
          }}
          aria-hidden
        />
        <div className="container-wide relative">
          <div className="mx-auto max-w-3xl text-center">
            <p className="text-[11px] font-bold uppercase tracking-[0.22em] text-accent">
              Let&apos;s Get Started
            </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">
              Let&apos;s Build Your Organisation&apos;s Next Success Story
            </h2>
            <p className="mx-auto mt-4 max-w-xl text-white/75">
              Tell us about your organisation, your goals, and your team. We&apos;ll design a bespoke
              executive programme that delivers measurable results.
            </p>
            <div className="mt-10 grid gap-3 sm:grid-cols-3">
              <Link
                href="/contact?subject=advisor"
                className="border border-white/15 bg-white/[0.04] p-5 text-center transition hover:border-accent/40"
              >
                <Users className="mx-auto mb-3 h-6 w-6 text-accent" />
                <p className="text-sm font-bold">Speak with a Consultant</p>
                <p className="mt-1 text-xs text-white/65">Talk through your needs with an advisor</p>
              </Link>
              <Link
                href="/contact?subject=proposal"
                className="border border-white/15 bg-white/[0.04] p-5 text-center transition hover:border-accent/40"
              >
                <ClipboardList className="mx-auto mb-3 h-6 w-6 text-accent" />
                <p className="text-sm font-bold">Request a Proposal</p>
                <p className="mt-1 text-xs text-white/65">Get a tailored programme proposal</p>
              </Link>
              <Link
                href="/contact?subject=custom-training"
                className="border border-white/15 bg-white/[0.04] p-5 text-center transition hover:border-accent/40"
              >
                <MessageSquare className="mx-auto mb-3 h-6 w-6 text-accent" />
                <p className="text-sm font-bold">Schedule a Discovery Meeting</p>
                <p className="mt-1 text-xs text-white/65">Book a free 30-minute consultation</p>
              </Link>
            </div>
            <div className="mt-8">
              <Link
                href="/contact?subject=custom-training"
                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"
              >
                Start the Conversation
                <ArrowRight className="h-4 w-4" />
              </Link>
            </div>
          </div>
        </div>
      </section>
    </main>
  )
}