<script lang="ts">
	import { Construction } from 'lucide-svelte';
	import { fade, fly } from 'svelte/transition';
	import { onMount } from 'svelte';

	let visible = false;
	onMount(() => {
		visible = true;
	});
</script>

<div
	class="flex h-[calc(100vh-200px)] flex-col items-center justify-center overflow-hidden p-8 text-center"
>
	{#if visible}
		<div
			class="relative mb-8 rounded-full bg-blue-50 p-8 dark:bg-blue-900/20"
			in:fly={{ y: -50, duration: 1000, delay: 200 }}
		>
			<div class="absolute inset-0 animate-ping rounded-full bg-blue-400 opacity-20"></div>
			<Construction
				class="relative z-10 h-16 w-16 animate-bounce text-blue-500 dark:text-blue-400"
			/>
		</div>

		<h1
			class="mb-4 text-4xl font-extrabold tracking-tight text-gray-900 dark:text-white"
			in:fade={{ duration: 1000, delay: 500 }}
		>
			En Construcción
		</h1>

		<p
			class="max-w-md text-xl leading-relaxed text-gray-500 dark:text-gray-400"
			in:fade={{ duration: 1000, delay: 800 }}
		>
			MODULO AUN NO DISPONIBLE!
		</p>

		<div class="mt-10" in:fly={{ y: 20, duration: 1000, delay: 1100 }}>
			<a
				href="/dashboard"
				class="group inline-flex items-center justify-center rounded-lg bg-blue-600 px-6 py-3 text-base font-semibold text-white shadow-lg transition-all hover:scale-105 hover:bg-blue-700 focus-visible:ring-2 focus-visible:ring-blue-500 focus-visible:outline-none active:scale-95"
			>
				<span>Volver al Inicio</span>
				<svg
					xmlns="http://www.w3.org/2000/svg"
					class="ml-2 h-5 w-5 transition-transform group-hover:translate-x-1"
					viewBox="0 0 20 20"
					fill="currentColor"
				>
					<path
						fill-rule="evenodd"
						d="M10.293 3.293a1 1 0 011.414 0l6 6a1 1 0 010 1.414l-6 6a1 1 0 01-1.414-1.414L14.586 11H3a1 1 0 110-2h11.586l-4.293-4.293a1 1 0 010-1.414z"
						clip-rule="evenodd"
					/>
				</svg>
			</a>
		</div>
	{/if}
</div>

<style>
	:global(.animate-bounce) {
		animation: bounce 2s infinite;
	}

	@keyframes bounce {
		0%,
		100% {
			transform: translateY(-5%);
			animation-timing-function: cubic-bezier(0.8, 0, 1, 1);
		}
		50% {
			transform: translateY(0);
			animation-timing-function: cubic-bezier(0, 0, 0.2, 1);
		}
	}
</style>
