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

function getDistributionRegions(locale: string) {
  return [
    {
      region: locale === "id" ? "Singapura" : locale === "zh" ? "新加坡" : "Singapore",
      icon: "🇸🇬",
    },
    {
      region: locale === "id" ? "Tiongkok" : locale === "zh" ? "中国" : "China",
      icon: "🇨🇳",
      note:
        locale === "id"
          ? "termasuk Hong Kong & Makau"
          : locale === "zh"
            ? "含港澳地区"
            : "incl. Hong Kong & Macau",
    },
    {
      region: locale === "id" ? "Australia" : locale === "zh" ? "澳大利亚" : "Australia",
      icon: "🇦🇺",
    },
    {
      region: locale === "id" ? "Amerika Serikat" : locale === "zh" ? "美国" : "United States",
      icon: "🇺🇸",
    },
    {
      region: locale === "id" ? "Eropa" : locale === "zh" ? "欧洲" : "Europe",
      icon: "🇪🇺",
    },
    {
      region: locale === "id" ? "Jepang" : locale === "zh" ? "日本" : "Japan",
      icon: "🇯🇵",
    },
  ];
}

export default async function SoHealthyPage({
  params,
}: {
  params: Promise<{ locale: string }>;
}) {
  const { locale } = await params;
  setRequestLocale(locale);
  const t = await getTranslations("sohealthy");
  const products = getLocalizedSoHealthyProducts(locale);
  const distributionRegions = getDistributionRegions(locale);

  const highlights = [
    {
      icon: Users,
      value: "100+",
      label:
        locale === "id"
          ? "Distributor Global"
          : locale === "zh"
            ? "全球经销商"
            : "Global Distributors",
    },
    {
      icon: Globe,
      value: "9",
      label:
        locale === "id"
          ? "Negara"
          : locale === "zh"
            ? "国家"
            : "Countries",
    },
    {
      icon: Award,
      value: "Premium",
      label:
        locale === "id"
          ? "Standar Kualitas"
          : locale === "zh"
            ? "优质品质标准"
            : "Quality Standard",
    },
    {
      icon: ShieldCheck,
      value: "Certified",
      label:
        locale === "id"
          ? "Aman & Terpercaya"
          : locale === "zh"
            ? "安全与信赖"
            : "Safe & Trusted",
    },
  ];

  const teamPoints = [
    locale === "id"
      ? "Pelatihan produk & orientasi komprehensif"
      : locale === "zh"
        ? "全面的入职培训和产品知识培训"
        : "Comprehensive onboarding & product training",
    locale === "id"
      ? "Dukungan pemasaran dan promosi penuh"
      : locale === "zh"
        ? "全面的市场与促销支持"
        : "Full marketing and promotional support",
    locale === "id"
      ? "Akses ke 100+ jaringan distributor secara global"
      : locale === "zh"
        ? "接入全球 100 多家分销商网络"
        : "Access to 100+ distributor network globally",
    locale === "id"
      ? "Produk bersertifikat kualitas yang mudah dijual"
      : locale === "zh"
        ? "具有品质认证的畅销产品"
        : "Quality-certified products that sell themselves",
    locale === "id"
      ? "Tim manajemen akun yang berdedikasi"
      : locale === "zh"
        ? "专属的客户服务与管理团队"
        : "Dedicated account management team",
    locale === "id"
      ? "Margin kompetitif & MOQ fleksibel"
      : locale === "zh"
        ? "极具竞争力的利润空间和灵活的起订量"
        : "Competitive margins & flexible MOQ",
  ];

  const qualityPoints = [
    {
      icon: ShieldCheck,
      title:
        locale === "id"
          ? "Jaminan Kualitas"
          : locale === "zh"
            ? "质量保证"
            : "Quality Assurance",
      desc:
        locale === "id"
          ? "Setiap produk SoHealthy lolos pemeriksaan kualitas multi-tahap yang ketat sebelum sampai ke tangan Anda. Kami menjaga standar sertifikasi internasional di setiap langkah."
          : locale === "zh"
            ? "每款燕健产品在送达您手中之前，都经过严格的多阶段质量检测。我们在每一步都维护国际认证标准。"
            : "Every SoHealthy product passes rigorous multi-stage quality checks before it reaches your hands. We maintain international certification standards at every step.",
    },
    {
      icon: Award,
      title:
        locale === "id"
          ? "Pelatihan Komprehensif"
          : locale === "zh"
            ? "全面培训"
            : "Comprehensive Training",
      desc:
        locale === "id"
          ? "Kami memberikan pengetahuan produk yang mendalam, prosedur penanganan, dan pelatihan penjualan kepada setiap distributor — memastikan kualitas merek yang konsisten di semua pasar."
          : locale === "zh"
            ? "我们为每位分销商提供深入的产品知识、处理流程和销售培训，确保在所有市场中保持一致的品牌价值。"
            : "We provide in-depth product knowledge, handling procedures, and sales training to every distributor — ensuring consistent brand quality across all markets.",
    },
    {
      icon: Users,
      title:
        locale === "id"
          ? "Dukungan Penuh"
          : locale === "zh"
            ? "全力支持"
            : "Full Support",
      desc:
        locale === "id"
          ? "Dari materi pemasaran hingga dukungan logistik, tim kami berkomitmen untuk memberdayakan setiap anggota jaringan SoHealthy untuk berkembang."
          : locale === "zh"
            ? "从营销材料到物流支持，我们的团队致力于赋能 SoHealthy 网络的每一位成员以实现共同成长。"
            : "From marketing materials to logistical support, our team is committed to empowering every member of the SoHealthy network to thrive.",
    },
  ];

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

  return (
    <main>

      {/* ── 1. HERO / OUR COMPANY ────────────────────────── */}
      <section className="relative overflow-hidden bg-gold-bg py-20 sm:py-28">
        {/* Decorative 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.09) 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">

            {/* Left — Text */}
            <FadeIn direction="left">
              <h1 className="font-serif text-4xl font-bold leading-tight text-ink sm:text-5xl lg:text-6xl">
                {t("title")}<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("desc1")}
              </p>
              <p className="mt-4 max-w-lg text-sm leading-relaxed text-muted sm:text-base">
                {t("desc2")}
              </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("joinNetwork")}
                </ButtonLink>
                <ButtonLink href={`/${locale}/#contact`} variant="outline">
                  <FileText className="h-3.5 w-3.5" />
                  {t("requestCatalog")}
                </ButtonLink>
              </div>
            </FadeIn>

            {/* Right — Logo + Decorative */}
            <FadeIn direction="right" delay={200}>
              <div className="flex items-center justify-center lg:justify-end">
                <div className="relative flex h-72 w-72 items-center justify-center sm:h-80 sm:w-80">
                  <div className="relative z-10 flex flex-col items-center">
                    <Image
                      src="/images/sohealthy/so_healthy.avif"
                      alt="SoHealthy by Original Nest"
                      width={386}
                      height={395}
                      className="h-auto w-56 sm:w-64"
                    />
                  </div>
                </div>
              </div>
            </FadeIn>
          </div>
        </div>
      </section>

      {/* ── 2. KEY HIGHLIGHTS ────────────────────────────── */}
      <section className="bg-white py-10 sm:py-12">
        <div className="mx-auto max-w-7xl px-4 sm:px-6 lg:px-8">
          <div className="grid grid-cols-2 gap-4 sm:grid-cols-4">
            {highlights.map((item, i) => (
              <FadeIn key={item.label} delay={i * 80}>
                <div className="flex flex-col items-center rounded-xl border border-gold/10 bg-gold-bg p-5 text-center">
                  <div className="flex h-10 w-10 items-center justify-center rounded-full bg-gold/10 text-gold">
                    <item.icon className="h-5 w-5" />
                  </div>
                  <p className="mt-3 font-serif text-2xl font-bold text-gold">
                    {item.value}
                  </p>
                  <p className="mt-0.5 text-[10px] font-bold uppercase tracking-widest text-muted">
                    {item.label}
                  </p>
                </div>
              </FadeIn>
            ))}
          </div>
        </div>
      </section>

      {/* ── 3. OUR PRODUCTS ──────────────────────────────── */}
      <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">

          {/* Section heading */}
          <FadeIn>
            <div className="mb-12 text-center">
              <h2 className="font-serif text-3xl font-bold text-ink sm:text-4xl">
                {t("productsTitle")}
              </h2>
              {locale === "zh" && <p className="mt-1 font-serif text-lg text-muted">我们的产品</p>}
              {locale === "id" && <p className="mt-1 font-serif text-lg text-muted">Produk Kami</p>}
              <div className="mx-auto mt-4 h-px w-20 bg-gold/40" />
            </div>
          </FadeIn>

          {/* Product Grid — 3 columns */}
          <div className="grid grid-cols-1 gap-5 sm:grid-cols-2 lg:grid-cols-3">
            {products.map((product, index) => (
              <FadeIn key={product.id} delay={index * 80}>
                <Link href={l(`/sohealthy/${product.id}`)} className="group block">
                  <article className="overflow-hidden rounded-xl border border-gold/10 bg-white shadow-sm transition-all duration-300 hover:-translate-y-1 hover:border-gold/25 hover:shadow-lg">
                    {/* Product image */}
                    <div className="relative aspect-[4/3] overflow-hidden bg-cream">
                      <Image
                        src={product.image}
                        alt={product.nameEn}
                        fill
                        className="object-cover transition-transform duration-500 group-hover:scale-105"
                        sizes="(max-width: 640px) 100vw, (max-width: 1024px) 50vw, 33vw"
                      />
                      {/* Hover overlay */}
                      <div className="absolute inset-0 bg-ink/0 transition-colors duration-300 group-hover:bg-ink/5" />
                    </div>

                    {/* Info */}
                    <div className="flex flex-col p-5 h-full min-h-[220px]">
                      <div className="mb-3 border-b border-gold/10 pb-3">
                        <h3 className="font-serif text-lg font-bold text-ink transition-colors group-hover:text-gold">
                          {product.nameEn.replace(" 1", "")}
                        </h3>
                        <p className="mt-2 text-[11px] leading-relaxed text-muted-foreground line-clamp-3">
                          {product.description}
                        </p>
                      </div>

                      {/* Specs */}
                      <div className="mb-4 space-y-1.5 text-xs">
                        {Object.entries(product.specs).map(([key, val]) => {
                          const isPackageSpec = key.includes("Package") || key.includes("Kemasan") || key.includes("包装") || key.includes("Specifications");
                          return (
                            <div key={key} className={isPackageSpec ? "flex flex-col gap-1 pt-1" : "flex justify-between gap-2"}>
                              {key !== "Specifications" && <span className="text-muted">{key}</span>}
                              <span className={`font-semibold text-ink ${isPackageSpec && key !== "Specifications" ? "text-left leading-relaxed text-xs" : key === "Specifications" ? "text-center w-full leading-relaxed text-xs" : "text-right"}`}>{val as string}</span>
                            </div>
                          );
                        })}
                      </div>

                      {/* View detail link */}
                      <div className="mt-auto flex items-center gap-1 text-[11px] font-bold tracking-wider text-gold transition-all group-hover:gap-2">
                        {t("viewDetails")}
                        <ArrowRight className="h-3 w-3 transition-transform group-hover:translate-x-0.5" />
                      </div>
                    </div>
                  </article>
                </Link>
              </FadeIn>
            ))}
          </div>
        </div>
      </section>

      {/* ── 4. DISTRIBUTION REGIONS ──────────────────────── */}
      <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("distributionLabel")}
              </p>
              <h2 className="mt-2 font-serif text-3xl font-bold text-ink sm:text-4xl">
                {t("distributionTitle")}
              </h2>
              <p className="mx-auto mt-4 max-w-xl text-sm leading-relaxed text-muted">
                {t("distributionSubtitle")}
              </p>
            </div>
          </FadeIn>

          <div className="grid grid-cols-2 gap-4 sm:grid-cols-3 lg:grid-cols-6">
            {distributionRegions.map((item, i) => (
              <FadeIn key={item.region} delay={i * 60}>
                <div className="flex flex-col items-center rounded-xl border border-gold/10 bg-gold-bg p-5 text-center transition-all duration-300 hover:-translate-y-1 hover:border-gold/30 hover:shadow-md">
                  <span className="text-3xl">{item.icon}</span>
                  <p className="mt-2 text-xs font-bold text-ink">{item.region}</p>
                  {item.note && (
                    <p className="mt-0.5 text-[9px] leading-tight text-muted">{item.note}</p>
                  )}
                </div>
              </FadeIn>
            ))}
          </div>
        </div>
      </section>

      {/* ── 5. JOIN OUR TEAM ─────────────────────────────── */}
      <section className="bg-cream 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">

            {/* Left — Image */}
            <FadeIn direction="left">
              <div className="relative overflow-hidden rounded-2xl shadow-xl">
                <Image
                  src="/images/ibu-rusiana.webp"
                  alt="SoHealthy Team"
                  width={600}
                  height={450}
                  className="h-auto w-full object-cover"
                />
                <div className="absolute inset-0 bg-gradient-to-t from-ink/40 to-transparent" />
                <div className="absolute bottom-6 left-6 right-6">
                  <p className="font-serif text-xl font-bold text-white">
                    {locale === "id" ? "Berkembang Bersama SoHealthy" : locale === "zh" ? "与 SoHealthy 共同成长" : "Grow With SoHealthy"}
                  </p>
                  <p className="mt-1 text-xs text-white/80">
                    {locale === "id" ? "Bergabunglah dengan jaringan global kami yang terus berkembang" : locale === "zh" ? "加入我们不断扩大的全球网络" : "Join our expanding global network"}
                  </p>
                </div>
              </div>
            </FadeIn>

            {/* Right — Content */}
            <FadeIn direction="right" delay={200}>
              <div className="space-y-5">
                <p className="text-xs font-bold uppercase tracking-[0.25em] text-gold">
                  {t("teamLabel")}
                </p>
                <h2 className="font-serif text-3xl font-bold leading-snug text-ink sm:text-4xl">
                  {t("teamTitle")}
                </h2>
                <p className="text-sm leading-relaxed text-muted">
                  {locale === "id"
                    ? "Kami menyambut individu dari semua latar belakang untuk bergabung dengan keluarga SoHealthy. Baik Anda seorang distributor berpengalaman atau baru di industri makanan kesehatan, kami menyediakan alat, pelatihan, dan dukungan yang Anda butuhkan untuk sukses."
                    : locale === "zh"
                      ? "我们欢迎来自不同背景的个人加入 SoHealthy 大家庭。无论您是经验丰富的分销商还是健康食品行业的新人，我们都会提供您成功所需的工具、培训和支持。"
                      : "We welcome individuals from all backgrounds to join the SoHealthy family. Whether you're an experienced distributor or new to the health food industry, we provide the tools, training, and support you need to succeed."}
                </p>

                <ul className="space-y-3">
                  {teamPoints.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 className="flex flex-wrap gap-4 pt-2">
                  <ButtonLink
                    href={CONTACT_INFO.whatsapp}
                    target="_blank"
                    rel="noopener noreferrer"
                  >
                    <MessageCircle className="h-3.5 w-3.5" />
                    {t("becomeDistributor")}
                  </ButtonLink>
                  <ButtonLink href={`/${locale}/#contact`} variant="outline">
                    <FileText className="h-3.5 w-3.5" />
                    {t("requestInfo")}
                  </ButtonLink>
                </div>
              </div>
            </FadeIn>
          </div>
        </div>
      </section>

      {/* ── 6. QUALITY COMMITMENT ────────────────────────── */}
      <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">
          <FadeIn>
            <div className="mb-12 text-center">
              <p className="text-xs font-bold uppercase tracking-[0.25em] text-gold">
                {t("qualityLabel")}
              </p>
              <h2 className="mt-2 font-serif text-3xl font-bold text-ink sm:text-4xl">
                {t("qualityTitle")}
              </h2>
            </div>
          </FadeIn>

          <div className="grid grid-cols-1 gap-6 md:grid-cols-3">
            {qualityPoints.map((item, i) => (
              <FadeIn key={item.title} delay={i * 100}>
                <div className="flex h-full flex-col items-start rounded-2xl border border-gold/10 bg-white p-7 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-5 font-serif text-xl font-bold text-ink">
                    {item.title}
                  </h3>
                  <p className="mt-3 text-sm leading-relaxed text-muted">{item.desc}</p>
                </div>
              </FadeIn>
            ))}
          </div>
        </div>
      </section>

      {/* ── 7. CTA FOOTER STRIP ──────────────────────────── */}
      <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.3em] text-gold">
              {t("ctaBadge")}
            </p>
            <h2 className="mt-3 font-serif text-3xl font-bold text-ink sm:text-4xl">
              {t("ctaTitle")}{" "}
              <span className="text-gold">{t("ctaTitleGold")}</span>?
            </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("requestInfo")}
              </ButtonLink>
            </div>
          </FadeIn>
        </div>
      </section>

    </main>
  );
}