import { Shield, Lock, User, SlidersHorizontal } from "lucide-react";

interface Feature {
  icon: React.ComponentType<{ className?: string }>;
  title: string;
  description: string;
}

const features: Feature[] = [
  {
    icon: Shield,
    title: "Full Local Warranty",
    description:
      "Our physical labs provide direct service, technical calibration, and local warranty handling on all modern hardware.",
  },
  {
    icon: Lock,
    title: "Safe Escrow System",
    description:
      "Guaranteed transaction safety. Sourcing assets are thoroughly inspected by engineers prior to funds being disbursed.",
  },
  {
    icon: User,
    title: "Direct Relationships",
    description:
      "Procure directly with confidence via official supply lines, network integrations, and corporate trade connections.",
  },
  {
    icon: SlidersHorizontal,
    title: "Global Logistics",
    description:
      "Door-to-door transit protection, customized heavy-freight cases, and custom clearance support internationally.",
  },
];

export default function WhyBuyFromBroadcastAV() {
  return (
    <section className="w-full bg-[#F5F7F9] py-16">
      <div className="mx-auto max-w-7xl px-4 sm:px-6 lg:px-10">
        <p className="text-xs font-semibold uppercase text-blue-600">
          Procurement assurance
        </p>
        <h2 className="mt-2 text-2xl font-medium text-slate-900 md:text-[32px]">
          Why Buy From BroadcastAV?
        </h2>

        <div className="mt-10 grid grid-cols-1 gap-4 sm:grid-cols-2 lg:grid-cols-4">
          {features.map(({ icon: Icon, title, description }) => (
            <div
              key={title}
              className="rounded-lg bg-[#E2E7ED] px-4 py-6"
            >
              <div className="flex h-9 w-9 items-center justify-center rounded-lg bg-blue-100">
                <Icon className="h-[18px] w-[18px] text-blue-600" />
              </div>
              <h3 className="mt-4 text-base font-medium text-black">
                {title}
              </h3>
              <p className="mt-2 text-xs leading-relaxed text-slate-600">
                {description}
              </p>
            </div>
          ))}
        </div>
      </div>
    </section>
  );
}