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

import { FaFacebook, FaInstagram, FaLinkedin, FaYoutube } from "react-icons/fa";
import { FaXTwitter } from "react-icons/fa6";
import { useModal } from "../../lib/modal-system/ModalContext";

export default function Footer() {
  const { openModal } = useModal();
  return (
    <footer className="bg-[#05050B] pt-16 pb-8">
      <div className="container-k">
        {/* Logo */}
        <div className="flex flex-col items-center">
          <Image
            src="/images/logo-white.svg"
            alt="KleboAI"
            width={180}
            height={64}
            className="h-21 w-auto object-contain"
          />

          <div className="mt-6 flex items-center gap-6">
            <Link
              href="#"
              className="text-white transition hover:text-[#59C3FF]"
            >
              <FaFacebook size={24} />
            </Link>

            <Link
              href="#"
              className="text-white transition hover:text-[#59C3FF]"
            >
              <FaInstagram size={24} />
            </Link>

            <Link
              href="#"
              className="text-white transition hover:text-[#59C3FF]"
            >
              <FaXTwitter size={24} />
            </Link>

            <Link
              href="#"
              className="text-white transition hover:text-[#59C3FF]"
            >
              <FaLinkedin size={24} />
            </Link>

            <Link
              href="#"
              className="text-white transition hover:text-[#59C3FF]"
            >
              <FaYoutube size={24} />
            </Link>
          </div>
        </div>

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

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