import { Shield, Zap, Clock, Truck, CheckCircle2 } from "lucide-react";
import { Link } from "react-router-dom";

export default function HowItWorks() {
  return (
    <div data-testid="how-it-works-page" className="min-h-screen bg-[#0B0B0B] pt-24 pb-16">
      <div className="max-w-4xl mx-auto px-4 lg:px-6">
        <div className="text-center mb-14">
          <h1 className="text-3xl sm:text-4xl font-bold tracking-[-0.03em] text-white mb-4">How It Works</h1>
          <p className="text-[16px] text-[#9A9A9A] max-w-xl mx-auto">Get the right part the first time. No guesswork. No returns.</p>
        </div>

        <div className="space-y-6">
          {[
            { step: "01", title: "Search by VIN or Part Name", desc: "Enter your Vehicle Identification Number and we instantly decode your vehicle. This ensures every part we source is a verified match — no compatibility issues, no returns.", icon: Shield },
            { step: "02", title: "We Source the Best Price", desc: "Our network spans salvage yards, wholesalers, and auctions nationwide. We negotiate the best possible price and present you with a detailed quote within 24-48 hours.", icon: Zap },
            { step: "03", title: "Review & Pay Securely", desc: "Review your quote in your dashboard. Approve it and pay securely with Stripe — credit card or ACH. Your invoice updates automatically when payment clears.", icon: CheckCircle2 },
            { step: "04", title: "Part Ships to Your Door", desc: "We handle logistics. Track your shipment in real-time from your dashboard. Most orders deliver within 3-7 business days depending on location.", icon: Truck },
          ].map(s => (
            <div key={s.step} className="flex gap-6 p-6 bg-[#121212] border border-[#2A2A2A] rounded">
              <div className="flex-shrink-0">
                <p className="text-[36px] font-bold text-[#3B82F6] tracking-[-0.04em] leading-none">{s.step}</p>
              </div>
              <div>
                <h2 className="text-[18px] font-bold text-white mb-2">{s.title}</h2>
                <p className="text-[14px] text-[#9A9A9A] leading-relaxed">{s.desc}</p>
              </div>
            </div>
          ))}
        </div>

        <div className="mt-14 text-center">
          <Link to="/find-part" className="inline-flex h-12 px-8 bg-[#3B82F6] hover:bg-[#2563EB] text-white text-[14px] font-bold uppercase tracking-wide rounded items-center transition-colors">
            Request a Part Now
          </Link>
        </div>
      </div>
    </div>
  );
}
