import Image from "next/image";
import Link from "next/link";
import { setRequestLocale, getTranslations } from "next-intl/server";
import { ArrowRight } from "lucide-react";
import { FadeIn } from "@/components/magicui/fade-in";
import { getLocalizedProducts } from "@/data/localized-data";

export default async function ProductsPage({
  params,
}: {
  params: Promise<{ locale: string }>;
}) {
  const { locale } = await params;
  setRequestLocale(locale);
  const t = await getTranslations("products");
  const products = getLocalizedProducts(locale);

  return (
    <main>
      {/* Hero Banner */}
      <section className="relative bg-gold-bg py-16 sm:py-20">
        <div className="mx-auto max-w-7xl px-4 sm:px-6 lg:px-8 text-center">
          <FadeIn>
            <p className="text-xs font-bold uppercase tracking-[0.25em] text-gold mb-3">
              {t("label")}
            </p>
            <h1 className="font-serif text-4xl font-bold tracking-tight text-ink sm:text-5xl">
              {t("title")}
            </h1>
            <p className="mt-4 mx-auto max-w-2xl text-base text-muted leading-relaxed">
              {locale === "id"
                ? "Jelajahi rangkaian lengkap sarang burung walet layak konsumsi bersertifikat HACCP yang dibersihkan dengan tangan — bersumber langsung dari fasilitas berizin kami di Indonesia."
                : locale === "zh"
                ? "探索我们完整的手工清洗、获得 HACCP 认证的食用燕窝系列产品——直接源自我们在印度尼西亚获得许可的自有设施。"
                : "Explore our complete range of HACCP-certified, hand-cleaned edible bird's nest — sourced directly from our licensed facilities in Indonesia."}
            </p>
          </FadeIn>
        </div>
      </section>

      {/* Product Grid */}
      <section className="bg-white py-16 sm:py-20">
        <div className="mx-auto max-w-7xl px-4 sm:px-6 lg:px-8">
          <div className="grid grid-cols-1 gap-8 sm:grid-cols-2 lg:grid-cols-3">
            {products.map((product, index) => (
              <FadeIn key={product.slug} delay={index * 80} className="h-full">
                <Link href={`/${locale}/products/${product.slug}`} className="group block h-full">
                  <article className="flex h-full flex-col overflow-hidden rounded-xl border border-black/5 bg-white shadow-[0_4px_20px_rgba(0,0,0,0.03)] transition-all duration-300 hover:-translate-y-2 hover:shadow-xl">
                    {/* Image */}
                    <div className="relative aspect-[4/3] overflow-hidden bg-gold-cream">
                      <Image
                        src={product.image}
                        alt={product.name}
                        fill
                        className="object-cover transition-transform duration-700 group-hover:scale-110"
                        sizes="(max-width: 640px) 100vw, (max-width: 1024px) 50vw, 33vw"
                      />
                    </div>

                    {/* Content */}
                    <div className="flex flex-grow flex-col p-6">
                      <h2 className="mb-2 font-serif text-xl font-bold text-ink transition-colors group-hover:text-gold">
                        {product.name}
                      </h2>
                      <p className="mb-4 flex-grow text-sm leading-relaxed text-muted">
                        {product.description}
                      </p>
                      <div className="flex items-center gap-1.5 text-xs font-bold tracking-wider text-gold transition-all group-hover:gap-3">
                        {t("viewDetails")}
                        <ArrowRight className="h-3 w-3 transition-transform group-hover:translate-x-1" />
                      </div>
                    </div>
                  </article>
                </Link>
              </FadeIn>
            ))}
          </div>
        </div>
      </section>
    </main>
  );
}