---
import Layout from '../layouts/Layout.astro';
import DashboardComponent from '../components/Dashboard';
---

<Layout title="Dashboard de Proyectos">
	<div class="space-y-12 animate-in fade-in duration-1000">
		<div class="flex flex-col md:flex-row md:items-end justify-between gap-8 pb-8 border-b border-slate-200">
			<div class="space-y-2">
				<div class="flex items-center gap-2 text-exis-secondary">
					<div class="w-2 h-2 rounded-full bg-exis-secondary animate-pulse"></div>
					<span class="text-[10px] font-black uppercase tracking-widest">En Vivo</span>
				</div>
				<h2 class="text-4xl font-black text-slate-800 tracking-tighter">Ecosistema EXIS</h2>
				<p class="text-slate-400 font-medium">Analítica avanzada y repositorio centralizado de proyectos.</p>
			</div>
			<div class="flex gap-4">
				<div class="hidden lg:block text-right pr-6 border-r border-slate-200">
					<p class="text-[10px] font-black text-slate-300 uppercase tracking-widest">Estado del Sistema</p>
					<p class="text-xs font-black text-emerald-500 uppercase">Sincronizado</p>
				</div>
				<a href="/" class="btn-primary flex items-center gap-2 py-3 px-8">
					<span class="text-sm">Nuevo Proyecto</span>
				</a>
			</div>
		</div>

		<DashboardComponent client:load />
	</div>
</Layout>