"use client";
import Link from "next/link";
import Image from "next/image";

import {
  FaFacebook,
  FaInstagram,
  FaLinkedin,
  FaYoutube,
  FaLink,
} from "react-icons/fa";
import { FaXTwitter } from "react-icons/fa6";
import { useModal } from "../../lib/modal-system/ModalContext";
import useFetchSocialLinks from "../../hooks/features/public/useFetchSocialLinks";
import CustomLink from "../ui/CustomLink";

export default function Footer() {
  const { openModal } = useModal();
  const { facebook, instagram, twitter, linkedIn, youtube, customLink } =
    useFetchSocialLinks();

  const socialItems = [
    { href: facebook, icon: <FaFacebook size={24} /> },
    { href: instagram, icon: <FaInstagram size={24} /> },
    { href: twitter, icon: <FaXTwitter size={24} /> },
    { href: linkedIn, icon: <FaLinkedin size={24} /> },
    { href: youtube, icon: <FaYoutube size={24} /> },
    { href: customLink, icon: <FaLink size={24} /> },
  ].filter((item) => item.href && item.href.trim() !== "");

  return (
    <footer className="bg-[#05050B] pt-8 pb-4 2xl:pt-16 2xl:pb-8">
      <div className="container-k">
        {/* Logo */}
        <div className="flex flex-col items-center">
          <CustomLink href="/">
            <Image
              src="/images/logo-white.svg"
              alt="KleboAI"
              width={180}
              height={64}
              className="h-21 w-auto object-contain"
            />
          </CustomLink>

          {socialItems.length > 0 && (
            <div className="mt-6 flex items-center gap-6">
              {socialItems.map((item, index) => (
                <CustomLink
                  key={index}
                  href={item.href}
                  target="_blank"
                  rel="noopener noreferrer"
                  className="text-white transition hover:text-[#59C3FF]"
                >
                  {item.icon}
                </CustomLink>
              ))}
            </div>
          )}
        </div>

        {/* Divider */}
        <div className="mt-6 2xl:mt-12 border-t border-white/15" />

        {/* Copyright */}
        <div className="mt-4 2xl:mt-8 text-center">
          {/* <p className="text-base text-white/60">
            © {new Date().getFullYear()} KleboAI. All rights reserved.{" "}
            <CustomLink
              href="#"
              onClick={() => {
                openModal("CONTACT_US", {});
              }}
              className="text-link-1 underline transition hover:text-white"
            >
              Contact Us
            </CustomLink>
          </p> */}

          <div className="space-y-4 text-center">
            <p className="text-sm leading-6 text-center text-white/60">
              AI-powered solutions to simplify workflows and boost productivity.
            </p>

            <div className="flex flex-wrap justify-center gap-3">
              <CustomLink
                href="#"
                onClick={() => {
                  openModal("CONTACT_US", {});
                }}
                className="rounded-full border border-white/10 bg-white/5 px-4 py-2 text-sm text-white/70 transition hover:border-white/30 hover:bg-white/10 hover:text-white"
              >
                Contact Us
              </CustomLink>
              <CustomLink
                href="/terms-and-conditions"
                className="rounded-full border border-white/10 bg-white/5 px-4 py-2 text-sm text-white/70 transition hover:border-white/30 hover:bg-white/10 hover:text-white"
              >
                Terms & Conditions
              </CustomLink>

              <CustomLink
                href="/privacy-policy"
                className="rounded-full border border-white/10 bg-white/5 px-4 py-2 text-sm text-white/70 transition hover:border-white/30 hover:bg-white/10 hover:text-white"
              >
                Privacy Policy
              </CustomLink>
            </div>

            <div className="flex items-center justify-center gap-2 text-sm text-white/40">
              <span>© {new Date().getFullYear()} KleboAI</span>
              <span>•</span>
              <span>All rights reserved</span>
            </div>
          </div>
        </div>
      </div>
    </footer>
  );
}