import type { Metadata } from 'next'
import { ArrowRight, Award, Globe, Sparkles, Users, Zap } from 'lucide-react'
import { getTranslations, setRequestLocale } from 'next-intl/server'
import { BrandLogo } from '@/components/brand-logo'
import { PageHero } from '@/components/page-hero'
import { Link } from '@/i18n/navigation'
import { locales, type Locale } from '@/i18n/config'
import { whyChooseRokyan } from '@/lib/site-config'
import { buildShareMetadata } from '@/lib/metadata'
import { getStaticSiteSettings, getYearsOfExcellence } from '@/lib/site-settings'

const valueIcons = {
  excellence: Award,
  collaboration: Users,
  innovation: Globe,
  impact: Zap,
} as const

type AboutPageProps = {
  params: Promise<{ locale: string }>
}

export function generateStaticParams() {
  return locales.map((locale) => ({ locale }))
}

export async function generateMetadata({ params }: AboutPageProps): Promise<Metadata> {
  const { locale } = await params
  const t = await getTranslations({ locale, namespace: 'meta.about' })
  const site = getStaticSiteSettings()

  return buildShareMetadata({
    title: t('title'),
    description: t('description'),
    path: `/${locale}/about`,
    site,
  })
}

export default async function AboutPage({ params }: AboutPageProps) {
  const { locale } = await params
  setRequestLocale(locale as Locale)

  const t = await getTranslations('about.overview')
  const site = getStaticSiteSettings()
  const years = getYearsOfExcellence(site.foundedYear)
  const missionPoints = t.raw('mission.points') as string[]
  const valueKeys = ['excellence', 'collaboration', 'innovation', 'impact'] as const

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

      <section className="relative overflow-hidden border-b border-border/70 bg-[oklch(0.975_0.01_343)]">
        <div className="container-wide relative flex flex-col items-center gap-8 py-16 text-center sm:py-20 md:py-24">
          <p className="text-[11px] font-bold uppercase tracking-[0.22em] text-secondary">
            {t('intro.eyebrow')}
          </p>
          <span className="h-0.5 w-10 bg-accent" aria-hidden />
          <BrandLogo size="xl" />
          <div className="max-w-2xl space-y-4">
            <h2 className="font-heading text-3xl leading-snug text-foreground text-balance sm:text-4xl md:text-5xl">
              {site.fullName}
            </h2>
            <p className="text-base leading-7 text-muted-foreground sm:text-lg sm:leading-8">
              {site.description}
            </p>
          </div>
          <div className="flex flex-col gap-3 sm:flex-row">
            <Link
              href="/about/company-profile"
              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.exploreProfile')}
              <ArrowRight className="h-4 w-4" />
            </Link>
            <Link
              href="/services/upcoming-courses"
              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('intro.browseCourses')}
            </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 gap-6 lg:grid-cols-[minmax(0,1.2fr)_minmax(320px,0.8fr)] lg:items-stretch">
            <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('mission.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('mission.title')}
                </h2>
              </div>
              <div className="space-y-6 px-6 py-6 sm:px-8 sm:py-8">
                <ul className="space-y-3 text-base text-muted-foreground sm:text-lg">
                  {missionPoints.map((point) => (
                    <li key={point} className="flex gap-2.5">
                      <Sparkles className="mt-1 h-4 w-4 shrink-0 text-primary" />
                      {point}
                    </li>
                  ))}
                </ul>
                <div className="flex flex-col gap-3 sm:flex-row">
                  <Link
                    href="/about/company-profile"
                    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.exploreProfile')}
                    <ArrowRight className="h-4 w-4" />
                  </Link>
                  <Link
                    href="/services/upcoming-courses"
                    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('intro.browseCourses')}
                  </Link>
                </div>
              </div>
            </div>

            <div className="grid gap-4 sm:grid-cols-3 lg:grid-cols-1">
              {[
                { value: `${years}+`, label: t('stats.years') },
                { value: '500+', label: t('stats.courses') },
                { value: t('stats.reachValue'), label: t('stats.reach') },
              ].map((stat) => (
                <div
                  key={stat.label}
                  className="border border-border/80 bg-white px-6 py-6 transition hover:border-secondary/40"
                >
                  <p className="text-[11px] font-bold uppercase tracking-[0.16em] text-muted-foreground">
                    {stat.label}
                  </p>
                  <p className="mt-3 font-heading text-3xl text-primary sm:text-4xl">{stat.value}</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('values.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('values.title')}
            </h2>
            <p className="mt-4 text-base leading-7 text-muted-foreground sm:text-lg sm:leading-8">
              {t('values.description')}
            </p>
          </div>

          <div className="grid grid-cols-1 gap-4 md:grid-cols-2 xl:grid-cols-4">
            {valueKeys.map((key, index) => {
              const Icon = valueIcons[key]
              return (
                <article
                  key={key}
                  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)] sm:p-7"
                >
                  <div className="flex items-center justify-between">
                    <div className="flex h-12 w-12 items-center justify-center bg-primary/8 text-primary">
                      <Icon className="h-6 w-6" />
                    </div>
                    <span className="font-mono text-xs text-muted-foreground">
                      {String(index + 1).padStart(2, '0')}
                    </span>
                  </div>
                  <h3 className="mt-5 text-xl font-bold tracking-tight text-foreground">
                    {t(`values.items.${key}.title`)}
                  </h3>
                  <p className="mt-2 text-sm leading-6 text-muted-foreground">
                    {t(`values.items.${key}.desc`)}
                  </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="border border-border/80 bg-[oklch(0.985_0.008_343)]">
            <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('why.eyebrow', { name: site.shortName })}
                </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('why.title')}
                </h2>
                <p className="text-base leading-7 text-muted-foreground">
                  {t('why.description')}
                </p>
              </div>
              <div className="grid gap-3 sm:grid-cols-2">
                {whyChooseRokyan.map((item) => (
                  <div
                    key={item.title}
                    className="border border-border/80 bg-white px-4 py-4 text-sm font-medium text-foreground"
                  >
                    {item.title}
                  </div>
                ))}
              </div>
            </div>
          </div>
        </div>
      </section>
    </main>
  )
}