<%- include('../partials/head', { metaTitle: destination.meta_title || ('Things to do in ' + destination.name), metaDescription: destination.meta_description }) %>
<%- include('../partials/offcanvas') %>
<%- include('../partials/header') %>

<main>
   <div class="tp-breadcrumb__area pt-40 pb-40" style="background:#f8f9fb;">
      <div class="container">
         <span style="font-size:12px; color:#999; text-transform:uppercase;">Destination &middot; <%= destination.country %></span>
         <h1 style="font-size:28px; margin:6px 0;"><%= destination.name %></h1>
         <p style="color:#777; font-size:14px;"><%= tours.length %> tour package<%= tours.length !== 1 ? 's' : '' %> available in <%= destination.name %>.</p>
      </div>
   </div>

   <% if (destination.hero_image) { %>
      <div class="container pt-40">
         <img src="<%= resolveUpload(destination.hero_image) %>" alt="<%= destination.name %>" style="width:100%; height:320px; object-fit:cover; border-radius:10px;">
      </div>
   <% } %>

   <% if (destination.description) { %>
      <div class="container pt-40">
         <div style="font-size:15px; color:#333; line-height:1.8; max-width:820px;"><%- destination.description %></div>
      </div>
   <% } %>

   <div class="pt-40 pb-100">
      <div class="container">
         <div class="row">
            <% if (tours.length === 0) { %>
               <div class="col-12 text-center"><p>No packages available for this destination yet. <a href="/contact">Contact us</a> for a custom itinerary.</p></div>
            <% } %>
            <% tours.forEach(function(tour) { %>
               <%- include('../partials/tour-card', { tour }) %>
            <% }) %>
         </div>
      </div>
   </div>
</main>

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