import type { Metadata } from "next";
import Link from "next/link";
import { ArrowLeft, Home, LifeBuoy } from "@/components/ui/icons";
import { Button } from "@/components/ui/button";
import { SectionStamp } from "@/components/marketing/section-stamp";
import { BRAND_NAME } from "@/lib/brand";

export const metadata: Metadata = {
  title: "Page introuvable",
  description: "Cette page n'existe pas ou plus.",
  robots: { index: false, follow: false },
};

export default function NotFound() {
  return (
    <main className="min-h-dvh relative overflow-hidden flex items-center justify-center px-4 sm:px-6 py-12">
      {/* Filigrane marque en arriere-plan, type signature atelier */}
      <div
        aria-hidden
        className="absolute inset-x-0 bottom-0 flex justify-center pointer-events-none select-none translate-y-[12%]"
      >
        <span className="font-editorial italic font-medium leading-none text-stone-900/[0.04] text-[22vw] md:text-[16rem] lg:text-[22rem] whitespace-nowrap tracking-tight">
          {BRAND_NAME}
        </span>
      </div>

      <div className="relative z-10 w-full max-w-xl text-center">
        <div className="flex justify-center mb-6">
          <SectionStamp number="404" label="Page introuvable" emphasis />
        </div>

        <h1 className="font-editorial text-5xl sm:text-6xl md:text-7xl font-medium leading-[1.05]">
          Cette page s&apos;est perdue.
        </h1>

        <p className="mt-6 text-base sm:text-lg text-text-muted max-w-md mx-auto leading-relaxed">
          L&apos;adresse demandée n&apos;existe pas ou a été déplacée. Pas grave, on vous remet sur la bonne voie.
        </p>

        <div className="mt-10 flex flex-wrap items-center justify-center gap-3">
          <Link href="/">
            <Button variant="primary" size="lg">
              <Home className="size-4" />
              Retour à l&apos;accueil
            </Button>
          </Link>
          <Link href="/contact">
            <Button variant="outline" size="lg">
              <LifeBuoy className="size-4" />
              Nous contacter
            </Button>
          </Link>
        </div>

        <div className="mt-12 pt-8 border-t border-border max-w-sm mx-auto">
          <div className="text-xxs uppercase tracking-wider font-semibold text-text-faint mb-3">
            Pages utiles
          </div>
          <ul className="flex flex-wrap items-center justify-center gap-x-5 gap-y-2 text-sm">
            <li>
              <Link href="/essentiel" className="text-text-muted hover:text-accent transition-colors inline-flex items-center gap-1">
                <ArrowLeft className="size-3" />
                L&apos;essentiel
              </Link>
            </li>
            <li>
              <Link href="/tarifs" className="text-text-muted hover:text-accent transition-colors inline-flex items-center gap-1">
                <ArrowLeft className="size-3" />
                Tarifs
              </Link>
            </li>
            <li>
              <Link href="/realisations" className="text-text-muted hover:text-accent transition-colors inline-flex items-center gap-1">
                <ArrowLeft className="size-3" />
                Réalisations
              </Link>
            </li>
          </ul>
        </div>
      </div>
    </main>
  );
}