import Link from "next/link";
import { Metadata } from "next";

export const metadata: Metadata = {
  title: "Page introuvable",
};

export default function NotFound() {
  return (
    <section className="min-h-[70vh] flex items-center justify-center bg-brand-light py-20">
      <div className="container mx-auto px-4 text-center">
        <div className="max-w-xl mx-auto bg-white p-10 rounded-2xl shadow-xl border border-gray-100">
          <div className="w-20 h-20 bg-brand-accent/10 rounded-full flex items-center justify-center mx-auto mb-6 text-brand-accent">
            <svg xmlns="http://www.w3.org/2000/svg" className="h-10 w-10" fill="none" viewBox="0 0 24 24" stroke="currentColor">
              <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M12 9v2m0 4h.01m-6.938 4h13.856c1.54 0 2.502-1.667 1.732-3L13.732 4c-.77-1.333-2.694-1.333-3.464 0L3.34 16c-.77 1.333.192 3 1.732 3z" />
            </svg>
          </div>
          <h1 className="text-4xl font-bold text-brand-charcoal mb-4">404</h1>
          <h2 className="text-2xl font-bold text-brand-charcoal mb-4">Cette page est introuvable.</h2>
          <p className="text-gray-600 mb-8">
            La page que vous recherchez n&apos;existe pas ou a été déplacée.
          </p>
          <div className="flex flex-col sm:flex-row gap-4 justify-center">
            <Link href="/" className="bg-brand-accent hover:bg-brand-blue text-white px-6 py-3 rounded-md font-semibold transition-colors">
              Retour à l&apos;accueil
            </Link>
            <Link href="/contact" className="bg-gray-100 hover:bg-gray-200 text-brand-charcoal border border-gray-300 px-6 py-3 rounded-md font-semibold transition-colors">
              Nous contacter
            </Link>
          </div>
        </div>
      </div>
    </section>
  );
}