import { ShieldCheck, Truck, CalendarCheck, Package } from 'lucide-react'

const BADGES = [
  {
    icon: ShieldCheck,
    title: 'Pagament 100% segur',
    desc: 'Processat per Stripe. Les teves dades bancàries mai passen pels nostres servidors.',
    color: 'text-teal',
  },
  {
    icon: Package,
    title: 'Producte de qualitat',
    desc: "Samarreta Fullprint Dry Fit i mitjons Blood Bros Socks. Producte d'alt rendiment.",
    color: 'text-teal',
  },
  {
    icon: Truck,
    title: 'Lliurament garantit',
    desc: "Enviament Correos Express o recollida a Corbins/Lleida. Compromís d'entrega.",
    color: 'text-cherry',
  },
  {
    icon: CalendarCheck,
    title: 'Entrega 29 Juny – 3 Juliol',
    desc: 'Tens el teu equipament a temps per a la Cursa de la Cirera 2026.',
    color: 'text-cherry',
  },
]

export default function TrustSection() {
  return (
    <section className="max-w-6xl mx-auto px-4 sm:px-6 py-16">
      <div className="text-center mb-10">
        <p className="section-title">Per què comprar amb nosaltres</p>
        <h2 className="text-3xl sm:text-4xl font-black text-white">
          Som seriosos.{' '}
          <span className="text-teal">Ho lliurem.</span>
        </h2>
      </div>
      <div className="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-4 gap-4">
        {BADGES.map(({ icon: Icon, title, desc, color }) => (
          <div key={title} className="trust-card">
            <div className={`${color} mb-1`}>
              <Icon size={32} strokeWidth={1.5} />
            </div>
            <h3 className="text-white font-bold text-sm">{title}</h3>
            <p className="text-slate-500 text-xs leading-relaxed">{desc}</p>
          </div>
        ))}
      </div>
    </section>
  )
}
