import { CheckCircle2, ShieldCheck, HeadphonesIcon, Award, Zap } from "lucide-react";
import { StaggerContainer, StaggerItem } from "@/components/ui/motion";

export function BenefitsSection() {
  const benefits = [
    {
      icon: CheckCircle2,
      title: "Harga Terbaik",
      description: "Jaminan harga terbaik untuk setiap perjalanan",
    },
    {
      icon: ShieldCheck,
      title: "Pembayaran Aman",
      description: "Transaksi aman & terenkripsi dengan berbagai metode",
    },
    {
      icon: HeadphonesIcon,
      title: "Layanan 24/7",
      description: "Tim kami siap membantu kapan pun Anda butuhkan",
    },
    {
      icon: Award,
      title: "Perjalanan Terpercaya",
      description: "Berpengalaman melayani ribuan pelanggan",
    },
    {
      icon: Zap,
      title: "Bantuan Cepat",
      description: "Pusat bantuan untuk menjawab pertanyaan Anda",
    },
  ];

  return (
    <section className="bg-bg-light pt-8 pb-12 md:pt-12 md:pb-16 relative z-10">
      <div className="mx-auto max-w-7xl px-4 sm:px-6 lg:px-8">
        <StaggerContainer className="grid grid-cols-1 gap-8 sm:grid-cols-2 md:grid-cols-3 lg:grid-cols-5">
          {benefits.map((benefit, index) => {
            const Icon = benefit.icon;
            return (
              <StaggerItem key={index} className="flex flex-col items-center text-center group">
                <div className="mb-4 rounded-full bg-red-50 p-4 text-merah-ranata transition-colors duration-300 group-hover:bg-merah-ranata group-hover:text-white">
                  <Icon className="h-6 w-6 stroke-[1.5]" />
                </div>
                <h3 className="mb-2 text-base font-bold text-slate-900">{benefit.title}</h3>
                <p className="text-sm text-slate-500 leading-relaxed max-w-[200px]">
                  {benefit.description}
                </p>
              </StaggerItem>
            );
          })}
        </StaggerContainer>
      </div>
    </section>
  );
}