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

<%- include('../components/page-hero', {
  heroTitle: 'Request a truck transportation quote',
  heroLead: 'Tell us what you need to move and when. For ODC and project cargo, include dimensions and weight if you have them, so we can assess equipment and route straight away.',
  heroEyebrow: 'Get a quote'
}) %>

<section class="section">
  <div class="container form-layout">
    <div class="form-panel">
      <%- include('../components/form-alerts') %>
      <form action="/quote" 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>

        <fieldset>
          <legend><%- icon('users') %>Your details</legend>
          <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', hint: 'Mobile or landline with area code, e.g. +91 98XXX XXXXX' } }) %>
          </div>
        </fieldset>

        <fieldset>
          <legend><%- icon('truck') %>Transportation details</legend>
          <div class="form-grid">
            <%- include('../components/field', { f: { name: 'pickupLocation', label: 'Pickup location', type: 'text', required: true, minlength: 2, maxlength: 150, placeholder: 'City / area, state' } }) %>
            <%- include('../components/field', { f: { name: 'deliveryLocation', label: 'Delivery location', type: 'text', required: true, minlength: 2, maxlength: 150, placeholder: 'City / area, state' } }) %>
            <%- include('../components/field', { f: { name: 'goodsType', label: 'Goods / material type', type: 'text', maxlength: 150, placeholder: 'e.g. FMCG cartons, chemicals, machinery' } }) %>
            <%- include('../components/field', { f: { name: 'approxWeight', label: 'Approximate weight', type: 'text', maxlength: 60, placeholder: 'e.g. 9 tonnes' } }) %>
            <%- include('../components/field', { f: { name: 'vehicleType', label: 'Vehicle type', type: 'select', options: vehicleOptions } }) %>
            <%- include('../components/field', { f: { name: 'pickupDate', label: 'Required pickup date', type: 'date' } }) %>
            <%- include('../components/field', { f: { name: 'deliveryRequirement', label: 'Delivery requirement', type: 'select', options: deliveryRequirements } }) %>
            <%- include('../components/field', { f: { name: 'message', label: 'Additional requirements', type: 'textarea', full: true, maxlength: 2000, hint: 'For ODC enquiries, length, width, height and weight help us respond faster.' } }) %>
          </div>
        </fieldset>

        <button class="btn btn--block" type="submit" data-submit>Request a Quote<%- icon('arrow-right', 'icon--arrow') %></button>
        <p class="form-note">Fields marked <span class="req" aria-hidden="true">*</span><span class="sr-only">with an asterisk</span> are required. We use these details only to respond to your enquiry. See our <a href="/privacy-policy">Privacy Policy</a>. Submitting this form does not confirm a booking.</p>
      </form>
    </div>

    <aside class="side-stack" aria-label="Other ways to reach us">
      <div class="side-card side-card--dark">
        <h2>Prefer to talk it through?</h2>
        <p>For urgent movements and ODC assessments, a call is often faster than a form.</p>
        <ul class="contact-list">
          <li><span class="icon-tile"><%- icon('phone') %></span>
            <span><% if (site.contact.phone) { %><a href="<%= tel(site.contact.phone) %>"><%= formatPhone(site.contact.phone) %></a><% } else { %><%- ph('Phone') || '<a href="/contact">Contact page</a>' %><% } %></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 would like a transportation quote.') %>" target="_blank" rel="noopener noreferrer">Chat on WhatsApp</a></span>
          </li>
          <% } %>
        </ul>
      </div>
      <div class="side-card">
        <h2>Moving ODC or project cargo?</h2>
        <p>Share dimensions, weight and site constraints, plus photographs or a general arrangement drawing if you have them. That is usually enough for us to assess equipment and route feasibility.</p>
        <a class="link-arrow" href="/services/odc-transportation">About ODC movements<%- icon('arrow-right') %></a>
      </div>
      <div class="side-card">
        <h2>What happens next</h2>
        <ol class="steps-mini">
          <li>Our team reviews the requirement</li>
          <li>We confirm equipment and feasibility</li>
          <li>You receive a proposal with timelines</li>
        </ol>
      </div>
    </aside>
  </div>
</section>

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