import { Link } from "@tanstack/react-router";
import logo from "@/assets/logo.png";
import { Phone, Mail, MapPin } from "lucide-react";

export function SiteFooter() {
  return (
    <footer className="bg-navy-deep text-ivory">
      <div className="container-classic grid gap-10 py-14 md:grid-cols-4">
        <div className="md:col-span-2">
          <div className="flex items-center gap-3">
            <img src={logo} alt="GMC" width={56} height={56} className="h-14 w-14 object-contain" loading="lazy" />
            <div>
              <p className="font-serif text-2xl font-bold">Global Market Connections</p>
              <p className="text-xs uppercase tracking-[0.3em] text-gold-soft">Co. Ltd</p>
            </div>
          </div>
          <p className="mt-5 max-w-md text-sm leading-relaxed text-ivory/75">
            A dynamic and versatile corporate dedicated to establishing and strengthening global
            connections across a spectrum of industries — delivering exceptional service and
            innovative solutions to clients and partners worldwide.
          </p>
        </div>
        <div>
          <p className="font-serif text-sm uppercase tracking-[0.2em] text-gold">Navigate</p>
          <span className="gold-rule mt-3" />
          <ul className="mt-4 space-y-2 text-sm">
            <li><Link to="/" className="text-ivory/80 hover:text-gold">Home</Link></li>
            <li><Link to="/about" className="text-ivory/80 hover:text-gold">About Us</Link></li>
            <li><Link to="/services" className="text-ivory/80 hover:text-gold">Services</Link></li>
            <li><Link to="/why-us" className="text-ivory/80 hover:text-gold">Why Choose Us</Link></li>
            <li><Link to="/faq" className="text-ivory/80 hover:text-gold">FAQs</Link></li>
            <li><Link to="/contact" className="text-ivory/80 hover:text-gold">Contact</Link></li>
          </ul>
        </div>
        <div>
          <p className="font-serif text-sm uppercase tracking-[0.2em] text-gold">Contact</p>
          <span className="gold-rule mt-3" />
          <ul className="mt-4 space-y-3 text-sm">
            <li className="flex gap-2"><MapPin size={16} className="mt-0.5 text-gold"/> City Mall, Juba, South Sudan</li>
            <li className="flex gap-2"><Phone size={16} className="mt-0.5 text-gold"/> +211 922 999 832<br/>+211 912 999 832</li>
            <li className="flex gap-2"><Mail size={16} className="mt-0.5 text-gold"/> info@globalmarketconnectionscoltd.com</li>
          </ul>
        </div>
      </div>
      <div className="border-t border-ivory/10">
        <div className="container-classic flex flex-wrap items-center justify-between gap-2 py-5 text-xs text-ivory/60">
          <p>© {new Date().getFullYear()} Global Market Connections Co. Ltd. All rights reserved.</p>
          <p>Incorporated under the Laws of the Republic of South Sudan · Companies Act 2012</p>
        </div>
      </div>
    </footer>
  );
}