@extends('layouts.app')
@section('title', 'Our Services | Apexcel Global Solutions')
@section('description', 'Apexcel Global Solutions offers Recruitment Solutions and Finance as a Service — specialist talent acquisition and finance-function support for growing organisations.')
@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>Two disciplines. One standard of rigour.</h1>
        <p class="h-sub text-charcoal/70 mt-6" data-reveal>Whether you're building a team or building out your finance
          function, we bring the same structured, human-first approach.</p>
      </div>
    </section>

    <section class="pb-24">
      <div class="mx-auto max-w-7xl px-6 grid md:grid-cols-2 gap-6">
        <article class="card-3d p-8 group" data-reveal>
          <div class="icon-well-3d text-teal mb-6">
            <svg width="22" height="22" fill="none" stroke="currentColor" stroke-width="1.5">
              <circle cx="12" cy="8" r="4" />
              <path d="M4 21c0-4 4-6 8-6s8 2 8 6" />
            </svg>
          </div>
          <h2 class="font-display font-semibold text-2xl text-navy mb-3">Recruitment Solutions</h2>
          <p class="text-charcoal/70 mb-6">End-to-end recruitment and talent acquisition support — from role briefing
            through offer management — tailored to your business objectives and growth strategy.</p>
          <a href="{{ route('services.recruitment', [], false) }}"
            class="inline-flex items-center gap-2 text-teal font-medium group-hover:gap-3 transition-all">Explore
            Recruitment Solutions <span aria-hidden="true">→</span></a>
        </article>
        <article class="card-3d p-8 group" data-reveal>
          <div class="icon-well-3d text-gold mb-6">
            <svg width="22" height="22" fill="none" stroke="currentColor" stroke-width="1.5">
              <rect x="3" y="4" width="18" height="16" rx="2" />
              <path d="M3 10h18" />
            </svg>
          </div>
          <h2 class="font-display font-semibold text-2xl text-navy mb-3">Finance as a Service</h2>
          <p class="text-charcoal/70 mb-6">Specialist support across Accounts Payable, Accounts Receivable, General
            Ledger Accounting, FP&amp;A, Accounting Compliance, and Financial Reporting.</p>
          <a href="{{ route('services.finance', [], false) }}"
            class="inline-flex items-center gap-2 text-teal font-medium group-hover:gap-3 transition-all">Explore
            Finance as a Service <span aria-hidden="true">→</span></a>
        </article>
      </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">Not sure which fits?</h2>
        <p class="text-warm/70 mb-8">Tell us what you're building and we'll point you to the right service.</p>
        <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