import { MotionReveal } from "@/components/Motion";
import { SectionHeader } from "@/components/SectionHeader";
import { WhyItWorksList } from "@/components/WhyItWorksList";
import { cn } from "@/lib/utils";

type WhyChooseUsSectionProps = {
  className?: string;
  containerClassName?: string;
};

export function WhyChooseUsSection({ className, containerClassName }: WhyChooseUsSectionProps) {
  return (
    <section data-section="why-choose-us" className={cn("bg-slate-100 py-14 2xl:py-20", className)}>
      <div className={cn("mx-auto max-w-7xl px-4 font-['Space_Grotesk']", containerClassName)}>
        <MotionReveal>
          <SectionHeader
            eyebrow="Why choose us"
            title="Because your time is worth more than a trip to the garage"
            lead="Doorstep service should feel simple, transparent, and genuinely useful from start to finish."
          />
        </MotionReveal>
        <MotionReveal delay={0.08} className="mt-4 2xl:mt-4">
          <WhyItWorksList />
        </MotionReveal>
      </div>
    </section>
  );
}