import React, { useMemo } from "react";
import Link from "next/link";
import Image from "next/image";
import { FaFacebookF, FaInstagram, FaTwitter, FaGithub } from "react-icons/fa";

interface SocialLink {
  name: string;
  href: string;
  icon: React.ReactNode;
  ariaLabel: string;
}

interface FooterLink {
  title: string;
  links: { name: string; href: string }[];
}

const footerLinks: FooterLink[] = [
  {
    title: "Product",
    links: [
      { name: "Overview", href: "/overview" },
      { name: "Pricing", href: "/pricing" },
      { name: "Marketplace", href: "/marketplace" },
      { name: "Features", href: "/features" },
      { name: "Integrations", href: "/integrations" },
    ],
  },
  {
    title: "Company",
    links: [
      { name: "About", href: "/about" },
      { name: "Team", href: "/team" },
      { name: "Blog", href: "/blog" },
      { name: "Careers", href: "/careers" },
      { name: "Contact", href: "/contact" },
      { name: "Privacy", href: "/privacy" },
    ],
  },
  {
    title: "Resources",
    links: [
      { name: "Help", href: "/help" },
      { name: "Sales", href: "/sales" },
      { name: "Advertise", href: "/advertise" },
    ],
  },
    {
    title: "Socials",
    links: [
      { name: "Facebook", href: "/" },
      { name: "Instagram", href: "/" },
      { name: "Linkedin", href: "/" },
      {name: "Twitter", href: "/" },
    ],
  },
];

const Footer: React.FC = () => {
  const socialLinks: SocialLink[] = useMemo(
    () => [
      {
        name: "Facebook",
        href: "https://facebook.com/barrack",
        icon: <FaFacebookF size={18} />,
        ariaLabel: "Visit our Facebook page",
      },
      {
        name: "Instagram",
        href: "https://instagram.com/barrack",
        icon: <FaInstagram size={18} />,
        ariaLabel: "Visit our Instagram profile",
      },
      {
        name: "Twitter",
        href: "https://twitter.com/barrack",
        icon: <FaTwitter size={18} />,
        ariaLabel: "Visit our Twitter profile",
      },
      {
        name: "GitHub",
        href: "https://github.com/barrack",
        icon: <FaGithub size={18} />,
        ariaLabel: "Visit our GitHub repository",
      },
    ],
    []
  );

  const currentYear = new Date().getFullYear();

  return (
    <footer className="bg-gradient-to-r from-blue-50 via-purple-50 to-pink-50 backdrop-blur-lg shadow-lg">
      <div className="container mx-auto px-6 lg:px-16">
        <div className="py-14">
          <div className="grid grid-cols-2 gap-10 lg:grid-cols-6">

            <div className="col-span-2 mb-8 lg:mb-0">
              <div className="relative h-20 w-20 mb-5">
                <Image
                  src="/logo/logo.jpg"
                  alt="Barrack Logo"
                  fill
                  sizes="(max-width: 80px) 100vw, 80px"
                  className="object-contain rounded-full shadow-md"
                  priority
                />
              </div>
              <p className="text-gray-700 text-base leading-relaxed">
                Best e-commerce platform in Bangladesh — where shopping meets simplicity.
              </p>
            </div>

            {footerLinks.map((section, index) => (
              <div key={`footer-section-${section.title}-${index}`}>
                <h3 className="mb-5 font-extrabold text-lg bg-gradient-to-r from-blue-600 to-purple-600 bg-clip-text text-transparent">
                  {section.title}
                </h3>
                <nav aria-label={`${section.title} navigation`}>
                  <ul className="space-y-3 text-gray-600">
                    {section.links.map((link, linkIndex) => (
                      <li
                        key={`${section.title}-link-${link.name}-${linkIndex}`}
                        className="font-medium transition-transform duration-200 hover:translate-x-1"
                      >
                        <Link
                          href={link.href}
                          className="transition-colors duration-200 hover:text-blue-700 hover:underline focus:outline-none focus:ring-2 focus:ring-blue-400 focus:ring-offset-2 rounded-sm"
                        >
                          {link.name}
                        </Link>
                      </li>
                    ))}
                  </ul>
                </nav>
              </div>
            ))}
          </div>

          <div className="mt-14 border-t border-gray-300 pt-6 flex flex-col md:flex-row items-center justify-between">
            <div className="mt-6 md:mt-0 text-center md:text-left">
              <span className="text-sm text-gray-600">
                © {currentYear}{" "}
                <Link
                  href="/"
                  className="font-semibold bg-gradient-to-r from-blue-600 to-purple-600 bg-clip-text text-transparent hover:underline"
                >
                  Barrack
                </Link>{" "}
                — All rights reserved.
              </span>
            </div>

            <div className="flex space-x-6 mt-6 md:mt-0">
              {socialLinks.map((social) => (
                <a
                  key={`social-link-${social.name}`}
                  href={social.href}
                  target="_blank"
                  rel="noopener noreferrer"
                  aria-label={social.ariaLabel}
                  className="text-gray-600 hover:text-white transition-all duration-300 bg-gray-200 hover:bg-gradient-to-r hover:from-blue-600 hover:to-purple-600 rounded-full p-2 shadow-md"
                >
                  {social.icon}
                </a>
              ))}
            </div>
          </div>
        </div>
      </div>
    </footer>
  );
};

export default React.memo(Footer);