import { Clock, Bell, ShieldCheck, ClipboardList, MapPin } from "lucide-react";
import { Reveal } from "./Reveal";
import { Accent } from "./Section";

const F = [
  { icon: Clock, title: "Quick Response", desc: "Get connected to nearby assistance." },
  {
    icon: Bell,
    title: "Know What's Happening",
    desc: "Know who's coming and track their arrival.",
  },
  {
    icon: ShieldCheck,
    title: "Trusted Professionals",
    desc: "Work with verified service professionals.",
  },
  {
    icon: ClipboardList,
    title: "Service History",
    desc: "All your vehicle history, in one place.",
  },
];

export function WhyAirfis() {
  return (
    <section className="py-20 lg:py-28">
      <div className="container-airfis grid lg:grid-cols-12 gap-10 lg:gap-14 lg:items-end">
        <div className="lg:col-span-5">
          <span className="inline-flex text-[#FF4308]">
            <MapPin className="h-12 w-12" strokeWidth={1.75} />
          </span>
          <h2 className="h-section mt-6 text-ink">
            Why people
            <br />
            <Accent>choose us</Accent>
          </h2>
          <p className="mt-5 text-[15px] leading-relaxed text-ink-2 max-w-sm">
            Fast, reliable vehicle assistance with trusted support to get you smoothly back on the
            road.
          </p>
        </div>

        <div className="lg:col-span-7 grid sm:grid-cols-2 gap-5">
          {F.map((f, i) => (
            <Reveal key={f.title} delay={i * 70}>
              <div className="surface-card surface-card-hover h-full p-6">
                <span className="flex h-10 w-10 items-center justify-center rounded-xl bg-[#f3f3f3] text-[#0a0a12]">
                  <f.icon className="h-5 w-5" />
                </span>
                <div className="mt-5 font-semibold text-ink">{f.title}</div>
                <p className="mt-2 text-sm leading-relaxed text-ink-2">{f.desc}</p>
              </div>
            </Reveal>
          ))}
        </div>
      </div>
    </section>
  );
}