<!DOCTYPE html>

<html lang="en">
<head>
<meta charset="UTF-8">
<title>PorAquí - Policies</title>
<style>
    body {
        font-family: Arial, sans-serif;
        line-height: 1.6;
        margin: 0 auto;
        max-width: 800px;
        padding: 20px;
    }
    h1, h2 {
        text-align: center;
    }
    .banner {
        width: 100%;
        max-height: 200px;
        object-fit: cover;
        margin-bottom: 20px;
    }
    .index {
        background-color: #f0f0f0;
        border-radius: 5px;
        padding: 10px;
        margin-bottom: 20px;
    }
    .index ul {
        list-style-type: none;
        padding: 0;
    }
    .index li {
        margin-bottom: 10px;
    }
    .image-container {
        width: 100%; /* Full width of the parent container */
        max-width: 600px; /* Optional: Set a maximum width */
        margin: 0 auto; /* Center the container */
    }
    .image-container img {
        width: 100%; /* Make the image fill the container width */
        height: auto; /* Maintain the aspect ratio */
        display: block; /* Remove any extra space below the image */
    }
    #back-to-top {
        display: none; /* Hidden by default */
        position: fixed; /* Fixed/sticky position */
        bottom: 20px; /* Place the button at the bottom of the page */
        right: 30px; /* Place the button 30px from the right */
        z-index: 99; /* Make sure it does not overlap */
        border: none; /* Remove borders */
        outline: none; /* Remove outline */
        background-color: #555; /* Set a background color */
        color: white; /* Text color */
        cursor: pointer; /* Add a mouse pointer on hover */
        padding: 15px; /* Some padding */
        border-radius: 10px; /* Rounded corners */
        font-size: 18px; /* Increase font size */
    }
    #back-to-top:hover {
        background-color: #333; /* Add a dark-grey background on hover */
    }
</style>
</head>
<body>
    <h1>Soporte PorAquí</h1>
    <div class="image-container">
        <img src="./images/porAqui.png" alt="PorAquí Banner" class="banner">
    </div>

    <div class="index">
        <h2>¿Qué necesitas?</h2>
        <ul>
            <li><a href="#privacy">Privacidad</a></li>
            <li><a href="#cancellation">Cancelaciones</a></li>
            <li><a href="#refund">Reembolsos</a></li>
            <li><a href="#return">Devoluciones</a></li>
        </ul>
    </div>

    <section id="privacy">
        <h2>Privacidad</h2>
        <p><strong>¿Qué datos recopilamos?</strong> Nombre, email, teléfono y preferencias de reserva.<br>
        <strong>¿Para qué?</strong> Mejorar tu experiencia, procesar reservas y facilitar comunicación.<br>
        <strong>¿Compartimos datos?</strong> Solo con proveedores para operar la app. Nunca para marketing sin tu permiso.<br>
        <strong>¿Tus derechos?</strong> Acceso, corrección o eliminación de tus datos. Contacto: <a href="mailto:info@poraqui.mobi">info@poraqui.mobi</a></p>
    </section>

    <section id="cancellation">
        <h2>Cancelaciones</h2>
        <p><strong>¿Cómo cancelar?</strong> Desde la app, sujeto a políticas del proveedor.<br>
        <strong>¿Penalizaciones?</strong> Dependen del proveedor y se muestran al reservar.<br>
        <strong>¿Canceló el proveedor?</strong> Sigue el proceso de reembolso indicado por el proveedor.<br>
        <strong>Dudas?</strong> <a href="mailto:info@poraqui.mobi">info@poraqui.mobi</a></p>
    </section>

    <section id="refund">
        <h2>Reembolsos</h2>
        <p><strong>¿Cuándo aplica?</strong> Según políticas del proveedor y PorAquí.<br>
        <strong>¿Cómo pedirlo?</strong> Solicítalo desde la app con los datos de tu reserva.<br>
        <strong>¿Tiempo de respuesta?</strong> Evaluamos cada caso y respondemos lo antes posible.<br>
        <strong>Contacto:</strong> <a href="mailto:info@poraqui.mobi">info@poraqui.mobi</a></p>
    </section>

    <section id="return">
        <h2>Devoluciones</h2>
        <p><strong>¿Qué cubre?</strong> Devoluciones y reembolsos según políticas del proveedor.<br>
        <strong>¿Cómo solicitar?</strong> Desde la app, adjuntando información y motivo.<br>
        <strong>¿Dudas?</strong> <a href="mailto:info@poraqui.mobi">info@poraqui.mobi</a></p>
        <strong>¿Necesitas ayuda?</strong> <a href="mailto:support@poraqui.mobi">support@poraqui.mobi</a></p>
    </section>

    <button id="back-to-top" title="Volver al Inicio">Back To Top</button>

</body>

<script>
    // When the user scrolls down 20px from the top of the document, show the button
    window.onscroll = function() {scrollFunction()};

    function scrollFunction() {
        if (document.body.scrollTop > 20 || document.documentElement.scrollTop > 20) {
            document.getElementById("back-to-top").style.display = "block";
        } else {
            document.getElementById("back-to-top").style.display = "none";
        }
    }

    // When the user clicks on the button, scroll to the top of the document
    document.getElementById("back-to-top").onclick = function() {
        document.body.scrollTop = 0; // For Safari
        document.documentElement.scrollTop = 0; // For Chrome, Firefox, IE and Opera
    }
</script>

</html>