import footerDecorPng from "&/images/footer/composition-footer.svg";
import logoWatermark from "&/images/footer/icon-qualimaine 1.png";
import footerChickenRight from "&/images/vectors/poulet-eat.svg";
import useTrans from "@/hooks/use-translations";

import CookieNoticeLink from "../cookie/CookieNoticeLink";

export default function Footer() {
  return (
    <footer
      id={useTrans("footer.contactSlug")}
      className="relative w-full overflow-hidden"
    >
      <div className="relative h-[160px] w-full overflow-hidden md:h-[270px] lg:h-[360px]">
        <img
          src={footerDecorPng}
          alt=""
          aria-hidden="true"
          className="pointer-events-none absolute -bottom-1 lg:bottom-0 left-1/2 z-0 w-[80%] max-w-[850px] -translate-x-1/2 lg:left-1/4 lg:w-[35%]"
        />
        <img
          src={footerChickenRight}
          alt=""
          aria-hidden="true"
          className="pointer-events-none absolute -right-8 top-[155px] z-0 rotate-y-180 opacity-10 hidden w-[220px] lg:block lg:w-[280px]"
        />
      </div>

      <div className="relative bg-[#464341] px-8 py-12 md:px-12 lg:px-[60px]">
        <img
          src={logoWatermark}
          alt=""
          aria-hidden="true"
          className="pointer-events-none absolute bottom-24 right-8 z-0 hidden w-[350px]  md:block lg:right-64"
        />

        <div className="relative z-10 mx-auto max-w-[1320px] text-center">
          <h2 className="font-sans text-3xl lg:text-[32px] font-extrabold text-white uppercase">
            {useTrans("footer.title")}
          </h2>

          <p className="mt-4 font-sans text-xl lg:text-[22px] text-white">
            {useTrans("footer.contactText")}
            <br />
            <a
              href={`mailto:${useTrans("footer.email")}`}
              className="font-bold text-[18px] underline"
            >
              {useTrans("footer.email")}
            </a>
          </p>

          <div className="mt-8 font-sans text-[22px] leading-relaxed text-white">
            <p>{useTrans("footer.company")}</p>
            <p>{useTrans("footer.address")}</p>
            <p>{useTrans("footer.postalCity")}</p>
            <p>{useTrans("footer.country")}</p>
          </div>

          <div className="mx-auto my-5 h-1 w-60 rounded-full bg-band md:w-5xl" />

          <p className="mx-auto mt-6 font-sans text-[16px] lg:text-[18px] text-band">
            {useTrans("footer.disclaimer")}
          </p>

          <div className="mt-8 lg:flex flex-wrap items-start lg:items-center justify-center gap-x-2 gap-y-1 font-sans text-[16px] lg:text-[18px] text-band">
            <a
              href={route("front.mentions-legales")}
              className="font-bold underline hover:text-white"
            >
              {useTrans("footer.legalNotice")}
            </a>
            <span className="text-band px-0.5">–</span>
            <a
              href={route("front.privacy-policy")}
              className="font-bold underline hover:text-white"
            >
              {useTrans("footer.privacyPolicy")}
            </a>
            <span className="text-band px-0.5">–</span>
            <CookieNoticeLink
              className="font-bold underline cursor-pointer hover:text-white"
              label={useTrans("footer.cookieManagement")}
            />
          </div>
        </div>
      </div>
    </footer>
  );
}