<template>
  <div class="flex flex-col gap-8">
    <UCard class="brand-card border border-transparent backdrop-blur-sm">
      <template #header>
        <div class="flex flex-col gap-4 lg:flex-row lg:items-center lg:justify-between">
          <div class="flex items-center gap-5">
            <img
              src="/logo.png"
              alt="Analítica Núcleo"
              class="h-16 w-16 rounded-full border border-[var(--brand-accent)]/40 shadow-lg shadow-[var(--brand-primary-strong)]/25"
            />
            <div class="space-y-1">
              <h1 class="text-3xl font-semibold tracking-tight text-[var(--brand-text)]">
                Analítica Núcleo Data Studio
              </h1>
              <p class="text-sm text-[var(--brand-text-muted)]">
                Panel de administración y monitoreo de Núcleo Río Frío
              </p>
            </div>
          </div>
          <div class="flex flex-wrap gap-2">
            <span class="brand-pill inline-flex items-center gap-2 rounded-full px-3 py-1 text-xs uppercase tracking-[0.18em]">
              <span class="inline-block h-2 w-2 rounded-full bg-green-500"></span>
              Activo
            </span>
          </div>
        </div>
      </template>

      <div class="text-center py-12 space-y-6">
        <div class="flex justify-center">
          <div class="w-24 h-24 rounded-full bg-gradient-to-br from-[var(--brand-primary-strong)]/20 to-[var(--brand-accent)]/20 flex items-center justify-center">
            <UIcon name="i-lucide-chart-line" class="size-12 text-[var(--brand-accent)]" />
          </div>
        </div>

        <div>
          <h2 class="text-2xl font-bold text-[var(--brand-text)] mb-2">
            Bienvenido a Analítica Núcleo
          </h2>
          <p class="text-lg text-[var(--brand-text-muted)] mb-4">
            Sistema de análisis y monitoreo empresarial
          </p>
          <p class="text-sm text-[var(--brand-text-muted)] max-w-2xl mx-auto">
            Panel central para la gestión y visualización de métricas de negocio de Nucleo Río Frío.
            Las funcionalidades de análisis de datos están actualmente en desarrollo.
          </p>
        </div>
      </div>
    </UCard>

    <section class="grid gap-6 md:grid-cols-3">
      <UCard class="brand-card border border-transparent">
        <template #header>
          <div class="flex items-center gap-2">
            <UIcon name="i-lucide-shield-check" class="size-5 text-[var(--brand-accent)]" />
            <span class="text-sm font-semibold text-[var(--brand-text)]">Seguridad</span>
          </div>
        </template>
        <p class="text-sm text-[var(--brand-text-muted)]">
          Acceso protegido mediante Authentik con autenticación de doble factor y gestión de permisos basada en grupos.
        </p>
      </UCard>

      <UCard class="brand-card border border-transparent">
        <template #header>
          <div class="flex items-center gap-2">
            <UIcon name="i-lucide-user" class="size-5 text-[var(--brand-accent)]" />
            <span class="text-sm font-semibold text-[var(--brand-text)]">Mi Perfil</span>
          </div>
        </template>
        <p class="text-sm text-[var(--brand-text-muted)] mb-3">
          Gestiona tu información personal y preferencias del sistema.
        </p>
        <NuxtLink to="/profile" class="text-sm font-semibold text-[var(--brand-accent)] hover:underline">
          Ver perfil →
        </NuxtLink>
      </UCard>

      <UCard class="brand-card border border-transparent">
        <template #header>
          <div class="flex items-center gap-2">
            <UIcon name="i-lucide-settings" class="size-5 text-[var(--brand-accent)]" />
            <span class="text-sm font-semibold text-[var(--brand-text)]">Configuración</span>
          </div>
        </template>
        <p class="text-sm text-[var(--brand-text-muted)] mb-3">
          Personaliza tu experiencia y ajusta las preferencias del panel.
        </p>
        <NuxtLink to="/settings" class="text-sm font-semibold text-[var(--brand-accent)] hover:underline">
          Ir a configuración →
        </NuxtLink>
      </UCard>
    </section>
  </div>
</template>

<script setup lang="ts">
definePageMeta({
  layout: 'dashboard',
  title: 'Inicio'
})
</script>
