import Link from "next/link";
import { Chevrons, ChevronsFiligrane } from "@/components/Chevrons";
import { IconeFleche } from "@/components/Icones";
import { NAVIGATION } from "@/lib/site";

/**
 * ── APPRENTISSAGE ────────────────────────────────────────────────────────────
 * `not-found.tsx` est un nom réservé de l'App Router. En export statique, Next
 * en fait un fichier `out/404.html`, qu'Apache sert grâce à la directive
 * `ErrorDocument 404 /404.html` posée dans le .htaccess.
 *
 * Sur un site refondu, cette page compte : chaque ancienne URL non redirigée
 * y atterrit. D'où les liens vers les vraies destinations — et surtout d'où
 * l'importance de la liste de redirections 301 (voir .htaccess et TODO.md).
 * ─────────────────────────────────────────────────────────────────────────────
 */
export const metadata = {
  title: "Page introuvable | ADT Solutions Web",
  // On ne veut pas voir cette page dans les résultats de recherche.
  robots: { index: false, follow: true },
};

export default function PageIntrouvable() {
  return (
    <section className="relative overflow-hidden">
      <ChevronsFiligrane className="pointer-events-none absolute -right-20 top-0 h-[420px] w-[420px] text-saumon/[0.09]" />

      <div className="conteneur relative py-20 sm:py-28">
        <p className="surtitre">
          <Chevrons className="h-3.5 w-3.5" />
          Erreur 404
        </p>

        <h1 className="max-w-2xl text-[2rem] sm:text-5xl">
          Cette page n&apos;existe pas — ou plus.
        </h1>

        <p className="mt-6 max-w-xl text-[1.0625rem] leading-relaxed text-gris">
          Le site a été refondu. Si vous arrivez d&apos;un lien ou d&apos;un
          favori, le contenu que vous cherchez se trouve probablement dans
          l&apos;une de ces pages.
        </p>

        <ul className="mt-10 grid gap-3 sm:max-w-lg">
          {[...NAVIGATION, { libelle: "Contact", href: "/contact/" }].map(
            (lien) => (
              <li key={lien.href}>
                <Link
                  href={lien.href}
                  className="group flex items-center justify-between rounded-sm border border-trait px-5 py-4 font-bold transition-colors hover:border-saumon"
                >
                  {lien.libelle}
                  <IconeFleche className="h-4 w-4 text-saumon-texte transition-transform group-hover:translate-x-1" />
                </Link>
              </li>
            ),
          )}
        </ul>

        <Link href="/" className="bouton-primaire mt-10">
          Retour à l&apos;accueil
        </Link>
      </div>
    </section>
  );
}