// Contact Page JavaScript
let isQuickMenuOpen = false;

// Quick Menu functionality
function toggleQuickMenu() {
  const panel = document.getElementById('quickMenuPanel');
  const btn = document.getElementById('quickMenuBtn');
  
  if (isQuickMenuOpen) {
    panel.classList.remove('opacity-100', 'translate-x-0', 'pointer-events-auto');
    panel.classList.add('opacity-0', 'translate-x-4', 'pointer-events-none');
    btn.classList.remove('rotate-45');
  } else {
    panel.classList.remove('opacity-0', 'translate-x-4', 'pointer-events-none');
    panel.classList.add('opacity-100', 'translate-x-0', 'pointer-events-auto');
    btn.classList.add('rotate-45');
  }
  isQuickMenuOpen = !isQuickMenuOpen;
}

function closeQuickMenu() {
  const panel = document.getElementById('quickMenuPanel');
  const btn = document.getElementById('quickMenuBtn');
  
  panel.classList.remove('opacity-100', 'translate-x-0', 'pointer-events-auto');
  panel.classList.add('opacity-0', 'translate-x-4', 'pointer-events-none');
  btn.classList.remove('rotate-45');
  isQuickMenuOpen = false;
}

function handleQuickMenuClick() {
  toggleQuickMenu();
}

function handleQuickMenuClose() {
  closeQuickMenu();
}

function handleOutsideClick(event) {
  const panel = document.getElementById('quickMenuPanel');
  const btn = document.getElementById('quickMenuBtn');
  
  if (isQuickMenuOpen && !panel.contains(event.target) && !btn.contains(event.target)) {
    closeQuickMenu();
  }
}

// Contact form functionality
function handleInquiryTypeChange(event) {
  const travelDetails = document.querySelector('.travel-details');
  const inquiryType = event.target.value;
  
  if (inquiryType === 'booking') {
    travelDetails.classList.remove('hidden');
    travelDetails.classList.add('show');
  } else {
    travelDetails.classList.add('hidden');
    travelDetails.classList.remove('show');
  }
}

function handleFormSubmit(event) {
  // The form will be handled by the landingsite system
  // Add any additional validation or tracking here if needed
  
  // Add loading state to submit button
  const submitButton = event.target.querySelector('button[type="submit"]');
  const originalText = submitButton.innerHTML;
  
  submitButton.innerHTML = '<i class="fas fa-spinner fa-spin mr-3"></i>Sending...';
  submitButton.disabled = true;
  
  // Reset after a delay (the actual form submission will happen via the landingsite system)
  setTimeout(() => {
    submitButton.innerHTML = originalText;
    submitButton.disabled = false;
  }, 2000);
}

function init() {
  // Quick Menu event listeners
  const quickMenuBtn = document.getElementById('quickMenuBtn');
  const quickMenuClose = document.getElementById('quickMenuClose');
  
  if (quickMenuBtn) {
    quickMenuBtn.addEventListener('click', handleQuickMenuClick);
  }
  
  if (quickMenuClose) {
    quickMenuClose.addEventListener('click', handleQuickMenuClose);
  }
  
  // Close menu when clicking outside
  document.addEventListener('click', handleOutsideClick);
  
  // Close menu when pressing Escape key
  document.addEventListener('keydown', function(event) {
    if (event.key === 'Escape' && isQuickMenuOpen) {
      closeQuickMenu();
    }
  });
  
  // Contact form enhancements
  const inquiryTypeInputs = document.querySelectorAll('input[name="inquiry_type"]');
  inquiryTypeInputs.forEach(input => {
    input.addEventListener('change', handleInquiryTypeChange);
  });
  
  // Form submission enhancement
  const contactForm = document.querySelector('form[data-landingsite-contact-form]');
  if (contactForm) {
    contactForm.addEventListener('submit', handleFormSubmit);
  }
  
  // Add animation to form elements on scroll
  const observerOptions = {
    threshold: 0.1,
    rootMargin: '0px 0px -50px 0px'
  };
  
  const observer = new IntersectionObserver((entries) => {
    entries.forEach(entry => {
      if (entry.isIntersecting) {
        entry.target.classList.add('animate-fade-in');
      }
    });
  }, observerOptions);
  
  // Observe form sections
  const formSections = document.querySelectorAll('.space-y-6 > div, .bg-white.rounded-3xl, .space-y-8 > div');
  formSections.forEach(section => {
    observer.observe(section);
  });
}

function teardown() {
  const quickMenuBtn = document.getElementById('quickMenuBtn');
  const quickMenuClose = document.getElementById('quickMenuClose');
  
  if (quickMenuBtn) {
    quickMenuBtn.removeEventListener('click', handleQuickMenuClick);
  }
  
  if (quickMenuClose) {
    quickMenuClose.removeEventListener('click', handleQuickMenuClose);
  }
  
  document.removeEventListener('click', handleOutsideClick);
  
  // Remove contact form listeners
  const inquiryTypeInputs = document.querySelectorAll('input[name="inquiry_type"]');
  inquiryTypeInputs.forEach(input => {
    input.removeEventListener('change', handleInquiryTypeChange);
  });
  
  const contactForm = document.querySelector('form[data-landingsite-contact-form]');
  if (contactForm) {
    contactForm.removeEventListener('submit', handleFormSubmit);
  }
  
  // Reset state
  isQuickMenuOpen = false;
}

export { init, teardown };