import { Wrench, CheckCircle, Clock, Star } from "lucide-react";

export function TrustBar() {
  const items = [
    {
      icon: Wrench,
      title: "Doświadczeni monterzy",
      description: "Certyfikat F-Gaz, fachowy montaż",
    },
    {
      icon: CheckCircle,
      title: "Kompleksowa usługa",
      description: "Montaż, serwis i doradztwo",
    },
    {
      icon: Clock,
      title: "Bezpłatna wycena",
      description: "Odpowiadamy w ciągu 24h",
    },
    {
      icon: Star,
      title: "Estetyczny montaż",
      description: "Schludna instalacja, bez bałaganu",
    },
  ];

  return (
    <section className="bg-muted border-t border-b border-border py-8">
      <div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
        <div className="grid grid-cols-2 md:grid-cols-4 gap-6 text-center lg:text-left">
          {items.map((item, idx) => {
            const Icon = item.icon;
            return (
              <div
                key={idx}
                className="flex flex-col lg:flex-row items-center lg:items-start gap-3 hover:translate-y-[-2px] transition-transform duration-200"
              >
                <div className="p-2 rounded-lg bg-accent-light text-accent shrink-0">
                  <Icon className="size-6" />
                </div>
                <div>
                  <h4 className="text-sm font-semibold text-primary font-heading">
                    {item.title}
                  </h4>
                  <p className="text-xs text-text-muted mt-0.5">
                    {item.description}
                  </p>
                </div>
              </div>
            );
          })}
        </div>
      </div>
    </section>
  );
}