@extends('layouts.inner')
@section('title', 'Contact Us')
@section('description', 'Request a freight quote or speak with an A1 Movex Global logistics specialist. We respond to every enquiry within one business day.')
@section('hideCta', true)

@php
  $cargoTypes = ['General Cargo', 'Perishable / Cold Chain', 'Oversized / Project Cargo', 'Hazardous Materials', 'Documents & Parcels', 'Vehicles & Machinery', 'Other'];
@endphp

@section('content')
<section class="services-hero">
  <div class="services-hero__bg" style="background-image:url('{{ asset('assets/images/page-heroes/contact.webp') }}')"></div>
  <div class="services-hero__overlay" aria-hidden="true"></div>
  <div class="container-wide services-hero__inner">
    <div class="services-hero__meta" data-page-reveal>
      <span>Contact</span>
      <span>New Delhi &middot; India</span>
    </div>
    <h1 class="services-hero__title" data-page-title>Let&rsquo;s Move Your Cargo</h1>
    <p class="services-hero__sub" data-page-reveal>Request a tailored quote or speak directly with a logistics specialist. We respond within one business day.</p>
  </div>
  <div class="services-hero__scroll-cue" aria-hidden="true"><span></span><em>Scroll</em></div>
</section>

<section class="contact-main" id="quote">
  <div class="container-wide contact-main__grid">

    <div class="contact-form-panel">
      <h2 class="contact-form-panel__heading" data-page-reveal>Tell us what<br><em>you need.</em></h2>
      <p class="contact-form-panel__intro" data-page-reveal>Share your shipment details below and our specialists will prepare a clear, tailored quote, no obligations, no hidden fees.</p>

      <form class="contact-form" action="{{ route('contact.submit') }}" method="POST" enctype="multipart/form-data" novalidate>
        @csrf

        <div class="contact-form__grid">
          <div class="field js-reveal @error('name') has-error @enderror">
            <input type="text" name="name" id="f-name" placeholder=" " value="{{ old('name') }}" required>
            <label for="f-name">Full name</label>
            @error('name')<span class="field__error">{{ $message }}</span>@enderror
          </div>

          <div class="field js-reveal @error('company') has-error @enderror">
            <input type="text" name="company" id="f-company" placeholder=" " value="{{ old('company') }}">
            <label for="f-company">Company name</label>
            @error('company')<span class="field__error">{{ $message }}</span>@enderror
          </div>

          <div class="field js-reveal @error('email') has-error @enderror">
            <input type="email" name="email" id="f-email" placeholder=" " value="{{ old('email') }}" required>
            <label for="f-email">Work email</label>
            @error('email')<span class="field__error">{{ $message }}</span>@enderror
          </div>

          <div class="field js-reveal @error('phone') has-error @enderror">
            <input type="tel" name="phone" id="f-phone" placeholder=" " value="{{ old('phone') }}" required>
            <label for="f-phone">Phone number</label>
            @error('phone')<span class="field__error">{{ $message }}</span>@enderror
          </div>

          <div class="field field--select field--full js-reveal @error('service') has-error @enderror">
            <label for="f-service">Service required</label>
            <select name="service" id="f-service" required>
              <option value="" disabled selected hidden>Select a service</option>
              @foreach(config('movex.services') as $item)
                <option value="{{ $item['title'] }}" @selected(old('service', request('service')) === $item['title'])>{{ $item['title'] }}</option>
              @endforeach
            </select>
            @error('service')<span class="field__error">{{ $message }}</span>@enderror
          </div>

          <div class="field js-reveal @error('origin') has-error @enderror">
            <input type="text" name="origin" id="f-origin" placeholder=" " value="{{ old('origin') }}" required>
            <label for="f-origin">Origin</label>
            @error('origin')<span class="field__error">{{ $message }}</span>@enderror
          </div>

          <div class="field js-reveal @error('destination') has-error @enderror">
            <input type="text" name="destination" id="f-destination" placeholder=" " value="{{ old('destination') }}" required>
            <label for="f-destination">Destination</label>
            @error('destination')<span class="field__error">{{ $message }}</span>@enderror
          </div>

          <div class="field field--select js-reveal @error('cargo_type') has-error @enderror">
            <label for="f-cargo-type">Cargo type</label>
            <select name="cargo_type" id="f-cargo-type" required>
              <option value="" disabled selected hidden>Select cargo type</option>
              @foreach($cargoTypes as $type)
                <option value="{{ $type }}" @selected(old('cargo_type') === $type)>{{ $type }}</option>
              @endforeach
            </select>
            @error('cargo_type')<span class="field__error">{{ $message }}</span>@enderror
          </div>

          <div class="field js-reveal @error('weight') has-error @enderror">
            <input type="text" name="weight" id="f-weight" placeholder=" " value="{{ old('weight') }}">
            <label for="f-weight">Estimated weight / volume</label>
            @error('weight')<span class="field__error">{{ $message }}</span>@enderror
          </div>

          <div class="field field--full js-reveal @error('message') has-error @enderror">
            <textarea name="message" id="f-message" placeholder=" " required>{{ old('message') }}</textarea>
            <label for="f-message">Message</label>
            @error('message')<span class="field__error">{{ $message }}</span>@enderror
          </div>
        </div>

        <div class="field field--file js-reveal @error('documents') has-error @enderror @error('documents.*') has-error @enderror">
          <input type="file" name="documents[]" id="f-documents" class="field__file-input" data-file-input multiple accept=".pdf,.jpg,.jpeg,.png,.doc,.docx,.xls,.xlsx">
          <label for="f-documents" class="field__file-label">
            <span class="field__file-icon" aria-hidden="true">
              <svg viewBox="0 0 24 24" fill="none"><path d="M12 3v12m0-12 4 4m-4-4-4 4" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/><path d="M4 15v3a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2v-3" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/></svg>
            </span>
            <span class="field__file-copy">
              <strong>Attach shipping documents</strong>
              <span>Optional: PDF, JPG, PNG, DOC or XLS, up to 10MB each</span>
            </span>
          </label>
          <ul class="field__file-list" data-file-list aria-live="polite"></ul>
          @error('documents')<span class="field__error">{{ $message }}</span>@enderror
          @error('documents.*')<span class="field__error">{{ $message }}</span>@enderror
        </div>

        <div class="contact-form__submit-wrap js-reveal">
          <button type="submit" class="contact-form__submit">
            <span>Request a Quote</span>
            <svg viewBox="0 0 24 24" fill="none" aria-hidden="true"><path d="M5 12h14M13 6l6 6-6 6" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/></svg>
          </button>
        </div>
      </form>
    </div>

    <aside class="contact-info-panel">
      <div class="contact-info-card js-reveal">
        <span class="contact-info-card__label">Direct contact</span>
        <div class="contact-info-card__row">
          <span class="contact-info-card__icon" aria-hidden="true"><svg viewBox="0 0 24 24" fill="none"><path d="M22 16.92v3a2 2 0 0 1-2.18 2 19.79 19.79 0 0 1-8.63-3.07 19.5 19.5 0 0 1-6-6 19.79 19.79 0 0 1-3.07-8.67A2 2 0 0 1 4.11 2h3a2 2 0 0 1 2 1.72c.13.96.36 1.9.7 2.81a2 2 0 0 1-.45 2.11L8.09 9.91a16 16 0 0 0 6 6l1.27-1.27a2 2 0 0 1 2.11-.45c.91.34 1.85.57 2.81.7A2 2 0 0 1 22 16.92z" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/></svg></span>
          <div><span>Call us</span><a href="tel:+911142630977">+91 11 4263 0977</a></div>
        </div>
        <div class="contact-info-card__row">
          <span class="contact-info-card__icon" aria-hidden="true"><svg viewBox="0 0 24 24" fill="none"><path d="M4 4h16v16H4z" stroke="currentColor" stroke-width="2" stroke-linejoin="round"/><path d="m4 6 8 7 8-7" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/></svg></span>
          <div><span>Email us</span><a href="mailto:info@movexgroup.net">info@movexgroup.net</a></div>
        </div>
        <div class="contact-info-card__row">
          <span class="contact-info-card__icon" aria-hidden="true"><svg viewBox="0 0 24 24" fill="none"><circle cx="12" cy="12" r="10" stroke="currentColor" stroke-width="2"/><path d="M12 6v6l4 2" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/></svg></span>
          <div><span>Office hours</span><p>Mon&ndash;Sat &middot; 8:00 AM&ndash;5:00 PM<br>Sunday: Closed</p></div>
        </div>
      </div>

      <div class="map-panel js-reveal">
        <div class="map-panel__frame">
          <iframe
            src="https://www.google.com/maps?q=T-6,+Third+Floor,+K.H.+No.+506,+New+Bypass+Road,+Mahipalpur+Extension,+New+Delhi+110037&output=embed"
            loading="lazy"
            referrerpolicy="no-referrer-when-downgrade"
            title="Map showing the A1 Movex Global office in New Delhi"></iframe>
        </div>
        <div class="map-panel__caption">
          <span>T-6, Third Floor, Mahipalpur Extn., New Delhi &ndash; 110037</span>
          <a href="https://www.google.com/maps/dir/?api=1&destination=T-6,+Third+Floor,+K.H.+No.+506,+New+Bypass+Road,+Mahipalpur+Extension,+New+Delhi+110037" target="_blank" rel="noopener">Get directions</a>
        </div>
      </div>

      <div class="contact-urgent js-reveal">
        <span class="contact-urgent__icon" aria-hidden="true"><svg viewBox="0 0 24 24" fill="none"><path d="M12 9v4m0 4h.01M10.29 3.86 1.82 18a2 2 0 0 0 1.71 3h16.94a2 2 0 0 0 1.71-3L13.71 3.86a2 2 0 0 0-3.42 0z" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/></svg></span>
        <div>
          <strong>Urgent shipment?</strong>
          <p>Time-critical cargo can&rsquo;t wait on a form. Call our team directly and we&rsquo;ll prioritise it.</p>
          <a href="tel:+911142630977">
            <svg viewBox="0 0 24 24" fill="none" width="16" height="16" aria-hidden="true"><path d="M22 16.92v3a2 2 0 0 1-2.18 2 19.79 19.79 0 0 1-8.63-3.07 19.5 19.5 0 0 1-6-6 19.79 19.79 0 0 1-3.07-8.67A2 2 0 0 1 4.11 2h3a2 2 0 0 1 2 1.72c.13.96.36 1.9.7 2.81a2 2 0 0 1-.45 2.11L8.09 9.91a16 16 0 0 0 6 6l1.27-1.27a2 2 0 0 1 2.11-.45c.91.34 1.85.57 2.81.7A2 2 0 0 1 22 16.92z" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/></svg>
            +91 11 4263 0977
          </a>
        </div>
      </div>

      <div class="contact-trust js-reveal">
        <span class="contact-trust__icon" aria-hidden="true"><svg viewBox="0 0 24 24" fill="none"><circle cx="12" cy="12" r="10" stroke="currentColor" stroke-width="2"/><path d="m9 12 2 2 4-4" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/></svg></span>
        <p>A logistics specialist will respond within one business day.</p>
      </div>
    </aside>

  </div>
</section>
@endsection