// The fallback for any /js/* URL the router does not know.
//
// The server cannot 404 these: it answers every /js/* path with the same SPA shell,
// because it has no idea which routes the bundle contains. So the router has to be the
// one to say so — and if it does not, an unknown URL renders the chrome around an empty
// <main>, which is a blank page with a 200 and no explanation.
//
// It names the paths that MOVED, because that is what a stale bookmark most likely wants:
// /js/kit, /js/forms, /js/table and /js/theming were four pages, and are now four
// sections of one.

import { useLocation, useNavigate } from "@solidjs/router";
import { ButtonUI, BUTTON_COLOR_PRIMARY, BUTTON_COLOR_LIGHT_NEUTRAL } from "@ui/Buttons";

export function NotFound() {
    const location = useLocation();
    const navigate = useNavigate();

    return (
        <div class="max-w-2xl py-10">
            <h1 class="text-2xl font-semibold tracking-tight text-ink">Page not found</h1>
            <p class="mt-2 leading-relaxed text-ink-soft">
                No route matches <code class="rounded bg-surface-raised px-1 py-0.5 font-mono text-[13px]">{location.pathname}</code>.
            </p>
            <p class="mt-3 leading-relaxed text-ink-soft">
                The kit used to be spread across several pages — <code class="font-mono">/js/kit</code>,{" "}
                <code class="font-mono">/js/forms</code>, <code class="font-mono">/js/table</code>,{" "}
                <code class="font-mono">/js/theming</code>. It is one page now, and they are sections of it.
            </p>

            <div class="mt-6 flex flex-wrap items-center gap-2">
                <ButtonUI color={BUTTON_COLOR_PRIMARY} onclick={() => navigate("/components")}>
                    Go to Components
                </ButtonUI>
                <ButtonUI color={BUTTON_COLOR_LIGHT_NEUTRAL} onclick={() => navigate("/")}>
                    Overview
                </ButtonUI>
            </div>
        </div>
    );
}