import { Link } from "@tanstack/react-router";
import { Facebook, Instagram, Twitter, Youtube, Mail, Phone, MapPin, CreditCard, Truck, ShieldCheck, RotateCcw } from "lucide-react";
import { CATEGORIES, slugify } from "@/lib/categories";

export function Footer() {
  return (
    <footer className="bg-neutral-900 text-neutral-300 mt-8">
      {/* Trust bar */}
      <div className="bg-neutral-800 border-b border-neutral-700">
        <div className="max-w-[1200px] mx-auto px-4 py-5 grid grid-cols-2 md:grid-cols-4 gap-4">
          {[
            { icon: <Truck className="w-6 h-6" />, title: "Fast Delivery", sub: "Nationwide in 2-5 days" },
            { icon: <ShieldCheck className="w-6 h-6" />, title: "Secure Payments", sub: "Paystack protected" },
            { icon: <RotateCcw className="w-6 h-6" />, title: "Easy Returns", sub: "7-day return policy" },
            { icon: <CreditCard className="w-6 h-6" />, title: "Pay on Delivery", sub: "Available in select cities" },
          ].map((f, i) => (
            <div key={i} className="flex items-center gap-3">
              <div className="text-orange-400">{f.icon}</div>
              <div>
                <div className="text-sm font-semibold text-white">{f.title}</div>
                <div className="text-xs text-neutral-400">{f.sub}</div>
              </div>
            </div>
          ))}
        </div>
      </div>

      {/* Newsletter */}
      <div className="border-b border-neutral-800">
        <div className="max-w-[1200px] mx-auto px-4 py-6 flex flex-col md:flex-row items-center justify-between gap-4">
          <div>
            <h3 className="text-white font-bold text-lg">New to SulejaMarket?</h3>
            <p className="text-sm text-neutral-400">Subscribe to our newsletter to get updates on our latest offers!</p>
          </div>
          <form
            onSubmit={(e) => e.preventDefault()}
            className="flex w-full md:w-auto gap-2"
          >
            <input
              type="email"
              placeholder="Enter your email"
              className="flex-1 md:w-72 px-3 py-2 rounded-md bg-neutral-800 border border-neutral-700 text-sm text-white placeholder:text-neutral-500 focus:outline-none focus:border-orange-500"
            />
            <button className="px-5 py-2 bg-orange-500 hover:bg-orange-600 text-white text-sm font-semibold rounded-md">
              Subscribe
            </button>
          </form>
        </div>
      </div>

      {/* Main footer */}
      <div className="max-w-[1200px] mx-auto px-4 py-10 grid grid-cols-2 md:grid-cols-5 gap-8">
        <div className="col-span-2">
          <div className="text-2xl font-extrabold text-orange-500">
            SULEJA<span className="text-white">MARKETS</span>
            <span className="inline-block w-2 h-2 rounded-full bg-orange-500 ml-0.5" />
          </div>
          <p className="text-sm text-neutral-400 mt-3 max-w-sm">
            Nigeria's marketplace for electronics, fashion, groceries and everything in between. Shop safe, ship fast.
          </p>
          <div className="mt-4 space-y-2 text-sm">
            <div className="flex items-center gap-2"><Phone className="w-4 h-4 text-orange-400" /> 081 0265 8259</div>
            <div className="flex items-center gap-2"><Mail className="w-4 h-4 text-orange-400" /> support@sulejamarket.ng</div>
            <div className="flex items-center gap-2"><MapPin className="w-4 h-4 text-orange-400" /> Suleja, Niger State, Nigeria</div>
          </div>
          <div className="flex gap-3 mt-5">
            {[Facebook, Instagram, Twitter, Youtube].map((Icon, i) => (
              <a key={i} href="#" className="w-9 h-9 rounded-full bg-neutral-800 hover:bg-orange-500 flex items-center justify-center transition">
                <Icon className="w-4 h-4" />
              </a>
            ))}
          </div>
        </div>

        <div>
          <h4 className="text-white font-semibold mb-3 text-sm">Categories</h4>
          <ul className="space-y-2 text-sm">
            {CATEGORIES.slice(0, 6).map((c) => (
              <li key={c}>
                <Link to="/category/$slug" params={{ slug: slugify(c) }} className="hover:text-orange-400">{c}</Link>
              </li>
            ))}
          </ul>
        </div>

        <div>
          <h4 className="text-white font-semibold mb-3 text-sm">Company</h4>
          <ul className="space-y-2 text-sm">
            <li><Link to="/about" className="hover:text-orange-400">About Us</Link></li>
            <li><Link to="/careers" className="hover:text-orange-400">Careers</Link></li>
            <li><Link to="/press" className="hover:text-orange-400">Press</Link></li>
            <li><Link to="/vendor" className="hover:text-orange-400">Sell on SulejaMarket</Link></li>
            <li><Link to="/contact" className="hover:text-orange-400">Contact Us</Link></li>
          </ul>
        </div>

        <div>
          <h4 className="text-white font-semibold mb-3 text-sm">Help</h4>
          <ul className="space-y-2 text-sm">
            <li><Link to="/profile" className="hover:text-orange-400">My Account</Link></li>
            <li><Link to="/track-order" className="hover:text-orange-400">Track Order</Link></li>
            <li><Link to="/returns" className="hover:text-orange-400">Returns & Refunds</Link></li>
            <li><Link to="/shipping" className="hover:text-orange-400">Shipping Info</Link></li>
            <li><Link to="/faq" className="hover:text-orange-400">FAQs</Link></li>
          </ul>
        </div>
      </div>

      {/* Payment methods + bottom bar */}
      <div className="border-t border-neutral-800">
        <div className="max-w-[1200px] mx-auto px-4 py-5 flex flex-col md:flex-row items-center justify-between gap-3">
          <div className="text-xs text-neutral-500">© 2026 SulejaMarket. All rights reserved.</div>
          <div className="flex items-center gap-2">
            <span className="text-xs text-neutral-500 mr-2">We accept:</span>
            {["VISA", "Mastercard", "Verve", "Paystack", "USSD"].map((p) => (
              <span key={p} className="px-2 py-1 bg-white text-neutral-800 text-[10px] font-bold rounded">{p}</span>
            ))}
          </div>
          <div className="flex gap-4 text-xs text-neutral-500">
            <a href="#" className="hover:text-orange-400">Privacy</a>
            <a href="#" className="hover:text-orange-400">Terms</a>
            <a href="#" className="hover:text-orange-400">Cookies</a>
          </div>
        </div>
      </div>
    </footer>
  );
}
