<script lang="ts">
    import { _ } from "../lib/i18n/index"
    import { localizedPath } from "../lib/i18n"
    import { reveal } from "../lib/actions/reveal"

    // Signal HTTP 404 to the SSR hook during server-side rendering.
    // get_read.js checks context.is404 after render() and returns status 404.
    if (typeof window === "undefined") {
        // @ts-ignore - context is the goja global in SSR runtime (declared by tibi-types)
        context.is404 = true
    }
</script>

<section class="min-h-[60vh] flex items-center justify-center bg-gray-50">
    <div class="text-center px-6 py-20" use:reveal>
        <div class="text-8xl mb-6 opacity-20 font-display font-black text-brand-900">404</div>
        <h1 class="text-3xl sm:text-4xl font-display font-bold text-gray-900 mb-4">
            {$_("page.notFound.title")}
        </h1>
        <p class="text-lg text-gray-500 mb-8 max-w-md mx-auto">
            {$_("page.notFound.text")}
        </p>
        <a
            href={localizedPath("/")}
            class="inline-flex items-center gap-2 bg-brand-600 hover:bg-brand-700 text-white font-bold px-8 py-4 rounded-xl text-lg transition-all duration-300 hover:shadow-lg hover:shadow-brand-500/25 hover:-translate-y-0.5"
        >
            <svg class="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M10 19l-7-7m0 0l7-7m-7 7h18"
                ></path>
            </svg>
            {$_("page.notFound.backHome")}
        </a>
    </div>
</section>
