import Link from "next/link";
import { SiteFooter } from "@/components/site-footer";
import { SiteHeader } from "@/components/site-header";
import { getDictionary } from "@/lib/i18n/get-dictionary";
import { getLocale } from "@/lib/i18n/get-locale";

export default async function NotFound() {
    const locale = await getLocale();
    const dict = getDictionary(locale);
    return (
        <div className="flex min-h-full flex-1 flex-col">
            <SiteHeader dict={dict.nav} locale={locale} />
            <main className="mx-auto flex w-full max-w-4xl flex-1 flex-col items-center justify-center px-5 py-20 text-center">
                <p className="font-mono text-sm text-blurple-soft">{"// 404"}</p>
                <h1 className="mt-2 bg-gradient-to-r from-white via-blurple-soft to-mint bg-clip-text text-8xl font-black tracking-tight text-transparent">
                    404
                </h1>
                <h2 className="mt-4 text-2xl font-bold">{dict.notFound.title}</h2>
                <p className="mt-2 max-w-md text-zinc-400">{dict.notFound.subtitle}</p>
                <Link
                    href="/"
                    className="mt-8 rounded-full bg-blurple px-6 py-3 text-sm font-semibold text-white transition-colors hover:bg-blurple-soft hover:text-void"
                >
                    {dict.notFound.home}
                </Link>
            </main>
            <SiteFooter dict={dict.footer} />
        </div>
    );
}