import { Clock, ShieldCheck, Shield, Percent, Star } from "lucide-react";

export function TrustBar() {
  const items = [
    {
      icon: Clock,
      title: "Szybki termin realizacji",
      description: "Ekspresowy montaż i serwis",
    },
    {
      icon: ShieldCheck,
      title: "15+ lat doświadczenia",
      description: "Tysiące zrealizowanych projektów",
    },
    {
      icon: Shield,
      title: "Pełna gwarancja",
      description: "Bezpieczeństwo i pewność usług",
    },
    {
      icon: Star,
      title: "Opinie Google 5.0",
      description: "Zaufanie setek klientów",
    },
  ];

  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>
  );
}