"use client";

import { useLocale } from "next-intl";
import { FadeIn } from "@/components/magicui/fade-in";

type Locale = "en" | "id" | "zh";

interface ExportItem {
  flags: string[];
  title: Record<Locale, string>;
  subtitle?: Record<Locale, string>;
  desc: Record<Locale, string>;
}

const EXPORT_DATA: ExportItem[] = [
  {
    flags: ["cn"],
    title: {
      en: "China",
      id: "Tiongkok",
      zh: "中国"
    },
    desc: {
      en: "Registered exporter in China. Passed a rigorous audit from Chinese authorities for export approval.",
      id: "Eksportir terdaftar di Tiongkok. Lulus audit ketat dari otoritas Tiongkok untuk persetujuan ekspor.",
      zh: "成为中国注册的出口商。符合中华人民共和国的所有法律法规，确保天然与高品质的燕窝。"
    }
  },
  {
    flags: ["jp"],
    title: {
      en: "Japan",
      id: "Jepang",
      zh: "日本"
    },
    desc: {
      en: "Our bird's nest are being exported to Japan, strengthening our presence in Asia.",
      id: "Sarang burung walet kami diekspor ke Jepang, memperkuat kehadiran kami di Asia.",
      zh: "我们的燕窝飞往日本加强了我们在亚洲的存在。"
    }
  },
  {
    flags: ["mo", "hk"],
    title: {
      en: "Macau & Hong Kong",
      id: "Makau & Hong Kong",
      zh: "澳门和香港"
    },
    subtitle: {
      en: "(Special administrative regions of China)",
      id: "(Wilayah Administratif Khusus Tiongkok)",
      zh: "（中国特别行政区）"
    },
    desc: {
      en: "Our bird's nests flew to Macau, and Hong Kong.",
      id: "Sarang burung walet kami diekspor ke Makau dan Hong Kong.",
      zh: "我们的燕窝飞往澳门和香港"
    }
  },
  {
    flags: ["us"],
    title: {
      en: "United States",
      id: "Amerika Serikat",
      zh: "美国"
    },
    desc: {
      en: "Obtained FDA certification for export to the U.S.",
      id: "Memperoleh sertifikasi FDA untuk ekspor ke Amerika Serikat.",
      zh: "获得FDA认证，以便向美国出口。"
    }
  },
  {
    flags: ["au"],
    title: {
      en: "Australia",
      id: "Australia",
      zh: "澳大利亚"
    },
    desc: {
      en: "Expanded to Australia with products that meet local standards.",
      id: "Ekspansi ke Australia dengan produk yang memenuhi standar lokal.",
      zh: "扩展到澳大利亚，提供符合当地标准的产品。"
    }
  },
  {
    flags: ["gb", "fr"],
    title: {
      en: "United Kingdom & France",
      id: "Inggris & Prancis",
      zh: "英国和法国"
    },
    desc: {
      en: "Europe welcomed us in 2019, with the UK and France becoming new destinations for our products.",
      id: "Eropa menyambut kami pada tahun 2019, dengan Inggris dan Prancis menjadi tujuan baru bagi produk kami.",
      zh: "2019年，欧洲欢迎我们，英国和法国成为我们产品的新目的地。"
    }
  },
  {
    flags: ["sg"],
    title: {
      en: "Singapore",
      id: "Singapura",
      zh: "新加坡"
    },
    desc: {
      en: "Singapore has always been our long and stable exporting country.",
      id: "Singapura selalu menjadi negara tujuan ekspor kami yang lama dan stabil.",
      zh: "新加坡一直是我们长期稳定的出口国家。"
    }
  }
];

function TrustedBy() {
  const locale = useLocale();

  return (
    <section className="relative overflow-hidden bg-[#fafaf9] py-20 sm:py-28">
      {/* Decorative Left Pattern Sidebar - only visible on very wide screens to prevent overlapping content */}
      <div className="hidden 2xl:block absolute inset-y-0 left-0 w-16 border-r-[6px] border-[#e7e1d8] pointer-events-none"
        style={{
          backgroundImage: `url("data:image/svg+xml,%3Csvg width='40' height='40' viewBox='0 0 40 40' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M20 20.5V18H0v-2h20v-2H0v-2h20v-2H0V8h20V6H0V4h20V2H0V0h22v20h2V0h2v20h2V0h2v20h2V0h2v20h2V0h2v20h2v20H20v-1.5zM0 20h2v20H0V20zm4 0h2v20H4V20zm4 0h2v20H8V20zm4 0h2v20h-2V20zm4 0h2v20h-2V20zm4 4h20v2H20v-2zm0 4h20v2H20v-2zm0 4h20v2H20v-2zm0 4h20v2H20v-2z' fill='%23b3955b' fill-opacity='0.15' fill-rule='evenodd'/%3E%3C/svg%3E")`,
          backgroundSize: '60px'
        }}
      />

      <div className="mx-auto max-w-[1400px] px-4 sm:px-6 lg:px-8 relative z-10">

        {/* Header section */}
        <FadeIn className="mb-16">
          {locale === "zh" ? (
            <h2 className="font-serif text-4xl sm:text-5xl lg:text-[56px] font-light text-ink tracking-widest leading-[1.1]">
              我们出口的<span className="text-[#b3955b]">国家</span>
            </h2>
          ) : locale === "id" ? (
            <h2 className="font-serif text-4xl sm:text-5xl lg:text-[56px] font-light text-ink tracking-tight leading-[1.1]">
              Negara Tujuan <span className="text-[#b3955b]">Ekspor</span>
            </h2>
          ) : (
            <h2 className="font-serif text-4xl sm:text-5xl lg:text-[56px] font-light text-ink tracking-tight leading-[1.1]">
              <span className="text-[#b3955b]">Countries</span> We Export To
            </h2>
          )}
        </FadeIn>

        {/* Grid of Countries */}
        <div className="grid grid-cols-1 md:grid-cols-2 gap-x-8 md:gap-x-12 lg:gap-x-16 xl:gap-x-20 gap-y-12">
          {EXPORT_DATA.map((item, idx) => (
            <FadeIn key={item.title.en} delay={idx * 100} className="relative pb-10 border-b border-[#e5e5e5]">
              <div className="flex gap-4 sm:gap-6">

                {/* Flags Column */}
                <div className="flex flex-col gap-2.5 pt-1 flex-shrink-0 w-12 sm:w-14">
                  {item.flags.map(flag => (
                    <img
                      key={flag}
                      src={`https://flagcdn.com/w80/${flag}.png`}
                      alt={flag}
                      className="w-full object-cover shadow-sm border border-black/10 aspect-[4/3]"
                    />
                  ))}
                </div>

                {/* Text Content */}
                <div>
                  <h3 className="text-base sm:text-lg font-bold text-ink mb-1">
                    {item.title[locale as Locale]}
                  </h3>
                  {item.subtitle && (
                    <p className="text-[11px] sm:text-xs text-zinc-500 mb-2">
                      {item.subtitle[locale as Locale]}
                    </p>
                  )}
                  <p className="text-xs sm:text-[13px] text-zinc-800 leading-relaxed mt-2.5">
                    {item.desc[locale as Locale]}
                  </p>
                </div>

              </div>
            </FadeIn>
          ))}
        </div>

      </div>
    </section>
  );
}

export { TrustedBy };