const navToggle = document.querySelector('.nav-toggle');
const mainNav = document.querySelector('.main-nav');
const dropdown = document.querySelector('.nav-dropdown');
const dropdownTrigger = document.querySelector('.dropdown-trigger');

navToggle?.addEventListener('click', () => {
  const open = mainNav.classList.toggle('open');
  document.body.classList.toggle('nav-open', open);
  navToggle.setAttribute('aria-expanded', String(open));
});

dropdownTrigger?.addEventListener('click', () => {
  const open = dropdown.classList.toggle('open');
  dropdownTrigger.setAttribute('aria-expanded', String(open));
});

document.querySelectorAll('.flow-tab').forEach((tab, index) => {
  tab.addEventListener('click', () => {
    document.querySelectorAll('.flow-tab').forEach(item => item.classList.remove('active'));
    document.querySelectorAll('.flow-list').forEach(item => item.classList.remove('active'));
    tab.classList.add('active');
    document.querySelectorAll('.flow-list')[index]?.classList.add('active');
  });
});

document.querySelectorAll('.feature-tab').forEach((tab, index) => {
  tab.setAttribute('role', 'tab');
  tab.setAttribute('aria-selected', String(tab.classList.contains('active')));
  tab.addEventListener('click', () => {
    document.querySelectorAll('.feature-tab').forEach(item => {
      item.classList.remove('active');
      item.setAttribute('aria-selected', 'false');
    });
    document.querySelectorAll('.feature-detail').forEach(item => item.classList.remove('active'));
    document.querySelectorAll('.device-state').forEach(item => {
      item.classList.remove('active');
      item.setAttribute('aria-hidden', 'true');
    });
    tab.classList.add('active');
    tab.setAttribute('aria-selected', 'true');
    document.querySelectorAll('.feature-detail')[index]?.classList.add('active');
    const deviceState = document.querySelectorAll('.device-state')[index];
    deviceState?.classList.add('active');
    deviceState?.removeAttribute('aria-hidden');
  });
  tab.addEventListener('mouseenter', () => {
    if (!tab.classList.contains('active')) tab.click();
  });
});

const observer = new IntersectionObserver(entries => {
  entries.forEach(entry => {
    if (entry.isIntersecting) {
      entry.target.classList.add('visible');
      observer.unobserve(entry.target);
    }
  });
}, { threshold: 0.08 });
document.querySelectorAll('.reveal').forEach(item => observer.observe(item));

document.querySelector('.phone-form')?.addEventListener('submit', event => {
  event.preventDefault();
  const input = event.currentTarget.querySelector('input');
  const button = event.currentTarget.querySelector('button');
  if (!input.value.trim()) {
    input.focus();
    return;
  }
  button.textContent = '提交成功';
  button.disabled = true;
});

const qrModal = document.querySelector('#qr-modal');
const qrModalClose = qrModal?.querySelector('.qr-modal-close');
let qrModalLastFocus = null;

const openQrModal = event => {
  event.preventDefault();
  if (!qrModal) return;
  qrModalLastFocus = event.currentTarget;
  qrModal.hidden = false;
  document.body.classList.add('modal-open');
  qrModalClose?.focus();
};

const closeQrModal = () => {
  if (!qrModal || qrModal.hidden) return;
  qrModal.hidden = true;
  document.body.classList.remove('modal-open');
  qrModalLastFocus?.focus();
};

document.querySelectorAll('.qr-trigger').forEach(trigger => {
  trigger.addEventListener('click', openQrModal);
});
qrModalClose?.addEventListener('click', closeQrModal);
qrModal?.querySelector('[data-modal-close]')?.addEventListener('click', closeQrModal);
document.addEventListener('keydown', event => {
  if (event.key === 'Escape') closeQrModal();
});
document.querySelectorAll('[data-link-placeholder]').forEach(link => {
  link.addEventListener('click', event => event.preventDefault());
});