<script lang="ts">
	import { companyStore } from '$lib/stores/company.svelte';
	import { LayoutDashboard, Building2, User } from 'lucide-svelte';
</script>

<div class="space-y-6">
	<div>
		<h1 class="text-2xl font-bold tracking-tight text-foreground flex items-center gap-2">
			<LayoutDashboard class="h-6 w-6" />
			Dashboard
		</h1>
		<p class="text-muted-foreground text-sm mt-1">
			Plantilla base — agrega tus módulos aquí.
		</p>
	</div>

	<div class="grid gap-4 sm:grid-cols-2 lg:grid-cols-3">
		<!-- Compañía activa -->
		<div class="rounded-xl border bg-card p-5 flex items-start gap-4">
			<div class="p-2 rounded-lg bg-primary/10 text-primary">
				<Building2 class="h-5 w-5" />
			</div>
			<div>
				<p class="text-xs text-muted-foreground font-medium uppercase tracking-wide">Compañía activa</p>
				<p class="text-lg font-semibold mt-0.5">
					{companyStore.activeCompany?.name ?? '—'}
				</p>
			</div>
		</div>

		<!-- Placeholder módulo 1 -->
		<a
			href="/dashboard/account"
			class="rounded-xl border bg-card p-5 flex items-start gap-4 hover:bg-accent transition-colors group"
		>
			<div class="p-2 rounded-lg bg-muted group-hover:bg-primary/10 transition-colors">
				<User class="h-5 w-5 text-muted-foreground group-hover:text-primary transition-colors" />
			</div>
			<div>
				<p class="text-sm font-medium">Mi cuenta</p>
				<p class="text-xs text-muted-foreground mt-0.5">Perfil y configuración</p>
			</div>
		</a>
	</div>
</div>
