"use client";

import { ShieldCheck, Lock, BadgeCheck, Eye } from "lucide-react";
import { Container } from "@/components/common/Container";
import { Reveal } from "@/components/motion/Reveal";
import { useTranslation } from "@/hooks/useTranslation";

const ITEMS = [
  { icon: BadgeCheck, key: "trust.badge1" },
  { icon: Lock, key: "trust.badge2" },
  { icon: ShieldCheck, key: "trust.badge3" },
  { icon: Eye, key: "trust.badge4" },
];

export function TrustBadges() {
  const { t } = useTranslation();

  return (
    <section
      className="relative border-y border-slate-200/70 bg-gradient-to-r from-slate-50/80 via-white to-slate-50/80 py-12 dark:border-white/[0.06] dark:from-white/[0.02] dark:via-slate-950 dark:to-white/[0.02] sm:py-14"
      aria-label="Trust signals"
    >
      <Container>
        <Reveal className="flex justify-center">
          <span className="text-xs font-bold uppercase tracking-wider text-brand-700 dark:text-brand-300">
            {t("trust.subtitle")}
          </span>
        </Reveal>
        <div className="mt-8 grid grid-cols-1 gap-3 sm:grid-cols-2 md:grid-cols-4 sm:gap-4">
          {ITEMS.map(({ icon: Icon, key }, idx) => (
            <Reveal key={key} delay={idx * 0.05}>
              <div className="group flex h-full items-center gap-3 rounded-2xl border border-slate-200/70 bg-white/80 px-4 py-3.5 text-sm font-medium text-slate-700 backdrop-blur-sm transition-all duration-300 ease-snappy hover:-translate-y-0.5 hover:border-brand-300 hover:bg-white hover:shadow-soft dark:border-white/[0.06] dark:bg-white/[0.04] dark:text-slate-200 dark:hover:border-brand-400/40 dark:hover:bg-white/[0.06]">
                <span className="grid h-9 w-9 shrink-0 place-items-center rounded-xl bg-gradient-to-br from-brand-50 to-brand-100 text-brand-600 transition-transform duration-300 group-hover:scale-105 dark:from-brand-500/15 dark:to-brand-500/5 dark:text-brand-300">
                  <Icon className="h-[18px] w-[18px]" />
                </span>
                <span className="leading-snug">{t(key)}</span>
              </div>
            </Reveal>
          ))}
        </div>
      </Container>
    </section>
  );
}