Fecha Envio v2 - Liquid

<!DOCTYPE html>
<html lang="es">
<head>
  <meta charset="UTF-8">
  <title>Entrega dinámica por región</title>
  <style>
    .custom-text {
      font-family: Arial, sans-serif;
      font-size: 16px;
    }
    .date-color {
      color: #2e7d32;
    }
    .region-name {
      font-weight: bold;
    }
  </style>
</head>
<body>

  <p class="custom-text">
    <strong>🇨🇱 Compra Ahora y Recibe entre el</strong><br>

    <!-- Opción de Santiago -->
    <span id="entregaSantiago" style="display:none;"></span>

    <!-- Opción de Regiones (Aquí se mostrará la región específica del usuario) -->
    <span id="entregaRegiones" style="display:none;"></span>
  </p>

  <script>
    document.addEventListener('DOMContentLoaded', function () {
      fetch('https://ipapi.co/json/')
        .then(response => response.json())
        .then(data => {
          const region = data.region;
          ajustarTiemposDeEntrega(region);
        })
        .catch(err => {
          console.log('Error al obtener la ubicación:', err);
        });
    });

    function esFinDeSemana(fecha) {
      const dia = new Date(fecha).getDay();
      return dia === 6 || dia === 0;
    }

    function sumarDiasHabiles(fecha, dias) {
      let count = 0;
      let resultado = new Date(fecha);

      while (count < dias) {
        resultado.setDate(resultado.getDate() + 1);
        if (!esFinDeSemana(resultado)) {
          count++;
        }
      }

      return resultado;
    }

    function formatearRango(fechaInicio, fechaFin) {
      const diaInicio = new Date(fechaInicio).getDate();
      const diaFin = new Date(fechaFin).getDate();
      const mesFin = new Intl.DateTimeFormat('es-ES', { month: 'long' }).format(fechaFin);
      return `${diaInicio} a ${diaFin} de ${mesFin}`;
    }

    function ajustarTiemposDeEntrega(region) {
      const fechaActual = new Date();
      const unDiaHabil = sumarDiasHabiles(fechaActual, 1);
      const tresDiasHabiles = sumarDiasHabiles(fechaActual, 3);
      const seisDiasHabiles = sumarDiasHabiles(fechaActual, 6);

      if (region === 'Región Metropolitana de Santiago' || region === 'Santiago Metropolitan') {
        const el = document.getElementById('entregaSantiago');
        el.style.display = 'inline';
        el.innerHTML = `<span class="date-color"><strong>${formatearRango(unDiaHabil, tresDiasHabiles)}</strong></span> para Santiago/Región Metropolitana`;
      } else {
        const el = document.getElementById('entregaRegiones');
        el.style.display = 'inline';
        el.innerHTML = `<span class="date-color"><strong>${formatearRango(tresDiasHabiles, seisDiasHabiles)}</strong></span> para <strong class="region-name">${region}</strong>`;
      }
    }
  </script>

</body>
</html>