/* ANAX Live Spreads — interactive tier toggle + clock + glow positioner */
(function () {
  var root = document.getElementById('live-spreads');
  if (!root) return;

  var tiers = root.querySelectorAll('.ls-tier');
  var glow  = root.querySelector('.ls-tier-glow');
  var cells = root.querySelectorAll('.ls-cell');
  var clock = document.getElementById('ls-clock');

  function positionGlow(target) {
    if (!glow || !target) return;
    glow.style.left  = target.offsetLeft + 'px';
    glow.style.width = target.offsetWidth + 'px';
  }

  function setTier(name) {
    tiers.forEach(function (b) {
      var active = b.dataset.tier === name;
      b.classList.toggle('is-active', active);
      b.setAttribute('aria-selected', active ? 'true' : 'false');
      if (active) positionGlow(b);
    });
    cells.forEach(function (c) {
      var pips = c.querySelector('.ls-pips');
      if (!pips) return;
      var val  = pips.getAttribute('data-' + name);
      var unit = pips.getAttribute('data-unit') || 'pips';
      if (val == null) return;
      pips.classList.remove('is-ticking');
      // force reflow so animation can replay
      void pips.offsetWidth;
      pips.classList.add('is-ticking');
      pips.firstChild.nodeValue = val;
      var span = pips.querySelector('span');
      if (span) span.textContent = unit;
    });
  }

  tiers.forEach(function (b) {
    b.addEventListener('click', function () { setTier(b.dataset.tier); });
  });

  // initial glow position — default to currently-active tier
  var active = root.querySelector('.ls-tier.is-active') || tiers[0];
  if (active) {
    requestAnimationFrame(function () { positionGlow(active); });
  }
  window.addEventListener('resize', function () {
    var a = root.querySelector('.ls-tier.is-active');
    if (a) positionGlow(a);
  });

  // UAE clock — Asia/Dubai timezone via Intl
  function tickClock() {
    if (!clock) return;
    try {
      var fmt = new Intl.DateTimeFormat('en-GB', {
        timeZone: 'Asia/Dubai', hour: '2-digit', minute: '2-digit', second: '2-digit', hour12: false
      });
      clock.textContent = fmt.format(new Date()) + ' UAE';
    } catch (e) {
      var d = new Date();
      clock.textContent =
        String(d.getUTCHours() + 4).padStart(2,'0') + ':' +
        String(d.getUTCMinutes()).padStart(2,'0') + ':' +
        String(d.getUTCSeconds()).padStart(2,'0') + ' UAE';
    }
  }
  tickClock();
  setInterval(tickClock, 1000);
})();