@extends('layouts.app')
@section('title', 'Contact Apexcel Global Solutions | Recruitment & Finance Inquiries')
@section('description', 'Get in touch with Apexcel Global Solutions  for executive recruitment, talent acquisition, and finance as a service in India and overseas.')
@section('content')
  <main id="main">
    <section class="relative pt-40 pb-16 text-center overflow-hidden">
      <!-- <div class="hero-orbit-wrap" aria-hidden="true">
          <span class="orbit-line w-72 h-72 -top-20 left-1/3 hidden lg:block"></span>
          <span class="orbit-line-gold w-48 h-48 top-1/2 right-1/4 hidden lg:block"></span>
        </div> -->
      <div class="mx-auto max-w-3xl px-6">
        <p class="section-eyebrow mb-4">Contact Us</p>
        <h1 class="h-hero text-navy">Let's start a conversation.</h1>
        <p class="h-sub text-charcoal/70 mt-6">Whether you're looking to hire, exploring a career opportunity, or want to partner with Apexcel Global Solutions  — we'd love to hear from you.</p>
      </div>
    </section>

    <section class="pb-16 overflow-hidden">
      <div class="mx-auto max-w-5xl px-6">
        <div class="photo-frame aspect-[21/8]" data-reveal role="img"
          aria-label="Approachable one-to-one consultation environment">
          <div class="photo-frame-glow" aria-hidden="true"></div>
          <img src="/assets/images/contact/contact-hero.png" class="rounded-3xl w-full h-full object-cover" alt="Apexcel Global Solutions client consultation and meeting environment">

          <div class="photo-frame-vignette" aria-hidden="true"></div>
        </div>
      </div>
    </section>

    <section id="contact-section" class="pt-8 pb-32 scroll-mt-28">
      <div class="mx-auto max-w-6xl px-6 grid lg:grid-cols-[1fr_1.4fr] gap-12">
        <div class="relative space-y-8" data-reveal>
          <svg class="absolute -top-10 -left-10 w-40 h-40 obj-spin-slow hidden lg:block -z-10 opacity-40"
            viewBox="0 0 400 400" aria-hidden="true">
            <circle cx="200" cy="200" r="180" fill="none" stroke="#43999E" stroke-width="1" />
            <circle cx="200" cy="200" r="130" fill="none" stroke="#C19C57" stroke-width="1" />
          </svg>
          <div class="photo-frame aspect-video" role="img" aria-label="Apexcel team, approachable and professional">
            <img src="/assets/images/contact/contact-sidebar.png" class="rounded-3xl w-full h-full object-cover" alt="Apexcel Global Solutions recruitment and client services team">
          </div>

          <div class="card-3d p-6">
            <p class="section-eyebrow mb-2">Email</p>
            <p><a href="mailto:info@apexcelglobal.com"
              class="text-navy font-medium hover:text-teal">info@apexcelglobal.com</a></p>
          </div>
          <div class="card-3d p-6">
            <p class="section-eyebrow mb-2">Phone</p>
            <p><a href="tel:+919611658883" class="text-navy font-medium hover:text-teal">+91 9611658883</a></p>
          </div>
          <div class="card-3d p-6">
            <p class="section-eyebrow mb-2">Location</p>
            <p class="text-navy font-medium">Bangalore, Karnataka, India</p>
          </div>
        </div>

        <form id="contact-form" method="POST" action="{{ route('contact.submit', [], false) }}" novalidate class="card-3d p-8 space-y-5 scroll-mt-28" data-reveal>

          @csrf
          <input type="text" name="_hp_check" value="" class="hidden" tabindex="-1" autocomplete="off" style="display:none !important;" aria-hidden="true" />

          @if (session('success'))
            <div role="status" class="p-4 rounded-lg bg-teal/10 border border-teal/20 text-teal font-medium text-center">
              {{ session('success') }}
            </div>
          @endif

          @if (session('error'))
            <div role="alert" class="p-4 rounded-lg bg-red-50 border border-red-200 text-red-700 font-medium text-center">
              {{ session('error') }}
            </div>
          @endif

          <div>
            <label for="name" class="block text-sm font-medium text-navy mb-1">Name <span class="text-red-500">*</span></label>
            <input id="name" name="name" type="text" value="{{ old('name') }}" required aria-invalid="{{ $errors->has('name') ? 'true' : 'false' }}" aria-describedby="name-error"
              class="w-full rounded-lg border {{ $errors->has('name') ? 'border-red-500' : 'border-navy/15' }} px-4 py-3 focus:outline-none focus:ring-2 focus:ring-teal" />
            <p id="name-error" aria-live="polite" class="field-error {{ $errors->has('name') ? '' : 'hidden' }} text-sm text-red-600 mt-1">{{ $errors->first('name') ?: 'Please enter your name.' }}</p>
          </div>
          <div>
            <label for="company" class="block text-sm font-medium text-navy mb-1">Company</label>
            <input id="company" name="company" type="text" value="{{ old('company') }}"
              class="w-full rounded-lg border border-navy/15 px-4 py-3 focus:outline-none focus:ring-2 focus:ring-teal" />
          </div>
          <div class="grid sm:grid-cols-2 gap-5">
            <div>
              <label for="email" class="block text-sm font-medium text-navy mb-1">Email <span class="text-red-500">*</span></label>
              <input id="email" name="email" type="email" value="{{ old('email') }}" required aria-invalid="{{ $errors->has('email') ? 'true' : 'false' }}" aria-describedby="email-error"
                class="w-full rounded-lg border {{ $errors->has('email') ? 'border-red-500' : 'border-navy/15' }} px-4 py-3 focus:outline-none focus:ring-2 focus:ring-teal" />
              <p id="email-error" aria-live="polite" class="field-error {{ $errors->has('email') ? '' : 'hidden' }} text-sm text-red-600 mt-1">{{ $errors->first('email') ?: 'Please enter a valid email address.' }}</p>
            </div>
            <div>
              <label for="phone" class="block text-sm font-medium text-navy mb-1">Phone</label>
              <input id="phone" name="phone" type="tel" value="{{ old('phone') }}"
                class="w-full rounded-lg border {{ $errors->has('phone') ? 'border-red-500' : 'border-navy/15' }} px-4 py-3 focus:outline-none focus:ring-2 focus:ring-teal" />
              <p id="phone-error" aria-live="polite" class="field-error {{ $errors->has('phone') ? '' : 'hidden' }} text-sm text-red-600 mt-1">{{ $errors->first('phone') }}</p>
            </div>
          </div>
          <div>
            <label for="service" class="block text-sm font-medium text-navy mb-1">Service <span class="text-red-500">*</span></label>
            <select id="service" name="service"
              class="w-full rounded-lg border {{ $errors->has('service') ? 'border-red-500' : 'border-navy/15' }} px-4 py-3 focus:outline-none focus:ring-2 focus:ring-teal">
              <option value="talent" {{ old('service', 'talent') === 'talent' ? 'selected' : '' }}>Recruitment &amp; Talent Acquisition</option>
              <option value="finance" {{ old('service') === 'finance' ? 'selected' : '' }}>Accounts &amp; Finance Services</option>
              <option value="other" {{ old('service') === 'other' ? 'selected' : '' }}>Other</option>
            </select>
            <p id="service-error" aria-live="polite" class="field-error {{ $errors->has('service') ? '' : 'hidden' }} text-sm text-red-600 mt-1">{{ $errors->first('service') }}</p>
          </div>
          <div>
            <label for="message" class="block text-sm font-medium text-navy mb-1">Message <span class="text-red-500">*</span></label>
            <textarea id="message" name="message" rows="4" required aria-invalid="{{ $errors->has('message') ? 'true' : 'false' }}" aria-describedby="message-error"
              class="w-full rounded-lg border {{ $errors->has('message') ? 'border-red-500' : 'border-navy/15' }} px-4 py-3 focus:outline-none focus:ring-2 focus:ring-teal">{{ old('message') }}</textarea>
            <p id="message-error" aria-live="polite" class="field-error {{ $errors->has('message') ? '' : 'hidden' }} text-sm text-red-600 mt-1">{{ $errors->first('message') ?: 'Please enter a message (min 10 characters).' }}</p>
          </div>
          <button type="submit" id="submit-btn" class="btn-primary w-full justify-center">
            <span class="btn-text">Send Message</span>
            <span class="btn-spinner hidden ml-2 inline-block w-4 h-4 border-2 border-warm border-t-transparent rounded-full animate-spin"></span>
          </button>
          <p id="form-success" role="status" class="hidden text-teal font-medium text-center p-3 rounded-lg bg-teal/10 border border-teal/20"></p>
          <p id="form-error" role="alert" class="hidden text-red-600 font-medium text-center p-3 rounded-lg bg-red-50 border border-red-200"></p>
        </form>
      </div>
    </section>
  </main>
@endsection

@push('scripts')
  <script type="module">
    import { revealOnScroll } from "/assets/js/animations.js";
    import { initContactForm } from "/assets/js/forms.js";
    revealOnScroll("[data-reveal]");
    initContactForm();
  </script>
@endpush