"use client";

import { AlertCircle, Home } from "lucide-react";
import Link from "next/link";
import { Button } from "@/components/ui/button";

export default function NotFound() {
	return (
		<div className="min-h-screen flex flex-col items-center justify-center bg-zinc-50 dark:bg-zinc-950 px-4">
			<div className="text-center space-y-6 max-w-md">
				<div className="flex justify-center">
					<div className="bg-red-100 dark:bg-red-900/30 p-4 rounded-full">
						<AlertCircle className="h-12 w-12 text-red-600 dark:text-red-400" />
					</div>
				</div>
				<h1 className="text-4xl font-bold tracking-tight">
					404 - Perdu dans le troupeau ?
				</h1>
				<p className="text-muted-foreground text-lg">
					On dirait que ce mème s'est enfui. La chèvre ne l'a pas trouvé.
				</p>
				<div className="flex flex-col sm:flex-row gap-3 justify-center">
					<Button asChild size="lg" className="gap-2">
						<Link href="/">
							<Home className="h-4 w-4" />
							Retourner à l'accueil
						</Link>
					</Button>
				</div>
			</div>
			<div className="mt-12 text-8xl grayscale opacity-20 select-none">🐐</div>
		</div>
	);
}