// Mobile menu toggle
const mobileMenuBtn = document.getElementById('mobileMenuBtn');
const mobileMenu = document.getElementById('mobileMenu');

if (mobileMenuBtn && mobileMenu) {
  mobileMenuBtn.addEventListener('click', () => {
    mobileMenu.classList.toggle('hidden');
    // Swap icon between menu and x
    const icon = mobileMenuBtn.querySelector('[data-feather]');
    if (icon) {
      icon.setAttribute('data-feather', mobileMenu.classList.contains('hidden') ? 'menu' : 'x');
      if (window.feather && typeof feather.replace === 'function') feather.replace();
    }
  });
}

// Billing toggle: monthly/yearly
const billMonthly = document.getElementById('billMonthly');
const billYearly = document.getElementById('billYearly');
const priceEls = document.querySelectorAll('[data-price]');
let yearly = true;

function updateBillingUI() {
  const monthlyBtn = billMonthly;
  const yearlyBtn = billYearly;
  if (!monthlyBtn || !yearlyBtn) return;

  if (yearly) {
    yearlyBtn.classList.remove('text-slate-700', 'bg-white');
    yearlyBtn.classList.add('text-white', 'bg-brand-600');
    monthlyBtn.classList.remove('text-white', 'bg-brand-600');
    monthlyBtn.classList.add('text-slate-700', 'bg-white');
  } else {
    monthlyBtn.classList.remove('text-slate-700', 'bg-white');
    monthlyBtn.classList.add('text-white', 'bg-brand-600');
    yearlyBtn.classList.remove('text-white', 'bg-brand-600');
    yearlyBtn.classList.add('text-slate-700', 'bg-white');
  }
}

function updatePrices() {
  priceEls.forEach((el) => {
    const monthly = el.getAttribute('data-monthly');
    const yearlyPrice = el.getAttribute('data-yearly');
    const value = yearly ? yearlyPrice : monthly;
    el.textContent = value === '0' ? '$0' : `$${value}`;
  });
}

if (billMonthly && billYearly) {
  billMonthly.addEventListener('click', () => {
    yearly = false;
    updateBillingUI();
    updatePrices();
  });
  billYearly.addEventListener('click', () => {
    yearly = true;
    updateBillingUI();
    updatePrices();
  });
  updateBillingUI();
  updatePrices();
}

// Demo modal
const demoModal = document.getElementById('demoModal');
const demoFrame = document.getElementById('demoFrame');
const openDemo = document.getElementById('openDemo');
const demoPlayOverlay = document.getElementById('demoPlayOverlay');
const closeDemo = document.getElementById('closeDemo');

function openDemoModal() {
  if (!demoModal || !demoFrame) return;
  // Public demo video; use muted + playsinline to allow autoplay
  demoFrame.src = 'https://www.youtube.com/embed/9bZkp7q19f0?autoplay=1&modestbranding=1&rel=0';
  demoModal.classList.remove('hidden');
  document.body.style.overflow = 'hidden';
}
function closeDemoModal() {
  if (!demoModal || !demoFrame) return;
  demoFrame.src = '';
  demoModal.classList.add('hidden');
  document.body.style.overflow = '';
}

if (openDemo) openDemo.addEventListener('click', openDemoModal);
if (demoPlayOverlay) demoPlayOverlay.addEventListener('click', openDemoModal);
if (closeDemo) closeDemo.addEventListener('click', closeDemoModal);
if (demoModal) {
  demoModal.addEventListener('click', (e) => {
    if (e.target === demoModal) closeDemoModal();
  });
}

// Close on Escape
window.addEventListener('keydown', (e) => {
  if (e.key === 'Escape' && demoModal && !demoModal.classList.contains('hidden')) {
    closeDemoModal();
  }
});

// Footer year
const yearEl = document.getElementById('year');
if (yearEl) yearEl.textContent = new Date().getFullYear();