"use client"

import Link from "next/link"
import { Button } from "@/components/ui/button"
import { AlertTriangle } from "lucide-react"

export default function NotFound() {
  return (
    <div className="relative flex flex-col items-center justify-center min-h-screen bg-background text-center px-4">
      <div className="mb-6">
        <AlertTriangle className="w-20 h-20 text-destructive" />
      </div>
      <h1 className="text-5xl font-extrabold tracking-tight text-foreground">
        404
      </h1>
      <p className="mt-2 text-lg text-muted-foreground">
        Oups ! La page que vous recherchez est introuvable.
      </p>
      <div className="mt-6">
        <Button asChild className="rounded-2xl px-6">
          <Link href="/">Retour à l’accueil</Link>
        </Button>
      </div>
      <span className="absolute bottom-10 text-[12rem] font-black text-muted-foreground/10 select-none pointer-events-none">
        404
      </span>
    </div>
  )
}