"use client";
import { Typography } from "@material-tailwind/react";
import Image from "next/image";
import CheckPath from "../routeur/routeur_layout";
import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
import {
  faFacebookF,
  faInstagram,
  faLinkedinIn,
  faTiktok,
} from "@fortawesome/free-brands-svg-icons";
import { ArchiveBoxIcon, PhoneIcon } from "@heroicons/react/20/solid";
import React from "react";
import { faEnvelope, faPhone } from "@fortawesome/free-solid-svg-icons";

const LINKS = [
  {
    title: "Accès rapide",
    items: [
      { link: "A propos", href: "#" },
      { link: "Nos formations", href: "/formation" },
      { link: "Inscriptions", href: "/inscription" },
    ],
  },
  {
    title: "Liens utiles",
    items: [
      { link: "Blog", href: "/blog" },
      { link: "Contact", href: "/contact" },
      { link: "FAQs", href: "" },
    ],
  },
  {
    title: "Contact",
    items: [
      {
        link: "+33 07 45 17 37 91",
        href: "tel:+33 07 45 17 37 91",
        preffixIcon: faPhone,
      },
      {
        link: "contact@bslacademy.fr",
        href: "mailto:contact@bslacademy.fr",
        preffixIcon: faEnvelope,
      },
      { link: "icon", href: "" },
    ],
  },
];
const socialMedia = [
  {
    icon: faLinkedinIn,
    href: "https://www.linkedin.com/company/thebsl-academy/",
  },
  {
    icon: faFacebookF,
    href: "https://www.facebook.com/profile.php?id=100090582712977",
  },
  {
    icon: faInstagram,
    href: "https://www.instagram.com/",
  },
  {
    icon: faTiktok,
    href: "https://www.tiktok.com/",
  },
];

const currentYear = new Date().getFullYear();
export function Footer() {
  return (
    <footer
      className={`${
        (CheckPath("/account/login") || CheckPath("/account/register")) &&
        "hidden"
      } relative w-full bg-black bg-cover text-white p-5`}
    >
      <div className="mx-auto w-full max-w-[1450px]  md:px-5">
        <div className="grid grid-cols-1 gap-4 justify-start md:grid-cols-2">
          <div className="flex flex-col gap-4">
            <Image
              src="/assets/img-bsl/logo blanc.png"
              width="200"
              height="48"
              alt="logo de bsl academy"
            />
            <p className="md:w-3/4 text-justify ">
              BSL ACADEMY a été créée en 2021 dans le but de répondre de manière
              satisfaisante aux nombreux besoins exprimés dans le monde par des
              professionnels, des non professionnels dans le but d’acquérir un
              savoir ou une compétence professionnelle nécessaire à la promotion
              d’une carrière.
            </p>
          </div>

          <div className="grid grid-cols-2 lg:grid-cols-3 justify-between gap-4">
            {LINKS.map(({ title, items }) => (
              <ul key={title}>
                <Typography
                  variant="h5"
                  color="white"
                  className="mb-3 font-bold text-sm md:text-[2vw] lg:text-xl opacity-60"
                >
                  {title}
                </Typography>
                {items.map((link, i) =>
                  link.link == "icon" ? (
                    <li key={i} className="flex gap-3">
                      {socialMedia.map(({ icon, href }, index) => (
                        <a
                          href={href}
                          key={index}
                          target="_blank"
                          className=" flex items-center group hover:bg-vert_fonce transition-all justify-center border rounded-full w-9 h-9"
                        >
                          <FontAwesomeIcon className="" icon={icon} />
                        </a>
                      ))}
                    </li>
                  ) : (
                    <li key={i} className="flex items-center gap-2">
                      {link.preffixIcon ? (
                        <FontAwesomeIcon icon={link.preffixIcon} />
                      ) : (
                        ""
                      )}
                      <Typography
                        as="a"
                        href={link.href}
                        color="white"
                        className="py-1.5 font-normal text-sm md:text-[1.5vw] lg:text-lg transition-colors hover:text-red-400"
                      >
                        {link.link}
                      </Typography>
                    </li>
                  )
                )}
              </ul>
            ))}
          </div>
        </div>
        <div className="mt-12 flex w-full flex-col items-center justify-center border-t border-blue-gray-50 py-4 md:flex-row md:justify-between">
          <Typography
            variant="small"
            className="mb-4 text-center font-normal md:mb-0"
          >
            &copy; {currentYear} BSL Academy Designed By{" "}
            <a
              href="https://www.facebook.com/jgmcreativ"
              className="text-orange-900 hover:underline"
              target="_blank"
            >
              JGM
            </a>
          </Typography>
          <div className="flex gap-4 sm:justify-center ">
            <Typography
              as="a"
              href="/politique-de-confidentialite"
              className="opacity-80 transition-opacity hover:opacity-100 font-bold"
            >
              Politique de confidentialité
            </Typography>
            <Typography
              as="a"
              href="/conditions-d-utilisations"
              className="opacity-80 transition-opacity hover:opacity-100 font-bold"
            >
              Conditions d'utilisations
            </Typography>
            <Typography
              as="a"
              href="/politique-de-cookie"
              className="opacity-80 transition-opacity hover:opacity-100 font-bold"
            >
              RGPD
            </Typography>
          </div>
        </div>
      </div>
    </footer>
  );
}