(function() {
  const init = () => {
    const qtyBtns = document.querySelectorAll('.qty-btn');
    const qtyInput = document.querySelector('.qty-input');
    const totalPrice = document.querySelector('.total-price');
    const unitPrice = 149;
    
    qtyBtns.forEach(btn => {
      btn.addEventListener('click', () => {
        const action = btn.dataset.action;
        let currentVal = parseInt(qtyInput.value);
        
        if (action === 'increase' && currentVal < 10) {
          currentVal++;
        } else if (action === 'decrease' && currentVal > 1) {
          currentVal--;
        }
        
        qtyInput.value = currentVal;
        totalPrice.textContent = (currentVal * unitPrice).toLocaleString();
      });
    });
    
    const mobileMenuBtn = document.querySelector('nav button[aria-label="Menu"]');
    const nav = document.querySelector('nav');
    
    if (mobileMenuBtn) {
      mobileMenuBtn.addEventListener('click', () => {
        const isExpanded = mobileMenuBtn.getAttribute('aria-expanded') === 'true';
        mobileMenuBtn.setAttribute('aria-expanded', !isExpanded);
        
        let mobileMenu = nav.querySelector('.mobile-menu');
        
        if (!mobileMenu) {
          mobileMenu = document.createElement('div');
          mobileMenu.className = 'mobile-menu absolute top-full left-0 right-0 bg-white border-t border-slate-100 p-6 md:hidden';
          mobileMenu.innerHTML = `
            <div class="flex flex-col gap-4">
              <a href="#features" class="text-sm font-medium text-slate-600 hover:text-amber-600 transition-colors">Features</a>
              <a href="#reviews" class="text-sm font-medium text-slate-600 hover:text-amber-600 transition-colors">Reviews</a>
              <a href="#faq" class="text-sm font-medium text-slate-600 hover:text-amber-600 transition-colors">FAQ</a>
              <a href="#buy" class="inline-flex items-center justify-center gap-2 px-5 py-2.5 bg-amber-500 hover:bg-amber-600 text-white text-sm font-semibold rounded-lg transition-colors">Pre-Order Now</a>
            </div>
          `;
          nav.style.position = 'relative';
          nav.appendChild(mobileMenu);
        }
        
        mobileMenu.style.display = isExpanded ? 'none' : 'block';
      });
    }
    
    document.querySelectorAll('a[href^="#"]').forEach(anchor => {
      anchor.addEventListener('click', function(e) {
        const href = this.getAttribute('href');
        if (href === '#') return;
        
        e.preventDefault();
        const target = document.querySelector(href);
        if (target) {
          target.scrollIntoView({ behavior: 'smooth', block: 'start' });
          
          const mobileMenu = document.querySelector('.mobile-menu');
          if (mobileMenu) mobileMenu.style.display = 'none';
        }
      });
    });
  };
  
  if (document.readyState === 'loading') {
    document.addEventListener('DOMContentLoaded', init);
  } else {
    init();
  }
})();