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

<%- include('../components/page-hero', {
  heroTitle: 'Contact HK Logistics, Mumbai',
  heroLead: 'Whether it is a single consignment, a long-term contract or an over-dimensional movement, we would like to hear the details.',
  heroEyebrow: 'Contact us'
}) %>

<section class="section">
  <div class="container form-layout">
    <div class="form-panel">
      <h2>Send us an enquiry</h2>
      <p class="muted">Route, cargo and timeline help us give you a useful answer first time. Need a price? Use the <a href="/quote">quote form</a>.</p>
      <%- include('../components/form-alerts') %>
      <form action="/contact" method="post" novalidate data-validate>
        <input type="hidden" name="_csrf" value="<%= csrfToken %>">
        <div class="hp-field" aria-hidden="true">
          <label for="f-hp">Leave this field empty</label>
          <input id="f-hp" type="text" name="hk_trap_x7" tabindex="-1" autocomplete="off" data-lpignore="true" data-1p-ignore="true" data-bwignore="true" data-form-type="other">
        </div>
        <div class="form-grid">
          <%- include('../components/field', { f: { name: 'name', label: 'Name', type: 'text', required: true, autocomplete: 'name', minlength: 2, maxlength: 100 } }) %>
          <%- include('../components/field', { f: { name: 'company', label: 'Company name', type: 'text', autocomplete: 'organization', maxlength: 150 } }) %>
          <%- include('../components/field', { f: { name: 'email', label: 'Email', type: 'email', required: true, autocomplete: 'email', maxlength: 254, inputmode: 'email' } }) %>
          <%- include('../components/field', { f: { name: 'phone', label: 'Phone', type: 'tel', required: true, autocomplete: 'tel', maxlength: 20, inputmode: 'tel' } }) %>
          <%- include('../components/field', { f: { name: 'subject', label: 'Subject', type: 'select', required: true, options: contactSubjects, full: true } }) %>
          <%- include('../components/field', { f: { name: 'message', label: 'Message', type: 'textarea', required: true, full: true, minlength: 10, maxlength: 2000 } }) %>
        </div>
        <button class="btn btn--block mt-2" type="submit" data-submit>Send Enquiry<%- icon('arrow-right', 'icon--arrow') %></button>
        <p class="form-note">We use these details only to respond to your enquiry. See our <a href="/privacy-policy">Privacy Policy</a>.</p>
      </form>
    </div>

    <aside class="side-stack" aria-label="Contact details">
      <div class="side-card">
        <h2>Corporate office</h2>
        <ul class="contact-list">
          <li><span class="icon-tile"><%- icon('map-pin') %></span>
            <address>
              <strong><%= site.legalName || site.name %></strong><br>
              <% if (site.hasAddress()) { %>
                <%= site.address.streetAddress %><% if (site.address.locality) { %>, <%= site.address.locality %><% } %>,<br><%= site.address.city %> – <%= site.address.postalCode %>, <%= site.address.region %>, <%= site.address.country %>
              <% } else { %>
                <%- ph('Street address and PIN code') %><br><%= site.address.city %>, <%= site.address.region %>, <%= site.address.country %>
              <% } %>
            </address>
          </li>
          <li><span class="icon-tile"><%- icon('phone') %></span>
            <span>
              <% if (site.contact.phone) { %><a href="<%= tel(site.contact.phone) %>"><%= formatPhone(site.contact.phone) %></a><small>Sales &amp; enquiries</small><% } else { %><%- ph('Phone') %><% } %>
              <% if (site.contact.phoneAlt) { %><a href="<%= tel(site.contact.phoneAlt) %>"><%= formatPhone(site.contact.phoneAlt) %></a><small>Office</small><% } %>
            </span>
          </li>
          <li><span class="icon-tile"><%- icon('mail') %></span>
            <span><% if (site.contact.email) { %><a href="mailto:<%= site.contact.email %>"><%= site.contact.email %></a><% } else { %><%- ph('Email') %><% } %></span>
          </li>
          <% if (site.contact.whatsapp) { %>
          <li><span class="icon-tile"><%- icon('whatsapp', 'icon--fill') %></span>
            <span><a href="<%= site.whatsappUrl('Hello HK Logistics, I have an enquiry.') %>" target="_blank" rel="noopener noreferrer">Chat on WhatsApp</a><small>Opens WhatsApp in a new tab</small></span>
          </li>
          <% } %>
          <li><span class="icon-tile"><%- icon('clock') %></span>
            <span><% if (site.contact.hours) { %><%= site.contact.hours %><% } else { %><%- ph('Office hours') %><% } %></span>
          </li>
        </ul>
      </div>

      <div class="map-frame">
        <% if (site.hasAddress() && site.address.mapsUrl) { %>
          <iframe title="Map showing the HK Logistics office in Mumbai" src="https://www.google.com/maps?q=<%= encodeURIComponent([site.address.streetAddress, site.address.locality, site.address.city, site.address.postalCode].join(', ')) %>&amp;output=embed" loading="lazy" referrerpolicy="strict-origin-when-cross-origin"></iframe>
        <% } else { %>
          <div class="map-placeholder"><div><%- icon('map-pin') %><p class="mb-0">Map will appear once the office address is confirmed.</p><%- ph('Map / Google Maps link') %></div></div>
        <% } %>
      </div>
      <% if (site.address.mapsUrl) { %><a class="link-arrow" href="<%= site.address.mapsUrl %>" target="_blank" rel="noopener noreferrer">Open in Google Maps<%- icon('arrow-right') %></a><% } %>
    </aside>
  </div>
</section>

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