<%- include('../partials/head', { metaTitle: page.meta_title, metaDescription: page.meta_description }) %>
<%- 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;"><%= page.title %></h1>
      </div>
   </div>

   <div class="pt-60 pb-90">
      <div class="container">
         <div class="row">
            <div class="col-lg-8 mx-auto">
               <div style="font-size:15px; color:#333; line-height:1.8;"><%- page.content %></div>
            </div>
         </div>
      </div>
   </div>

   <% if (testimonials.length > 0) { %>
   <div class="pt-30 pb-90" style="background:#f8f9fb;">
      <div class="container">
         <div class="tp-section-title-wrap mb-45 text-center">
            <span class="tp-section-subtitle mb-15">Testimonials</span>
            <h2 class="tp-section-title">What Our Travellers Say</h2>
         </div>
         <div class="row">
            <% testimonials.forEach(function(t) { %>
               <div class="col-lg-4 col-md-6 mb-30">
                  <div style="border:1px solid #eee; border-radius:10px; padding:25px; background:#fff;">
                     <p style="font-size:14px; color:#555; margin-bottom:15px;">"<%= t.message %>"</p>
                     <strong style="font-size:14px;"><%= t.name %></strong>
                     <span style="font-size:12px; color:#888; display:block;"><%= t.designation %></span>
                  </div>
               </div>
            <% }) %>
         </div>
      </div>
   </div>
   <% } %>
</main>

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