"use client";
import { Container } from "@/components/container";
import { Heading } from "@/components/heading";
import { CheckCircle2 } from "lucide-react";

export function WhyChoose() {
  const reasons = [
    {
      title: "Honest Advice",
      description: "No hidden agendas. We don't sell packages or earn commissions from agencies."
    },
    {
      title: "Multiple Options",
      description: "We give you 2-3 agency options so you can choose what works best for you."
    },
    {
      title: "No Hidden Agenda",
      description: "We're independent consultants. Your satisfaction is our only goal."
    },
    {
      title: "Budget-Friendly",
      description: "Our consultation is completely free. You only pay the agency you choose."
    }
  ];

  return (
    <section className="py-20 bg-neutral-50">
      <Container>
        <div className="text-center mb-12">
          <Heading className="text-3xl md:text-4xl font-bold text-neutral-900">
            Why Choose Badnaam Safar?
          </Heading>
          <p className="mt-4 text-lg text-neutral-600 max-w-2xl mx-auto">
            We're different because we put your needs first, not our profits.
          </p>
        </div>
        <div className="grid grid-cols-1 md:grid-cols-2 gap-8 max-w-4xl mx-auto">
          {reasons.map((reason, index) => (
            <div key={index} className="flex gap-4">
              <div className="flex-shrink-0">
                <CheckCircle2 className="h-6 w-6 text-green-700" />
              </div>
              <div>
                <h3 className="text-xl font-semibold text-neutral-900 mb-2">{reason.title}</h3>
                <p className="text-neutral-600">{reason.description}</p>
              </div>
            </div>
          ))}
        </div>
      </Container>
    </section>
  );
}