<x-app-layout>
    <x-slot name="header">Panel de Administrador</x-slot>

    <div class="stat-grid">
        <div class="stat-card">
            <div class="stat-line line-blue"></div>
            <div class="stat-label">Total Usuarios</div>
            <div class="stat-value">{{ $totalUsuarios ?? 0 }}</div>
        </div>
        <div class="stat-card">
            <div class="stat-line line-green"></div>
            <div class="stat-label">Estudiantes</div>
            <div class="stat-value">{{ $totalEstudiantes ?? 0 }}</div>
        </div>
        <div class="stat-card">
            <div class="stat-line line-amber"></div>
            <div class="stat-label">Tesorería</div>
            <div class="stat-value">{{ $totalTesoreria ?? 0 }}</div>
        </div>
        <div class="stat-card">
            <div class="stat-line line-purple"></div>
            <div class="stat-label">Secretaría</div>
            <div class="stat-value">{{ $totalSecretaria ?? 0 }}</div>
        </div>
    </div>

    <div class="card">
        <div class="card-title">Gestión del Sistema</div>
        <div class="action-grid">

            <a href="#" class="action-btn">
                <span class="action-icon icon-blue">
                    <svg viewBox="0 0 16 16" fill="none" width="16" height="16">
                        <circle cx="6" cy="5" r="2.5" stroke="currentColor" stroke-width="1.3"/>
                        <path d="M1 13c0-2.5 2-4 5-4s5 1.5 5 4" stroke="currentColor" stroke-width="1.3" stroke-linecap="round"/>
                        <path d="M12 7v4M10 9h4" stroke="currentColor" stroke-width="1.3" stroke-linecap="round"/>
                    </svg>
                </span>
                Gestionar Usuarios
            </a>

            <a href="#" class="action-btn">
                <span class="action-icon icon-green">
                    <svg viewBox="0 0 16 16" fill="none" width="16" height="16">
                        <rect x="2" y="3" width="12" height="10" rx="1.5" stroke="currentColor" stroke-width="1.3"/>
                        <path d="M5 8h6M5 11h4" stroke="currentColor" stroke-width="1.3" stroke-linecap="round"/>
                    </svg>
                </span>
                Gestionar Servicios
            </a>

            <a href="#" class="action-btn">
                <span class="action-icon icon-cyan">
                    <svg viewBox="0 0 16 16" fill="none" width="16" height="16">
                        <path d="M2 12V4l4 4 3-3 5 5" stroke="currentColor" stroke-width="1.3" stroke-linecap="round" stroke-linejoin="round"/>
                    </svg>
                </span>
                Ver Reportes
            </a>

            <a href="#" class="action-btn">
                <span class="action-icon icon-amber">
                    <svg viewBox="0 0 16 16" fill="none" width="16" height="16">
                        <rect x="2" y="4" width="12" height="9" rx="1.5" stroke="currentColor" stroke-width="1.3"/>
                        <path d="M5 4V3a1 1 0 011-1h4a1 1 0 011 1v1" stroke="currentColor" stroke-width="1.3"/>
                        <path d="M5 9h6" stroke="currentColor" stroke-width="1.3" stroke-linecap="round"/>
                    </svg>
                </span>
                Ver Pagos
            </a>

            <a href="#" class="action-btn">
                <span class="action-icon icon-gray">
                    <svg viewBox="0 0 16 16" fill="none" width="16" height="16">
                        <circle cx="8" cy="8" r="2" stroke="currentColor" stroke-width="1.3"/>
                        <path d="M8 2v1M8 13v1M2 8h1M13 8h1M3.5 3.5l.7.7M11.8 11.8l.7.7M11.8 4.2l-.7.7M4.2 11.8l-.7.7" stroke="currentColor" stroke-width="1.3" stroke-linecap="round"/>
                    </svg>
                </span>
                Configuración
            </a>

        </div>
    </div>

</x-app-layout>