import { Gauge, Store, Trophy, Users } from "lucide-react";

const stats = [
  { value: "15,000+", label: "Happy Customers", icon: Users },
  { value: "10+", label: "Top Brands", icon: Trophy },
  { value: "2", label: "Showrooms", icon: Store },
  { value: "8,500+", label: "Test Rides Completed", icon: Gauge },
];

export function StatsStrip() {
  return (
    <section className="bg-white py-6">
      <div className="container-custom">
        <div className="grid gap-4 rounded-card border border-border bg-white p-5 shadow-card sm:grid-cols-2 lg:grid-cols-4">
          {stats.map((stat) => {
            const Icon = stat.icon;
            return (
              <div className="flex items-center justify-center gap-4 border-border py-2 lg:border-r last:lg:border-r-0" key={stat.label}>
                <Icon className="h-11 w-11 text-ev" />
                <div>
                  <p className="text-3xl font-black text-ev-deep">{stat.value}</p>
                  <p className="text-sm font-semibold text-navy-muted">{stat.label}</p>
                </div>
              </div>
            );
          })}
        </div>
      </div>
    </section>
  );
}