import Image from "next/image";
import Link from "next/link";
import { setRequestLocale, getTranslations } from "next-intl/server";
import {
  ShieldCheck,
  Factory,
  Target,
  Globe,
  Award,
  Leaf,
  Users,
  MapPin,
  MessageCircle,
  FileText,
  CheckCircle2,
} from "lucide-react";
import { FadeIn } from "@/components/magicui/fade-in";
import { ButtonLink } from "@/components/ui/button";
import { CONTACT_INFO } from "@/data/site-data";
import {
  getLocalizedTimeline,
  getLocalizedValues,
  getLocalizedKeyStats,
} from "@/data/localized-data";

const iconMap: Record<string, React.ElementType> = {
  ShieldCheck,
  Award,
  Globe,
  Users,
  Leaf,
  Factory,
};

export default async function AboutPage({
  params,
}: {
  params: Promise<{ locale: string }>;
}) {
  const { locale } = await params;
  setRequestLocale(locale);
  const t = await getTranslations("about");
  const timeline = getLocalizedTimeline(locale);
  const values = getLocalizedValues(locale);
  const keyStats = getLocalizedKeyStats(locale);

  return (
    <main>

      {/* ── 1. HERO ─────────────────────────────────────────── */}
      <section className="relative overflow-hidden bg-gold-bg py-20 sm:py-28">
        {/* subtle radial warm glow */}
        <div
          className="pointer-events-none absolute inset-0"
          style={{
            background:
              "radial-gradient(ellipse 70% 60% at 70% 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-12 lg:grid-cols-2">

            {/* Text */}
            <FadeIn direction="left">
              <p className="mb-4 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("headline1")}
                <br />
                <span className="text-gold">{t("headline2")}</span>,
                <br />
                {t("headline3")}
              </h1>
              <p className="mt-6 max-w-lg text-sm leading-relaxed text-muted sm:text-base">
                {t("subtitle")}
              </p>
              <div className="mt-8 flex flex-wrap gap-4">
                <ButtonLink href={CONTACT_INFO.whatsapp} target="_blank" rel="noopener noreferrer">
                  <MessageCircle className="h-3.5 w-3.5" />
                  {t("talkSales")}
                </ButtonLink>
                <ButtonLink href={`/${locale}/#contact`} variant="outline">
                  <FileText className="h-3.5 w-3.5" />
                  {t("requestCatalogBtn")}
                </ButtonLink>
              </div>
            </FadeIn>

            {/* Stats grid */}
            <FadeIn direction="right" delay={200}>
              <div className="grid grid-cols-2 gap-4 sm:grid-cols-3">
                {keyStats.map((s) => (
                  <div
                    key={s.label}
                    className="rounded-xl border border-gold/15 bg-white p-5 text-center shadow-sm"
                  >
                    <p className="font-serif text-3xl font-bold text-gold">{s.value}</p>
                    <p className="mt-1 text-[11px] font-semibold uppercase tracking-widest text-muted leading-tight">
                      {s.label}
                    </p>
                  </div>
                ))}
              </div>
            </FadeIn>
          </div>
        </div>
      </section>

      {/* ── 2. COMPANY OVERVIEW ─────────────────────────────── */}
      <section className="bg-white py-16 sm:py-24">
        <div className="mx-auto max-w-7xl px-4 sm:px-6 lg:px-8">
          <FadeIn>
            <div className="mb-4 text-center">
              <p className="text-xs font-bold uppercase tracking-[0.25em] text-gold">
                {t("overviewLabel")}
              </p>
              <h2 className="mt-2 font-serif text-3xl font-bold text-ink sm:text-4xl">
                {t("overviewTitle")}
              </h2>
              <p className="mx-auto mt-4 max-w-3xl text-sm leading-relaxed text-muted sm:text-base">
                {locale === "id" ? (
                  "Didirikan pada tahun 1997, PT Ori Ginalnest Indonesia didedikasikan untuk memproduksi dan mengekspor sarang burung walet berkualitas terbaik ke pasar global. Kami berspesialisasi dalam 100% sarang burung walet pilihan tangan, bebas bahan kimia, dan bersertifikat HACCP — memastikan setiap bagian mencerminkan komitmen tanpa kompromi kami terhadap kemurnian dan keamanan pangan. Kami adalah eksportir terdaftar untuk Indonesia dan Tiongkok (Nomor Registrasi 014), didukung oleh praktik HACCP yang ketat, lingkungan kerja yang bersih, dan pekerja terampil."
                ) : locale === "zh" ? (
                  "PT Ori Ginalnest Indonesia 成立于 1997 年，致力于向全球市场生产和出口最优质的食用燕窝。我们专注于 100% 手工挑选、无化学物质且经过 HACCP 认证的燕窝——确保每一片都体现我们对纯净与安全的绝不妥协的承诺。我们是印度尼西亚和中国的注册出口商（注册号 014），拥有严格的 HACCP 规范、清洁的工作环境和熟练的工人支持。"
                ) : (
                  "Founded in 1997, PT Ori Ginalnest Indonesia is dedicated to producing and exporting the finest quality edible bird's nests to global markets. We specialise in 100% handpicked, chemical-free, and HACCP-certified bird's nests — ensuring every piece reflects our uncompromising commitment to purity and safety. We are a registered exporter to Indonesia and China (Registration No. 014), supported by rigorous HACCP practices, a clean working environment, and skilled workers."
                )}
              </p>
            </div>
          </FadeIn>

          <div className="mt-12 grid grid-cols-1 gap-6 md:grid-cols-2">
            <FadeIn delay={100}>
              <div className="h-full rounded-2xl border border-gold/10 bg-gold-bg p-7 transition-all duration-300 hover:-translate-y-1 hover:shadow-lg">
                <div className="flex h-12 w-12 items-center justify-center rounded-xl bg-gold/10 text-gold">
                  <ShieldCheck className="h-6 w-6" />
                </div>
                <h3 className="mt-5 font-serif text-xl font-bold text-ink">
                  {t("commitmentTitle")}
                </h3>
                <p className="mt-3 text-sm leading-relaxed text-muted">
                  {t("commitmentDesc")}
                </p>
              </div>
            </FadeIn>
            <FadeIn delay={200}>
              <div className="h-full rounded-2xl border border-gold/10 bg-gold-bg p-7 transition-all duration-300 hover:-translate-y-1 hover:shadow-lg">
                <div className="flex h-12 w-12 items-center justify-center rounded-xl bg-gold/10 text-gold">
                  <Factory className="h-6 w-6" />
                </div>
                <h3 className="mt-5 font-serif text-xl font-bold text-ink">
                  {t("trustedExporterTitle")}
                </h3>
                <p className="mt-3 text-sm leading-relaxed text-muted">
                  {t("trustedExporterDesc")}
                </p>
              </div>
            </FadeIn>
          </div>
        </div>
      </section>

      {/* ── 3. MISSION & VISION ────────────────────────────── */}
      <section className="bg-cream py-16 sm:py-24">
        <div className="mx-auto max-w-7xl px-4 sm:px-6 lg:px-8">
          <FadeIn>
            <div className="mb-10 text-center">
              <p className="text-xs font-bold uppercase tracking-[0.25em] text-gold">
                {t("missionLabel")}
              </p>
              <h2 className="mt-2 font-serif text-3xl font-bold text-ink sm:text-4xl">
                {t("missionTitle")}
              </h2>
            </div>
          </FadeIn>

          <FadeIn delay={100}>
            <div className="mx-auto mb-8 max-w-3xl rounded-2xl border border-gold/10 bg-white p-7 shadow-sm">
              <div className="flex items-center gap-4">
                <div className="flex h-12 w-12 shrink-0 items-center justify-center rounded-xl bg-gold/10 text-gold">
                  <Target className="h-6 w-6" />
                </div>
                <h3 className="font-serif text-xl font-bold text-ink">{t("ourMissionTitle")}</h3>
              </div>
              <p className="mt-4 text-sm leading-relaxed text-muted sm:text-base">
                {t("ourMissionDesc")}
              </p>
            </div>
          </FadeIn>

          <div className="grid grid-cols-1 gap-6 md:grid-cols-3">
            {[
              {
                icon: Globe,
                title: locale === "id" ? "Jangkauan Global" : locale === "zh" ? "全球覆盖" : "Global Reach",
                desc: locale === "id" ? "Membawa sarang burung walet Indonesia ke pasar global, membagikan tradisi kesehatan yang berharga ini kepada dunia." : locale === "zh" ? "将印尼燕窝带入全球市场，向世界分享这份珍贵的养生传统。" : "Bring Indonesian bird's nest to the global market, sharing this treasured wellness tradition with the world.",
              },
              {
                icon: Award,
                title: locale === "id" ? "Kebanggaan Nasional" : locale === "zh" ? "国家骄傲" : "National Pride",
                desc: locale === "id" ? "Menjadi perusahaan sarang burung walet yang dapat dibanggakan Indonesia — menetapkan standar kualitas dan integritas." : locale === "zh" ? "成为印尼引以为豪的燕窝企业——在品质和诚信上树立行业标杆。" : "Become a bird's nest company that Indonesia can take pride in — setting the standard for quality and integrity.",
              },
              {
                icon: Leaf,
                title: locale === "id" ? "Melestarikan Tradisi" : locale === "zh" ? "传承传统" : "Preserve Tradition",
                desc: locale === "id" ? "Melestarikan budaya mengonsumsi sarang burung walet agar tradisi yang berusia berabad-abad ini tetap bertahan lintas generasi." : locale === "zh" ? "传承食用燕窝的文化，让这一数百年历史的滋补传统代代相传。" : "Preserve the culture of consuming bird's nest so this centuries-old tradition endures across generations.",
              },
            ].map((item, i) => (
              <FadeIn key={item.title} delay={i * 100}>
                <div className="flex h-full flex-col items-center rounded-2xl border border-gold/10 bg-white p-7 text-center shadow-sm transition-all duration-300 hover:-translate-y-1 hover:shadow-md">
                  <div className="flex h-12 w-12 items-center justify-center rounded-xl bg-gold/10 text-gold">
                    <item.icon className="h-6 w-6" />
                  </div>
                  <h3 className="mt-4 font-serif text-lg font-bold text-ink">{item.title}</h3>
                  <p className="mt-2 text-sm leading-relaxed text-muted">{item.desc}</p>
                </div>
              </FadeIn>
            ))}
          </div>
        </div>
      </section>

      {/* ── 4. TIMELINE (zigzag) ────────────────────────────── */}
      <section className="relative overflow-hidden bg-gold-bg py-16 sm:py-24">
        <div className="pointer-events-none absolute inset-0" style={{ background: "radial-gradient(ellipse 60% 50% at 50% 0%, rgba(166,144,94,0.07) 0%, transparent 70%)" }} />
        <div className="relative mx-auto max-w-5xl px-4 sm:px-6 lg:px-8">
          {/* Header */}
          <FadeIn>
            <div className="mb-16 text-center">
              <p className="text-xs font-bold uppercase tracking-[0.3em] text-gold">
                {t("storyLabel")}
              </p>
              <h2 className="mt-3 font-serif text-3xl font-bold text-ink sm:text-4xl lg:text-5xl">
                {t("storyTitle")}
              </h2>
              <p className="mx-auto mt-4 max-w-xl text-sm leading-relaxed text-muted">
                {locale === "id" ? (
                  "Dimulai pada tahun 1997 dengan 15 pekerja berdedikasi, kini menjadi eksportir sarang burung walet yang paling banyak mendapat penghargaan di Indonesia."
                ) : locale === "zh" ? (
                  "从 1997 年仅有 15 名敬业的员工起步，如今已发展成为印尼斩获荣誉最多的燕窝出口商。"
                ) : (
                  "Started in 1997 with 15 dedicated workers, now Indonesia's most awarded bird's nest exporter."
                )}
              </p>
            </div>
          </FadeIn>

          {/* Zigzag Timeline */}
          <div className="relative">
            {/* Centre line */}
            <div className="absolute left-1/2 top-0 h-full w-px -translate-x-1/2 bg-gold/20 hidden sm:block" />

            <div className="space-y-0">
              {timeline.map((item, i) => {
                const isLeft = i % 2 === 0;
                return (
                  <FadeIn key={item.year} delay={i * 60}>
                    <div className="relative grid grid-cols-1 sm:grid-cols-[1fr_40px_1fr] items-start gap-0 py-8">

                      {/* LEFT content (even items) */}
                      <div className={isLeft ? "sm:pr-10 text-right" : "hidden sm:block"}>
                        {isLeft && (
                          <div>
                            <p className="text-sm font-bold text-gold">{item.year}</p>
                            <h3 className="mt-1 font-serif text-base font-bold text-ink">
                              {item.title}
                            </h3>
                            <p className="mt-1.5 text-sm leading-relaxed text-muted">
                              {item.desc}
                            </p>
                          </div>
                        )}
                      </div>

                      {/* Centre dot */}
                      <div className="hidden sm:flex items-start justify-center pt-1">
                        <span className="flex h-4 w-4 items-center justify-center rounded-full bg-gold ring-4 ring-gold-bg">
                          <span className="h-1.5 w-1.5 rounded-full bg-white" />
                        </span>
                      </div>

                      {/* RIGHT content (odd items) */}
                      <div className={!isLeft ? "sm:pl-10" : "hidden sm:block"}>
                        {!isLeft && (
                          <div>
                            <p className="text-sm font-bold text-gold">{item.year}</p>
                            <h3 className="mt-1 font-serif text-base font-bold text-ink">
                              {item.title}
                            </h3>
                            <p className="mt-1.5 text-sm leading-relaxed text-muted">
                              {item.desc}
                            </p>
                          </div>
                        )}
                      </div>

                      {/* Mobile: single column with left border */}
                      <div className="sm:hidden relative border-l-2 border-gold/30 pl-5">
                        <span className="absolute -left-[5px] top-1.5 h-2.5 w-2.5 rounded-full bg-gold" />
                        <p className="text-xs font-bold text-gold">{item.year}</p>
                        <h3 className="mt-1 font-serif text-sm font-bold text-ink">
                          {item.title}
                        </h3>
                        <p className="mt-1 text-xs leading-relaxed text-muted">
                          {item.desc}
                        </p>
                      </div>

                    </div>
                  </FadeIn>
                );
              })}
            </div>
          </div>
        </div>
      </section>

      {/* ── 5. OUR VALUES ───────────────────────────────────── */}
      <section className="bg-white py-16 sm:py-24">
        <div className="mx-auto max-w-7xl px-4 sm:px-6 lg:px-8">
          <FadeIn>
            <div className="mb-12 text-center">
              <p className="text-xs font-bold uppercase tracking-[0.25em] text-gold">
                {t("valuesLabel")}
              </p>
              <h2 className="mt-2 font-serif text-3xl font-bold text-ink sm:text-4xl">
                {t("valuesTitle")}
              </h2>
            </div>
          </FadeIn>
          <div className="grid grid-cols-1 gap-6 sm:grid-cols-2 lg:grid-cols-3">
            {values.map((v, i) => {
              const Icon = iconMap[i === 0 ? "ShieldCheck" : i === 1 ? "Award" : i === 2 ? "Globe" : i === 3 ? "Users" : i === 4 ? "Leaf" : "Factory"] ?? ShieldCheck;
              return (
                <FadeIn key={v.title} delay={i * 80}>
                  <div className="group flex gap-4 rounded-2xl border border-black/5 bg-white p-6 shadow-sm transition-all duration-300 hover:-translate-y-1 hover:border-gold/20 hover:shadow-md">
                    <div className="flex h-11 w-11 shrink-0 items-center justify-center rounded-xl bg-gold/10 text-gold transition-colors group-hover:bg-gold group-hover:text-white">
                      <Icon className="h-5 w-5" />
                    </div>
                    <div>
                      <h3 className="font-bold text-ink">{v.title}</h3>
                      <p className="mt-1 text-xs leading-relaxed text-muted">{v.desc}</p>
                    </div>
                  </div>
                </FadeIn>
              );
            })}
          </div>
        </div>
      </section>

      {/* ── 6. FOUNDER ──────────────────────────────────────── */}
      <section className="bg-gold-bg py-16 sm:py-24">
        <div className="mx-auto max-w-7xl px-4 sm:px-6 lg:px-8">
          <div className="grid grid-cols-1 items-center gap-12 lg:grid-cols-2">
            <FadeIn direction="left">
              <div className="relative overflow-hidden rounded-2xl shadow-xl">
                <Image
                  src="/images/ibu-rusiana.webp"
                  alt="Founder — Ibu Rusianah"
                  width={600}
                  height={500}
                  className="h-auto w-full object-cover"
                />
                <div className="absolute bottom-4 left-4 rounded-xl bg-white/90 px-4 py-3 backdrop-blur-sm">
                  <p className="text-xs font-bold text-ink">IBU RUSIANAH</p>
                  <p className="text-[10px] text-muted">{locale === "zh" ? "创始人兼董事" : "Founder & Director"}</p>
                </div>
              </div>
            </FadeIn>

            <FadeIn direction="right" delay={200}>
              <div className="space-y-5">
                <p className="text-xs font-bold uppercase tracking-[0.25em] text-gold">
                  {t("founderLabel")}
                </p>
                <h2 className="font-serif text-3xl font-bold leading-snug text-ink sm:text-4xl">
                  {t("founderTitle")}
                </h2>
                <p className="text-sm leading-relaxed text-muted">
                  {t("founderDesc1")}
                </p>
                <ul className="space-y-2 pt-2">
                  {[
                    t("founderPoint1"),
                    t("founderPoint2"),
                    t("founderPoint3"),
                  ].map((point) => (
                    <li key={point} className="flex items-start gap-2.5 text-xs text-muted">
                      <CheckCircle2 className="mt-0.5 h-3.5 w-3.5 shrink-0 text-gold" />
                      {point}
                    </li>
                  ))}
                </ul>
              </div>
            </FadeIn>
          </div>
        </div>
      </section>

      {/* ── 7. LOCATION ─────────────────────────────────────── */}
      <section className="bg-white py-14 sm:py-20">
        <div className="mx-auto max-w-7xl px-4 sm:px-6 lg:px-8">
          <FadeIn>
            <div className="mb-8 text-center">
              <p className="text-xs font-bold uppercase tracking-[0.25em] text-gold">
                {t("locationLabel")}
              </p>
              <h2 className="mt-2 font-serif text-2xl font-bold text-ink sm:text-3xl">
                {t("locationTitle")}
              </h2>
            </div>
          </FadeIn>

          <FadeIn delay={100}>
            <div className="overflow-hidden rounded-2xl border border-black/5 shadow-md">
              {/* Embed Map */}
              <div className="relative h-80 w-full sm:h-[420px]">
                <iframe
                  src="https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d3981.9723528414445!2d98.7182747!3d3.6165598!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x3031317578fa2393%3A0xe54efdeceb0445d0!2sJl.%20Willem%20Iskandar%2C%20Kenangan%20Baru%2C%20Kec.%20Percut%20Sei%20Tuan%2C%20Kabupaten%20Deli%20Serdang%2C%20Sumatera%20Utara!5e0!3m2!1sen!2sid!4v1717918342200"
                  width="100%"
                  height="100%"
                  style={{ border: 0 }}
                  allowFullScreen
                  loading="lazy"
                  referrerPolicy="no-referrer-when-downgrade"
                  title="Original Nest Factory Location"
                  className="absolute inset-0"
                />
              </div>

              {/* Address bar below map */}
              <div className="flex flex-col items-start justify-between gap-4 bg-gold-bg px-6 py-4 sm:flex-row sm:items-center">
                <div className="flex items-start gap-3">
                  <MapPin className="mt-0.5 h-4 w-4 shrink-0 text-gold" />
                  <div>
                    <p className="text-[10px] font-bold uppercase tracking-wider text-muted">
                      {t("locationAddress")}
                    </p>
                    <p className="mt-0.5 text-sm font-semibold text-ink">
                      {CONTACT_INFO.address}
                    </p>
                  </div>
                </div>
                <Link
                  href={CONTACT_INFO.mapsUrl}
                  target="_blank"
                  rel="noopener noreferrer"
                  className="shrink-0 rounded-full border border-gold/25 bg-white px-4 py-2 text-xs font-bold tracking-wider text-gold transition-colors hover:bg-gold hover:text-white"
                >
                  {t("openMaps")}
                </Link>
              </div>
            </div>
          </FadeIn>
        </div>
      </section>

      {/* ── 8. 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("ctaLabel")}
            </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("requestCatalogBtn")}
              </ButtonLink>
            </div>
          </FadeIn>
        </div>
      </section>

    </main>
  );
}