import { Link } from "react-router-dom";
import { Phone, Mail, MapPin } from "lucide-react";

export default function Footer() {
  return (
    <footer data-testid="main-footer" className="bg-[#0B0B0B] border-t border-[#2A2A2A]">
      <div className="max-w-[1400px] mx-auto px-4 lg:px-6 py-12">
        <div className="grid grid-cols-1 md:grid-cols-4 gap-8">
          {/* Brand */}
          <div className="md:col-span-1">
            <p className="text-[15px] font-extrabold tracking-[-0.03em] text-white uppercase mb-3">
              QUEEN CITY<span className="text-[#3B82F6] ml-1">AUTO</span>
            </p>
            <p className="text-[13px] text-[#9A9A9A] leading-relaxed">
              Precision Parts. No Guesswork.
            </p>
          </div>

          {/* Quick Links */}
          <div>
            <p className="text-[11px] font-bold uppercase tracking-[0.1em] text-[#666] mb-4">Navigate</p>
            <div className="space-y-2">
              {[
                { to: "/inventory", label: "Browse Parts" },
                { to: "/find-part", label: "Request a Part" },
                { to: "/how-it-works", label: "How It Works" },
                { to: "/for-mechanics", label: "For Mechanics" },
              ].map(l => (
                <Link key={l.to} to={l.to} className="block text-[13px] text-[#9A9A9A] hover:text-white transition-colors">{l.label}</Link>
              ))}
            </div>
          </div>

          {/* Company */}
          <div>
            <p className="text-[11px] font-bold uppercase tracking-[0.1em] text-[#666] mb-4">Company</p>
            <div className="space-y-2">
              {[
                { to: "/about", label: "About Us" },
                { to: "/contact", label: "Contact" },
                { to: "/account", label: "My Account" },
              ].map(l => (
                <Link key={l.to} to={l.to} className="block text-[13px] text-[#9A9A9A] hover:text-white transition-colors">{l.label}</Link>
              ))}
            </div>
          </div>

          {/* Contact */}
          <div>
            <p className="text-[11px] font-bold uppercase tracking-[0.1em] text-[#666] mb-4">Contact</p>
            <div className="space-y-3">
              <a href="tel:+17049003512" className="flex items-center gap-2 text-[13px] text-[#9A9A9A] hover:text-white transition-colors">
                <Phone className="h-3.5 w-3.5" /> (704) 900-3512
              </a>
              <a href="mailto:info@queencityautoparts.com" className="flex items-center gap-2 text-[13px] text-[#9A9A9A] hover:text-white transition-colors">
                <Mail className="h-3.5 w-3.5" /> info@queencityautoparts.com
              </a>
              <p className="flex items-center gap-2 text-[13px] text-[#9A9A9A]">
                <MapPin className="h-3.5 w-3.5" /> Charlotte, NC
              </p>
            </div>
          </div>
        </div>

        <div className="mt-10 pt-6 border-t border-[#1E1E1E] flex flex-col sm:flex-row items-center justify-between gap-3">
          <p className="text-[12px] text-[#666]">&copy; {new Date().getFullYear()} Queen City Auto Parts. All rights reserved.</p>
          <Link to="/admin/login" data-testid="footer-admin-link" className="text-[11px] text-[#666] hover:text-[#3B82F6] transition-colors">
            Admin Portal
          </Link>
        </div>
      </div>
    </footer>
  );
}
