import {
  BadgeCheck,
  CircleDollarSign,
  Headphones,
  ShieldCheck,
  Sparkles,
  UserCheck,
} from "lucide-react";

const benefits = [
  {
    title: "100% Genuine Vehicles",
    text: "Assured authenticity and warranty support.",
    icon: ShieldCheck,
  },
  {
    title: "Official Warranty",
    text: "Complete manufacturer warranty on all models.",
    icon: BadgeCheck,
  },
  {
    title: "Trained Experts",
    text: "Expert guidance for the right choice.",
    icon: UserCheck,
  },
  {
    title: "After Sales Support",
    text: "Service, spare parts and roadside assistance.",
    icon: Headphones,
  },
  {
    title: "Best Offers",
    text: "Exclusive dealer offers and exchange benefits.",
    icon: Sparkles,
  },
  {
    title: "Transparent Pricing",
    text: "Clear pricing and straightforward ownership support.",
    icon: CircleDollarSign,
  },
];

export function AuthorizedDealerBenefits() {
  return (
    <section className="bg-white py-10">
      <div className="container-custom">
        <h2 className="mb-6 text-center text-2xl font-bold text-navy-deep">
          Why Buy From an Authorized Dealer?
        </h2>
        <div className="grid gap-4 sm:grid-cols-2 lg:grid-cols-3 xl:grid-cols-6">
          {benefits.map((benefit) => {
            const Icon = benefit.icon;
            return (
              <article className="soft-card p-5" key={benefit.title}>
                <span className="inline-flex h-11 w-11 items-center justify-center rounded-full bg-ev-soft text-ev-deep">
                  <Icon className="h-5 w-5" />
                </span>
                <h3 className="mt-4 text-sm font-bold text-navy-deep">
                  {benefit.title}
                </h3>
                <p className="mt-2 text-sm leading-6 text-navy-muted">{benefit.text}</p>
              </article>
            );
          })}
        </div>
      </div>
    </section>
  );
}