@extends('layouts.app')
@section('title', 'Why Choose Apexcel Global Solutions | Talent Acquisition Partner')
@section('description', 'Why companies choose Apexcel Global Solutions : industry-focused recruitment expertise, Pan-India and overseas hiring, and a strong talent network.')
@section('content')
  <main id="main">
    <section class="relative pt-40 pb-20 overflow-hidden">

      <div class="mx-auto max-w-7xl px-6 grid lg:grid-cols-[1.1fr_1fr] gap-14 items-center">
        <div>
          <p class="section-eyebrow mb-4">Why Apexcel</p>
          <h1 class="h-hero text-navy">Why organisations choose Apexcel?</h1>
          <p class="h-sub text-charcoal/70 mt-6">An extensive candidate database, genuine industry understanding, and a
            faster turnaround — without trading away the rigour that makes a placement last.</p>
        </div>
        <div class="relative" data-reveal>
          <div class="photo-frame aspect-[7/5]" role="img"
            aria-label="Apexcel consultant, confident environmental portrait">
            <div class="photo-frame-glow" aria-hidden="true"></div>
            <img src="/assets/images/why-us/why-us-page-hero.png" alt="Senior consultant at Apexcel Global Solutions in environmental corporate portrait"
              class="w-full h-full object-cover" />
            <div class="photo-frame-vignette" aria-hidden="true"></div>
          </div>
          <span class="orbit-line w-24 h-24 -top-6 -right-6 hidden sm:block" aria-hidden="true"></span>
        </div>
      </div>
    </section>

    <section class="py-16 overflow-hidden">
      <div class="mx-auto max-w-7xl px-6">
        <div class="photo-frame aspect-[21/8] mb-14" data-reveal role="img"
          aria-label="Recruitment consultants collaborating across a global network">
          <div class="photo-frame-glow" aria-hidden="true"></div>
          <img src="/assets/images/why-us/why-us-page-banner.png" alt="Apexcel Global Solutions recruitment partners collaborating across global networks"
            class="w-full h-full object-cover" />
          <div class="photo-frame-vignette" aria-hidden="true"></div>
        </div>

        <h2 class="h-section text-navy mb-10 text-center" data-reveal>Why Our Recruitment Solutions Work</h2>
        <div class="grid sm:grid-cols-2 md:grid-cols-3 gap-6">
          <div class="card-3d p-6 text-center flex flex-col items-center justify-center gap-3" data-reveal>
            <span class="w-10 h-10 rounded-full bg-teal/10 text-teal flex items-center justify-center">
              <svg width="20" height="20" fill="none" stroke="currentColor" stroke-width="2" viewBox="0 0 24 24"><path d="M4 7v10c0 2 3.5 3 8 3s8-1 8-3V7M4 7c0 2 3.5 3 8 3s8-1 8-3M4 7c0-2 3.5-3 8-3s8 1 8 3M20 12c0 2-3.5 3-8 3s-8-1-8-3"/></svg>
            </span>
            <p class="font-display font-semibold text-navy">Extensive Candidate Database</p>
          </div>
          <div class="card-3d p-6 text-center flex flex-col items-center justify-center gap-3" data-reveal>
            <span class="w-10 h-10 rounded-full bg-teal/10 text-teal flex items-center justify-center">
              <svg width="20" height="20" fill="none" stroke="currentColor" stroke-width="2" viewBox="0 0 24 24"><circle cx="12" cy="12" r="10"/><path d="M12 2a14.5 14.5 0 0 0 0 20M2 12h20"/></svg>
            </span>
            <p class="font-display font-semibold text-navy">Strong Industry Understanding</p>
          </div>
          <div class="card-3d p-6 text-center flex flex-col items-center justify-center gap-3" data-reveal>
            <span class="w-10 h-10 rounded-full bg-teal/10 text-teal flex items-center justify-center">
              <svg width="20" height="20" fill="none" stroke="currentColor" stroke-width="2" viewBox="0 0 24 24"><circle cx="12" cy="12" r="10"/><polyline points="12 6 12 12 16 14"/></svg>
            </span>
            <p class="font-display font-semibold text-navy">Faster Turnaround Time</p>
          </div>
          <div class="card-3d p-6 text-center flex flex-col items-center justify-center gap-3" data-reveal>
            <span class="w-10 h-10 rounded-full bg-teal/10 text-teal flex items-center justify-center">
              <svg width="20" height="20" fill="none" stroke="currentColor" stroke-width="2" viewBox="0 0 24 24"><path d="M12 2l3.09 6.26L22 9.27l-5 4.87 1.18 6.88L12 17.77l-6.18 3.25L7 14.14 2 9.27l6.91-1.01L12 2z"/></svg>
            </span>
            <p class="font-display font-semibold text-navy">Quality-Focused Approach</p>
          </div>
          <div class="card-3d p-6 text-center flex flex-col items-center justify-center gap-3" data-reveal>
            <span class="w-10 h-10 rounded-full bg-teal/10 text-teal flex items-center justify-center">
              <svg width="20" height="20" fill="none" stroke="currentColor" stroke-width="2" viewBox="0 0 24 24"><path d="M21 15a2 2 0 0 1-2 2H7l-4 4V5a2 2 0 0 1 2-2h14a2 2 0 0 1 2 2z"/></svg>
            </span>
            <p class="font-display font-semibold text-navy">Professional Communication</p>
          </div>
          <div class="card-3d p-6 text-center flex flex-col items-center justify-center gap-3" data-reveal>
            <span class="w-10 h-10 rounded-full bg-teal/10 text-teal flex items-center justify-center">
              <svg width="20" height="20" fill="none" stroke="currentColor" stroke-width="2" viewBox="0 0 24 24"><circle cx="12" cy="12" r="3"/><path d="M19.4 15a1.65 1.65 0 0 0 .33 1.82l.06.06a2 2 0 1 1-2.83 2.83l-.06-.06a1.65 1.65 0 0 0-1.82-.33 1.65 1.65 0 0 0-1 1.51V21a2 2 0 1 1-4 0v-.09A1.65 1.65 0 0 0 9 19.4a1.65 1.65 0 0 0-1.82.33l-.06.06a2 2 0 1 1-2.83-2.83l.06-.06a1.65 1.65 0 0 0 .33-1.82 1.65 1.65 0 0 0-1.51-1H3a2 2 0 1 1 0-4h.09A1.65 1.65 0 0 0 4.6 9a1.65 1.65 0 0 0-.33-1.82l-.06-.06a2 2 0 1 1 2.83-2.83l.06.06a1.65 1.65 0 0 0 1.82.33H9a1.65 1.65 0 0 0 1-1.51V3a2 2 0 1 1 4 0v.09a1.65 1.65 0 0 0 1 1.51 1.65 1.65 0 0 0 1.82-.33l.06-.06a2 2 0 1 1 2.83 2.83l-.06.06a1.65 1.65 0 0 0-.33 1.82V9a1.65 1.65 0 0 0 1.51 1H21a2 2 0 1 1 0 4h-.09a1.65 1.65 0 0 0-1.51 1z"/></svg>
            </span>
            <p class="font-display font-semibold text-navy">Customized Hiring Strategies</p>
          </div>
        </div>
      </div>
    </section>

    <section class="relative py-24 bg-navy text-warm overflow-hidden spatial-grid">
      <span class="orbit-line w-80 h-80 -top-24 -left-24 hidden lg:block" aria-hidden="true"></span>
      <span class="orbit-line-gold w-56 h-56 -bottom-16 right-10 hidden lg:block" aria-hidden="true"></span>
      <div class="relative mx-auto max-w-7xl px-6">
        <h2 class="h-section mb-14 text-center" data-reveal>Why Companies Choose Apexcel</h2>
        <div class="grid lg:grid-cols-[1fr_1.3fr] gap-12 items-start">
          <div class="photo-frame aspect-[5/4]" data-reveal role="img"
            aria-label="Talent network constellation representing Apexcel's reach">
            <div class="photo-frame-glow" aria-hidden="true"></div>
            <img src="/assets/images/why-us/why-companies-choose-apexcel.jpg" alt="Why companies choose Apexcel Global Solutions  for talent acquisition" class="w-full h-full object-cover rounded-3xl" />
            <div class="photo-frame-vignette" aria-hidden="true"></div>
          </div>
          <div class="grid sm:grid-cols-2 gap-8">

            <div data-reveal>
              <h3 class="font-display font-semibold text-xl mb-2 text-gold">Industry-Focused Recruitment Expertise</h3>
              <p class="text-warm/70">We understand diverse industry requirements and deliver talent solutions aligned
                with business objectives.</p>
            </div>
            <div data-reveal>
              <h3 class="font-display font-semibold text-xl mb-2 text-gold">Pan-India &amp; Overseas Hiring Support</h3>
              <p class="text-warm/70">We support recruitment mandates across India and international markets.</p>
            </div>
            <div data-reveal>
              <h3 class="font-display font-semibold text-xl mb-2 text-gold">Strong Talent Network</h3>
              <p class="text-warm/70">Access to qualified professionals across multiple functions and experience levels.
              </p>
            </div>
            <div data-reveal>
              <h3 class="font-display font-semibold text-xl mb-2 text-gold">Fast &amp; Efficient Hiring Process</h3>
              <p class="text-warm/70">Streamlined recruitment approach ensuring timely closures and quality hiring.</p>
            </div>
            <div data-reveal class="md:col-span-2">
              <h3 class="font-display font-semibold text-xl mb-2 text-gold">Customized Recruitment Solutions</h3>
              <p class="text-warm/70">Flexible hiring models tailored to client needs.</p>
            </div>
          </div>
        </div>
      </div>
    </section>

    <section class="py-24 text-center">
      <div class="mx-auto max-w-2xl px-6" data-reveal>
        <h2 class="h-section text-navy mb-6">Ready to experience the difference?</h2>
        <a href="{{ route('contact', [], false) }}" class="btn-primary">Get In Touch</a>
      </div>
    </section>
  </main>
@endsection

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