import { companyInfo, contactInfo } from "@/lib/mock/company";
import { services } from "@/lib/mock/services";
import { Mail, MapPin, Phone } from "lucide-react";
import Image from "next/image";
import Link from "next/link";

const Footer = () => {
  return (
    <footer className="bg-primary text-white py-12">
      <div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
        <div className="grid md:grid-cols-4 gap-8">
          <div>
            <div className="flex items-center space-x-2 mb-4">
              <Image
                width={50}
                height={50}
                alt="Logo"
                className="w-[100px]"
                src="/images/logo.png"
              />
            </div>
          </div>
          <div>
            <h3 className="text-lg font-semibold mb-4">Engineering Services</h3>
            <ul className="space-y-2 text-gray-400">
              {services.map((service) => (
                <li>
                  <Link href={`/services/${service.slug}`} className="hover:text-white">
                    {service.title}
                  </Link>
                </li>
              ))}
            </ul>
          </div>
          <div>
            <h3 className="text-lg font-semibold mb-4">Company</h3>
            <ul className="space-y-2 text-gray-400">
              <li>
                <Link href="/about" className="hover:text-white">
                  About Us
                </Link>
              </li>
              <li>
                <Link href="/contact" className="hover:text-white">
                  Contact Us
                </Link>
              </li>
              <li>
                <Link href="/faq" className="hover:text-white">
                  FAQ
                </Link>
              </li>
            </ul>
          </div>
          <div>
            <h3 className="text-lg font-semibold mb-4">Get In Touch</h3>
            <ul className="space-y-2 text-gray-400">
              <li className="flex items-center">
                <Phone className="w-4 h-4 mr-2" />
                {contactInfo.phone}
              </li>
              <li className="flex items-center">
                <Mail className="w-4 h-4 mr-2" />
                {contactInfo.email}
              </li>
              <li className="flex items-center">
                <MapPin className="w-4 h-4 mr-2" />
                {contactInfo.address}
              </li>
            </ul>
          </div>
        </div>
        <div className="border-t-2 border-secondary mt-8 pt-8 text-center text-gray-400">
          <p>© 2026 Nestbugi Contractors. All rights reserved ~ Designed by <a className="hover:text-white" href="https://premierbyte.ng/">PremierByte</a></p>
        </div>
      </div>
    </footer>
  );
};

export default Footer;
