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

import { FaFacebook, FaInstagram, FaLinkedin } from "react-icons/fa";
import { FaXTwitter } from "react-icons/fa6";

export default function Footer() {
  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.svg"
            alt="KleboAI"
            width={180}
            height={64}
            className="h-16 w-auto object-contain"
          />

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

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

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

            <Link
              href="#"
              className="text-white transition hover:text-[#59C3FF]"
            >
              <FaXTwitter size={18} />
            </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="/contact"
              className="text-gradient underline transition hover:text-white"
            >
              Contact Us
            </Link>
          </p>
        </div>
      </div>
    </footer>
  );
}