import Link from "next/link";
import Image from "next/image";
import {
  FaFacebookF,
  FaXTwitter,
  FaInstagram,
  FaLinkedinIn,
  FaPinterestP,
  FaTiktok,
  FaYoutube,
  FaVk,
} from "react-icons/fa6";

const Footer = () => {
  return (
    <footer className="bg-white border-t border-gray-200">
      

      {/* Main Footer */}
      <div className="xcontainer bg-[#f5f5f5] mx-auto px-4 py-14 grid grid-cols-1 sm:grid-cols-2 md:grid-cols-4 gap-10">
        {/* Logo */}
        <div>
          <Image
            src="/find_deshi transparent.png"
            alt="FindDeshi Logo"
            width={160}
            height={60}
          />
          <p className="text-[#575757] mt-4 text-sm">
            Buy, sell, and discover services easily with FindDeshi.
          </p>
        </div>

        {/* About Us */}
        <div>
          <h4 className="font-semibold text-gray-800 mb-4">Modules</h4>
          <ul className="space-y-2 text-[#575757]">
            <li><Link href="/classifieds" className="hover:text-brand-green">Classifieds</Link></li>
            <li><Link href="/events" className="hover:text-brand-green">Events</Link></li>
            <li><Link href="/matrimonial" className="hover:text-brand-green">Matrimonial</Link></li>
            
          </ul>
        </div>

        {/* Contact & Sitemap */}
        <div>
          <h4 className="font-semibold text-gray-800 mb-4">CONTACT</h4>
          <ul className="space-y-2 text-[#575757]">
            <li><Link href="/contact" className="hover:text-brand-green">Contact Us</Link></li>
            <li><Link href="/about" className="hover:text-brand-green">About Us</Link></li>
            <li><Link href="/faq" className="hover:text-brand-green">FAQ</Link></li>
            <li><Link href="/anti-scam" className="hover:text-brand-green">Anti-Scam</Link></li>
            <li><Link href="/terms" className="hover:text-brand-green">Terms</Link></li>
            <li><Link href="/privacy" className="hover:text-brand-green">Privacy</Link></li>
          </ul>
        </div>

        {/* My Account */}
        <div>
          <h4 className="font-semibold text-gray-800 mb-4">MY ACCOUNT</h4>
          <ul className="space-y-2 text-[#575757]">
            <li><Link href="/login" className="hover:text-brand-green">Log In</Link></li>
            <li><Link href="/register" className="hover:text-brand-green">Register</Link></li>
          </ul>
        </div>
      </div>

      {/* Social + Copyright */}
      <div className="border-t border-gray-200 py-6">
        <div className="container mx-auto px-4 flex flex-col md:flex-row items-center justify-between gap-4">
          <p className="text-sm text-[#575757]">
            © {new Date().getFullYear()} FindDeshi. All Rights Reserved.
          </p>

          <div className="flex items-center gap-4 text-gray-600">
            <a href="#" className="hover:text-brand-green"><FaFacebookF /></a>
            <a href="#" className="hover:text-brand-green"><FaXTwitter /></a>
            <a href="#" className="hover:text-brand-green"><FaInstagram /></a>
            <a href="#" className="hover:text-brand-green"><FaLinkedinIn /></a>
            <a href="#" className="hover:text-brand-green"><FaPinterestP /></a>
            <a href="#" className="hover:text-brand-green"><FaTiktok /></a>
            <a href="#" className="hover:text-brand-green"><FaYoutube /></a>
            <a href="#" className="hover:text-brand-green"><FaVk /></a>
          </div>
        </div>
      </div>
    </footer>
  );
};

export default Footer;
