// Basic interactivity – expand as you go

document.addEventListener('DOMContentLoaded', () => {
  const statusBar = document.getElementById('statusBar');
  const shade = document.getElementById('shade');

  // Pull down shade from top
  let startY = 0;
  let pulling = false;

  document.addEventListener('touchstart', e => {
    if (e.touches[0].clientY < 60) {
      startY = e.touches[0].clientY;
      pulling = true;
    }
  }, { passive: true });

  document.addEventListener('touchmove', e => {
    if (!pulling) return;
    const delta = e.touches[0].clientY - startY;
    if (delta > 0) {
      shade.style.top = Math.min(delta - 100, 0) + 'px';
    }
  }, { passive: true });

  document.addEventListener('touchend', () => {
    if (!pulling) return;
    pulling = false;
    if (parseInt(shade.style.top) > -60) {
      shade.classList.add('open');
    } else {
      shade.classList.remove('open');
    }
  });

  // Also support mouse drag from top (for desktop testing)
  document.addEventListener('mousedown', e => {
    if (e.clientY < 40) {
      startY = e.clientY;
      pulling = true;
    }
  });

  document.addEventListener('mousemove', e => {
    if (!pulling) return;
    const delta = e.clientY - startY;
    if (delta > 0) {
      shade.style.top = Math.min(delta - 100, 0) + 'px';
    }
  });

  document.addEventListener('mouseup', () => {
    if (!pulling) return;
    pulling = false;
    if (parseInt(shade.style.top) > -60) {
      shade.classList.add('open');
    } else {
      shade.classList.remove('open');
    }
  });

  // Close shade when clicking outside
  document.addEventListener('click', e => {
    if (shade.classList.contains('open') &&
        !shade.contains(e.target) &&
        !statusBar.contains(e.target)) {
      shade.classList.remove('open');
    }
  });

  // Live clock (NZ time)
  function updateClock() {
    const now = new Date().toLocaleString('en-NZ', {
      timeZone: 'Pacific/Auckland',
      hour: '2-digit',
      minute: '2-digit',
      hour12: true
    });
    document.querySelectorAll('.clock, .clock-tray').forEach(el => {
      el.textContent = now;
    });
  }
  updateClock();
  setInterval(updateClock, 30000);
});