<%- 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;">Destinations</h1>
         <p style="color:#777; font-size:14px;">Explore the countries and states we operate tour packages in.</p>
      </div>
   </div>

   <div class="pt-60 pb-100">
      <div class="container">
         <div class="row">
            <% if (destinations.length === 0) { %>
               <div class="col-12 text-center"><p>Destinations coming soon.</p></div>
            <% } %>
            <% destinations.forEach(function(dest) { %>
               <div class="col-lg-3 col-md-4 col-sm-6 mb-30">
                  <a href="/destinations/<%= dest.slug %>" class="d-block text-center" style="border:1px solid #eee; border-radius:10px; overflow:hidden;">
                     <% if (dest.hero_image) { %>
                        <img src="<%= resolveUpload(dest.hero_image) %>" alt="<%= dest.name %>" style="width:100%; height:150px; object-fit:cover;">
                     <% } else { %>
                        <div style="width:100%; height:150px; background:#f0f0f0;"></div>
                     <% } %>
                     <div style="padding:15px;">
                        <h4 style="font-size:16px; margin-bottom:4px; color:#222;"><%= dest.name %></h4>
                        <span style="font-size:13px; color:#777;"><%= dest.country %> &middot; <%= dest.tour_count %> Package<%= dest.tour_count !== 1 ? 's' : '' %></span>
                     </div>
                  </a>
               </div>
            <% }) %>
         </div>
      </div>
   </div>
</main>

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