"use client";
import React from "react";
import Image from "next/image"; // Import Next.js Image component
import Link from "next/link";
import { Facebook, Twitter, Linkedin, Youtube, Instagram, ArrowUp } from "lucide-react";

const Footer: React.FC = () => {
  return (
    <footer className="bg-black text-white py-10 px-6 md:px-16">
      <div className="max-w-7xl mx-auto">
        {/* Compare Our Products Section */}
        <div className="text-center">
          <h2 className="text-xl font-semibold">Compare Our Products</h2>
          <div className="mt-4 grid grid-cols-2 md:grid-cols-3 lg:grid-cols-6 gap-6 justify-center">
            {[
              { label: "Credit Card", icon: "💳" },
              { label: "Personal Loans", icon: "💰" },
              { label: "Bank Account", icon: "🏦" },
              { label: "Corporate & SME", icon: "📊" },
              { label: "Mortgage", icon: "🏡" },
              { label: "NRI Services", icon: "💰" },
            ].map((item, index) => (
              <div key={index} className="flex flex-col items-center text-gray-300">
                <span className="text-2xl">{item.icon}</span>
                <span className="mt-2">{item.label}</span>
              </div>
            ))}
          </div>
        </div>

        {/* Navigation Links */}
        <div className="mt-10 border-t border-gray-700 pt-6 flex flex-col md:flex-row justify-between text-sm text-gray-400">
          <div className="flex flex-wrap gap-4 justify-center md:justify-start">
            {["About Us", "Contact Us", "Articles", "Legal & Admin Policies", "Sitemap", "Podcast"].map(
              (link, index) => (
                <a key={index} href="#" className="hover:text-white">
                  {link}
                </a>
              )
            )}
          </div>

          {/* Social Media Links */}
          <div className="flex items-center justify-center md:justify-end mt-4 md:mt-0">
            <span className="mr-3">Follow Us :</span>
            <div className="flex space-x-3">
              {[Facebook, Twitter, Linkedin, Youtube, Instagram].map((Icon, index) => (
                <Icon key={index} className="w-5 h-5 cursor-pointer hover:text-blue-500" />
              ))}
            </div>
          </div>
        </div>

        {/* Bottom Footer Section */}
        <div className="mt-8 text-center text-gray-400 text-sm">
          <div className="flex justify-center items-center space-x-2">
          <Link href="/" className="text-xl font-bold text-blue-600">
            <Image
              src="/namelogoweb.webp"
              alt="BanksFinders.com"
              width={300}
              height={50}
              className="w-300 h-50"
            />
          </Link>
          </div>
          <p className="mt-3">
            BF Fintech Commercial Brokers LLC , Abu Dhabi, UAE.
            Contact us at: <span className="text-white">+971 58 556 1554</span>
          </p>
          <p className="mt-2">Copyright-2025 <span className="text-white"><Link href="/" className="">BanksFinders.Com</Link></span> All Rights Reserved.</p>
        </div>
      </div>

      {/* Scroll to Top Button */}
      <button
        className="fixed bottom-5 right-5 bg-white text-black p-3 rounded-full shadow-lg hover:bg-gray-200"
        onClick={() => window.scrollTo({ top: 0, behavior: "smooth" })}
      >
        <ArrowUp className="w-5 h-5" />
      </button>
    </footer>
  );
};

export default Footer;