import { Check, X, Shield, Clock, Wrench, DollarSign, Calendar } from "lucide-react";

export default function Advantages() {
  const comparison = [
    { feature: "Repairs & Renovations", traditional: "Required before or during the listing", original: "$0 — We buy as-is in any condition", icon: Wrench },
    { feature: "Real Estate Commissions", traditional: "5% to 6% deducted at closing", original: "$0 commissions or hidden buyer fees", icon: DollarSign },
    { feature: "Closing Timeline", traditional: "60 to 90+ days, subject to the buyer", original: "Choose a date that fits your calendar", icon: Clock },
    { feature: "Inspection & Appraisal", traditional: "Buyer financing can delay or cancel the sale", original: "No appraisal or mortgage contingency", icon: Shield },
    { feature: "Showings & Open Houses", traditional: "Strangers walking through the property", original: "No open houses or ongoing disruptions", icon: Calendar },
  ];

  return (
    <section id="advantages" className="py-24 bg-secondary/30 border-y border-border/60">
      <div className="container space-y-16">
        <div className="flex items-start gap-5">
          <div className="hidden sm:block pt-2"><span className="block h-24 w-px bg-primary" /></div>
          <div className="max-w-3xl space-y-4">
            <span className="editorial-badge">The Direct Alternative · 01</span>
            <h2 className="font-serif text-3xl sm:text-5xl font-normal tracking-tight text-foreground">A simpler way to sell a difficult property.</h2>
            <p className="text-lg text-muted-foreground leading-relaxed">Homeowners often need an alternative to the friction of traditional real estate listings. Here is how a direct cash sale compares.</p>
          </div>
        </div>

        <div className="grid grid-cols-1 lg:grid-cols-2 gap-8 items-stretch">
          <div className="paper-card rounded-2xl p-6 sm:p-8 flex flex-col justify-between border border-border/80 bg-card/60">
            <div className="space-y-6">
              <div className="inline-block px-3 py-1 rounded-md bg-secondary text-foreground text-xs font-semibold uppercase tracking-wider">Traditional listing</div>
              <h3 className="font-serif text-2xl font-semibold text-foreground">The long, uncertain route.</h3>
              <ul className="space-y-4 pt-2">
                {comparison.map((item, idx) => (
                  <li key={idx} className="flex items-start gap-3 pb-4 border-b border-border/40 last:border-0">
                    <div className="w-6 h-6 rounded-full bg-rose-100 text-rose-700 flex items-center justify-center shrink-0 mt-0.5"><X className="w-3.5 h-3.5 stroke-[2.5]" /></div>
                    <div><span className="text-xs font-semibold uppercase tracking-wider text-muted-foreground block mb-0.5">{item.feature}</span><span className="text-sm font-medium text-foreground">{item.traditional}</span></div>
                  </li>
                ))}
              </ul>
            </div>
            <div className="pt-6 mt-6 border-t border-border text-xs text-muted-foreground">The result depends on repairs, inspections, appraisal approval, and buyer financing.</div>
          </div>

          <div className="rounded-2xl p-6 sm:p-8 flex flex-col justify-between bg-foreground text-background shadow-xl relative overflow-hidden">
            <div className="absolute top-0 right-0 w-64 h-64 bg-primary/10 rounded-full blur-3xl pointer-events-none" />
            <div className="space-y-6 relative z-10">
              <div className="inline-block px-3 py-1 rounded-md bg-primary text-primary-foreground text-xs font-semibold uppercase tracking-wider">Home Buyers Nationwide</div>
              <h3 className="font-serif text-2xl font-semibold text-background">The direct cash alternative.</h3>
              <ul className="space-y-4 pt-2">
                {comparison.map((item, idx) => (
                  <li key={idx} className="flex items-start gap-3 pb-4 border-b border-white/10 last:border-0">
                    <div className="w-6 h-6 rounded-full bg-primary/20 text-primary flex items-center justify-center shrink-0 mt-0.5"><Check className="w-3.5 h-3.5 stroke-[2.5]" /></div>
                    <div><span className="text-xs font-semibold uppercase tracking-wider text-white/60 block mb-0.5">{item.feature}</span><span className="text-sm font-medium text-background">{item.original}</span></div>
                  </li>
                ))}
              </ul>
            </div>
            <div className="pt-6 mt-6 border-t border-white/10 text-xs text-white/70 relative z-10 flex items-center justify-between"><span>Professional title company closing</span><span className="font-semibold text-primary">Clear terms</span></div>
          </div>
        </div>
      </div>
    </section>
  );
}
