"use client";
import { Download } from "lucide-react";
import Image from "next/image";
import Link from "next/link";
import { useEffect, useState } from "react";
import { usePathname, useRouter } from "next/navigation";
import { Data } from "./Data";

// Images
import playMarketLogo from "./../../public/googlePlay.png";
import appStoreLogo from "./../../public/appStore.png";
import { useTranslations } from "next-intl";

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

  return (
    <footer className="flex flex-col border-t border-t-[#A4A7CB]  ">
      <div className="container mx-auto gap-y-8 md:gap-x-20 lg:gap-x-32  xl:gap-x-44 flex flex-col md:flex-row items-center md:items-start md:justify-between w-full px-16 py-8 pb-5 md:pb-10 md:py-10">
        {/* Footer content */}
        <div className="w-full flex flex-col ">
          {/* Top */}
          <div className="flex flex-col sm:flex-row itmems-center gap-x-8 gap-y-10 sm:justify-between sm:border-b border-b-[#DCDEF3] pb-6">
            {/* Logo */}
            <div className="w-full sm:w-max flex flex-col gap-6 items-center md:items-start ">
              <Link href="/" className="relative w-48 h-16">
                <Image
                  src="/logoFooter.png"
                  alt="Sirius logo"
                  width={200}
                  height={100}
                />
              </Link>
            </div>
            <div className="flex flex-col items-center sm:items-start sm:flex-row gap-x-12 xl:gap-x-20 gap-y-8 sm:flex-wrap">
              {/* Menu */}
              <div className="flex flex-col gap-3 text-center sm:text-start">
                <h3 className="text-lg font-medium text-[#000000]">
                  {t("footer.titleCompany")}
                </h3>
                <ul className="flex flex-col gap-2.5">
                  {Data?.footer?.company?.map((item) => (
                    <li
                      className="hover:translate-x-1 transition-all duration-300"
                      key={item.id}
                    >
                      <a
                        className="text-[#5C5F82] font-medium hover:text-[#6851BA] translate-y-1 transition-all duration-300"
                        href={item.href}
                      >
                        {t(`footer.${item.name}`)}
                      </a>
                    </li>
                  ))}
                </ul>
              </div>

              {/* Support Column */}
              <div className="flex flex-col gap-3 text-center sm:text-start">
                <h3 className="text-lg font-medium text-[#000000]">
                  {t("footer.titleSupport")}
                </h3>
                <ul className="flex flex-col gap-2.5">
                  {Data?.footer?.support?.map((item) => (
                    <li
                      className="hover:translate-x-1 transition-all duration-300"
                      key={item.id}
                    >
                      <a
                        className="text-[#5C5F82] font-medium hover:text-[#6851BA]  transition-all duration-300"
                        href={item.href}
                      >
                        {t(`footer.${item.name}`)}
                      </a>
                    </li>
                  ))}
                </ul>
              </div>

              {/* Contact Us Column */}
              <div className="flex flex-col gap-3 text-center sm:text-start">
                <h3 className="text-lg font-medium text-[#000000]">
                  {t("footer.titleContactUs")}
                </h3>
                <ul className="flex flex-col gap-2.5">
                  {Data?.footer?.contactUs?.map((item) => (
                    <li
                      className="hover:translate-x-1 transition-all duration-300"
                      key={item.id}
                    >
                      <a
                        className="text-[#5C5F82] font-medium hover:text-[#6851BA] translate-y-1 transition-all duration-300"
                        href={item.href}
                      >
                        {item.name}
                      </a>
                    </li>
                  ))}
                </ul>
              </div>
              {/* Apk Download Link */}
              <div className="flex flex-col  gap-6">
                <p className="text-[#000000] font-medium leading-6 max-w-64.25 text-center sm:text-start ">
                  {t("footer.apkDownloadText")}
                </p>
                <div className="flex gap-4">
                  <Link
                    href="/"
                    className="relative max-w-28.25 w-full h-9.25 rounded-md overflow-hidden hover:shadow-lg hover:-translate-y-1 transition-all duration-300 "
                  >
                    <Image
                      className="object-cover"
                      src={appStoreLogo}
                      alt="apkDownload"
                      fill
                    />
                  </Link>
                  <Link
                    href="/"
                    className="relative max-w-31.75 w-full h-9.25 rounded-md overflow-hidden hover:shadow-lg hover:-translate-y-1 transition-all duration-300 "
                  >
                    <Image
                      className="object-cover"
                      src={playMarketLogo}
                      alt="playMarket"
                      fill
                    />
                  </Link>
                </div>
              </div>
            </div>
          </div>
          {/* Copyright */}
          <div className="flex flex-col-reverse md:flex-row items-center md:justify-between pt-6 gap-y-12">
            {/* Copy right text */}
            <div className="flex flex-col md:flex-row items-center gap-3.5 ">
              <p className="text-[#5C5F82] text-sm font-semibold  uppercase mr-1">
                {t("footer.copyright")}
              </p>
              <p className="flex gap-4">
                {" "}
                <span className="relative after:content-['.'] after:absolute after:text-[#5C5F82] text-[#5C5F82] text-sm after:-left-2 after:-top-1">
                  {t("footer.privacyPolicy")}
                </span>
                <span className="relative after:content-['.'] after:absolute after:text-[#5C5F82] text-[#5C5F82] text-sm after:-left-2 after:-top-1">
                  {t("footer.termsOfService")}
                </span>
              </p>
            </div>
            {/* Social links */}
            <div className="flex flex-col md:flex-row items-center gap-5">
              <p className="text-sm font-semibold text-[#000000] uppercase">
                {t("footer.followUs")}
              </p>
              <div className="flex items-center gap-2">
                {Data.footer.socialLinks.map((link) => (
                  <Link
                    key={link.id}
                    href={link.href}
                    target="_blank"
                    rel="noopener noreferrer"
                    className="relative flex items-center justify-center border border-[#5C5F82] hover:border-[#1ca2d9] hover:-translate-y-1 transition-all duration-300 ease-in-out   rounded-full size-8"
                  >
                    <Image
                      src={`/${link.logo}`}
                      alt={link.id}
                      width={16}
                      height={16}
                      className="object-none w-7 h-7"
                    />
                  </Link>
                ))}
              </div>
            </div>
          </div>
        </div>
      </div>
    </footer>
  );
}
