/**
 * PilesVeda - Minimal Native JavaScript
 * Domain: pilescare.jivanshaktiayurveda.com
 * No external libraries or frameworks.
 */

document.addEventListener('DOMContentLoaded', function () {
  // 1. FAQ Accordion Toggle
  const faqButtons = document.querySelectorAll('.faq-button');
  faqButtons.forEach(function (button) {
    button.addEventListener('click', function () {
      const item = this.closest('.faq-item');
      const isActive = item.classList.contains('active');

      // Close all active FAQs
      document.querySelectorAll('.faq-item').forEach(function (el) {
        el.classList.remove('active');
        const ans = el.querySelector('.faq-answer');
        if (ans) {
          ans.style.maxHeight = null;
        }
      });

      // If it was not active, open it
      if (!isActive) {
        item.classList.add('active');
        const answer = item.querySelector('.faq-answer');
        if (answer) {
          answer.style.maxHeight = answer.scrollHeight + 'px';
        }
      }
    });
  });

  // Open the first FAQ item by default for better initial UX
  const firstFaq = document.querySelector('.faq-item');
  if (firstFaq) {
    firstFaq.classList.add('active');
    const firstAns = firstFaq.querySelector('.faq-answer');
    if (firstAns) {
      firstAns.style.maxHeight = firstAns.scrollHeight + 'px';
    }
  }

  // 2. Direct Smooth Scroll to Lead Form & Auto Select Product
  const productOrderButtons = document.querySelectorAll('[data-select-product], a[href="#order-form"], a[href="#lead-order-box"]');
  productOrderButtons.forEach(function (btn) {
    btn.addEventListener('click', function (e) {
      e.preventDefault();
      const selectedProd = this.getAttribute('data-select-product');
      if (selectedProd) {
        const prodRadio = document.querySelector('input[name="product"][value="' + selectedProd + '"]');
        if (prodRadio) {
          prodRadio.checked = true;
          // Trigger change event to update any visual highlight
          prodRadio.dispatchEvent(new Event('change'));
        }
      }

      const formBox = document.getElementById('lead-order-box') || document.getElementById('pilescare_order_form') || document.getElementById('order-form');
      if (formBox) {
        formBox.scrollIntoView({ behavior: 'smooth', block: 'center' });
        
        // Auto focus input field with slight delay to allow smooth scroll
        setTimeout(function () {
          const nameInput = document.getElementById('customer_name');
          if (nameInput) {
            nameInput.focus();
          }
        }, 400);
      }
    });
  });

  // Handle product radio card visual active state
  const productRadios = document.querySelectorAll('input[name="product"]');
  productRadios.forEach(function (radio) {
    radio.addEventListener('change', function () {
      document.querySelectorAll('.product-select-card').forEach(function (card) {
        card.classList.remove('border-emerald-600', 'bg-emerald-50/50', 'ring-2', 'ring-emerald-500');
        card.classList.add('border-gray-200');
      });
      const parentCard = this.closest('.product-select-card');
      if (parentCard) {
        parentCard.classList.remove('border-gray-200');
        parentCard.classList.add('border-emerald-600', 'bg-emerald-50/50', 'ring-2', 'ring-emerald-500');
      }
    });
  });

  // 3. Policy Modals (Terms, Privacy, Refund, Shipping)
  const modalOpenButtons = document.querySelectorAll('[data-open-modal]');
  const modalCloseButtons = document.querySelectorAll('[data-close-modal]');

  modalOpenButtons.forEach(function (btn) {
    btn.addEventListener('click', function (e) {
      e.preventDefault();
      const modalId = this.getAttribute('data-open-modal');
      const targetModal = document.getElementById(modalId);
      if (targetModal) {
        targetModal.classList.add('active');
        document.body.style.overflow = 'hidden';
      }
    });
  });

  modalCloseButtons.forEach(function (btn) {
    btn.addEventListener('click', function () {
      const modal = this.closest('.modal-overlay');
      if (modal) {
        modal.classList.remove('active');
        document.body.style.overflow = '';
      }
    });
  });

  // Close modal when clicking outside content
  document.querySelectorAll('.modal-overlay').forEach(function (overlay) {
    overlay.addEventListener('click', function (e) {
      if (e.target === this) {
        this.classList.remove('active');
        document.body.style.overflow = '';
      }
    });
  });
});