/**
 * ── APPRENTISSAGE ────────────────────────────────────────────────────────────
 * Pas de `"use client"` ici : ce pied de page n'a ni état ni interaction.
 * Il est donc calculé une fois pour toutes au build et envoyé en HTML pur —
 * exactement ton `footer.php`, mais sans serveur derrière. Zéro JavaScript.
 * ─────────────────────────────────────────────────────────────────────────────
 */

import Image from "next/image";
import Link from "next/link";
import { Chevrons } from "@/components/Chevrons";
import { IconeEnveloppe, IconePosition, IconeTelephone } from "@/components/Icones";
import { NAVIGATION, POSITIONNEMENT, SITE, ZONES } from "@/lib/site";

export function PiedDePage() {
  const annee = 2026; // Figé volontairement : `new Date()` au build donnerait
  // une année qui ne bouge plus jamais après la mise en ligne, ce qui est pire
  // qu'une année écrite en clair et mise à jour à la main. Voir TODO.md.

  return (
    // Le filet saumon sépare le pied de page du bandeau d'appel à l'action,
    // qui est lui aussi anthracite : sans lui, les deux blocs n'en font qu'un.
    <footer className="border-t-[3px] border-saumon bg-anthracite text-white">
      <div className="conteneur py-14 sm:py-16">
        <div className="grid gap-12 md:grid-cols-12">
          {/* ── Identité ── */}
          <div className="md:col-span-5">
            <Image
              src="/logo-adt-fond-fonce.webp"
              alt="ADT Solutions Web"
              width={851}
              height={315}
              className="h-11 w-auto"
            />
            <p className="mt-6 max-w-sm text-[0.95rem] leading-relaxed text-white/70">
              {POSITIONNEMENT.phrase}
              <br />
              <span className="text-saumon">{POSITIONNEMENT.sousPhrase}</span>
            </p>
          </div>

          {/* ── Navigation ── */}
          <nav aria-label="Pied de page" className="md:col-span-3">
            <h2 className="mb-5 text-xs font-bold uppercase tracking-[0.16em] text-saumon">
              Le site
            </h2>
            <ul className="space-y-3 text-[0.95rem]">
              {NAVIGATION.map((lien) => (
                <li key={lien.href}>
                  <Link
                    href={lien.href}
                    className="text-white/75 transition-colors hover:text-white"
                  >
                    {lien.libelle}
                  </Link>
                </li>
              ))}
              <li>
                <Link
                  href="/contact/"
                  className="text-white/75 transition-colors hover:text-white"
                >
                  Contact
                </Link>
              </li>
            </ul>
          </nav>

          {/* ── Coordonnées ── */}
          <div className="md:col-span-4">
            <h2 className="mb-5 text-xs font-bold uppercase tracking-[0.16em] text-saumon">
              Nous joindre
            </h2>
            <ul className="space-y-3.5 text-[0.95rem] text-white/75">
              <li className="flex gap-3">
                <IconePosition className="mt-0.5 h-[18px] w-[18px] shrink-0 text-saumon" />
                <span>
                  {SITE.ville} ({SITE.codePostal})
                  <br />
                  <span className="text-white/55">{ZONES.join(" · ")}</span>
                </span>
              </li>
              <li className="flex gap-3">
                <IconeEnveloppe className="mt-0.5 h-[18px] w-[18px] shrink-0 text-saumon" />
                <span className="a-completer">{SITE.email}</span>
              </li>
              <li className="flex gap-3">
                <IconeTelephone className="mt-0.5 h-[18px] w-[18px] shrink-0 text-saumon" />
                <span className="a-completer">{SITE.telephone}</span>
              </li>
            </ul>
          </div>
        </div>

        {/* ── Bas de page ── */}
        <div className="mt-12 flex flex-col gap-4 border-t border-white/12 pt-7 text-[0.85rem] text-white/55 sm:flex-row sm:items-center sm:justify-between">
          <p className="flex items-center gap-2.5">
            <Chevrons className="h-3.5 w-3.5 text-saumon" />
            © {annee} {SITE.nom} — {SITE.ville}
          </p>
          <Link
            href="/mentions-legales/"
            className="transition-colors hover:text-white"
          >
            Mentions légales
          </Link>
        </div>
      </div>
    </footer>
  );
}