import { ShieldCheck, DollarSign, Clock, Building, CheckCircle2 } from "lucide-react";

export default function TrustBadges() {
  const benefits = [
    {
      icon: DollarSign,
      title: "No Agent Commission",
      description: "A direct sale can remove the need to list your home with a seller’s agent.",
    },
    {
      icon: Clock,
      title: "Choose Your Closing Date",
      description: "Discuss a closing schedule that works for your property and situation.",
    },
    {
      icon: ShieldCheck,
      title: "Sell As-Is",
      description: "Tell us about the house as it is. Repairs and clean-up are not required before an offer review.",
    },
    {
      icon: Building,
      title: "Title Company Closing",
      description: "The closing process is coordinated through a title company for a clear, documented transaction.",
    },
  ];

  const highlights = [
    "No-Obligation Offer Request",
    "As-Is Property Review",
    "Nationwide Service Coverage",
    "Flexible Closing Discussion",
  ];

  return (
    <section className="bg-secondary/40 border-y border-border py-12 px-4 sm:px-6 lg:px-8">
      <div className="max-w-7xl mx-auto space-y-10">
        {/* Highlight ticker / badges row */}
        <div className="flex flex-wrap items-center justify-center gap-6 sm:gap-12 text-xs sm:text-sm font-semibold text-muted-foreground uppercase tracking-wider">
          {highlights.map((item, idx) => (
            <div key={idx} className="flex items-center gap-2">
              <CheckCircle2 className="w-4 h-4 text-emerald-600 shrink-0" />
              <span className="text-foreground">{item}</span>
            </div>
          ))}
        </div>

        {/* 4 core trust pillars */}
        <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-6">
          {benefits.map((item, idx) => {
            const Icon = item.icon;
            return (
              <div
                key={idx}
                className="bg-card text-card-foreground p-6 rounded-xl border border-border shadow-sm hover:shadow-md transition-shadow flex flex-col justify-between"
              >
                <div className="space-y-3">
                  <div className="w-10 h-10 rounded-lg bg-primary/10 text-primary flex items-center justify-center font-bold">
                    <Icon className="w-5 h-5" />
                  </div>
                  <h3 className="font-serif text-lg font-semibold text-foreground tracking-tight" style={{fontWeight: '500'}}>
                    {item.title}
                  </h3>
                  <p className="text-sm text-muted-foreground leading-relaxed">
                    {item.description}
                  </p>
                </div>
                <div className="pt-4 mt-4 border-t border-border/60 flex items-center gap-1.5 text-xs text-primary font-medium">
                  <CheckCircle2 className="w-3.5 h-3.5" />
                  <span>Review Your Options</span>
                </div>
              </div>
            );
          })}
        </div>
      </div>
    </section>
  );
}
