import { Clock, Lock, Zap, CheckCircle2, ShieldCheck } from "lucide-react";

const items = [
  { icon: Clock, label: "24/7 Support" },
  { icon: Lock, label: "Secure Payments" },
  { icon: Zap, label: "Fast Delivery" },
  { icon: CheckCircle2, label: "100+ Sites Fixed" },
  { icon: ShieldCheck, label: "Money-back Guarantee" },
];

export function TrustBar() {
  return (
    <div className="grid grid-cols-2 sm:grid-cols-3 lg:grid-cols-5 gap-3 text-sm">
      {items.map(({ icon: Icon, label }) => (
        <div
          key={label}
          className="flex items-center gap-2 rounded-lg border border-cream/15 bg-cream/5 px-3.5 py-2.5 text-cream/90"
        >
          <Icon className="h-4 w-4 text-emerald flex-shrink-0" />
          <span className="font-medium">{label}</span>
        </div>
      ))}
    </div>
  );
}