import { Shield, CheckCircle2, Lock, Award } from "lucide-react"

export function TrustBadges() {
  const badges = [
    {
      icon: Award,
      text: "Built by a GPhC-registered pharmacist",
    },
    {
      icon: CheckCircle2,
      text: "Designed following NHS digital best-practice standards",
    },
    {
      icon: Shield,
      text: "Built in line with GDPR and UK data protection standards",
    },
    {
      icon: Lock,
      text: "SSL-secured",
    },
  ]

  return (
    <section className="border-y border-[var(--blue-200)] bg-[var(--blue-50)] py-12">
      <div className="container mx-auto px-4 md:px-6">
        <h2 className="mb-8 text-center text-2xl font-bold text-[var(--blue-700)] md:text-3xl">
          Trusted. Compliant. Pharmacy-Ready.
        </h2>
        <div className="mx-auto grid max-w-4xl gap-6 md:grid-cols-2">
          {badges.map((badge, index) => {
            const Icon = badge.icon
            return (
              <div
                key={index}
                className="flex items-start gap-3 rounded-lg border border-[var(--blue-200)] bg-white p-4 shadow-sm"
              >
                <div className="shrink-0">
                  <Icon className="h-6 w-6 text-[var(--yellow-400)]" />
                </div>
                <p className="text-sm leading-relaxed text-[var(--blue-700)]">{badge.text}</p>
              </div>
            )
          })}
        </div>
      </div>
    </section>
  )
}
