function updateTraveler() {
  const dateValue = document.getElementById('traveler-time').value;
  const selectedZone = document.getElementById('traveler-zone').value;
  const date = dateValue ? new Date(dateValue) : new Date();
  const amount = Number(document.getElementById('traveler-amount').value) || 0;
  const gb = Number(document.getElementById('traveler-gb').value) || 0;
  const usdToMxn = 17.2;
  const usdToEur = 0.92;
  const gib = gb * (1000 ** 3) / (1024 ** 3);
  document.getElementById('traveler-output').textContent = [
    `Selected zone: ${new Intl.DateTimeFormat([], { dateStyle: 'medium', timeStyle: 'short', timeZone: selectedZone }).format(date)}`,
    `UTC: ${new Intl.DateTimeFormat([], { dateStyle: 'medium', timeStyle: 'short', timeZone: 'UTC' }).format(date)}`,
    `$${amount.toFixed(2)} USD ~= $${(amount * usdToMxn).toFixed(2)} MXN ~= EUR ${ (amount * usdToEur).toFixed(2)}`,
    `${gb.toFixed(0)} GB ~= ${gib.toFixed(2)} GiB`,
  ].join('\n');
}

document.getElementById('traveler-time').value = new Date(Date.now() - new Date().getTimezoneOffset() * 60000).toISOString().slice(0, 16);
['traveler-time', 'traveler-zone', 'traveler-amount', 'traveler-gb'].forEach((id) => document.getElementById(id).addEventListener('input', updateTraveler));
if ('serviceWorker' in navigator) navigator.serviceWorker.register('sw.js').catch(() => {});
updateTraveler();