import Image from "next/image";
import { useLocale, useTranslations } from "next-intl";
import {
  Leaf, ShieldCheck, Factory, ListChecks, PackageOpen, Handshake,
} from "lucide-react";
import { FadeIn } from "@/components/magicui/fade-in";
import { getLocalizedWhyChooseItems } from "@/data/localized-data";

const iconMap: Record<string, React.ElementType> = {
  Leaf, ShieldCheck, Factory, ListChecks, PackageOpen, Handshake,
};

function WhyChoose() {
  const locale = useLocale();
  const t = useTranslations("whyChoose");
  const items = getLocalizedWhyChooseItems(locale);

  return (
    <section className="bg-white py-20 sm:py-28">
      <div className="mx-auto max-w-[1400px] px-4 sm:px-6 lg:px-8">
        <div className="grid grid-cols-1 items-center gap-14 lg:grid-cols-2">

          {/* Left — image */}
          <FadeIn direction="left">
            <div className="relative aspect-[4/3] w-full overflow-hidden rounded-2xl shadow-xl lg:aspect-square xl:aspect-[4/4.5]">
              <Image
                src="/images/gallery/4-Processing.jpg"
                alt="Original Nest Factory"
                fill
                className="object-cover"
                sizes="(max-width: 1024px) 100vw, 50vw"
              />
              {/* Overlay badge */}
              <div className="absolute bottom-5 left-5 rounded-xl bg-white/95 px-4 py-3 shadow-lg backdrop-blur-sm">
                <p className="text-xs font-bold text-ink">{t("badge")}</p>
                <p className="text-[10px] text-muted">{t("badgeSub")}</p>
              </div>
            </div>
          </FadeIn>

          {/* Right — content */}
          <FadeIn direction="right" delay={150}>
            <div>
              <p className="mb-3 text-xs font-bold uppercase tracking-[0.25em] text-gold">
                {t("label")}
              </p>
              <h2 className="mb-8 font-serif text-3xl font-bold text-ink sm:text-4xl">
                {t("title")}
              </h2>
              <div className="grid grid-cols-1 gap-4 sm:grid-cols-2">
                {items.map((item, i) => {
                  const Icon = iconMap[item.icon] ?? Leaf;
                  return (
                    <FadeIn key={item.title} delay={i * 60}>
                      <div className="group flex gap-3 rounded-xl border border-black/5 bg-gold-bg p-4 transition-all duration-300 hover:-translate-y-0.5 hover:border-gold/20 hover:shadow-md">
                        <div className="flex h-9 w-9 shrink-0 items-center justify-center rounded-lg bg-gold/10 text-gold transition-colors group-hover:bg-gold group-hover:text-white">
                          <Icon className="h-4 w-4" />
                        </div>
                        <div>
                          <h3 className="text-xs font-bold uppercase tracking-wide text-ink">
                            {item.title}
                          </h3>
                          <p className="mt-0.5 text-[11px] leading-relaxed text-muted">
                            {item.description}
                          </p>
                        </div>
                      </div>
                    </FadeIn>
                  );
                })}
              </div>
            </div>
          </FadeIn>

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

export { WhyChoose };