import { CreditCard, Headphones, ShieldCheck, Truck } from "lucide-react";

const benefits = [
  { icon: Truck, title: "Envíos nacionales", text: "Coordinación rápida y segura." },
  { icon: CreditCard, title: "Pagos flexibles", text: "Opciones adaptadas a tu compra." },
  { icon: ShieldCheck, title: "Compra protegida", text: "Confirmamos antes de pagar." },
  { icon: Headphones, title: "Atención cercana", text: "Acompañamiento por WhatsApp." },
];

export function TrustBar() {
  return <section className="mx-auto grid max-w-7xl gap-4 px-4 py-10 sm:grid-cols-2 lg:grid-cols-4">{benefits.map(({ icon: Icon, title, text }, index) => <article key={title} className="flex items-center gap-4 rounded-3xl border border-slate-100 bg-white p-5 shadow-lg shadow-slate-900/5"><span className={`grid size-12 shrink-0 place-items-center rounded-2xl ${["bg-yellow-300", "bg-cyan-300", "bg-pink-300", "bg-violet-300"][index]}`}><Icon className="size-6 text-slate-950" /></span><div><strong className="block font-black">{title}</strong><span className="mt-1 block text-xs text-slate-500">{text}</span></div></article>)}</section>;
}