import { Link } from "react-router-dom";
import { Wrench, DollarSign, Truck, Shield, Clock, Users } from "lucide-react";

export default function ForMechanics() {
  return (
    <div data-testid="for-mechanics-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">
          <p className="text-[12px] font-semibold text-[#3B82F6] uppercase tracking-wide mb-3">For Professionals</p>
          <h1 className="text-3xl sm:text-4xl font-bold tracking-[-0.03em] text-white mb-4">Built for Mechanics & Shops</h1>
          <p className="text-[16px] text-[#9A9A9A] max-w-xl">Stop overpaying for parts. Partner with Queen City Auto Parts for reliable wholesale parts at unbeatable prices.</p>
        </div>

        <div className="grid grid-cols-1 md:grid-cols-2 gap-4 mb-12">
          {[
            { icon: DollarSign, title: "Wholesale Pricing", desc: "40-70% below retail on OEM and aftermarket parts. Better margins for your shop." },
            { icon: Clock, title: "Fast Turnaround", desc: "Most quotes within 24-48 hours. We know you can't keep customers waiting." },
            { icon: Shield, title: "VIN-Verified", desc: "Every part matched to VIN. No compatibility issues. No returns." },
            { icon: Truck, title: "Direct Shipping", desc: "Parts ship direct to your shop. Track every order from your dashboard." },
            { icon: Users, title: "Dedicated Support", desc: "Direct line to our sourcing team. Priority service for shop accounts." },
            { icon: Wrench, title: "Volume Discounts", desc: "Regular orders get better pricing. The more you order, the more you save." },
          ].map(f => (
            <div key={f.title} className="p-5 bg-[#1E1E1E] border border-[#2A2A2A] rounded">
              <f.icon className="h-5 w-5 text-[#3B82F6] mb-3" />
              <h3 className="text-[15px] font-bold text-white mb-1.5">{f.title}</h3>
              <p className="text-[13px] text-[#9A9A9A] leading-relaxed">{f.desc}</p>
            </div>
          ))}
        </div>

        <div className="bg-[#121212] border border-[#2A2A2A] rounded p-8 text-center">
          <h2 className="text-xl font-bold text-white mb-3">Ready to save on parts?</h2>
          <p className="text-[14px] text-[#9A9A9A] mb-6">Create a free account and start sourcing today.</p>
          <div className="flex items-center justify-center gap-4 flex-wrap">
            <Link to="/account" className="h-11 px-6 bg-[#3B82F6] hover:bg-[#2563EB] text-white text-[13px] font-bold uppercase tracking-wide rounded flex items-center transition-colors">Create Shop Account</Link>
            <a href="tel:+17049003512" className="h-11 px-6 bg-[#1E1E1E] border border-[#2A2A2A] hover:border-[#3B82F6] text-white text-[13px] font-medium rounded flex items-center transition-colors">(704) 900-3512</a>
          </div>
        </div>
      </div>
    </div>
  );
}
