import Image from "next/image";
import youtube from "./assets/youtube.svg";
import facebook from "./assets/facebook.svg";
import instagram from "./assets/instagram.svg";
import app_store_btn from "./assets/app-store-btn.svg";
import play_market_btn from "./assets/play-market-btn.svg";
import { Link } from "@/shared/config/navigation";
import { useTranslations } from "next-intl";
import { FOOTER_LINKS } from "@/shared/variables/links";

const Footer = () => {
  const t = useTranslations("general");
  const tDisclaimer = useTranslations("disclaimer");
  const tRights = useTranslations("rights");
  return (
    <footer className="px-12 py-20 grid grid-cols-4 gap-[30px] bg-[#0F172A]">
      <div className="flex flex-col gap-6">
        <p className="text-white font-normal">© {tRights("text")}</p>
        <p className="text-white font-normal">{tDisclaimer("text")}</p>
      </div>
      <div className="flex flex-col gap-6 items-center">
        <h4 className="h-fit text-white flex justify-start text-base font-bold leading-[110%]">
          {t("navigation")}
        </h4>
        <ul className="flex flex-col gap-6">
          {FOOTER_LINKS().map((link) => (
            <li
              className="h-fit flex justify-start text-base text-[#e2e8f0] font-normal leading-[140%] items-center gap-4"
              key={link.id}
            >
              <Link
                className="h-fit text-white flex justify-start text-base "
                href={link.pathname}
                key={link.id}
              >
                {link.pagename}
              </Link>
            </li>
          ))}
        </ul>
      </div>

      <div className="flex flex-col gap-6">
        <h4 className="h-fit text-white flex justify-start text-base font-bold leading-[110%]">
          {t("contacts")}
        </h4>
        <ul className="flex flex-col gap-6">
          <li className="h-fit flex justify-start text-base text-[#e2e8f0] font-normal leading-[140%] items-center gap-4">
            +9960312394038
          </li>

          <li className="h-fit flex justify-start text-base text-[#e2e8f0] font-normal leading-[140%] items-center gap-4">
            {[
              { src: youtube, href: "https://www.youtube.com/@TransparencyKyrgyzstan", alt: "YouTube" },
              { src: facebook, href: "https://www.facebook.com/tikyrgyzstan", alt: "Facebook" },
              { src: instagram, href: "https://www.instagram.com/transparencyinternational_kg?igsh=cTc2MHEwOW5vNDh2", alt: "Instagram" }
            ].map((net, i) => (
              <Link
                key={i}
                href={net.href}
                className="h-fit text-white flex justify-start text-base"
                target="_blank"
                rel="noopener noreferrer"
              >
                <Image src={net.src} alt={net.alt} />
              </Link>
            ))}
          </li>

        </ul>
      </div>

      <div className="flex flex-col gap-6">
        <h4 className="h-fit text-white flex justify-start text-base font-bold leading-[110%]">
          {t("download_our_app")}
        </h4>
        <div className="flex flex-col gap-6">
          {[app_store_btn, play_market_btn].map((app, i) => (
            <Link
              key={i}
              href="#"
              className="h-fit text-white flex justify-start text-base "
            >
              <Image src={app} alt="App Button" key={app} />
            </Link>
          ))}
        </div>
      </div>
    </footer>
  );
};

export default Footer;