<!doctype html>
<html lang="es">
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>Instrucciones - Abogadas del Litoral</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="/">
                    <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>
                </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="/">Inicio</a></li>
                        <li class="nav-item"><a class="btn app-navbar-link" href="/instrucciones-uso">¿Necesitas Ayuda?</a></li>
                    </ul>

                    <a class="btn app-navbar-link" href="/login/cliente">Iniciar Sesion</a>
                </div>
            </div>
        </nav>
    </header>

    <main class="container py-5 flex-grow-1">
        <section class="mx-auto" style="max-width: 980px;">
            <h1 class="h3 mb-4 text-center">Instrucciones para utilizar el sitio web</h1>

            <div class="card shadow-sm border-0 mb-4">
                <div class="card-body p-4 p-md-5">
                    <h2 class="h5 mb-3">Navegación del sitio</h2>
                    <p class="text-muted mb-3">
                        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="text-muted 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 shadow-sm border-0 mb-4">
                <div class="card-body p-4 p-md-5">
                    <h2 class="h5 mb-3">¿Qué hacer en caso de detectar un error en la página?</h2>
                    <p class="text-muted 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 qué fue lo que ocurrió.
                    </p>
                </div>
            </div>

            <div class="card shadow-sm border-0 mb-4">
                <div class="card-body p-4 p-md-5">
                    <h2 class="h5 mb-3">¿Por qué no puedo crear un usuario para iniciar sesión?</h2>
                    <p class="text-muted mb-0">
                        Los usuarios son creados por los profesionales, es decir, usted primero debe tener una reunión con un profesional y él le creará un usuario y contraseña para poder ingresar al sitio.
                    </p>
                </div>
            </div>

            <div class="card shadow-sm border-0 mb-4">
                <div class="card-body p-4 p-md-5">
                    <h2 class="h5 mb-3">¿Cómo puedo utilizar a Clara, la asistente virtual?</h2>
                    <p class="text-muted mb-3">
                        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="text-muted 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 shadow-sm border-0">
                <div class="card-body p-4 p-md-5">
                    <h2 class="h5 mb-3">¿Cómo sé si luego de pedir un turno se me asignó un turno?</h2>
                    <p class="text-muted 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.
                    </p>
                </div>
            </div>
        </section>
    </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>
