'use client'

import { useTranslations } from 'next-intl'
import { ArrowRight, Building2, Globe2, LineChart, ShieldCheck, Sparkles, Users } from 'lucide-react'
import { PageHero } from '@/components/page-hero'
import { Link } from '@/i18n/navigation'
import { getYearsOfExcellence } from '@/lib/site-settings'
import { useSiteData } from '@/contexts/site-data-context'

const pillarIcons = {
  customised: Sparkles,
  certified: ShieldCheck,
  global: Globe2,
  impact: LineChart,
} as const

export default function CompanyProfile() {
  const { site } = useSiteData()
  const t = useTranslations('about.companyProfile')
  const years = getYearsOfExcellence(site.foundedYear)
  const highlightItems = t.raw('highlights.items') as string[]
  const pillarKeys = ['customised', 'certified', 'global', 'impact'] as const

  return (
    <main>
      <PageHero
        eyebrow={t('hero.eyebrow')}
        title={t('hero.title')}
        description={t('hero.description', { name: site.shortName })}
      />

      <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-6 lg:grid-cols-[minmax(0,1.1fr)_minmax(320px,0.9fr)]">
            <div className="border border-border/80 bg-[oklch(0.985_0.008_343)]">
              <div className="border-b border-border/70 px-6 py-5 sm:px-8">
                <p className="text-[11px] font-bold uppercase tracking-[0.22em] text-secondary">
                  {t('overview.eyebrow')}
                </p>
                <span className="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('overview.title')}
                </h2>
              </div>
              <div className="space-y-5 px-6 py-6 sm:px-8 sm:py-8">
                <p className="text-base leading-7 text-muted-foreground">
                  {t('overview.p1', { year: site.foundedYear, fullName: site.fullName })}
                </p>
                <p className="text-base leading-7 text-muted-foreground">{t('overview.p2')}</p>
                <div className="flex flex-col gap-3 sm:flex-row">
                  <Link
                    href="/contact"
                    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('overview.speak')}
                    <ArrowRight className="h-4 w-4" />
                  </Link>
                  <Link
                    href="/about"
                    className="inline-flex h-12 items-center justify-center border border-border bg-white px-6 text-sm font-semibold transition hover:border-primary hover:text-primary"
                  >
                    {t('overview.back')}
                  </Link>
                </div>
              </div>
            </div>

            <div className="grid gap-4 sm:grid-cols-2 lg:grid-cols-1">
              {[
                { icon: Building2, value: `${years}+`, label: t('stats.years') },
                { icon: Users, value: '15K+', label: t('stats.trained') },
                { icon: Globe2, value: t('stats.reachValue'), label: t('stats.reach') },
              ].map(({ icon: Icon, value, label }) => (
                <div
                  key={label}
                  className="border border-border/80 bg-white px-6 py-6 transition hover:border-secondary/40"
                >
                  <div className="flex h-11 w-11 items-center justify-center bg-primary/8 text-primary">
                    <Icon className="h-5 w-5" />
                  </div>
                  <p className="mt-4 font-heading text-3xl text-primary">{value}</p>
                  <p className="mt-2 text-sm font-medium text-muted-foreground">{label}</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('direction.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('direction.title')}
            </h2>
            <p className="mt-4 text-base leading-7 text-muted-foreground sm:text-lg sm:leading-8">
              {t('direction.description')}
            </p>
          </div>

          <div className="grid gap-4 lg:grid-cols-2">
            <article className="border border-border/80 bg-white p-6 sm:p-8">
              <h3 className="text-xl font-bold text-foreground">{t('foundation.title')}</h3>
              <p className="mt-2 text-sm text-muted-foreground">{t('foundation.subtitle')}</p>
              <div className="mt-5 space-y-4 text-muted-foreground">
                <p>{t('foundation.p1', { year: site.foundedYear, name: site.shortName })}</p>
                <p>{t('foundation.p2')}</p>
              </div>
            </article>

            <article className="border border-border/80 bg-white p-6 sm:p-8">
              <h3 className="text-xl font-bold text-foreground">{t('vision.title')}</h3>
              <p className="mt-2 text-sm text-muted-foreground">{t('vision.subtitle')}</p>
              <div className="mt-5 space-y-4 text-muted-foreground">
                <p>{t('vision.p1')}</p>
                <p>{t('vision.p2')}</p>
              </div>
            </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-4 md:grid-cols-2 xl:grid-cols-4">
            {pillarKeys.map((key) => {
              const Icon = pillarIcons[key]
              return (
                <article
                  key={key}
                  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="mb-4 flex h-12 w-12 items-center justify-center bg-primary/8 text-primary">
                    <Icon className="h-6 w-6" />
                  </div>
                  <h3 className="text-xl font-bold tracking-tight text-foreground">
                    {t(`pillars.${key}.title`)}
                  </h3>
                  <p className="mt-2 text-sm leading-6 text-muted-foreground">
                    {t(`pillars.${key}.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="border border-border/80 bg-white">
            <div className="grid gap-8 px-6 py-8 sm:px-8 lg:grid-cols-[0.95fr_1.05fr] lg:items-center">
              <div className="space-y-4">
                <p className="text-[11px] font-bold uppercase tracking-[0.22em] text-secondary">
                  {t('highlights.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('highlights.title')}
                </h2>
                <p className="text-base leading-7 text-muted-foreground">
                  {t('highlights.description')}
                </p>
              </div>

              <div className="grid gap-3 sm:grid-cols-2">
                {highlightItems.map((item) => (
                  <div
                    key={item}
                    className="border border-border/80 bg-[oklch(0.985_0.008_343)] px-4 py-4 text-sm font-medium text-foreground"
                  >
                    {item}
                  </div>
                ))}
              </div>
            </div>
          </div>
        </div>
      </section>
    </main>
  )
}