@extends('layouts.app')

@section('content')
<div class="row justify-content-center">
    <div class="col-xl-8 col-lg-9">
        <div class="card border-0 shadow-sm">
            <div class="card-body py-5 px-4 px-md-6">

                {{-- Encabezado de bienvenida --}}
                <div class="text-center mb-4">
                    <span class="badge bg-label-primary rounded-pill px-3 py-2 mb-3">
                        <i class="icon-base ti tabler-dashboard icon-md me-1"></i>
                        Panel en construcción
                    </span>

                    <h3 class="mb-2">
                        Hola, {{ auth()->user()->name ?? 'bienvenido(a)' }} 👋
                    </h3>

                    <p class="text-body-secondary mb-0">
                        Estamos preparando tu panel con indicadores reales para ayudarte a tomar mejores decisiones
                        del día a día.
                    </p>
                </div>

                <hr class="my-4">

                {{-- Contenido principal explicativo --}}
                <div class="row g-4">
                    <div class="col-md-4">
                        <div class="d-flex">
                            <div class="badge bg-label-success rounded p-2 me-3">
                                <i class="icon-base ti tabler-chart-bar icon-md"></i>
                            </div>
                            <div>
                                <h6 class="mb-1">¿Qué verás aquí?</h6>
                                <p class="text-body-secondary mb-0 small">
                                    Un resumen rápido de tu operación: proyectos activos, tareas pendientes,
                                    avances y métricas clave sin tener que entrar a cada módulo.
                                </p>
                            </div>
                        </div>
                    </div>

                    <div class="col-md-4">
                        <div class="d-flex">
                            <div class="badge bg-label-info rounded p-2 me-3">
                                <i class="icon-base ti tabler-rocket icon-md"></i>
                            </div>
                            <div>
                                <h6 class="mb-1">En esta primera versión</h6>
                                <p class="text-body-secondary mb-0 small">
                                    Estamos conectando los datos reales del sistema para que el panel sea útil
                                    y no sólo un gráfico de ejemplo. Preferimos mostrarte algo funcional y claro.
                                </p>
                            </div>
                        </div>
                    </div>

                    <div class="col-md-4">
                        <div class="d-flex">
                            <div class="badge bg-label-warning rounded p-2 me-3">
                                <i class="icon-base ti tabler-target-arrow icon-md"></i>
                            </div>
                            <div>
                                <h6 class="mb-1">¿Qué puedes hacer ahora?</h6>
                                <p class="text-body-secondary mb-0 small">
                                    Sigue trabajando desde el menú principal: crea proyectos, registra tareas y
                                    actualiza información. Todo eso se reflejará aquí cuando activemos el panel.
                                </p>
                            </div>
                        </div>
                    </div>
                </div>

                {{-- Mensaje inferior --}}
                <div class="mt-5 text-center">
                    <p class="text-body-secondary mb-2 small">
                        🛠️ <strong>Nota:</strong> Esta sección está en desarrollo. Iremos activando widgets
                        de forma gradual conforme avancemos con la configuración del sistema.
                    </p>
                    <span class="badge bg-label-secondary rounded-pill">
                        Versión inicial del dashboard
                    </span>
                </div>

            </div>
        </div>
    </div>
</div>
@endsection