const timeElement = document.querySelector("#local-time");
const refreshElement = document.querySelector("#refresh-indicator");
const counters = document.querySelectorAll("[data-count]");

function updateClock() {
  const now = new Date();
  timeElement.textContent = new Intl.DateTimeFormat("en-US", {
    timeZone: "America/New_York",
    hour: "2-digit",
    minute: "2-digit",
    second: "2-digit",
    hour12: false,
  }).format(now);
}

let secondsSinceRefresh = 0;

function updateRefreshState() {
  refreshElement.textContent = `UPDATED ${String(secondsSinceRefresh).padStart(2, "0")}s AGO`;
  secondsSinceRefresh = (secondsSinceRefresh + 1) % 60;
}

function animateCounters() {
  counters.forEach((counter) => {
    const target = Number(counter.dataset.count);
    let current = 0;
    const increment = Math.max(1, Math.ceil(target / 18));

    const timer = window.setInterval(() => {
      current = Math.min(target, current + increment);
      counter.textContent = current;
      if (current === target) window.clearInterval(timer);
    }, 45);
  });
}

updateClock();
updateRefreshState();
animateCounters();

window.setInterval(updateClock, 1000);
window.setInterval(updateRefreshState, 1000);