/**
 * support.js
 *
 * Powers the Support page.
 *
 * Features:
 *   1. FAQ accordion
 *      - Loads Q&A pairs from `./data/faq.json`.
 *      - Renders each as a Bootstrap accordion item so only one
 *        answer is open at a time.
 *
 *   2. Contact form
 *      - Validates that all fields have been filled in.
 *      - Displays an inline success or error alert above the form.
 *      - Does not currently persist messages; the form is purely a
 *        frontend demonstration (see README / features notes).
 */

const faqContainer = document.getElementById('faqContainer');
const contactForm = document.getElementById('contactForm');
const contactStatus = document.getElementById('contactStatus');

async function loadFaqs() {
  try {
    const response = await fetch('./data/faq.json');
    if (!response.ok) {
      throw new Error(`Failed to load FAQs: ${response.status}`);
    }
    const data = await response.json();
    renderFaqs(data.faqs);
  } catch (error) {
    console.error('Error:', error);
    faqContainer.innerHTML = `<p class="text-white text-center">Unable to load FAQs.</p>`;
  }
}

function renderFaqs(faqs) {
  faqContainer.innerHTML = '';
  faqs.forEach((faq, i) => {
    const item = document.createElement('div');
    item.className = 'accordion-item';
    item.innerHTML = `
      <h2 class="accordion-header">
        <button class="accordion-button collapsed" type="button" data-bs-toggle="collapse"
          data-bs-target="#faq-${i}" aria-expanded="false" aria-controls="faq-${i}">
          ${faq.question}
        </button>
      </h2>
      <div id="faq-${i}" class="accordion-collapse collapse" data-bs-parent="#faqContainer">
        <div class="accordion-body">${faq.answer}</div>
      </div>
    `;
    faqContainer.appendChild(item);
  });
}

contactForm.addEventListener('submit', (event) => {
  event.preventDefault();
  const name = contactForm.name.value.trim();
  const email = contactForm.email.value.trim();
  const message = contactForm.message.value.trim();

  if (!name || !email || !message) {
    showStatus('Please fill out all fields.', 'danger');
    return;
  }

  showStatus('Thanks, your message has been received. We will get back to you shortly.', 'success');
  contactForm.reset();
});

function showStatus(message, type) {
  contactStatus.className = `alert alert-${type}`;
  contactStatus.textContent = message;
  contactStatus.classList.remove('d-none');
}

window.addEventListener('DOMContentLoaded', loadFaqs);