<%- include('../partials/head') %>
<%- include('../partials/offcanvas') %>
<%- include('../partials/header') %>

<main>
   <div class="tp-breadcrumb__area pt-40 pb-40" style="background:#f8f9fb;">
      <div class="container">
         <h1 style="font-size:28px; margin-bottom:6px;">Frequently Asked Questions</h1>
         <p style="color:#777; font-size:14px;">Answers to common questions about booking, payments and cancellations.</p>
      </div>
   </div>

   <div class="pt-60 pb-100">
      <div class="container">
         <div class="row">
            <div class="col-lg-8 mx-auto">
               <% const categories = Object.keys(grouped); %>
               <% if (categories.length === 0) { %>
                  <p class="text-center">FAQs coming soon.</p>
               <% } %>
               <% categories.forEach(function(cat, catIdx) { %>
                  <h3 style="font-size:19px; margin:30px 0 15px;"><%= cat %></h3>
                  <div class="tp-accordion">
                     <% grouped[cat].forEach(function(faq, idx) { %>
                        <% const accId = 'faq-' + catIdx + '-' + idx; %>
                        <div style="border:1px solid #eee; border-radius:8px; margin-bottom:10px;">
                           <button
                              type="button"
                              class="faq-toggle"
                              data-target="#<%= accId %>"
                              style="width:100%; text-align:left; padding:16px 20px; background:none; border:none; font-size:15px; font-weight:600; display:flex; justify-content:space-between; align-items:center; cursor:pointer;"
                           >
                              <span><%= faq.question %></span>
                              <i class="fas fa-chevron-down"></i>
                           </button>
                           <div id="<%= accId %>" class="faq-panel" style="display:none; padding:0 20px 16px; font-size:14px; color:#555; line-height:1.7;">
                              <%= faq.answer %>
                           </div>
                        </div>
                     <% }) %>
                  </div>
               <% }) %>
            </div>
         </div>
      </div>
   </div>
</main>

<script>
   document.querySelectorAll('.faq-toggle').forEach(function (btn) {
      btn.addEventListener('click', function () {
         var panel = document.querySelector(btn.getAttribute('data-target'));
         panel.style.display = panel.style.display === 'block' ? 'none' : 'block';
      });
   });
</script>

<%- include('../partials/footer') %>
<%- include('../partials/scripts') %>
