{{-- Bienvenida (HomeController@index), layout nuevo con el kit ui-ctc: saludo, la alianza ASERCOL y cliente, y
     accesos directos a las pantallas más usadas por el usuario (de su propio menú). --}}
@php
    $hora = (int) now()->format('G');
    $saludo = $hora < 12 ? 'Buenos días' : ($hora < 19 ? 'Buenas tardes' : 'Buenas noches');
    $nombre = trim((string) auth()->user()->name);
    $primerNombre = $nombre !== '' ? ucfirst(mb_strtolower(strtok($nombre, ' '))) : '';
    $fecha = ucfirst(now()->locale('es')->translatedFormat('l j \d\e F \d\e Y'));
@endphp
<x-app-layout titulo="Inicio">
    <x-pagina>
        @if (session()->has('success'))
            <x-alerta tipo="exito">{{ session('success') }}</x-alerta>
        @endif

        {{-- Saludo y alianza --}}
        <section class="overflow-hidden rounded-2xl border border-[var(--borde)] bg-[var(--superficie)]">
            <div class="flex flex-wrap items-center justify-between gap-6 px-6 py-7 sm:px-8">
                <div class="min-w-0">
                    <p class="text-[13px] font-medium text-[var(--texto-tenue)]">{{ $fecha }}</p>
                    <h1 class="mt-1 text-[28px] font-semibold leading-tight text-[var(--texto)] sm:text-[32px]">
                        {{ $saludo }}{{ $primerNombre !== '' ? ', ' . $primerNombre : '' }}
                    </h1>
                    <p class="mt-1.5 text-[14px] text-[var(--texto-suave)]">Bienvenido a Control Tower de ASERCOL para {{ $razonSocial }}.</p>
                </div>

                <div class="flex items-center gap-5" aria-label="ASERCOL y {{ $razonSocial }}">
                    <img src="{{ asset('img/logo1.png') }}" alt="ASERCOL" class="ctc-logo h-14 w-auto max-w-[180px] object-contain">
                    @if ($logoCliente)
                        <span class="h-12 w-px bg-[var(--borde-fuerte)]" aria-hidden="true"></span>
                        <img src="{{ asset($logoCliente) }}" alt="{{ $razonSocial }}" class="ctc-logo h-14 w-auto max-w-[200px] object-contain">
                    @endif
                </div>
            </div>
            <div class="h-1" style="background: linear-gradient(90deg, var(--acento), var(--secundario));" aria-hidden="true"></div>
        </section>

        {{-- Accesos directos --}}
        <section>
            <div class="mb-3 flex items-baseline justify-between gap-3">
                <h2 class="text-[15px] font-bold text-[var(--texto)]">{{ $porUso ? 'Tus pantallas más usadas' : 'Accesos rápidos' }}</h2>
                <span class="text-[12px] text-[var(--texto-tenue)]">{{ $porUso ? 'Según tu uso de los últimos 180 días' : 'Desde tu menú' }}</span>
            </div>

            @if (count($accesos))
                <div class="grid gap-3 [grid-template-columns:repeat(auto-fill,minmax(230px,1fr))]">
                    @foreach ($accesos as $acceso)
                        <a href="{{ $acceso['url'] }}" data-mod="{{ $acceso['slug'] }}"
                           x-data x-on:click="window.ctcSeguimientoApp(@js($acceso['ruta']), {{ $acceso['id'] }})"
                           class="group flex items-start gap-3 rounded-xl border border-[var(--borde)] bg-[var(--superficie)] p-4 shadow-sm transition hover:border-[var(--acento-borde)] hover:shadow focus:outline-none focus-visible:ring-2 focus-visible:ring-[var(--acento)]">
                            <span class="flex h-9 w-9 flex-none items-center justify-center rounded-lg" style="background: var(--mod); color: var(--mod-contraste);">
                                <x-icono-modulo :modulo="$acceso['slug']" class="h-[17px] w-[17px]" />
                            </span>
                            <span class="min-w-0 flex-1">
                                <span class="block truncate text-[14px] font-semibold text-[var(--texto)] group-hover:text-[var(--acento-texto)]">{{ $acceso['nombre'] }}</span>
                                <span class="mt-0.5 block truncate text-[12px] text-[var(--texto-tenue)]">{{ $acceso['modulo'] }} · {{ $acceso['grupo'] }}</span>
                            </span>
                            <x-icono nombre="chevron-right" variante="m" class="mt-2 h-4 w-4 flex-none text-[var(--texto-tenue)] transition group-hover:translate-x-0.5 group-hover:text-[var(--acento-texto)]" />
                        </a>
                    @endforeach
                </div>
            @else
                <x-alerta tipo="info">Tu usuario todavía no tiene pantallas asignadas en el menú. Si necesitas acceso, escribe al equipo de ASERCOL.</x-alerta>
            @endif
        </section>
    </x-pagina>
</x-app-layout>