import { Shield, Target, Wrench } from "lucide-react";
import { Link } from "react-router-dom";

export default function About() {
  return (
    <div data-testid="about-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="mb-12">
          <h1 className="text-3xl sm:text-4xl font-bold tracking-[-0.03em] text-white mb-4">About Queen City Auto Parts</h1>
          <div className="w-12 h-[2px] bg-[#3B82F6] mb-6" />
          <p className="text-[16px] text-[#9A9A9A] leading-relaxed max-w-2xl">
            Queen City Auto Parts was built from frustration with the auto parts industry. Overpriced dealers, unreliable aftermarket, and no way to verify compatibility before buying.
          </p>
        </div>

        <div className="grid grid-cols-1 md:grid-cols-2 gap-6 mb-12">
          <div className="bg-[#1E1E1E] border border-[#2A2A2A] rounded overflow-hidden">
            <img src="/founder.png" alt="Founder" className="w-full h-64 object-cover" />
          </div>
          <div className="flex flex-col justify-center">
            <h2 className="text-xl font-bold text-white mb-3">The Mission</h2>
            <p className="text-[14px] text-[#9A9A9A] leading-relaxed mb-4">
              We source verified OEM and aftermarket parts from salvage yards, wholesalers, and auctions — matching every part to your VIN so you get the right fit, first time.
            </p>
            <p className="text-[14px] text-[#9A9A9A] leading-relaxed">
              Based in Charlotte, NC, we serve customers and shops nationwide. Our network of suppliers means better prices and faster sourcing than going it alone.
            </p>
          </div>
        </div>

        <div className="grid grid-cols-1 md:grid-cols-3 gap-4 mb-12">
          {[
            { icon: Shield, title: "VIN-Verified", desc: "Every part matched to your vehicle. No guessing." },
            { icon: Target, title: "Best Price", desc: "We negotiate wholesale pricing you can't get retail." },
            { icon: Wrench, title: "Expert Sourcing", desc: "Years of industry connections working for you." },
          ].map(v => (
            <div key={v.title} className="p-5 bg-[#121212] border border-[#2A2A2A] rounded">
              <v.icon className="h-5 w-5 text-[#3B82F6] mb-3" />
              <h3 className="text-[15px] font-bold text-white mb-1.5">{v.title}</h3>
              <p className="text-[13px] text-[#9A9A9A]">{v.desc}</p>
            </div>
          ))}
        </div>

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