<script lang="ts">
	import { page } from '$app/stores';
	import { Button } from '$lib/components/ui/button';
</script>

<section class="py-20 text-center">
	<h1 class="mb-4 text-5xl font-bold">{$page.status}</h1>
	<p class="mb-6 text-lg text-gray-600">
		{$page.status === 404
			? "Oops! The page you are looking for doesn't exist."
			: 'Something went wrong. Please try again later.'}
	</p>

	{#if $page.error?.message}
		<p class="mb-8 text-gray-500">{$page.error.message}</p>
	{/if}

	<Button href="/" class="px-6 py-3 text-lg">Go Back Home</Button>
</section>
