import Image from "next/image";
import { setRequestLocale, getTranslations } from "next-intl/server";
import { Trophy, MessageCircle } from "lucide-react";
import { FadeIn } from "@/components/magicui/fade-in";
import { ButtonLink } from "@/components/ui/button";
import { CONTACT_INFO } from "@/data/site-data";
import { getLocalizedAwards } from "@/data/localized-data";
import { RecognitionGallery } from "@/components/recognition/recognition-gallery";

export default async function RecognitionPage({
  params,
}: {
  params: Promise<{ locale: string }>;
}) {
  const { locale } = await params;
  setRequestLocale(locale);
  const t = await getTranslations("recognitionPage");
  const awards = getLocalizedAwards(locale);

  const years = Array.from(new Set(awards.map((a) => a.year)))
    .filter((y: string) => y !== "—")
    .sort((a: string, b: string) => Number(a) - Number(b));

  const l = (href: string) => `/${locale}${href}`;

  return (
    <main>

      {/* ── HERO — light theme over a faint "wall of awards" backdrop ── */}
      <section className="relative overflow-hidden bg-gold-bg py-16 sm:py-24">
        {/* Background: two soft rows of award certificates */}
        <div className="pointer-events-none absolute inset-0 select-none" aria-hidden="true">
          <div className="absolute inset-x-0 -top-8 flex justify-center gap-5 opacity-[0.32]">
            {awards.slice(0, 10).map((a, i) => (
              <div
                key={a.id}
                className={`relative h-44 w-32 shrink-0 overflow-hidden rounded-lg shadow-md ${
                  i % 2 ? "mt-7 rotate-2" : "-rotate-2"
                }`}
              >
                <Image src={a.image} alt="" fill className="object-cover" sizes="128px" />
              </div>
            ))}
          </div>
          <div className="absolute inset-x-0 -bottom-14 flex justify-center gap-5 opacity-[0.26]">
            {awards.slice(10, 20).map((a, i) => (
              <div
                key={a.id}
                className={`relative h-44 w-32 shrink-0 overflow-hidden rounded-lg shadow-md ${
                  i % 2 ? "-rotate-2" : "mt-6 rotate-2"
                }`}
              >
                <Image src={a.image} alt="" fill className="object-cover" sizes="128px" />
              </div>
            ))}
          </div>
          {/* Cream wash: keeps the center crisp, lets edges show the frames */}
          <div
            className="absolute inset-0"
            style={{
              background:
                "radial-gradient(ellipse 54% 50% at 50% 46%, rgba(251,250,247,0.96) 30%, rgba(251,250,247,0.55) 62%, rgba(251,250,247,0.08) 100%)",
            }}
          />
        </div>

        <div className="relative mx-auto max-w-4xl px-4 text-center sm:px-6">
          <FadeIn>
            <div className="mb-5 flex justify-center">
              <div
                className="flex h-16 w-16 items-center justify-center rounded-2xl shadow-lg shadow-gold/30"
                style={{ background: "linear-gradient(135deg, #f27d37 0%, #bca574 100%)" }}
              >
                <Trophy className="h-8 w-8 text-white" />
              </div>
            </div>
            <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 lg:text-6xl">
              {t("title")}
            </h1>
            <p className="mx-auto mt-5 max-w-2xl text-sm leading-relaxed text-muted sm:text-base">
              {t("subtitle")}
            </p>

            {/* Stats row */}
            <div className="mt-9 flex flex-wrap items-center justify-center gap-3 sm:gap-4">
              <div className="min-w-[130px] rounded-2xl border border-gold/15 bg-white px-6 py-4 shadow-sm">
                <p className="font-serif text-3xl font-bold" style={{ color: "#f27d37" }}>{awards.length}+</p>
                <p className="mt-1 text-[10px] font-bold uppercase tracking-widest text-muted">{t("awards")}</p>
              </div>
              <div className="min-w-[130px] rounded-2xl border border-gold/15 bg-white px-6 py-4 shadow-sm">
                <p className="font-serif text-3xl font-bold text-gold">{years.length}</p>
                <p className="mt-1 text-[10px] font-bold uppercase tracking-widest text-muted">{t("yearsRecognition")}</p>
              </div>
              <div className="min-w-[130px] rounded-2xl border border-gold/15 bg-white px-6 py-4 shadow-sm">
                <p className="font-serif text-3xl font-bold text-green">6+</p>
                <p className="mt-1 text-[10px] font-bold uppercase tracking-widest text-muted">{t("countries")}</p>
              </div>
            </div>
          </FadeIn>
        </div>
      </section>

      {/* ── Interactive award gallery ── */}
      <RecognitionGallery awards={awards} locale={locale} />

      {/* ── CTA ──────────────────────────────────────────── */}
      <section className="bg-cream py-16 sm:py-20">
        <div className="mx-auto max-w-3xl px-4 text-center sm:px-6">
          <FadeIn>
            <Trophy className="mx-auto mb-4 h-10 w-10 text-gold" />
            <p className="text-xs font-bold uppercase tracking-[0.25em] text-gold">
              {t("ctaBadge")}
            </p>
            <h2 className="mt-3 font-serif text-3xl font-bold text-ink sm:text-4xl">
              {t("ctaTitle")}
            </h2>
            <p className="mx-auto mt-4 max-w-xl text-sm leading-relaxed text-muted">
              {t("ctaSubtitle")}
            </p>
            <div className="mt-8 flex flex-wrap justify-center gap-4">
              <ButtonLink
                href={CONTACT_INFO.whatsapp}
                target="_blank"
                rel="noopener noreferrer"
              >
                <MessageCircle className="h-3.5 w-3.5" />
                {t("chatWhatsApp")}
              </ButtonLink>
              <ButtonLink href={l("/certifications")} variant="outline">
                {t("viewCertifications")}
              </ButtonLink>
            </div>
          </FadeIn>
        </div>
      </section>

    </main>
  );
}