<ul id="timer">
  <li>
    <div class="number-container">
      <span id="days" class="number">00</span>
    </div>
    <span class="text">Days</span>
    <div class="circle-container days-anim">
      <div class="glow">
        <img
          src="https://athletesoncall.mmcgbl.dev/wp-content/uploads/2025/05/Ellipse.svg"
          alt=""
        />
      </div>
    </div>
  </li>

  <li>
    <div class="number-container">
      <span id="hours" class="number">00</span>
    </div>
    <span class="text">Hours</span>
    <div class="circle-container hour-anim">
      <div class="glow">
        <img
          src="https://athletesoncall.mmcgbl.dev/wp-content/uploads/2025/05/Ellipse.svg"
          alt=""
        />
      </div>
    </div>
  </li>

  <li>
    <div class="number-container">
      <span id="minutes" class="number">00</span>
    </div>
    <span class="text">Minutes</span>
    <div class="circle-container minu-anim">
      <div class="glow">
        <img
          src="https://athletesoncall.mmcgbl.dev/wp-content/uploads/2025/05/Ellipse.svg"
          alt=""
        />
      </div>
    </div>
  </li>

  <li>
    <div class="number-container">
      <span id="seconds" class="number">00</span>
    </div>
    <span class="text">Seconds</span>
    <div class="circle-container sec-a">
      <div class="glow">
        <img
          src="https://athletesoncall.mmcgbl.dev/wp-content/uploads/2025/05/Ellipse.svg"
          alt=""
        />
      </div>
    </div>
  </li>
</ul>

<script>
  document.addEventListener("DOMContentLoaded", function () {
    let interval;
    const startDate = new Date(2025, 4, 11); 
    const endDate = new Date(2025, 8, 8); 

    function padTo2(num) {
      return num.toString().padStart(2, "0");
    }

    function updateElement(id, value) {
      const el = document.getElementById(id);
      const newVal = padTo2(value);
      if (el.innerText !== newVal) {
        el.classList.add("up");
        setTimeout(() => {
          el.innerText = newVal;
          el.classList.remove("up");
        }, 250);
      }
    }

    function updateCountdown() {
      const now = new Date();

      if (now < startDate) {
        document.getElementById("timer").innerHTML =
          "<li>Countdown hasn't started yet!</li>";
        clearInterval(interval);
        return;
      }

      const remaining = endDate - now;
      if (remaining <= 0) {
        document.getElementById("timer").innerHTML = "<li>Time's up!</li>";
        clearInterval(interval);
        return;
      }

      const totalSeconds = Math.floor(remaining / 1000);
      const days = Math.floor(totalSeconds / (60 * 60 * 24));
      const hours = Math.floor((totalSeconds % (60 * 60 * 24)) / 3600);
      const minutes = Math.floor((totalSeconds % 3600) / 60);
      const seconds = totalSeconds % 60;

      updateElement("days", days);
      updateElement("hours", hours);
      updateElement("minutes", minutes);
      updateElement("seconds", seconds);
    }

    interval = setInterval(updateCountdown, 1000);
    updateCountdown(); 
  });
</script>