import { ChevronLeft, MapPin } from "lucide-react";
import Image from "next/image";
import { Link } from "@/i18n/routing";
import { useTranslations } from "next-intl";

export const socialLinks: {
  name: string;
  href: string;
  iconPath: string;
  overlayIconPath?: string;
}[] = [
  {
    name: "LinkedIn",
    href: "#",
    iconPath: "/images/social/footer/linkedin.svg",
  },
  {
    name: "Facebook",
    href: "#",
    iconPath: "/images/social/footer/facebook.svg",
  },
  {
    name: "Instagram",
    href: "#",
    iconPath: "/images/social/footer/instagram.svg",
  },
  {
    name: "YouTube",
    href: "#",
    iconPath: "/images/social/footer/youtube.svg",
  },
  {
    name: "X",
    href: "#",
    iconPath: "/images/social/footer/x.svg",
  },
  {
    name: "Telegram",
    href: "#",
    iconPath: "/images/social/footer/telegram.svg",
  },
  {
    name: "Snapchat",
    href: "#",
    iconPath: "/images/social/footer/snapchat.svg",
  },
  {
    name: "WhatsApp",
    href: "#",
    iconPath: "/images/social/footer/whatsapp-bg.svg",
    overlayIconPath: "/images/social/footer/whatsapp-icon.svg",
  },
];

export default function Footer() {
  const t = useTranslations();

  const navigationLinks = {
    browse: [
      { label: t("common.home"), href: "/" },
      { label: t("common.about"), href: "/about-us" },
      { label: t("common.services"), href: "/our-services" },
      { label: t("common.lifi"), href: "/lifi" },
      { label: t("common.team"), href: "/our-team" },
      { label: t("common.blog"), href: "/blogs" },
    ],
    important: [
      { label: t("footer.privacyPolicy"), href: "/privacy" },
      { label: t("footer.termsConditions"), href: "/terms" },
    ],
  };

  return (
    <footer className="bg-primary relative overflow-hidden">

      <div className="absolute inset-0 opacity-10 pointer-events-none">
        <div className="absolute -top-[457px] -left-[601px] w-[914px] h-[914px] bg-gradient-radial from-white/20 to-transparent rounded-full blur-3xl" />
      </div>

      <div className="relative max-w-[1440px] mx-auto px-6 lg:px-[120px] py-12">

        <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-8 lg:gap-12 mb-6">

          <div className="flex flex-col gap-6 order-1">

            <div className="relative h-12 w-[115px]">
              <Image
                src="/images/logo.svg"
                alt={t("footer.logoAlt")}
                fill
                className="object-contain"
              />
            </div>

            <div className="flex flex-col gap-4 text-start">
              <div className="flex gap-2 items-start flex-row">
                <MapPin className="w-4 h-4 text-white shrink-0 mt-1" />
                <p className="text-base text-white leading-relaxed flex-1">
                  {t("footer.address")}
                </p>
              </div>

              <div className="flex gap-2 items-start flex-row">
                <MapPin className="w-4 h-4 text-white shrink-0 mt-1" />

                <p className="text-base text-white leading-relaxed flex-1">
                  {t("footer.commercialRecord")}
                </p>
              </div>
            </div>
          </div>

          <div className="flex flex-col gap-6 order-2">
            <h3 className="text-xl font-bold text-white">{t("footer.browseSite")}</h3>
            <nav className="grid grid-cols-2 gap-x-6 gap-y-4 w-full">
              {navigationLinks.browse.map((link) => (
                <Link
                  key={link.href}
                  href={link.href}
                  className="text-base text-white hover:text-white/80 transition-colors text-start flex items-center gap-2 flex-row"
                >
                  <span>{link.label}</span>
                  <span className="text-white/60">
                    <ChevronLeft className="ltr:rotate-180" />
                  </span>
                </Link>
              ))}
            </nav>
          </div>

          <div className="flex flex-col gap-6 order-3">
            <h3 className="text-xl font-bold text-white">{t("footer.importantLinks")}</h3>
            <nav className="flex flex-col gap-4">
              {navigationLinks.important.map((link) => (
                <Link
                  key={link.href}
                  href={link.href}
                  className="text-base text-white hover:text-white/80 transition-colors text-start flex items-center gap-2 flex-row"
                >
                  <span>{link.label}</span>
                  <span className="text-white/60">
                    <ChevronLeft className="ltr:rotate-180" />
                  </span>
                </Link>
              ))}
            </nav>
          </div>

          <div className="flex flex-col items-center gap-8 order-4">
            <h3 className="max-w-[270px] text-center text-xl font-bold leading-[1.2] text-white">
              {t("footer.followUs")}
            </h3>
            <div className="flex w-[209px] flex-wrap justify-center gap-4">
              {socialLinks.map((social) => (
                <Link
                  key={social.name}
                  href={social.href}
                  className="relative flex size-8 items-center justify-center overflow-hidden rounded-full transition-opacity hover:opacity-80"
                  aria-label={social.name}
                >
                  <Image
                    src={social.iconPath}
                    alt=""
                    width={32}
                    height={32}
                    className="size-8 object-contain"
                  />
                  {"overlayIconPath" in social && social.overlayIconPath && (
                    <Image
                      src={social.overlayIconPath}
                      alt=""
                      width={20}
                      height={20}
                      className="absolute left-1/2 top-1/2 size-5 -translate-x-1/2 -translate-y-1/2 object-contain"
                    />
                  )}
                </Link>
              ))}
            </div>
          </div>
        </div>

        <div className="border-t border-white/20 pt-4 mt-6">
          <p className="text-base text-white/78 text-start">
            {t("footer.allRightsReserved")}
          </p>
        </div>
      </div>
    </footer>
  );
}