<script lang="ts">
	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-surface-muted text-fg-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-info-soft text-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-danger-soft text-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-surface p-8 shadow-sm">
		<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-xl font-bold" aria-hidden="true">{copy.mark}</span>
			</div>
		</div>

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