<script lang="ts">
	import { resolve } from "$app/paths";
	import { page } from "$app/state";
	import Button from "$lib/components/ui/Button.svelte";

	const copy = $derived.by(() => {
		switch (page.status) {
			case 404:
				return {
					status: "404",
					title: "Page not found",
					message:
						"The page you're looking for doesn't exist. It may have been moved, deleted, or you have the wrong URL.",
					mark: "?",
					tone: "bg-background-inset text-foreground-subtle"
				};
			case 503:
				return {
					status: "503",
					title: "Service unavailable",
					message:
						"We were unable to reach the service backing this page. It may be temporarily unavailable.",
					mark: "503",
					tone: "bg-background-info-subtle text-foreground-info"
				};
			default:
				return {
					status: "500",
					title: "Internal server error",
					message:
						page.error?.message ??
						"We encountered an error while processing your request. Please try again later.",
					mark: "!",
					tone: "bg-background-danger-subtle text-foreground-danger"
				};
		}
	});
</script>

<svelte:head>
	<title>{copy.status} &middot; Tangled</title>
</svelte:head>

<section class="flex min-h-[60vh] flex-col items-center justify-center text-center">
	<div class="mx-auto max-w-lg rounded-lg bg-background-default p-8 shadow-xs">
		<div class="mb-6">
			<div
				class={`mx-auto mb-4 flex size-16 items-center justify-center rounded-full ${copy.tone}`}
			>
				<span class="font-mono text-heading-4 font-bold" aria-hidden="true">{copy.mark}</span>
			</div>
		</div>

		<div class="space-y-4">
			<h1 class="text-heading-3 font-bold text-foreground-default sm:text-heading-2">
				{copy.status} &mdash; {copy.title}
			</h1>
			<p class="text-foreground-muted">{copy.message}</p>
			<div class="mt-6 flex flex-col items-center justify-center gap-3 sm:flex-row">
				<Button href={resolve("/")} variant="default">Back to home</Button>
			</div>
		</div>
	</div>
</section>
