@extends('layouts.app')
@section('title', 'Recruitment Solutions | Apexcel Global Solutions')
@section('description', 'Recruitment Solutions from Apexcel: end-to-end talent acquisition support built on a structured 5-step methodology, from discovery to onboarding.')
@section('content')
  <main id="main">
    <section class="relative pt-40 pb-20 overflow-hidden">
      <div class="mx-auto max-w-3xl px-6 text-center">
        <p class="section-eyebrow mb-4" data-reveal>Our Services</p>
        <h1 class="h-hero text-navy" data-reveal>Recruitment Solutions.</h1>
        <p class="h-sub text-charcoal/70 mt-6" data-reveal>End-to-end recruitment and talent acquisition support —
          tailored to your business objectives and growth strategy, backed by a structured 5-step methodology.</p>
      </div>
    </section>

    <section class="pb-24">
      <div class="mx-auto max-w-7xl px-6">
        <div class="grid md:grid-cols-2 gap-6 mb-16">
          <div class="card-3d p-8" data-reveal>
            <h2 class="font-display font-semibold text-xl text-navy mb-3">What's included</h2>
            <ul class="space-y-2 text-charcoal/70 list-disc list-inside">
              <li>Role briefing &amp; discovery with hiring stakeholders</li>
              <li>Targeted, multi-channel candidate search</li>
              <li>Structured, multi-stage vetting &amp; assessment</li>
              <li>Curated shortlist with consultant commentary</li>
              <li>Offer management &amp; onboarding support</li>
            </ul>
          </div>
          <div class="card-3d p-8" data-reveal>
            <h2 class="font-display font-semibold text-xl text-navy mb-3">Why it works</h2>
            <ul class="space-y-2 text-charcoal/70 list-disc list-inside">
              <li>Curated candidate database of 70,000+ profiles</li>
              <li>Only the top 5% of engaged candidates reach shortlist</li>
              <li>2-3 business-days shortlist turnaround</li>
              <li>Industry-focused recruitment expertise</li>
              <li>Pan-India &amp; overseas hiring support</li>
            </ul>
          </div>
        </div>

        <div class="text-center mb-14" data-reveal>
          <p class="section-eyebrow mb-4">Our Process</p>
          <h2 class="h-section text-navy">A structured, 5-step methodology.</h2>
        </div>
        <ol class="grid md:grid-cols-5 gap-6 mb-14">
          <li id="step-discovery" class="border-t-2 border-teal pt-4 scroll-mt-28" data-reveal><span class="text-gold font-display font-bold text-2xl">01</span><p class="font-display font-semibold text-navy mt-2">Discovery &amp; Briefing</p></li>
          <li id="step-search" class="border-t-2 border-teal/40 pt-4 scroll-mt-28" data-reveal><span class="text-gold font-display font-bold text-2xl">02</span><p class="font-display font-semibold text-navy mt-2">Targeted Talent Search</p></li>
          <li id="step-vetting" class="border-t-2 border-teal/40 pt-4 scroll-mt-28" data-reveal><span class="text-gold font-display font-bold text-2xl">03</span><p class="font-display font-semibold text-navy mt-2">Rigorous Vetting &amp; Assessment</p></li>
          <li id="step-shortlist" class="border-t-2 border-teal/40 pt-4 scroll-mt-28" data-reveal><span class="text-gold font-display font-bold text-2xl">04</span><p class="font-display font-semibold text-navy mt-2">Curated Shortlist Presentation</p></li>
          <li id="step-offer" class="border-t-2 border-teal/40 pt-4 scroll-mt-28" data-reveal><span class="text-gold font-display font-bold text-2xl">05</span><p class="font-display font-semibold text-navy mt-2">Offer Management &amp; Onboarding</p></li>
        </ol>
        <div class="text-center" data-reveal>
          <a href="{{ route('process', [], false) }}" class="btn-ghost">See the full process</a>
        </div>
      </div>
    </section>

    <section class="py-24 bg-navy text-warm text-center">
      <div class="mx-auto max-w-2xl px-6" data-reveal>
        <h2 class="h-section mb-6">Looking to build your next high-performing team?</h2>
        <a href="{{ route('contact', [], false) }}" class="btn-primary">Talk to Apexcel</a>
      </div>
    </section>
  </main>
@endsection

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