<!doctype html>
<html lang="es">
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>Ayuda - Cliente</title>
    @vite(['resources/css/app.css', 'resources/js/app.js'])
</head>
<body id="top" class="d-flex flex-column min-vh-100 bg-light">
    <header class="app-navbar">
        <nav class="navbar navbar-expand-lg">
            <div class="container">
                <a class="navbar-brand d-flex align-items-center" href="/cliente/dashboard">
                    <div class="d-flex align-items-center justify-content-center" style="width: 130px; height: 52px;">
                        <img src="{{ asset('images/logo.png') }}" alt="Logo" class="img-fluid" style="max-height: 70px; width: auto; object-fit: contain;">
                    </div>
                    <span class="app-navbar-greeting ms-2">¡Hola, {{ explode(' ', trim((string) session('cliente_nombre', 'Cliente')))[0] }}!</span>
                </a>

                <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#menuPrincipal" aria-controls="menuPrincipal" aria-expanded="false" aria-label="Toggle navigation">
                    <span class="navbar-toggler-icon"></span>
                </button>

                <div class="collapse navbar-collapse" id="menuPrincipal">
                    <ul class="navbar-nav mx-auto mb-2 mb-lg-0">
                        <li class="nav-item"><a class="btn app-navbar-link" href="/cliente/dashboard#servicios">Servicios</a></li>
                        <li class="nav-item"><a class="btn app-navbar-link" href="/cliente/dashboard#quienes-somos">Quienes Somos</a></li>
                        <li class="nav-item"><a class="btn app-navbar-link" href="/cliente/dashboard#equipo">Equipo</a></li>
                        <li class="nav-item"><a class="btn app-navbar-link" href="/cliente/dashboard#ubicacion">Ubicacion</a></li>
                        <li class="nav-item"><a class="btn app-navbar-link" href="/cliente/dashboard#formulario">Pedir Turno</a></li>
                        <li class="nav-item"><a class="btn app-navbar-link" href="/cliente/mis-turnos">Mis Turnos</a></li>
                        <li class="nav-item"><a class="btn app-navbar-link" href="/cliente/ayuda" title="Ayuda para clientes" aria-label="Ayuda para clientes">¿Necesitas Ayuda?</a></li>
                    </ul>

                    <a class="btn app-navbar-link" href="/logout">Cerrar Sesion</a>
                </div>
            </div>
        </nav>
    </header>

    <main class="container py-5 flex-grow-1">
        <div class="row justify-content-center">
            <div class="col-12 col-xl-10">
                <div class="d-flex justify-content-between align-items-center mb-3">
                    <h1 class="h4 mb-0">Instrucciones para utilizar el sitio web</h1>
                    <a href="/cliente/dashboard" class="btn btn-outline-secondary btn-sm">Volver</a>
                </div>

                <div class="card border shadow-sm mb-3">
                    <div class="card-body">
                        <h2 class="h6">Navegación del sitio</h2>
                        <p class="mb-2">Para navegar a través del sitio web, podrá utilizar los botones que aparecen en la parte superior de la misma, o también podrá utilizar la rueda de su mouse para visualizar los distintos apartados de la página. Si quiere volver al inicio de la página, podrá apretar un botón redondo azul con una flecha apuntando hacia arriba en la parte inferior derecha.</p>
                        <p class="mb-0">Para visualizar todos los servicios y profesionales, usted podrá presionar los botones laterales para ir viendo todos los servicios y profesionales que el estudio jurídico ofrece.</p>
                    </div>
                </div>

                <div class="card border shadow-sm mb-3">
                    <div class="card-body">
                        <h2 class="h6">¿Qué hacer en caso de detectar un error en la página?</h2>
                        <p class="mb-0">Si se encuentra con un error en el sitio, agradeceríamos que lo reporte con el botón que aparece en la parte superior de la página con el símbolo 🐞. Al apretarlo se sacará una foto a su pantalla automáticamente y se le pedirá que complete un pequeño formulario explicando que fue lo que ocurrió.</p>
                    </div>
                </div>

                <div class="card border shadow-sm mb-3">
                    <div class="card-body">
                        <h2 class="h6">¿Cómo puedo utilizar a Clara, la asistente virtual?</h2>
                        <p class="mb-2">Clara es un asistente virtual que da respuestas dependiendo de la palabra clave que el usuario utilice. Por ejemplo, si el usuario quiere preguntar por los honorarios de los profesionales, debería utilizar alguna de las siguientes palabras claves: honorario, honorarios, precio, precios, costo, costos, etc...</p>
                        <p class="mb-0">Si utiliza una palabra que la asistente no conoce, lamentablemente no podrá responder a su duda. En estos casos se enviará un reporte automático al administrador informándole que el asistente no pudo responder una pregunta para poder corregir el problema.</p>
                    </div>
                </div>

                <div class="card border shadow-sm mb-3">
                    <div class="card-body">
                        <h2 class="h6">¿Cómo sé si luego de pedir un turno se me asignó un turno?</h2>
                        <p class="mb-0">En caso de que algún profesional acepte su caso, usted deberá revisar regularmente su correo electrónico con el que envió el formulario, a través de este medio se le informará todos los detalles de su turno. Además, podrá ver su turno asignado en la sección de "Mis turnos".</p>
                    </div>
                </div>

                <div class="card border shadow-sm mb-3">
                    <div class="card-body">
                        <h2 class="h6">Mis turnos</h2>
                        <p class="mb-0">Aquí se podrá ver todo el historial de turnos (turnos pasados y turnos futuros). Al seleccionar alguno de los turnos, podrá ver el detalle de este y también podrá cancelarlo si así lo desea.</p>
                    </div>
                </div>

                <div class="card border shadow-sm mb-4">
                    <div class="card-body">
                        <h2 class="h6">Recuperación de credenciales</h2>
                        <p class="mb-0">En caso de olvidar su usuario o contraseña, deberá presionar el botón debajo de la vista de inicio de sesión “¿Olvidó sus credenciales?” y luego de llenar un pequeño formulario, tendrá la posibilidad de cambiar contraseña mediante un enlace que se le enviará a su correo electrónico (debe ser el mismo correo con el que está registrado en el sistema).</p>
                    </div>
                </div>
            </div>
        </div>
    </main>

    <footer class="app-footer mt-auto py-4">
        <div class="container">
            <div class="row g-4 align-items-start text-center">
                <div class="col-12 col-md-4">
                    <div class="d-inline-flex align-items-center justify-content-center" style="width: 120px; height: 52px;">
                        <img src="{{ asset('images/logo.png') }}" alt="Logo" class="img-fluid" style="max-height: 70px; width: auto; object-fit: contain;">
                    </div>
                </div>

                <div class="col-12 col-md-4 text-center">
                    <h3 class="h6 mb-2">Redes Sociales</h3>
                    <p class="mb-2"><a href="https://www.instagram.com/abogadasdellitoral?utm_source=ig_web_button_share_sheet&igsh=ZDNlZDc0MzIxNw==" target="_blank" rel="noopener noreferrer">Instagram</a></p>
                    <p class="small mb-0">Desarrollado por Luciano Belini</p>
                </div>

                <div class="col-12 col-md-4">
                    <h3 class="h6 mb-2">Ubicacion</h3>
                    <p class="mb-0"><a href="https://www.google.com/maps/place/Dr.+Luis+Pasteur+141,+Paran%C3%A1,+Entre+R%C3%ADos,+Argentina" target="_blank" rel="noopener noreferrer">Dr. Luis Pasteur 141, Paraná, Entre Ríos, Argentina</a></p>
                </div>
            </div>
        </div>
    </footer>

    <a href="#top" class="btn btn-primary rounded-circle position-fixed bottom-0 end-0 m-4 d-flex align-items-center justify-content-center" style="width: 44px; height: 44px;" aria-label="Volver arriba" title="Volver arriba">
        ↑
    </a>
    @include('partials.reportar-falla-boton')
</body>
</html>
