import Image from "next/image";
import { MessageCircle, FileText } from "lucide-react";
import { setRequestLocale, getTranslations } from "next-intl/server";
import { FadeIn } from "@/components/magicui/fade-in";
import { ButtonLink } from "@/components/ui/button";
import { CONTACT_INFO } from "@/data/site-data";
import { getLocalizedProductionProcess } from "@/data/localized-data";
import { ProcessJourney } from "@/components/process/process-journey";

const HERO_PHOTOS = [
  "/images/gallery/2-Preparing.jpg",
  "/images/gallery/3-Distrubution.jpg",
  "/images/gallery/5-Cleaning.jpg",
  "/images/gallery/7-Moulding.jpg",
  "/images/gallery/6-Drying.jpg",
  "/images/gallery/8-QC.jpg",
  "/images/gallery/9-System.jpg",
  "/images/gallery/10-Packing.jpg",
];

export default async function ProcessPage({
  params,
}: {
  params: Promise<{ locale: string }>;
}) {
  const { locale } = await params;
  setRequestLocale(locale);
  const t = await getTranslations("processPage");
  const processSteps = getLocalizedProductionProcess(locale);

  return (
    <main>

      {/* ── HERO — light theme over a faint production-journey filmstrip ── */}
      <section className="relative overflow-hidden bg-gold-bg py-16 sm:py-24">
        {/* Background: two soft rows of production photos */}
        <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.16]">
            {HERO_PHOTOS.slice(0, 4).map((src, i) => (
              <div
                key={src}
                className={`relative h-44 w-32 shrink-0 overflow-hidden rounded-lg shadow-md ${i % 2 ? "mt-7 rotate-2" : "-rotate-2"
                  }`}
              >
                <Image src={src} alt="" fill className="object-cover" sizes="128px" />
              </div>
            ))}
          </div>
          <div className="absolute inset-x-0 -bottom-14 flex justify-center gap-5 opacity-[0.13]">
            {HERO_PHOTOS.slice(4, 8).map((src, i) => (
              <div
                key={src}
                className={`relative h-44 w-32 shrink-0 overflow-hidden rounded-lg shadow-md ${i % 2 ? "-rotate-2" : "mt-6 rotate-2"
                  }`}
              >
                <Image src={src} alt="" fill className="object-cover" sizes="128px" />
              </div>
            ))}
          </div>
          {/* Cream wash overlay: keeps the centre crisp, lets edges show photos */}
          <div
            className="absolute inset-0"
            style={{
              background:
                "radial-gradient(ellipse 62% 58% at 50% 46%, rgba(251,250,247,0.96) 32%, rgba(251,250,247,0.72) 62%, rgba(251,250,247,0.28) 100%)",
            }}
          />
        </div>

        <div className="relative mx-auto max-w-3xl px-4 text-center sm:px-6">
          <FadeIn>
            <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="mx-auto mt-5 max-w-xl text-sm leading-relaxed text-muted sm:text-base">
              {t("subtitle")}
            </p>
            {/* Step count badge */}
            <div className="mt-6 inline-flex items-center gap-2 rounded-full border border-gold/20 bg-white px-5 py-2">
              <span className="font-serif text-xl font-bold text-gold">12</span>
              <span className="text-xs font-bold uppercase tracking-widest text-muted">
                {t("stages")}
              </span>
            </div>
          </FadeIn>
        </div>
      </section>

      {/* ── TIMELINE ─────────────────────────────────────── */}
      <section className="bg-white py-16 sm:py-20">
        <div className="mx-auto max-w-4xl px-4 sm:px-6 lg:px-8">
          <ProcessJourney steps={processSteps} />
        </div>
      </section>

      {/* ── 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>
            <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={`/${locale}/#contact`} variant="outline">
                <FileText className="h-3.5 w-3.5" />
                {t("requestCatalog")}
              </ButtonLink>
            </div>
          </FadeIn>
        </div>
      </section>

    </main>
  );
}