@extends('../layouts/partials/header')

@section('content')
<br>
<div class="container mt-4">
    <div class="row justify-content-center">
        <div class="col-md-11">
            <div class="card border-0 shadow-sm">
                <div class="card-header bg-dark text-white d-flex align-items-center gap-2">
                    <i class="fas fa-truck-moving"></i>
                    <strong>Bienvenido — INTERMODAL Y LOGÍSTICA LS</strong>
                </div>
                <div class="card-body p-4">

                    {{-- Encabezado --}}
                    <h1 class="h4 mb-2">Plataforma de gestión de fletes terrestres y logística integral</h1>
                    <p class="text-muted mb-4">
                        Sistema centralizado para administrar cartas porte, clientes, trámites y documentos.
                        Más de <strong>15 años</strong> de experiencia en transporte terrestre con cobertura nacional y monitoreo <strong>24/7</strong>.
                    </p>

                    {{-- Indicadores rápidos --}}
                    <div class="row g-3 mb-4">
                        <div class="col-6 col-md-3">
                            <div class="border rounded-3 p-3 text-center h-100 bg-light">
                                <div class="fs-3 fw-bold text-dark">15+</div>
                                <div class="small text-muted">Años de experiencia</div>
                            </div>
                        </div>
                        <div class="col-6 col-md-3">
                            <div class="border rounded-3 p-3 text-center h-100 bg-light">
                                <div class="fs-3 fw-bold text-dark">30+</div>
                                <div class="small text-muted">Estados con cobertura</div>
                            </div>
                        </div>
                        <div class="col-6 col-md-3">
                            <div class="border rounded-3 p-3 text-center h-100 bg-light">
                                <div class="fs-3 fw-bold text-dark">24/7</div>
                                <div class="small text-muted">Monitoreo activo</div>
                            </div>
                        </div>
                        <div class="col-6 col-md-3">
                            <div class="border rounded-3 p-3 text-center h-100 bg-light">
                                <div class="fs-3 fw-bold text-dark">100%</div>
                                <div class="small text-muted">Compromiso con el cliente</div>
                            </div>
                        </div>
                    </div>

                    {{-- Módulos del sistema --}}
                    <h2 class="h5 mb-3 border-bottom pb-2">
                        <i class="fas fa-th-large me-1 text-secondary"></i> Módulos del sistema
                    </h2>
                    <div class="row g-3 mb-4">
                        <div class="col-md-6">
                            <div class="p-3 border rounded-3 h-100">
                                <h3 class="h6 mb-2">
                                    <i class="fas fa-file-alt text-primary me-1"></i> Cartas Porte
                                </h3>
                                <p class="mb-0 small text-muted">
                                    Registro y seguimiento de cartas porte: contenedor, naviera, buque, operador, placas, origen y destino.
                                </p>
                            </div>
                        </div>
                        <div class="col-md-6">
                            <div class="p-3 border rounded-3 h-100">
                                <h3 class="h6 mb-2">
                                    <i class="fas fa-users text-success me-1"></i> Clientes
                                </h3>
                                <p class="mb-0 small text-muted">
                                    Administración centralizada de clientes con historial de embarques y documentación.
                                </p>
                            </div>
                        </div>
                        <div class="col-md-6">
                            <div class="p-3 border rounded-3 h-100">
                                <h3 class="h6 mb-2">
                                    <i class="fas fa-clipboard-list text-warning me-1"></i> Trámites
                                </h3>
                                <p class="mb-0 small text-muted">
                                    Gestión de trámites y seguimiento de estatus con bóveda de documentos integrada.
                                </p>
                            </div>
                        </div>
                        <div class="col-md-6">
                            <div class="p-3 border rounded-3 h-100">
                                <h3 class="h6 mb-2">
                                    <i class="fas fa-cloud-upload-alt text-info me-1"></i> Bóveda de Documentos
                                </h3>
                                <p class="mb-0 small text-muted">
                                    Almacenamiento seguro en la nube de PDFs, imágenes y archivos vinculados a cada carta porte o trámite.
                                </p>
                            </div>
                        </div>
                    </div>

                    {{-- Servicios de transporte --}}
                    <h2 class="h5 mb-3 border-bottom pb-2">
                        <i class="fas fa-route me-1 text-secondary"></i> Tipos de servicio
                    </h2>
                    <div class="row g-3">
                        <div class="col-md-4">
                            <div class="p-3 border rounded-3 h-100">
                                <h3 class="h6 mb-2">
                                    <i class="fas fa-door-open text-primary me-1"></i> Puerta a Puerta
                                </h3>
                                <p class="mb-0 small text-muted">Recolección en origen y entrega en destino final del cliente.</p>
                            </div>
                        </div>
                        <div class="col-md-4">
                            <div class="p-3 border rounded-3 h-100">
                                <h3 class="h6 mb-2">
                                    <i class="fas fa-anchor text-danger me-1"></i> Puerto a Puerta
                                </h3>
                                <p class="mb-0 small text-muted">Traslado completo entre terminales portuarias con manejo de contenedores.</p>
                            </div>
                        </div>
                        <div class="col-md-4">
                            <div class="p-3 border rounded-3 h-100">
                                <h3 class="h6 mb-2">
                                    <i class="fas fa-exchange-alt text-success me-1"></i> Puerta a Puerto
                                </h3>
                                <p class="mb-0 small text-muted">Recolección en instalaciones del cliente y entrega en terminal portuaria.</p>
                            </div>
                        </div>
                        <div class="col-md-4">
                            <div class="p-3 border rounded-3 h-100">
                                <h3 class="h6 mb-2">
                                    <i class="fas fa-map-marked-alt text-warning me-1"></i> Cobertura Nacional
                                </h3>
                                <p class="mb-0 small text-muted">Más de 30 estados cubiertos con rutas eficientes y tiempos competitivos.</p>
                            </div>
                        </div>
                        <div class="col-md-4">
                            <div class="p-3 border rounded-3 h-100">
                                <h3 class="h6 mb-2">
                                    <i class="fas fa-satellite-dish text-info me-1"></i> Monitoreo 24/7
                                </h3>
                                <p class="mb-0 small text-muted">Seguimiento activo de cada unidad los 365 días del año.</p>
                            </div>
                        </div>
                        <div class="col-md-4">
                            <div class="p-3 border rounded-3 h-100">
                                <h3 class="h6 mb-2">
                                    <i class="fas fa-box-open text-dark me-1"></i> Carga Industrial y Comercial
                                </h3>
                                <p class="mb-0 small text-muted">Transporte de carga general, consolidada y en contenedor para cualquier industria.</p>
                            </div>
                        </div>
                    </div>

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

@extends('../layouts/partials/footer')