<%- include('../layouts/top') %>

<%- include('../components/page-hero', {
  heroTitle: svc.h1,
  heroLead: svc.lead,
  heroEyebrow: 'Transportation services',
  heroImage: svc.image,
  heroCtas: { primary: 'Get a Quote', primaryHref: '/quote?service=' + svc.slug, secondary: 'Contact Us', secondaryHref: '/contact' }
}) %>

<section class="section" aria-labelledby="overview-title">
  <div class="container split">
    <div class="reveal">
      <p class="eyebrow">Overview</p>
      <h2 id="overview-title"><%= svc.name %> with HK Logistics</h2>
      <% svc.body.forEach(function (para, i) { %><p<%= i === 0 ? ' class=lead' : '' %>><%= para %></p><% }) %>
      <h3>What is included</h3>
      <ul class="check-list">
        <% svc.features.forEach(function (f) { %><li><%- icon('check') %><%= f %></li><% }) %>
      </ul>
      <div class="btn-row">
        <a class="btn" href="/quote?service=<%= svc.slug %>">Request a quote<%- icon('arrow-right', 'icon--arrow') %></a>
        <a class="btn btn--outline" href="/contact">Talk to our team</a>
      </div>
    </div>
    <div class="media-frame reveal">
      <%- img(svc.image, { alt: svc.imageAlt, sizes: '(min-width: 960px) 50vw, 100vw' }) %>
    </div>
  </div>
</section>

<section class="section section--alt" aria-labelledby="benefits-title">
  <div class="container">
    <div class="section-head">
      <p class="eyebrow">Benefits</p>
      <h2 id="benefits-title">Why businesses choose this service</h2>
    </div>
    <div class="grid grid--3">
      <% svc.benefits.forEach(function (b, i) { %>
        <div class="card reveal">
          <span class="icon-tile"><%- icon(['shield', 'clock', 'clipboard'][i % 3]) %></span>
          <h3><%= b.title %></h3>
          <p><%= b.text %></p>
        </div>
      <% }) %>
    </div>
  </div>
</section>

<section class="section" aria-labelledby="process-title">
  <div class="container">
    <div class="section-head">
      <p class="eyebrow">How it works</p>
      <h2 id="process-title">How we plan and run your movement</h2>
      <p>The same documented process applies to every consignment, from enquiry to safe delivery.</p>
    </div>
    <%- include('../components/process', { steps: content.processSteps }) %>
  </div>
</section>

<section class="section section--alt" aria-labelledby="faq-title">
  <div class="container container--narrow">
    <div class="section-head">
      <p class="eyebrow">FAQ</p>
      <h2 id="faq-title"><%= svc.shortName %>: common questions</h2>
    </div>
    <%- include('../components/faq-list', { items: svc.faqs, openFirst: true }) %>
  </div>
</section>

<section class="section" aria-labelledby="related-title">
  <div class="container">
    <div class="section-head section-head__row">
      <div>
        <p class="eyebrow">Related services</p>
        <h2 id="related-title">Other ways we can move your goods</h2>
      </div>
      <a class="link-arrow" href="/services">All transportation services<%- icon('arrow-right') %></a>
    </div>
    <div class="grid grid--3">
      <% related.forEach(function (s) { %><%- include('../components/service-card', { s: s }) %><% }) %>
    </div>
  </div>
</section>

<%- include('../components/cta-band', { ctaTitle: 'Get a quote for ' + svc.shortName.toLowerCase().replace('(ftl)', '(FTL)').replace('(odc)', '(ODC)'), ctaText: 'Share your pickup and delivery locations, the goods and your timeline. Our team will confirm equipment and feasibility and send you a proposal.' }) %>

<%- include('../layouts/bottom') %>
