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

<%- include('../components/page-hero', {
  heroTitle: 'Interstate transportation from Mumbai, across India',
  heroLead: 'HK Logistics operates across the country through branches and agents, supported by fleet-owner tie-ups in cities nationwide.',
  heroEyebrow: 'Our network',
  heroImage: 'expressway-tunnel-maharashtra',
  heroCtas: { primary: 'Check your route', secondary: 'Contact Us' }
}) %>

<section class="section" aria-labelledby="reach-title">
  <div class="container network-grid">
    <div class="reveal">
      <p class="eyebrow">Where we operate</p>
      <h2 id="reach-title">Mumbai headquarters, Vapi hub, branches across India</h2>
      <p>Our corporate office is in Mumbai, with an operating hub at Vapi and branches and agents in cities across India for intercity and interstate truck transportation.</p>
      <ul class="city-list" aria-label="Locations">
        <li class="is-hq"><%- icon('building') %>Mumbai · HQ</li>
        <li class="is-hub"><%- icon('map-pin') %><%= site.network.hub.city %> · Hub</li>
        <% site.network.branches.forEach(function (c) { %><li><%- icon('map-pin') %><%= c %></li><% }) %>
      </ul>
      <p class="mt-2 muted">Coverage is confirmed for each route. Send us your pickup and delivery locations and we will come back to you on feasibility and timelines.</p>
    </div>
    <div class="reveal">
      <div class="card hub-card">
        <span class="icon-tile"><%- icon('building') %></span>
        <div>
          <h3>Corporate office, Mumbai</h3>
          <address>
            <% if (site.hasAddress()) { %>
              <%= site.address.streetAddress %><% if (site.address.locality) { %>, <%= site.address.locality %><% } %>, <%= site.address.city %> – <%= site.address.postalCode %>
            <% } else { %>
              <%- ph('Office address') %> Mumbai, Maharashtra
            <% } %>
          </address>
          <a class="link-arrow" href="/contact">Contact details<%- icon('arrow-right') %></a>
        </div>
      </div>
      <div class="card hub-card">
        <span class="icon-tile"><%- icon('map-pin') %></span>
        <div>
          <h3>Operating hub, Vapi</h3>
          <p>Our Vapi hub supports the chemical manufacturing belt and anchors rail-cum-road movements, with expertise in collecting cargo locally and loading it into wagons.</p>
        </div>
      </div>
      <div class="card hub-card">
        <span class="icon-tile"><%- icon('route') %></span>
        <div>
          <h3>Branches &amp; agents</h3>
          <p>Presence across <%= site.network.branches.join(', ').replace(/, ([^,]*)$/, ' and $1') %>, supported by fleet-owner tie-ups nationwide.</p>
        </div>
      </div>
    </div>
  </div>
</section>

<section class="section section--alt" aria-labelledby="corridor-title">
  <div class="container split">
    <div class="corridor reveal">
      <p class="eyebrow">Rail-cum-road corridor</p>
      <h2 id="corridor-title" class="h3">Vapi – Guwahati</h2>
      <div class="corridor__route" aria-hidden="true"><span>Vapi</span><span></span><span>Guwahati</span></div>
      <p>Indian Railways line-haul, with cargo collected in local vehicles around Vapi and loaded into wagons, then collected at destination and door-delivered. Special trains can be arranged for bulk movements from any place to anywhere in India.</p>
      <a class="btn btn--ghost-light btn--sm" href="/services/rail-cum-road-transportation">Rail-cum-road movements<%- icon('arrow-right', 'icon--arrow') %></a>
    </div>
    <div class="media-frame reveal">
      <%- img('rail-freight-train-india', { alt: 'Indian Railways freight train', sizes: '(min-width: 960px) 50vw, 100vw' }) %>
    </div>
  </div>
</section>

<%- include('../components/cta-band', { ctaTitle: 'Moving goods on a new route?', ctaText: 'Send your pickup and delivery locations and we will confirm coverage, equipment and timelines for your route.' }) %>

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