<script lang="ts">
	import Logo from '$lib/components/layout/Logo.svelte';
</script>

<svelte:head>
	<title>Offline - FurryPlace</title>
</svelte:head>

<div class="min-h-screen bg-base-200 flex items-center justify-center p-4">
	<div class="text-center max-w-md">
		<div class="flex justify-center mb-6">
			<Logo size="lg" hasText={true} />
		</div>

		<div class="bg-base-100 rounded-box shadow-xl p-8">
			<svg
				class="mx-auto mb-4 h-24 w-24 text-base-content/30"
				fill="none"
				stroke="currentColor"
				viewBox="0 0 24 24"
				xmlns="http://www.w3.org/2000/svg"
			>
				<path
					stroke-linecap="round"
					stroke-linejoin="round"
					stroke-width="2"
					d="M18.364 5.636a9 9 0 010 12.728m0 0l-2.829-2.829m2.829 2.829L21 21M15.536 8.464a5 5 0 010 7.072m0 0l-2.829-2.829m-4.243 2.829a4.978 4.978 0 01-1.414-2.83m-1.414 5.658a9 9 0 01-2.167-9.238m7.824 2.167a1 1 0 111.414 1.414m-1.414-1.414L3 3m8.293 8.293l1.414 1.414"
				/>
			</svg>

			<h1 class="text-2xl font-bold mb-2">You're Offline</h1>
			<p class="text-base-content/70 mb-6">
				It looks like you've lost your internet connection. Please check your network and try again.
			</p>

			<button
				class="btn btn-primary btn-block"
				on:click={() => window.location.reload()}
			>
				Try Again
			</button>

			<p class="text-sm text-base-content/50 mt-4">
				Once you're back online, you'll be able to paint pixels again!
			</p>
		</div>
	</div>
</div>
