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

const Footer = () => (
  <footer className="bg-secondary text-secondary-foreground pb-24 md:pb-8">
    <div className="container mx-auto px-4 py-12 md:py-16">
      <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-8 mb-12">
        <div>
          <Link to="/" className="inline-block mb-4">
            <img src={logo} alt="Primera Gold Africa" className="h-12 w-auto" />
          </Link>
          <p className="text-muted-foreground text-sm leading-relaxed">
            A trusted gold trading institution operating from the heart of Africa, supplying high-purity gold to global markets with full transparency and compliance.
          </p>
        </div>

        <div>
          <h4 className="font-heading text-primary font-semibold mb-4">Quick Links</h4>
          <nav className="flex flex-col gap-2">
            {[
              { label: "About Us", path: "/about" },
              { label: "Our Products", path: "/products" },
              { label: "Gold Process", path: "/gold-process" },
              { label: "Export & Logistics", path: "/export-logistics" },
              { label: "Certifications", path: "/certifications" },
            ].map((link) => (
              <Link key={link.path} to={link.path} className="text-sm text-muted-foreground hover:text-primary transition-colors">
                {link.label}
              </Link>
            ))}
          </nav>
        </div>

        <div>
          <h4 className="font-heading text-primary font-semibold mb-4">DRC Office</h4>
          <div className="flex flex-col gap-3 text-sm text-muted-foreground">
            <div className="flex items-start gap-2">
              <MapPin size={16} className="text-primary mt-0.5 shrink-0" />
              <span>Lubumbashi, Democratic Republic of Congo</span>
            </div>
            <div className="flex items-center gap-2">
              <Mail size={16} className="text-primary shrink-0" />
              <span>info@primeragoldafrica.com</span>
            </div>
            <div className="flex items-center gap-2">
              <Phone size={16} className="text-primary shrink-0" />
              <span>+243 XXX XXX XXX</span>
            </div>
          </div>

          <h4 className="font-heading text-primary font-semibold mb-4 mt-6">Kenya Office</h4>
          <div className="flex flex-col gap-3 text-sm text-muted-foreground">
            <div className="flex items-start gap-2">
              <MapPin size={16} className="text-primary mt-0.5 shrink-0" />
              <span>Nairobi, Kenya</span>
            </div>
            <div className="flex items-center gap-2">
              <Phone size={16} className="text-primary shrink-0" />
              <span>+254 XXX XXX XXX</span>
            </div>
          </div>
        </div>

        <div>
          <h4 className="font-heading text-primary font-semibold mb-4">Support</h4>
          <nav className="flex flex-col gap-2">
            {[
              { label: "FAQ", path: "/faq" },
              { label: "Why Choose Us", path: "/why-choose-us" },
              { label: "Contact Us", path: "/contact" },
            ].map((link) => (
              <Link key={link.path} to={link.path} className="text-sm text-muted-foreground hover:text-primary transition-colors">
                {link.label}
              </Link>
            ))}
          </nav>
        </div>
      </div>

      <div className="border-t border-primary/10 pt-8 text-center">
        <p className="text-sm text-muted-foreground">
          © {new Date().getFullYear()} Primera Gold Africa. All rights reserved.
        </p>
      </div>
    </div>
  </footer>
);

export default Footer;
