import Link from "next/link";
import { site } from "@/lib/content";
import { LogoMark } from "@/components/graphics/Logo";
import { LinkedInIcon, MailIcon } from "@/components/ui/Icons";
import { currentYear } from "@/lib/time";
import { ManageCookiesButton } from "@/components/consent/CookieConsent";

export async function Footer() {
  const year = await currentYear();
  const hasLinkedIn = site.social.linkedin !== "";
  const hasEmail = site.contact.email !== "";
  return (
    <footer className="bg-ivory-50 text-ink-700">
      <div className="container-site py-8 md:py-10">
        <div className="flex flex-col gap-8 md:flex-row md:items-center md:justify-between">
          <Link
            href="/"
            className="flex items-center gap-3 rounded-md"
            aria-label={`${site.brand.name} — Accueil`}
          >
            <LogoMark className="text-gold-500 h-9 w-auto" />
            <span className="text-navy-900 font-serif text-2xl">{site.brand.name}</span>
          </Link>

          <nav aria-label="Navigation de pied de page">
            <ul className="flex flex-wrap items-center gap-x-0 gap-y-2 text-sm">
              {site.navigation.map((item, i) => (
                <li key={item.href} className="flex items-center">
                  {i > 0 ? (
                    <span aria-hidden="true" className="bg-ink-300/70 mx-4 h-4 w-px" />
                  ) : null}
                  <Link
                    href={item.href}
                    className="text-ink-700 hover:text-navy-900 rounded-sm underline-offset-4 hover:underline"
                  >
                    {item.label}
                  </Link>
                </li>
              ))}
            </ul>
          </nav>

          {hasLinkedIn || hasEmail ? (
            <ul className="flex items-center gap-4" aria-label="Réseaux et contact">
              {hasLinkedIn ? (
                <li>
                  <a
                    href={site.social.linkedin}
                    target="_blank"
                    rel="noopener noreferrer"
                    aria-label="LinkedIn (nouvelle fenêtre)"
                    className="text-navy-900 hover:bg-navy-900/5 inline-flex h-10 w-10 items-center justify-center rounded-md"
                  >
                    <LinkedInIcon />
                  </a>
                </li>
              ) : null}
              {hasEmail ? (
                <li>
                  <a
                    href={`mailto:${site.contact.email}`}
                    aria-label="Nous écrire par courriel"
                    className="text-navy-900 hover:bg-navy-900/5 inline-flex h-10 w-10 items-center justify-center rounded-md"
                  >
                    <MailIcon />
                  </a>
                </li>
              ) : null}
            </ul>
          ) : (
            <Link
              href="/nous-joindre"
              aria-label="Nous joindre"
              className="text-navy-900 hover:bg-navy-900/5 inline-flex h-10 w-10 items-center justify-center rounded-md"
            >
              <MailIcon />
            </Link>
          )}
        </div>

        <div className="border-ink-300/30 text-ink-500 mt-8 flex flex-col gap-3 border-t pt-5 text-xs md:flex-row md:items-center md:justify-between">
          <p className="flex flex-wrap items-center gap-x-3 gap-y-1">
            <span>
              © {year} {site.brand.legalName}. Tous droits réservés.
            </span>
            {site.legalLinks.map((l) => (
              <Link
                key={l.href}
                href={l.href}
                className="hover:text-navy-900 rounded-sm underline-offset-4 hover:underline"
              >
                {l.label}
              </Link>
            ))}
            <ManageCookiesButton
              label={site.cookies.manageLabel}
              className="hover:text-navy-900 rounded-sm underline-offset-4 hover:underline"
            />
          </p>
          <p className="text-ink-700 font-semibold tracking-[0.14em] uppercase">
            {site.brand.footerSignature}
          </p>
        </div>
      </div>
    </footer>
  );
}