/** Cookies page — app script */

function CookiesApp() {
  const resetConsent = () => {
    try {
      localStorage.removeItem("endrinos_cookie_consent");
      window.location.reload();
    } catch (e) {}
  };

  return (
    <div className="app">
      <PageHeader activePage="" />
      <main>
        <PageHero
          eyebrow="Uso de archivos de navegación"
          title="Política de Cookies"
          subtitle="Información sobre las cookies utilizadas en este sitio web y cómo gestionar tus preferencias."
          image="uploads/pontones%20fondo.jpg"
        />

        <section className="section">
          <div className="container" style={{ maxWidth: 840 }}>
            <article style={{ font: "400 16px/1.7 var(--font-serif)", color: "var(--ink-900)", display: "flex", flexDirection: "column", gap: 28 }}>
              <div>
                <h3 style={{ font: "400 24px/1.2 var(--font-display)", color: "var(--endrino-green-900)", margin: "0 0 12px" }}>
                  1. ¿Qué es una cookie?
                </h3>
                <p>
                  Una cookie es un pequeño archivo de texto que un sitio web almacena en el navegador del usuario al visitar una página. Sirve para recordar información sobre tu visita, preferencias de navegación o mantener tu sesión activa, facilitando tu próxima visita y haciendo que el sitio te resulte más útil.
                </p>
              </div>

              <div>
                <h3 style={{ font: "400 24px/1.2 var(--font-display)", color: "var(--endrino-green-900)", margin: "0 0 12px" }}>
                  2. Tipos de cookies utilizadas en esta web
                </h3>
                <p>
                  Este sitio web utiliza cookies técnicas y de preferencias mínimas para garantizar el correcto funcionamiento del portal:
                </p>
                <ul style={{ paddingLeft: 20, margin: "12px 0 0", display: "flex", flexDirection: "column", gap: 8 }}>
                  <li>
                    <strong>Cookies técnicas (Necesarias):</strong> Son imprescindibles para permitir la navegación a través del sitio web y la utilización de sus diferentes opciones o servicios (por ejemplo, cargar fuentes tipográficas o recordar el consentimiento de cookies).
                  </li>
                  <li>
                    <strong>Cookies de preferencias del sitio:</strong> Recuerdan la configuración estética o preferencias seleccionadas en el panel de ajuste visual del usuario.
                  </li>
                </ul>
              </div>

              <div>
                <h3 style={{ font: "400 24px/1.2 var(--font-display)", color: "var(--endrino-green-900)", margin: "0 0 12px" }}>
                  3. Gestión de tus preferencias de cookies
                </h3>
                <p>
                  Puedes volver a mostrar el banner de consentimiento o reiniciar tus preferencias guardadas en este navegador haciendo clic en el siguiente botón:
                </p>
                <div style={{ marginTop: 14 }}>
                  <button
                    type="button"
                    className="btn btn--primary"
                    onClick={resetConsent}
                  >
                    Restablecer preferencias de cookies
                  </button>
                </div>
              </div>

              <div>
                <h3 style={{ font: "400 24px/1.2 var(--font-display)", color: "var(--endrino-green-900)", margin: "0 0 12px" }}>
                  4. Cómo desactivar las cookies en tu navegador
                </h3>
                <p>
                  Puedes permitir, bloquear o eliminar las cookies instaladas en tu equipo mediante la configuración de las opciones del navegador instalado en tu ordenador o dispositivo móvil:
                </p>
                <ul style={{ paddingLeft: 20, margin: "12px 0 0", display: "flex", flexDirection: "column", gap: 6 }}>
                  <li><strong>Google Chrome:</strong> Configuración &gt; Privacidad y seguridad &gt; Cookies y otros datos de sitios.</li>
                  <li><strong>Mozilla Firefox:</strong> Ajustes &gt; Privacidad y seguridad &gt; Cookies y datos del sitio.</li>
                  <li><strong>Apple Safari:</strong> Preferencias &gt; Privacidad &gt; Bloquear todas las cookies.</li>
                  <li><strong>Microsoft Edge:</strong> Configuración &gt; Cookies y permisos del sitio.</li>
                </ul>
              </div>
            </article>
          </div>
        </section>
      </main>
      <PageFooter />
    </div>
  );
}

const root = ReactDOM.createRoot(document.getElementById("root"));
root.render(<CookiesApp />);