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

<section class="hero" aria-labelledby="hero-title">
  <div class="hero__media"><%- img('hero-truck-mumbai-pune-expressway', { alt: '', sizes: '100vw', priority: true }) %></div>
  <div class="container hero__inner">
    <div>
      <p class="eyebrow">Truck transportation · Mumbai, India</p>
      <h1 id="hero-title">Truck transportation &amp; logistics, <span class="accent">from Mumbai across India</span></h1>
      <p class="hero__lead">HK Logistics moves commercial and industrial goods by road: full truck loads, dedicated vehicles, chemical tankers and over-dimensional cargo. One point of contact, from pickup to delivery.</p>
      <div class="btn-row">
        <a class="btn btn--light" href="/quote">Get a Quote<%- icon('arrow-right', 'icon--arrow') %></a>
        <a class="btn btn--ghost-light" href="/contact">Contact Us</a>
      </div>
      <% if (site.contact.phone) { %>
      <p class="hero__call">Prefer to talk? Call <a href="<%= tel(site.contact.phone) %>"><%- icon('phone') %><%= formatPhone(site.contact.phone) %></a><% if (site.whatsappUrl()) { %> or <a href="<%= site.whatsappUrl('Hello HK Logistics, I would like a transportation quote.') %>" target="_blank" rel="noopener noreferrer"><%- icon('whatsapp', 'icon--fill') %>WhatsApp us<span class="sr-only"> (opens in a new tab)</span></a><% } %></p>
      <% } %>
      <ul class="hero__points">
        <li><%- icon('map-pin') %>Branches &amp; agents across India</li>
        <li><%- icon('clipboard') %>Vehicles checked before loading</li>
        <li><%- icon('shield') %>Documented safety procedures</li>
      </ul>
    </div>

    <form class="route-card" action="/quote" method="get" aria-labelledby="route-card-title">
      <h2 id="route-card-title">Need a truck?</h2>
      <p>Start with your route. You can add the cargo details on the next step.</p>
      <div class="route-card__fields">
        <span class="route-card__line" aria-hidden="true"></span>
        <div class="field">
          <label for="rc-from">Pickup location</label>
          <div class="field__wrap">
            <span class="field__icon"><%- icon('map-pin') %></span>
            <input id="rc-from" name="from" type="text" maxlength="150" autocomplete="off" placeholder="e.g. Bhiwandi, Maharashtra">
          </div>
        </div>
        <div class="field">
          <label for="rc-to">Delivery location</label>
          <div class="field__wrap">
            <span class="field__icon"><%- icon('map-pin') %></span>
            <input id="rc-to" name="to" type="text" maxlength="150" autocomplete="off" placeholder="e.g. Ahmedabad, Gujarat">
          </div>
        </div>
      </div>
      <button class="btn btn--block" type="submit">Continue to quote<%- icon('arrow-right', 'icon--arrow') %></button>
      <small>No obligation. We confirm the vehicle, rate and transit time for your route.</small>
    </form>
  </div>
</section>

<section class="section" aria-labelledby="services-title">
  <div class="container">
    <div class="section-head section-head__row">
      <div>
        <p class="eyebrow">What we do</p>
        <h2 id="services-title">Transportation services built around your cargo</h2>
        <p>Road and rail-cum-road goods transportation across India, planned around what is actually being moved rather than a fixed product list.</p>
      </div>
      <a class="link-arrow" href="/services">All transportation services<%- icon('arrow-right') %></a>
    </div>
    <div class="grid grid--4 grid--services">
      <% services.forEach(function (s) { %><%- include('../components/service-card', { s: s }) %><% }) %>
      <div class="card service-card service-card--cta reveal">
        <span class="icon-tile icon-tile--soft"><%- icon('message') %></span>
        <h3>Not sure which service fits?</h3>
        <p>Tell us what you need to move and we will recommend the right vehicle and approach.</p>
        <a class="btn btn--light btn--sm" href="/quote">Ask our team<%- icon('arrow-right', 'icon--arrow') %></a>
      </div>
    </div>
  </div>
</section>

<section class="section section--alt" aria-labelledby="about-title">
  <div class="container split">
    <div class="media-frame reveal">
      <%- img('goods-trucks-mumbai', { alt: 'Goods trucks in Mumbai, where HK Logistics is headquartered', sizes: '(min-width: 960px) 50vw, 100vw' }) %>
      <div class="media-frame__badge">
        <span class="icon-tile"><%- icon('building') %></span>
        <div><strong>Headquartered in Mumbai</strong><span>Branches and agents across India</span></div>
      </div>
    </div>
    <div class="reveal">
      <p class="eyebrow">About HK Logistics</p>
      <h2 id="about-title">A transport company you can depend on</h2>
      <p class="lead">HK Logistics is a family-run enterprise providing technology-led, customer-focused solutions for domestic freight, so every movement is safe, right and on time.</p>
      <p>We are a young company in an old industry, and we treat that as an advantage. Customised, personalised service is the starting point rather than an add-on. We serve all industrial sectors, with particular depth in chemicals, FMCG and ODC projects.</p>
      <p>Through long-standing tie-ups with fleet owners in cities across India, we match the equipment to your consignment instead of fitting your consignment to a standing fleet. The company is led by Managing Director <strong>Hiral Mehta</strong>.</p>
      <a class="btn btn--outline" href="/about">More about us<%- icon('arrow-right', 'icon--arrow') %></a>
    </div>
  </div>
</section>

<section class="section" aria-labelledby="why-title">
  <div class="container">
    <div class="section-head section-head--center">
      <p class="eyebrow">Why HK Logistics</p>
      <h2 id="why-title">What our customers can rely on</h2>
      <p>Our approach is simple: know the customer’s product and culture, control the operation and its cost, and communicate throughout.</p>
    </div>
    <div class="grid grid--3">
      <% content.whyChoose.forEach(function (w) { %>
        <div class="card reveal">
          <span class="icon-tile"><%- icon(w.icon) %></span>
          <h3><%= w.title %></h3>
          <p><%= w.text %></p>
        </div>
      <% }) %>
    </div>
  </div>
</section>

<section class="section section--alt" aria-labelledby="process-title">
  <div class="container">
    <div class="section-head section-head--center">
      <p class="eyebrow">How it works</p>
      <h2 id="process-title">From enquiry to safe delivery</h2>
      <p>A documented process, followed the same way on every movement.</p>
    </div>
    <%- include('../components/process', { steps: content.processSteps }) %>
    <p class="text-center mt-2"><a class="btn" href="/quote">Start with step one: request a quote<%- icon('arrow-right', 'icon--arrow') %></a></p>
  </div>
</section>

<section class="section" aria-labelledby="industries-title">
  <div class="container">
    <div class="section-head section-head__row">
      <div>
        <p class="eyebrow">Industries</p>
        <h2 id="industries-title">Industries we know well</h2>
        <p>We move goods for industrial and commercial customers in every sector, with particular depth in three.</p>
      </div>
      <a class="link-arrow" href="/industries">Industries we serve<%- icon('arrow-right') %></a>
    </div>
    <div class="grid grid--3">
      <% content.industries.forEach(function (ind) { %>
        <article class="card industry-card reveal">
          <div class="industry-card__media"><%- img(ind.image, { alt: ind.imageAlt, sizes: '(min-width: 960px) 33vw, 100vw' }) %></div>
          <div class="industry-card__body">
            <h3 class="mb-0"><%= ind.title %></h3>
            <p><%= ind.text %></p>
            <ul class="tags"><% ind.tags.forEach(function (t) { %><li><%= t %></li><% }) %></ul>
          </div>
        </article>
      <% }) %>
    </div>
  </div>
</section>

<section class="section section--dark on-dark" aria-labelledby="features-title">
  <div class="container split">
    <div class="reveal">
      <p class="eyebrow">Fleet &amp; equipment</p>
      <h2 id="features-title">The right equipment for every consignment</h2>
      <p>HK Logistics works through long-standing tie-ups with fleet owners in cities across India, alongside vehicles placed on dedicated long-term contracts. That gives us national reach and the flexibility to engage exactly the equipment a movement needs.</p>
      <ul class="check-list">
        <li><%- icon('check') %>Full truck load vehicles, open and closed body</li>
        <li><%- icon('check') %>Container trailers for long-haul and distribution</li>
        <li><%- icon('check') %>Tankers for chemicals and bulk liquids</li>
        <li><%- icon('check') %>Multi-axle and hydraulic trailers for ODC and project cargo</li>
        <li><%- icon('check') %>Rail wagon capacity on the Vapi – Guwahati route</li>
      </ul>
      <a class="btn btn--light" href="/fleet">View fleet &amp; equipment<%- icon('arrow-right', 'icon--arrow') %></a>
    </div>
    <div class="grid grid--2 reveal">
      <% content.keyFeatures.forEach(function (k) { %>
        <div class="feature">
          <span class="icon-tile"><%- icon(k.icon) %></span>
          <div><h3><%= k.title %></h3><p><%= k.text %></p></div>
        </div>
      <% }) %>
    </div>
  </div>
</section>

<section class="section" aria-labelledby="network-title">
  <div class="container network-grid">
    <div class="reveal">
      <p class="eyebrow">Our reach</p>
      <h2 id="network-title">Headquartered in Mumbai, operating across India</h2>
      <p>Interstate and intercity truck transportation through our branches and agents, with an operating hub at Vapi. Send us your pickup and delivery locations and we will confirm coverage for your route.</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"><a class="link-arrow" href="/network">See our network<%- icon('arrow-right') %></a></p>
    </div>
    <div class="corridor reveal">
      <p class="eyebrow">Rail-cum-road corridor</p>
      <h3>Vapi to Guwahati by rail</h3>
      <div class="corridor__route" aria-hidden="true"><span>Vapi</span><span></span><span>Guwahati</span></div>
      <p>Indian Railways line-haul with local collection around Vapi and door delivery at destination. Special trains can be arranged for bulk movements 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>
</section>

<section class="section section--alt" aria-labelledby="faq-title">
  <div class="container container--narrow">
    <div class="section-head section-head--center">
      <p class="eyebrow">FAQ</p>
      <h2 id="faq-title">Questions customers ask before booking</h2>
    </div>
    <%- include('../components/faq-list', { items: content.faqs.slice(1, 6), openFirst: true }) %>
    <p class="text-center mt-2"><a class="link-arrow" href="/faq">All frequently asked questions<%- icon('arrow-right') %></a></p>
  </div>
</section>

<%- include('../components/cta-band') %>

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