"use client";

import Image from "next/image";
import Link from "next/link";
import { useLocale, useTranslations } from "next-intl";
import { Phone, Mail, Globe, MapPin } from "lucide-react";
import {
  CONTACT_INFO,
  SOCIAL_LINKS,
  FOOTER_QUICK_LINKS,
  FOOTER_PRODUCT_LINKS,
} from "@/data/site-data";

const socialIcons: Record<string, React.ReactNode> = {
  Facebook: (
    <svg className="h-3.5 w-3.5" fill="currentColor" viewBox="0 0 24 24">
      <path d="M24 12.073c0-6.627-5.373-12-12-12s-12 5.373-12 12c0 5.99 4.388 10.954 10.125 11.854v-8.385H7.078v-3.47h3.047V9.43c0-3.007 1.792-4.669 4.533-4.669 1.312 0 2.686.235 2.686.235v2.953H15.83c-1.491 0-1.956.925-1.956 1.874v2.25h3.328l-.532 3.47h-2.796v8.385C19.612 23.027 24 18.062 24 12.073z" />
    </svg>
  ),
  Instagram: (
    <svg className="h-3.5 w-3.5" fill="currentColor" viewBox="0 0 24 24">
      <path d="M12 2.163c3.204 0 3.584.012 4.85.07 3.252.148 4.771 1.691 4.919 4.919.058 1.265.069 1.645.069 4.849 0 3.205-.012 3.584-.069 4.849-.149 3.225-1.664 4.771-4.919 4.919-1.266.058-1.644.07-4.85.07-3.204 0-3.584-.012-4.849-.07-3.26-.149-4.771-1.699-4.919-4.92-.058-1.265-.07-1.644-.07-4.849 0-3.204.013-3.583.07-4.849.149-3.227 1.664-4.771 4.919-4.919 1.266-.057 1.645-.069 4.849-.069zM12 0C8.741 0 8.333.014 7.053.072 2.695.272.273 2.69.073 7.052.014 8.333 0 8.741 0 12c0 3.259.014 3.668.072 4.948.2 4.358 2.618 6.78 6.98 6.98C8.333 23.986 8.741 24 12 24c3.259 0 3.668-.014 4.948-.072 4.354-.2 6.782-2.618 6.979-6.98.059-1.28.073-1.689.073-4.948 0-3.259-.014-3.667-.072-4.947-.196-4.354-2.617-6.78-6.979-6.98C15.668.014 15.259 0 12 0zm0 5.838a6.162 6.162 0 100 12.324 6.162 6.162 0 000-12.324zM12 16a4 4 0 110-8 4 4 0 010 8zm6.406-11.845a1.44 1.44 0 100 2.881 1.44 1.44 0 000-2.881z" />
    </svg>
  ),
  Youtube: (
    <svg className="h-3.5 w-3.5" fill="currentColor" viewBox="0 0 24 24">
      <path d="M23.498 6.186a3.016 3.016 0 00-2.122-2.136C19.505 3.545 12 3.545 12 3.545s-7.505 0-9.377.505A3.017 3.017 0 00.502 6.186C0 8.07 0 12 0 12s0 3.93.502 5.814a3.016 3.016 0 002.122 2.136c1.871.505 9.376.505 9.376.505s7.505 0 9.377-.505a3.015 3.015 0 002.122-2.136C24 15.93 24 12 24 12s0-3.93-.502-5.814zM9.545 15.568V8.432L15.818 12l-6.273 3.568z" />
    </svg>
  ),
};

const navKeys: Record<string, string> = {
  "Home": "home",
  "Products": "products",
  "Process": "process",
  "Certifications": "credentials",
  "SoHealthy": "sohealthy",
  "About Us": "about",
  "Gallery": "viewAllProducts", // fallback or default
  "Contact": "chatWhatsApp",
};

const productTranslationMap: Record<string, Record<string, string>> = {
  id: {
    "White House Nest": "Sarang Walet Mangkok Putih",
    "Golden Nest": "Sarang Walet Emas",
    "White Cup": "Sarang Walet Mangkok Standar",
    "Broken Nest": "Sarang Walet Pecahan",
    "Nest Powder": "Bubuk Sarang Walet",
  },
  zh: {
    "White House Nest": "白燕盏",
    "Golden Nest": "黄燕盏",
    "White Cup": "白燕杯",
    "Broken Nest": "碎燕",
    "Nest Powder": "燕窝粉",
  },
};

/* 6 negara ekspor utama — nama per locale + posisi titik di world-map-export.png (persen) */
const EXPORT_MARKERS: { key: string; x: number; y: number; names: Record<string, string> }[] = [
  { key: "sg", x: 77.0, y: 64.4, names: { en: "Singapore", id: "Singapura", zh: "新加坡" } },
  { key: "my", x: 76.2, y: 60.9, names: { en: "Malaysia", id: "Malaysia", zh: "马来西亚" } },
  { key: "cn", x: 75.5, y: 37.9, names: { en: "China", id: "Tiongkok", zh: "中国" } },
  { key: "hk", x: 78.6, y: 50.0, names: { en: "Hong Kong", id: "Hong Kong", zh: "中国香港" } },
  { key: "ae", x: 62.5, y: 47.1, names: { en: "UAE", id: "UEA", zh: "阿联酋" } },
];

const exportingSuffixMap: Record<string, string> = {
  en: "and other global regions.",
  id: "dan wilayah global lainnya.",
  zh: "及其他全球地区。",
};

function Footer() {
  const locale = useLocale();
  const t = useTranslations("footer");
  const tNav = useTranslations("nav");
  const l = (href: string) => `/${locale}${href === "/" ? "" : href}`;

  const getProductLabel = (label: string) => {
    return productTranslationMap[locale]?.[label] ?? label;
  };

  const getQuickLinkLabel = (label: string) => {
    const key = navKeys[label];
    if (key) {
      if (label === "Gallery") return locale === "id" ? "Galeri" : locale === "zh" ? "画廊" : label;
      if (label === "Contact") return locale === "id" ? "Kontak" : locale === "zh" ? "联系我们" : label;
      return tNav(key);
    }
    return label;
  };

  const exportSuffix = exportingSuffixMap[locale] ?? exportingSuffixMap.en;
  const countryName = (m: (typeof EXPORT_MARKERS)[number]) => m.names[locale] ?? m.names.en;

  return (
    <footer className="border-t border-black/5 bg-[#f5f1ed] py-16 text-ink">
      <div className="mx-auto max-w-[1400px] space-y-12 px-4 sm:px-6 lg:px-8">
        <div className="grid grid-cols-1 gap-8 md:grid-cols-2 lg:grid-cols-5">

          {/* Brand */}
          <div className="space-y-4">
            <Link href={l("/")} className="flex items-center gap-2">
              <Image
                src="/images/logo-original-nest.png"
                alt="Original Nest"
                width={120}
                height={40}
                className="h-10 w-auto"
              />
            </Link>
            <p className="text-xs leading-relaxed text-muted">
              {t("tagline")}
            </p>
            <div className="flex gap-2">
              {SOCIAL_LINKS.map((social) => (
                <Link
                  key={social.label}
                  href={social.href}
                  target="_blank"
                  rel="noopener noreferrer"
                  className="flex h-7 w-7 items-center justify-center rounded-full border border-black/10 text-muted transition-colors hover:border-gold hover:text-gold"
                  aria-label={social.label}
                >
                  {socialIcons[social.icon]}
                </Link>
              ))}
            </div>
            {/* B2B Credentials */}
            <div className="space-y-1 text-[10px] font-bold text-muted uppercase tracking-widest pt-2 border-t border-black/5">
              <p>{locale === "zh" ? "出口许可证：No. 12/REG/WALET/2020" : locale === "id" ? "Izin Ekspor: No. 12/REG/WALET/2020" : "Export License: No. 12/REG/WALET/2020"}</p>
            </div>
          </div>

          {/* Quick Links */}
          <div className="space-y-4">
            <h3 className="text-xs font-bold uppercase tracking-widest text-ink">{t("quickLinks")}</h3>
            <ul className="space-y-2 text-xs text-muted">
              {FOOTER_QUICK_LINKS.map((link) => (
                <li key={link.label}>
                  <Link href={l(link.href)} className="transition-colors hover:text-gold">
                    {getQuickLinkLabel(link.label)}
                  </Link>
                </li>
              ))}
              <li>
                <a
                  href="/Company-Profile.pdf"
                  target="_blank"
                  rel="noopener noreferrer"
                  className="transition-colors hover:text-gold"
                >
                  {locale === "zh" ? "公司简介" : locale === "id" ? "Profil Perusahaan" : "Company Profile"}
                </a>
              </li>
            </ul>
          </div>

          {/* Products */}
          <div className="space-y-4">
            <h3 className="text-xs font-bold uppercase tracking-widest text-ink">{t("products")}</h3>
            <ul className="space-y-2 text-xs text-muted">
              {FOOTER_PRODUCT_LINKS.map((link) => (
                <li key={link.label}>
                  <Link href={l(link.href)} className="transition-colors hover:text-gold">
                    {getProductLabel(link.label)}
                  </Link>
                </li>
              ))}
            </ul>
          </div>

          {/* Contact */}
          <div className="space-y-4">
            <h3 className="text-xs font-bold uppercase tracking-widest text-ink">{t("contactUs")}</h3>
            <ul className="space-y-2.5 text-xs text-muted">
              <li className="flex items-center gap-2">
                <Phone className="h-3.5 w-3.5 shrink-0 text-gold" />
                {CONTACT_INFO.phone} (WhatsApp)
              </li>
              <li className="flex items-center gap-2">
                <Mail className="h-3.5 w-3.5 shrink-0 text-gold" />
                {CONTACT_INFO.email}
              </li>
              <li className="flex items-center gap-2">
                <Globe className="h-3.5 w-3.5 shrink-0 text-gold" />
                {CONTACT_INFO.website}
              </li>
              <li className="flex items-start gap-2">
                <MapPin className="mt-0.5 h-3.5 w-3.5 shrink-0 text-gold" />
                <a
                  href={CONTACT_INFO.mapsUrl}
                  target="_blank"
                  rel="noopener noreferrer"
                  className="transition-colors hover:text-gold"
                >
                  {CONTACT_INFO.address}
                </a>
              </li>
            </ul>

            {/* Google Maps Mini Embed */}
            <div className="mt-4 overflow-hidden rounded-xl border border-black/5 shadow-sm">
              <iframe
                src={CONTACT_INFO.mapsEmbed}
                width="100%"
                height="100"
                style={{ border: 0 }}
                allowFullScreen={false}
                loading="lazy"
                referrerPolicy="no-referrer-when-downgrade"
                title="Medan Factory Location"
              />
            </div>

            {/* WhatsApp Green CTA */}
            <div className="pt-2">
              <a
                href={CONTACT_INFO.whatsapp}
                target="_blank"
                rel="noopener noreferrer"
                className="inline-flex w-full items-center justify-center gap-2 rounded-xl bg-green-600 px-4 py-2.5 text-xs font-bold text-white shadow-sm transition-colors hover:bg-green-700"
              >
                <svg className="h-3.5 w-3.5 fill-current" viewBox="0 0 24 24">
                  <path d="M.057 24l1.687-6.163c-1.041-1.804-1.588-3.849-1.587-5.946C.06 5.348 5.397.01 12.008.01c3.202.001 6.212 1.246 8.477 3.514 2.266 2.268 3.507 5.28 3.505 8.484-.004 6.657-5.34 11.997-11.953 11.997-2.005-.001-3.973-.502-5.724-1.457L0 24zm6.59-4.846c1.6.95 3.188 1.449 4.825 1.451 5.436 0 9.86-4.42 9.864-9.864.002-2.636-1.023-5.11-2.884-6.974C16.592 1.898 14.116.87 11.5.87c-5.44 0-9.865 4.42-9.869 9.865-.001 1.748.461 3.453 1.336 4.952l-.99 3.613 3.708-.973zm11.758-5.326c-.328-.164-1.94-.959-2.24-1.07-.3-.109-.518-.164-.736.164-.218.327-.846 1.07-1.037 1.288-.19.218-.381.245-.71.081-.328-.164-1.386-.51-2.639-1.627-.975-.87-1.633-1.946-1.824-2.274-.19-.328-.02-.505.143-.668.147-.146.328-.382.492-.573.164-.19.218-.328.328-.545.11-.218.055-.41-.028-.573-.082-.164-.736-1.773-1.009-2.427-.267-.64-.56-.553-.736-.562-.191-.01-.41-.011-.628-.011-.218 0-.573.082-.873.41-.3.327-1.146 1.12-1.146 2.729s1.173 3.166 1.336 3.385c.164.218 2.307 3.524 5.59 4.94 2.73 1.18 3.284.945 3.885.888.601-.057 1.94-.793 2.213-1.529.273-.736.273-1.365.191-1.492-.083-.127-.3-.191-.628-.355z" />
                </svg>
                {locale === "zh" ? "WhatsApp 销售团队" : locale === "id" ? "WhatsApp Tim Sales" : "WhatsApp Sales Team"}
              </a>
            </div>
          </div>

          {/* Exporting To — world map with the 6 export markets marked */}
          <div className="space-y-4">
            <h3 className="text-xs font-bold uppercase tracking-widest text-ink">{t("exportingTo")}</h3>
            <div className="relative" aria-hidden="true">
              <Image
                src="/images/world-map-export.png"
                alt=""
                width={1400}
                height={677}
                className="h-auto w-full select-none"
              />
              {EXPORT_MARKERS.map((m) => (
                <span
                  key={m.key}
                  className="absolute flex h-2 w-2 -translate-x-1/2 -translate-y-1/2"
                  style={{ left: `${m.x}%`, top: `${m.y}%` }}
                >
                  <span className="absolute inline-flex h-full w-full rounded-full bg-gold opacity-60 motion-safe:animate-ping" />
                  <span className="relative inline-flex h-2 w-2 rounded-full bg-gold-dark ring-1 ring-white" />
                </span>
              ))}
            </div>
            <p className="text-xs leading-relaxed text-muted">
              {EXPORT_MARKERS.map((m, i) => (
                <span key={m.key}>
                  <strong className="font-bold text-ink">{countryName(m)}</strong>
                  {i < EXPORT_MARKERS.length - 1 ? (locale === "zh" ? "、" : ", ") : " "}
                </span>
              ))}
              {exportSuffix}
            </p>
          </div>
        </div>

        {/* Bottom */}
        <div className="flex flex-col items-center justify-between gap-4 border-t border-black/10 pt-8 text-xs text-muted sm:flex-row">
          <p>&copy; {new Date().getFullYear()} ORIGINALNEST. {t("rights")}</p>
          <div className="flex gap-4">
            <Link href={l("/privacy")} className="transition-colors hover:text-gold">{t("privacy")}</Link>
            <span>|</span>
            <Link href={l("/terms")} className="transition-colors hover:text-gold">{t("terms")}</Link>
          </div>
        </div>
      </div>
    </footer>
  );
}

export { Footer };