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

<main>
   <!-- tp-hero-area-start -->
   <div class="tp-hero-area tp-hero-bg tp-hero-two-ptb z-index-2 p-relative" style="background-color:#0b1320;">
      <div class="container">
         <div class="row align-items-center">
            <div class="col-12">
               <div class="tp-hero-content text-center mb-30">
                  <h2 class="tp-hero-title fw-600 mb-15">Explore the World with <br><%= site.site_name || 'RouteMate' %></h2>
                  <p class="tp-hero-dec mb-30"><%= site.site_tagline || 'Find Amazing Travel Spots Around The Globe' %></p>
                  <div class="tp-booking-form tp-booking-form-two d-inline-block text-start">
                     <form action="/tours" method="get">
                        <div class="tp-booking-wrap tp-marker-tab p-relative" style="display:flex; align-items:center; gap:10px;">
                           <input class="tp-input" type="text" name="search" placeholder="Where do you want to go?" style="min-width:280px;">
                           <button class="tp-btn" type="submit">Search Tours</button>
                        </div>
                     </form>
                  </div>
               </div>
            </div>
         </div>
      </div>
   </div>
   <!-- tp-hero-area-end -->

   <!-- destinations start -->
   <div class="tp-category-area pt-120 pb-90">
      <div class="container">
         <div class="row">
            <div class="col-12">
               <div class="tp-section-title-wrap mb-45 text-center">
                  <span class="tp-section-subtitle mb-15">Top Destinations</span>
                  <h2 class="tp-section-title">Explore Popular Destinations</h2>
               </div>
            </div>
         </div>
         <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-xl-2 col-lg-4 col-md-4 col-sm-6 mb-30">
                  <a href="/destinations/<%= dest.slug %>" class="tp-category-item d-block text-center" style="border:1px solid var(--tp-border-primary, #eee); border-radius:10px; padding:20px 10px;">
                     <% if (dest.hero_image) { %>
                        <img src="<%= resolveUpload(dest.hero_image) %>" alt="<%= dest.name %>" style="width:100%; height:120px; object-fit:cover; border-radius:8px; margin-bottom:10px;">
                     <% } %>
                     <h4 style="font-size:16px; margin-bottom:4px;"><%= dest.name %></h4>
                     <span style="font-size:13px; color:#777;"><%= dest.tour_count %> Tour<%= dest.tour_count !== 1 ? 's' : '' %></span>
                  </a>
               </div>
            <% }) %>
         </div>
      </div>
   </div>
   <!-- destinations end -->

   <!-- featured tours start -->
   <div class="tp-product-area pb-90">
      <div class="container">
         <div class="row">
            <div class="col-12">
               <div class="tp-section-title-wrap mb-45 text-center">
                  <span class="tp-section-subtitle mb-15">Handpicked For You</span>
                  <h2 class="tp-section-title">Our Popular Tour Packages</h2>
               </div>
            </div>
         </div>
         <div class="row">
            <% if (tours.length === 0) { %>
               <div class="col-12 text-center"><p>New tour packages coming soon.</p></div>
            <% } %>
            <% tours.forEach(function(tour) { %>
               <%- include('../partials/tour-card', { tour }) %>
            <% }) %>
         </div>
         <div class="text-center mt-20">
            <a href="/tours" class="tp-btn">View All Tour Packages</a>
         </div>
      </div>
   </div>
   <!-- featured tours end -->

   <!-- why choose us start -->
   <div class="tp-choose-area pt-90 pb-90" style="background:#f8f9fb;">
      <div class="container">
         <div class="row align-items-center">
            <div class="col-lg-6">
               <div class="tp-section-title-wrap mb-30">
                  <span class="tp-section-subtitle mb-15">Why Choose Us</span>
                  <h2 class="tp-section-title mb-20">Your Trusted Partner for International Travel</h2>
                  <p>As an international travel agency based in India, we combine local expertise with global reach to craft journeys tailored to you — from documentation support to on-ground assistance at your destination.</p>
               </div>
            </div>
            <div class="col-lg-6">
               <div class="row">
                  <div class="col-sm-6 mb-25">
                     <h4 style="font-size:17px; margin-bottom:8px;">Curated Packages</h4>
                     <p style="font-size:14px; color:#666;">Hand-picked itineraries across domestic and international destinations.</p>
                  </div>
                  <div class="col-sm-6 mb-25">
                     <h4 style="font-size:17px; margin-bottom:8px;">Expert Guidance</h4>
                     <p style="font-size:14px; color:#666;">Dedicated travel experts to help plan every step of your journey.</p>
                  </div>
                  <div class="col-sm-6 mb-25">
                     <h4 style="font-size:17px; margin-bottom:8px;">Transparent Pricing</h4>
                     <p style="font-size:14px; color:#666;">No hidden costs — clear pricing on every package.</p>
                  </div>
                  <div class="col-sm-6 mb-25">
                     <h4 style="font-size:17px; margin-bottom:8px;">24/7 Support</h4>
                     <p style="font-size:14px; color:#666;">Round-the-clock assistance before, during and after your trip.</p>
                  </div>
               </div>
            </div>
         </div>
      </div>
   </div>
   <!-- why choose us end -->

   <!-- testimonials start -->
   <% if (testimonials.length > 0) { %>
   <div class="tp-testimonial-area pt-90 pb-90">
      <div class="container">
         <div class="row">
            <div class="col-12">
               <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>
         </div>
         <div class="row">
            <% testimonials.forEach(function(t) { %>
               <div class="col-lg-4 col-md-6 mb-30">
                  <div class="tp-testimonial-item" style="border:1px solid #eee; border-radius:10px; padding:25px;">
                     <div class="mb-10">
                        <% for (let i = 0; i < t.rating; i++) { %><i class="fas fa-star" style="color:#f5a623;"></i><% } %>
                     </div>
                     <p style="font-size:14px; color:#555; margin-bottom:15px;">"<%= t.message %>"</p>
                     <div style="display:flex; align-items:center; gap:10px;">
                        <% if (t.avatar) { %>
                           <img src="<%= resolveUpload(t.avatar) %>" alt="<%= t.name %>" style="width:44px; height:44px; border-radius:50%; object-fit:cover;">
                        <% } %>
                        <div>
                           <strong style="display:block; font-size:14px;"><%= t.name %></strong>
                           <span style="font-size:12px; color:#888;"><%= t.designation %></span>
                        </div>
                     </div>
                  </div>
               </div>
            <% }) %>
         </div>
      </div>
   </div>
   <% } %>
   <!-- testimonials end -->

   <!-- blog preview start -->
   <% if (blogs.length > 0) { %>
   <div class="tp-blog-area pt-90 pb-120" style="background:#f8f9fb;">
      <div class="container">
         <div class="row">
            <div class="col-12">
               <div class="tp-section-title-wrap mb-45 text-center">
                  <span class="tp-section-subtitle mb-15">From The Blog</span>
                  <h2 class="tp-section-title">Travel Guides & Stories</h2>
               </div>
            </div>
         </div>
         <div class="row">
            <% blogs.forEach(function(post) { %>
               <div class="col-lg-4 col-md-6 mb-30">
                  <a href="/blog/<%= post.slug %>" class="d-block" style="border:1px solid #eee; border-radius:10px; overflow:hidden; background:#fff;">
                     <% if (post.cover_image) { %>
                        <img src="<%= resolveUpload(post.cover_image) %>" alt="<%= post.title %>" style="width:100%; height:180px; object-fit:cover;">
                     <% } %>
                     <div style="padding:18px;">
                        <span style="font-size:12px; color:#999;"><%= new Date(post.published_at).toLocaleDateString() %></span>
                        <h4 style="font-size:16px; margin:8px 0; color:#222;"><%= post.title %></h4>
                        <p style="font-size:13px; color:#777;"><%= post.excerpt %></p>
                     </div>
                  </a>
               </div>
            <% }) %>
         </div>
      </div>
   </div>
   <% } %>
   <!-- blog preview end -->
</main>

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