App

<!-- ===== JESUS IN FIVE — PEGAR EN /pages/app (único bloque necesario) ===== -->
<style>
  #jif-app-gate{
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
    text-align:center; max-width:520px; margin:48px auto; padding:0 20px; color:#1E1410;
  }
  #jif-app-gate h2{ font-size:1.4rem; margin:0 0 12px; }
  #jif-app-gate p{ font-size:1.05rem; line-height:1.5; margin:0 0 24px; color:#5a4d44; }
  #jif-app-gate .jif-btn{
    display:inline-block; background:#F0AE1F; color:#1E1410; text-decoration:none;
    font-weight:600; padding:14px 28px; border-radius:10px; font-size:1.05rem;
  }
  #jif-app-gate .jif-soon{
    display:inline-block; background:#C4A882; color:#1E1410; opacity:.85;
    font-weight:600; padding:14px 28px; border-radius:10px; font-size:1.05rem;
  }
  #jif-app-gate .jif-sub{ font-size:.9rem; color:#8a7d72; margin-top:16px; }
</style>

<div id="jif-app-gate"><p>Cargando… / Loading…</p></div>

<script>
(function(){
  var APP_STORE = "https://apps.apple.com/us/app/jesus-in-five/id6760776215";
  var APP_PAGE  = "/pages/the-app"; // a dónde mandar tras abrir el App Store
  var ua = navigator.userAgent || navigator.vendor || window.opera || "";

  var isIPhone  = /iPhone|iPod/.test(ua);   // solo iPhone => abre el App Store
  var isAndroid = /android/i.test(ua);

  var isES = (navigator.language || "en").toLowerCase().indexOf("es") === 0;
  var gate = document.getElementById("jif-app-gate");
  function render(html){ gate.innerHTML = html; }

  if (isIPhone) {
    render(
      '<h2>' + (isES ? "Abriendo el App Store…" : "Opening the App Store…") + '</h2>' +
      '<a class="jif-btn" href="' + APP_STORE + '">' +
        (isES ? "Descargar en el App Store" : "Download on the App Store") +
      '</a>'
    );

    var done = false;
    function goToAppPage(){
      if (done) return;
      done = true;
      window.location.replace(APP_PAGE);
    }

    // 1) Abre el App Store (iOS hace handoff y mantiene viva esta pestaña)
    window.location.href = APP_STORE;

    // 2) Cuando el usuario vuelve a Safari => ir a /pages/the-app
    document.addEventListener("visibilitychange", function(){
      if (document.visibilityState === "visible") goToAppPage();
    });
    window.addEventListener("pageshow", function(e){ if (e.persisted) goToAppPage(); });

    // 3) Respaldo: el temporizador se pausa en segundo plano y se reanuda
    //    al volver de la App Store, disparando el redirect aunque (2) falle.
    setTimeout(goToAppPage, 1500);

  } else if (isAndroid) {
    render(
      '<h2>' + (isES ? "Próximamente en Google Play" : "Coming soon on Google Play") + '</h2>' +
      '<p>' + (isES
        ? "La versión para Android estará disponible muy pronto. ¡Gracias por tu paciencia!"
        : "The Android version will be available very soon. Thanks for your patience!") + '</p>' +
      '<span class="jif-soon">' + (isES ? "Próximamente" : "Coming soon") + '</span>'
    );

  } else {
    // iPad, Mac y escritorio: opción manual, sin redirect forzado
    render(
      '<h2>' + (isES ? "Descarga Jesus in Five" : "Get Jesus in Five") + '</h2>' +
      '<p>' + (isES
        ? "Disponible para iPhone. Versión Android próximamente."
        : "Available for iPhone. Android version coming soon.") + '</p>' +
      '<a class="jif-btn" href="' + APP_STORE + '">' +
        (isES ? "Descargar en el App Store" : "Download on the App Store") +
      '</a>' +
      '<div class="jif-sub">' + (isES ? "Próximamente en Google Play" : "Coming soon on Google Play") + '</div>'
    );
  }
})();
</script>
<!-- ===== fin ===== -->