import { Truck, ShieldCheck, Headphones, Wrench } from "lucide-react";

const trustItems = [
  {
    icon: Truck,
    title: "Free Shipping",
    description: "On orders over $500. Heavy-item white-glove delivery available.",
  },
  {
    icon: ShieldCheck,
    title: "Manufacturer Warranty",
    description: "Official warranty on all products. Up to 20 years on ceramics.",
  },
  {
    icon: Wrench,
    title: "Assembly Services",
    description: "Professional assembly available for all grills and smokers.",
  },
  {
    icon: Headphones,
    title: "Expert Support",
    description: "Dedicated BBQ specialists available 7 days a week.",
  },
];

const TrustBanner = () => {
  return (
    <section className="py-16 lg:py-20 bg-[#2b2b2b] border-y border-[#444]">
      <div className="max-w-[1400px] mx-auto px-4 sm:px-6 lg:px-8">
        <div className="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-4 gap-8">
          {trustItems.map((item) => (
            <div
              key={item.title}
              className="flex flex-col items-center text-center group"
            >
              <div className="w-16 h-16 rounded-full bg-[#d35400]/10 border border-[#d35400]/30 flex items-center justify-center mb-4 group-hover:bg-[#d35400]/20 group-hover:border-[#d35400]/60 transition-all duration-300">
                <item.icon className="w-7 h-7 text-[#d35400]" />
              </div>
              <h3 className="font-oswald text-lg font-bold text-white uppercase tracking-wider mb-2">
                {item.title}
              </h3>
              <p className="font-inter text-sm text-[#b0b0b0] leading-relaxed max-w-[250px]">
                {item.description}
              </p>
            </div>
          ))}
        </div>
      </div>
    </section>
  );
};

export default TrustBanner;