<script lang="ts">
	import { LogIn, LayoutDashboard } from 'lucide-svelte';
</script>

<svelte:head>
	<title>Mi Aplicación</title>
</svelte:head>

<div class="min-h-screen flex flex-col bg-background text-foreground">

	<!-- NAV -->
	<header class="border-b px-6 py-4 flex items-center justify-between">
		<span class="font-bold text-lg tracking-tight">Mi Aplicación</span>
		<a
			href="/login"
			class="inline-flex items-center gap-2 text-sm font-medium px-4 py-2 rounded-lg border hover:bg-accent transition-colors"
		>
			<LogIn class="h-4 w-4" />
			Iniciar sesión
		</a>
	</header>

	<!-- HERO -->
	<main class="flex-1 flex flex-col items-center justify-center text-center px-6 py-24 gap-6">
		<div class="inline-flex items-center gap-2 text-xs font-semibold uppercase tracking-widest text-muted-foreground border rounded-full px-4 py-1.5">
			Plantilla base · Workspace SaaS
		</div>

		<h1 class="text-4xl sm:text-5xl font-extrabold tracking-tight max-w-2xl leading-tight">
			Bienvenido a tu nueva aplicación
		</h1>

		<p class="text-muted-foreground text-lg max-w-lg leading-relaxed">
			Esta es la landing page de la plantilla. Reemplaza este contenido con la
			propuesta de valor de tu producto.
		</p>

		<div class="flex flex-wrap items-center justify-center gap-3 mt-2">
			<a
				href="/login"
				class="inline-flex items-center gap-2 px-6 py-3 rounded-xl bg-primary text-primary-foreground font-semibold text-sm shadow hover:opacity-90 transition"
			>
				<LayoutDashboard class="h-4 w-4" />
				Ir al dashboard
			</a>
		</div>
	</main>

	<!-- FOOTER -->
	<footer class="border-t px-6 py-4 text-center text-xs text-muted-foreground">
		Mi Aplicación · Construido sobre la plantilla Workspace
	</footer>

</div>
