"use client";
import React, { useEffect, useState } from "react";
import Image from "next/image";
import Link from "next/link";
import {  ArrowUp } from "lucide-react";
import { SiFacebook, SiX, SiLinkedin, SiYoutube, SiInstagram, SiTiktok } from "react-icons/si";
const Footer: React.FC = () => {
  const [showScrollButton, setShowScrollButton] = useState(false);

  useEffect(() => {
    const handleScroll = () => {
      const scrolledFromTop = window.scrollY + window.innerHeight;
      const documentHeight = document.body.scrollHeight;
      setShowScrollButton(scrolledFromTop >= documentHeight - 300); // Show 300px from bottom
    };

    window.addEventListener("scroll", handleScroll);
    return () => window.removeEventListener("scroll", handleScroll);
  }, []);

  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" role="img" aria-label={item.label}>{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">
    {[
      { name: "About Us", href: "/about" },
      { name: "Contact Us", href: "#contact-us" },
      { name: "Articles", href: "/articles" },
      { name: "Legal & Admin Policies", href: "/TermsOfUse" },
      // { name: "Sitemap", href: "/sitemap" },
      // { name: "Podcast", href: "/podcast" },
    ].map(({ name, href }, index) => (
      <Link key={index} href={href} className="hover:text-white">
        {name}
      </Link>
    ))}
  </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">
      {[
        { Icon: SiFacebook, href: "https://www.facebook.com" },
        { Icon: SiX, href: "https://x.com/banksfinders" },
        { Icon: SiLinkedin, href: "https://www.linkedin.com/company/banksfinders/" },
        { Icon: SiYoutube, href: "https://www.youtube.com/@BanksFinders" },
        { Icon: SiInstagram, href: "https://www.instagram.com/banksfinders/" },
        { Icon: SiTiktok, href: "https://www.tiktok.com/@banksfinders" },
      ].map(({ Icon, href }, index) => (
        <a
          key={index}
          href={href}
          target="_blank"
          rel="noopener noreferrer"
          aria-label={`Follow us on ${href.split('.')[1]}`}
          className="text-white hover:text-blue-500 transition-colors duration-200"
        >
          <Icon className="w-5 h-5" />
        </a>
      ))}
    </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={200}
                height={30}
                className="w-[200px] h-[30px]"
                priority
              />
            </Link>
          </div>
          <p className="mt-3">
            BF Fintech Commercial Brokers LLC , Abu Dhabi, UAE.
            Contact us at: <span className="text-white">+971 2 5561570</span>
          </p>
          <p className="mt-2">
            Copyright-2025{" "}
            <span className="text-white">
              <Link href="/">BanksFinders.Com</Link>
            </span>{" "}
            All Rights Reserved.
          </p>
          <p className="mt-4 text-gray-500 text-xs max-w-3xl mx-auto text-center leading-relaxed">
  Disclaimer: All third-party trademarks, logos, and brand names featured or referred to within this website are the property of their respective trademark owners. Their use on this website is for informational purposes only and does not imply any affiliation, endorsement, or sponsorship.
  <br className="hidden sm:block" />
  <br />
  {/* This website is non-commercial and is not intended for the promotion or sale of any goods or services. If you are a trademark owner with concerns, please contact us, and we will address them promptly. */}
</p>
        </div>
      </div>

      {/* Scroll to Top Button - Only visible near bottom */}
      {showScrollButton && (
        <button
          aria-label="Scroll to top"
          title="Scroll to top"
          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;