@extends('layouts.app')

@section('content')
    <div class="p-3 p-md-4 p-lg-5">
        <div class="container-fluid px-0" style="max-width: 1400px; margin: 0 auto;">
            <!-- Hero Section -->
            <header class="animate-float-in mb-4 mb-md-5">
                <div class="d-flex align-items-center gap-2 mb-3 flex-wrap">
                    <span
                        class="badge bg-primary bg-opacity-10 text-primary px-3 py-2 rounded-pill fw-semibold d-flex align-items-center gap-2">
                        <span class="bg-primary rounded-circle" style="width: 8px; height: 8px;" aria-hidden="true"></span>
                        Live 2026
                    </span>
                    <span class="small text-secondary font-monospace" id="liveTime" aria-live="polite"></span>
                </div>
                <h1 class="font-display display-5 fw-bold text-dark">
                    Hola, <span class="shimmer-text">{{ auth()->user()->name }}</span> 👋
                </h1>
                <p class="text-secondary-emphasis mt-2">Panel inteligente · métricas en tiempo real</p>
            </header>
        </div>
    </div>
@endsection