<x-public-layout :company="$company">
  <section class="relative overflow-hidden min-h-[720px]">
    <div class="absolute inset-0">
      <div class="h-full w-full bg-gradient-to-br from-slate-100 via-slate-50 to-slate-200"></div>
      <div class="absolute inset-0 bg-white/35"></div>
    </div>

    {{-- Header is `sticky`, so we don't need huge manual top padding here. --}}
    <div class="relative z-10 max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 pt-6 pb-10 lg:pt-8 lg:pb-12">
      <div class="grid grid-cols-1 lg:grid-cols-12 gap-10 items-start">

        {{-- LEFT SLIDER PANEL --}}
        <div class="lg:col-span-7">
          <div class="visa-left">
            <div class="visa-slider" data-autoplay="4500">
              @php($sliderImages = ($slides ?? collect())->pluck('image_path')->filter()->values())
              @if($sliderImages->count() === 0)
                @php($sliderImages = collect(['/images/bg-traveler-girls.jpg']))
              @endif

              @foreach($sliderImages as $i => $img)
                @php($src = str_starts_with($img, '/') ? $img : asset(ltrim(preg_replace('/^public\//','',$img), '/')))
                <div class="visa-slide {{ $i === 0 ? 'is-active' : '' }}">
                  <img src="{{ $src }}" alt="Slide {{ $i+1 }}" loading="{{ $i === 0 ? 'eager' : 'lazy' }}" fetchpriority="{{ $i === 0 ? 'high' : 'auto' }}" decoding="async">
                </div>
              @endforeach
              <div class="visa-slider-dots"></div>
            </div>
          </div>

          {{-- PREMIUM VISA SUPPORT COPY (below slider) --}}
          <div class="mt-6 w-full">
            <div class="rounded-[28px] bg-white/85 backdrop-blur border border-slate-200 shadow-lg p-6">
              <div class="flex items-start gap-4">
                <div class="h-10 w-10 shrink-0 rounded-2xl bg-amber-50 border border-amber-200 flex items-center justify-center">
                  <svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5 text-amber-700" viewBox="0 0 24 24" fill="currentColor" aria-hidden="true">
                    <path d="M3 6a3 3 0 0 1 3-3h10a5 5 0 0 1 5 5v10a3 3 0 0 1-3 3H8a5 5 0 0 1-5-5V6Zm6.5 1.75a.75.75 0 0 0 0 1.5h5a.75.75 0 0 0 0-1.5h-5ZM8.75 12a.75.75 0 0 1 .75-.75h7a.75.75 0 0 1 0 1.5h-7a.75.75 0 0 1-.75-.75Zm.75 2.75a.75.75 0 0 0 0 1.5h6a.75.75 0 0 0 0-1.5h-6Z"/>
                  </svg>
                </div>

                <div class="min-w-0">
                  <div class="text-slate-900 font-extrabold text-lg leading-snug">
                    Premium visa &amp; travel support
                  </div>
                  <div class="text-slate-600 text-sm mt-1">
                    Visa Requirements made simple &amp; luxurious
                  </div>
                </div>
              </div>

              <div class="mt-4 text-sm text-slate-700">
                Tell us your <span class="font-semibold text-slate-900">citizenship</span> and <span class="font-semibold text-slate-900">destination</span>. We will check the requirements and contact you with the right guidance — documents, processing time, and next steps.
              </div>

              <div class="mt-4 grid gap-3">
                <div class="flex gap-3">
                  <div class="mt-0.5 h-6 w-6 rounded-full bg-emerald-50 border border-emerald-200 flex items-center justify-center">
                    <svg xmlns="http://www.w3.org/2000/svg" class="h-4 w-4 text-emerald-700" viewBox="0 0 20 20" fill="currentColor" aria-hidden="true">
                      <path fill-rule="evenodd" d="M16.704 5.29a1 1 0 0 1 .006 1.414l-7.5 7.57a1 1 0 0 1-1.42.002L3.29 9.78a1 1 0 1 1 1.42-1.4l3.39 3.44 6.79-6.86a1 1 0 0 1 1.414-.006Z" clip-rule="evenodd"/>
                    </svg>
                  </div>
                  <div>
                    <div class="font-semibold text-slate-900">Transparent</div>
                    <div class="text-slate-600 text-sm">No confusion. Clear checklist and timeline.</div>
                  </div>
                </div>

                <div class="flex gap-3">
                  <div class="mt-0.5 h-6 w-6 rounded-full bg-emerald-50 border border-emerald-200 flex items-center justify-center">
                    <svg xmlns="http://www.w3.org/2000/svg" class="h-4 w-4 text-emerald-700" viewBox="0 0 20 20" fill="currentColor" aria-hidden="true">
                      <path fill-rule="evenodd" d="M16.704 5.29a1 1 0 0 1 .006 1.414l-7.5 7.57a1 1 0 0 1-1.42.002L3.29 9.78a1 1 0 1 1 1.42-1.4l3.39 3.44 6.79-6.86a1 1 0 0 1 1.414-.006Z" clip-rule="evenodd"/>
                    </svg>
                  </div>
                  <div>
                    <div class="font-semibold text-slate-900">Fast Response</div>
                    <div class="text-slate-600 text-sm">We reply quickly via call / WhatsApp.</div>
                  </div>
                </div>

                <div class="flex gap-3">
                  <div class="mt-0.5 h-6 w-6 rounded-full bg-emerald-50 border border-emerald-200 flex items-center justify-center">
                    <svg xmlns="http://www.w3.org/2000/svg" class="h-4 w-4 text-emerald-700" viewBox="0 0 20 20" fill="currentColor" aria-hidden="true">
                      <path fill-rule="evenodd" d="M16.704 5.29a1 1 0 0 1 .006 1.414l-7.5 7.57a1 1 0 0 1-1.42.002L3.29 9.78a1 1 0 1 1 1.42-1.4l3.39 3.44 6.79-6.86a1 1 0 0 1 1.414-.006Z" clip-rule="evenodd"/>
                    </svg>
                  </div>
                  <div>
                    <div class="font-semibold text-slate-900">Trusted Support</div>
                    <div class="text-slate-600 text-sm">From start to submission.</div>
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>

        {{-- RIGHT FORM PANEL --}}
        <div class="lg:col-span-5 lg:sticky lg:top-6">
          <div class="rounded-[32px] bg-white shadow-2xl border border-slate-200 overflow-hidden">
            <div class="h-1.5 bg-gradient-to-r from-amber-400 via-amber-300 to-amber-400"></div>

            <div class="px-6 py-5 border-b border-slate-200/70 flex items-start justify-between gap-3">
              <div>
                <div class="text-sm font-extrabold text-slate-900">Check requirements</div>
                <div class="text-xs text-slate-500 mt-1">Fill the form — admin will see it instantly.</div>
              </div>
              <div class="text-[11px] font-semibold text-amber-800 bg-amber-50 border border-amber-200 rounded-full px-3 py-1">
                Priority support
              </div>
            </div>

            <form method="POST" action="{{ route('visa.inquiry.store') }}" enctype="multipart/form-data" class="px-6 py-6 grid gap-4">
              @csrf

              <div class="grid grid-cols-1 sm:grid-cols-2 gap-4">
                <div>
                  <label class="text-xs font-semibold text-slate-600">For citizens of</label>
                  <select name="citizenship_country" class="mt-1 ntw-pill-select">
                    <option value="">Select country</option>
                    @foreach($countries as $c)
                      <option value="{{ $c }}" {{ old('citizenship_country')===$c ? 'selected' : '' }}>{{ $c }}</option>
                    @endforeach
                  </select>
                </div>
                <div>
                  <label class="text-xs font-semibold text-slate-600">Traveling to</label>
                  <select name="destination_country" class="mt-1 ntw-pill-select">
                    <option value="">Select destination</option>
                    @foreach($countries as $c)
                      <option value="{{ $c }}" {{ old('destination_country')===$c ? 'selected' : '' }}>{{ $c }}</option>
                    @endforeach
                  </select>
                </div>
              </div>

              <div class="grid grid-cols-1 sm:grid-cols-2 gap-4">
                <div>
                  <label class="text-xs font-semibold text-slate-600">Your name</label>
                  <input name="name" value="{{ old('name') }}" class="mt-1 ntw-pill-input" placeholder="Full name" />
                </div>
                <div>
                  <label class="text-xs font-semibold text-slate-600">Phone</label>
                  <input name="phone" value="{{ old('phone') }}" class="mt-1 ntw-pill-input" placeholder="WhatsApp/phone" />
                </div>
              </div>

              <div class="grid grid-cols-1 sm:grid-cols-2 gap-4">
                <div>
                  <label class="text-xs font-semibold text-slate-600">Date of birth (optional)</label>
                  <input type="text" name="dob" value="{{ old('dob') }}" class="mt-1 ntw-pill-input" placeholder="mm/dd/yyyy" />
                </div>
                <div>
                  <label class="text-xs font-semibold text-slate-600">Passport number (optional)</label>
                  <input name="passport_number" value="{{ old('passport_number') }}" class="mt-1 ntw-pill-input" placeholder="e.g. AB0123456" />
                </div>
              </div>

              <div class="grid grid-cols-1 sm:grid-cols-2 gap-4">
                <div x-data="{ name: '' }">
                  <label class="text-xs font-semibold text-slate-600">Applicant photo (optional)</label>
                  <div class="mt-1 flex items-center gap-3">
                    <label class="ntw-btn-yellow px-4 py-2 cursor-pointer">
                      Choose File
                      <input type="file" name="applicant_photo" class="hidden" @change="name = $event.target.files[0]?.name || ''" />
                    </label>
                    <div class="text-xs text-slate-500 truncate" x-text="name || 'No file chosen'"></div>
                  </div>
                  <div class="mt-1 text-[11px] text-slate-500">Max 1MB (JPG/PNG/WebP)</div>
                </div>

                <div x-data="{ name: '' }">
                  <label class="text-xs font-semibold text-slate-600">Passport copy (optional)</label>
                  <div class="mt-1 flex items-center gap-3">
                    <label class="ntw-btn-dark px-4 py-2 cursor-pointer">
                      Choose File
                      <input type="file" name="passport_copy" class="hidden" @change="name = $event.target.files[0]?.name || ''" />
                    </label>
                    <div class="text-xs text-slate-500 truncate" x-text="name || 'No file chosen'"></div>
                  </div>
                  <div class="mt-1 text-[11px] text-slate-500">Max 2MB (PDF/JPG/PNG/WebP)</div>
                </div>
              </div>

              <div class="grid grid-cols-1 sm:grid-cols-2 gap-4">
                <div>
                  <label class="text-xs font-semibold text-slate-600">Email (optional)</label>
                  <input type="email" name="email" value="{{ old('email') }}" class="mt-1 ntw-pill-input" placeholder="you@example.com" />
                </div>
                <div>
                  <label class="text-xs font-semibold text-slate-600">Travel date (optional)</label>
                  <input type="text" name="travel_date" value="{{ old('travel_date') }}" class="mt-1 ntw-pill-input" placeholder="mm/dd/yyyy" />
                </div>
              </div>

              <div>
                <label class="text-xs font-semibold text-slate-600">Message (optional)</label>
                <textarea name="message" rows="3" class="mt-1 w-full rounded-2xl border border-slate-200 bg-white px-4 py-3 text-sm shadow-sm focus:border-slate-300 focus:ring-0"
                          placeholder="Write your question (visa type, purpose, etc.)">{{ old('message') }}</textarea>
              </div>

              <button type="submit" class="w-full rounded-2xl px-5 py-3 bg-amber-400 text-slate-900 font-extrabold shadow-sm hover:brightness-110 transition">
                Submit inquiry
              </button>

              <div class="rounded-2xl bg-amber-50 border border-amber-200 p-4">
                <div class="text-xs font-extrabold text-slate-900">Quick contact</div>
                <div class="mt-3 grid grid-cols-3 gap-2">
                  <a href="{{ route('contact') }}" class="text-center rounded-2xl px-3 py-2 bg-white border border-amber-200 text-slate-800 text-xs font-semibold hover:bg-amber-100/40">Live chat</a>
                  <a href="{{ $company['whatsapp_link'] ?? '#' }}" target="_blank" class="text-center rounded-2xl px-3 py-2 bg-white border border-amber-200 text-slate-800 text-xs font-semibold hover:bg-amber-100/40">WhatsApp</a>
                  <a href="tel:{{ $company['phone'] ?? '' }}" class="text-center rounded-2xl px-3 py-2 bg-slate-900 text-white text-xs font-extrabold hover:bg-slate-800">Click to call</a>
                </div>
              </div>

            </form>
          </div>
        </div>

      </div>
    </div>
  </section>
</x-public-layout>
