import Link from "next/link";
import { setRequestLocale, getTranslations } from "next-intl/server";
import { BadgeCheck, Trophy, ShieldCheck } from "lucide-react";
import { FadeIn } from "@/components/magicui/fade-in";
import { ButtonLink } from "@/components/ui/button";
import {
  getLocalizedCertificationsDetail,
  getLocalizedAllCredentials,
} from "@/data/localized-data";
import { CertGallery } from "@/components/certifications/cert-gallery";

export default async function CertificationsPage({
  params,
}: {
  params: Promise<{ locale: string }>;
}) {
  const { locale } = await params;
  setRequestLocale(locale);
  const t = await getTranslations("certPage");
  const certs = getLocalizedCertificationsDetail(locale);
  const credentials = getLocalizedAllCredentials(locale);

  return (
    <main>

      {/* ── HERO ─────────────────────────────────────────── */}
      <section className="relative overflow-hidden bg-gold-bg py-16 sm:py-20">
        <div
          className="pointer-events-none absolute inset-0"
          style={{
            background:
              "radial-gradient(ellipse 70% 60% at 60% 50%, rgba(166,144,94,0.08) 0%, transparent 70%)",
          }}
        />
        <div className="relative mx-auto max-w-7xl px-4 sm:px-6 lg:px-8">
          <div className="grid grid-cols-1 items-center gap-10 lg:grid-cols-2">
            <FadeIn direction="left">
              <p className="mb-3 text-xs font-bold uppercase tracking-[0.3em] text-gold">
                {t("badge")}
              </p>
              <h1 className="font-serif text-4xl font-bold leading-tight text-ink sm:text-5xl">
                {t("title")}
                <br />
                <span className="text-gold">{t("titleGold")}</span>
              </h1>
              <p className="mt-5 max-w-lg text-sm leading-relaxed text-muted sm:text-base">
                {t("subtitle")}
              </p>
            </FadeIn>

            <FadeIn direction="right" delay={150}>
              <div className="grid grid-cols-3 gap-4">
                <div className="rounded-2xl border border-gold/15 bg-white p-5 text-center shadow-sm">
                  <ShieldCheck className="mx-auto mb-2 h-6 w-6 text-gold" />
                  <p className="font-serif text-3xl font-bold text-gold">{certs.length}</p>
                  <p className="mt-1 text-[10px] font-bold uppercase tracking-widest text-muted">{t("tabCerts")}</p>
                </div>
                <div className="rounded-2xl border border-gold/15 bg-white p-5 text-center shadow-sm">
                  <Trophy className="mx-auto mb-2 h-6 w-6 text-gold" />
                  <p className="font-serif text-3xl font-bold text-gold">20+</p>
                  <p className="mt-1 text-[10px] font-bold uppercase tracking-widest text-muted">
                    {locale === "id" ? "Penghargaan" : locale === "zh" ? "荣誉奖项" : "Awards"}
                  </p>
                </div>
                <div className="rounded-2xl border border-gold/15 bg-white p-5 text-center shadow-sm">
                  <BadgeCheck className="mx-auto mb-2 h-6 w-6 text-gold" />
                  <p className="font-serif text-3xl font-bold text-gold">{credentials.length}</p>
                  <p className="mt-1 text-[10px] font-bold uppercase tracking-widest text-muted">
                    {locale === "id" ? "Total" : locale === "zh" ? "总数" : "Total"}
                  </p>
                </div>
              </div>
            </FadeIn>
          </div>
        </div>
      </section>

      {/* ── Interactive section (tabs + content + lightbox) ── */}
      <CertGallery certs={certs} credentials={credentials} />

      {/* ── CTA ──────────────────────────────────────────── */}
      <section className="bg-gold-bg py-14 sm:py-16">
        <div className="mx-auto max-w-3xl px-4 text-center sm:px-6">
          <FadeIn>
            <BadgeCheck className="mx-auto mb-4 h-10 w-10 text-gold" />
            <h2 className="font-serif text-2xl font-bold text-ink sm:text-3xl">
              {t("ctaTitle")}
            </h2>
            <p className="mt-3 text-sm leading-relaxed text-muted">
              {t("ctaSubtitle")}
            </p>
            <div className="mt-6 flex flex-wrap justify-center gap-4">
              <ButtonLink href={`/${locale}/#contact`}>{t("requestDocs")}</ButtonLink>
              <Link
                href={`/${locale}`}
                className="flex items-center text-xs font-bold tracking-widest text-ink transition-colors hover:text-gold"
              >
                {t("backHome")}
              </Link>
            </div>
          </FadeIn>
        </div>
      </section>

    </main>
  );
}