@extends('layouts.app')

@section('content')
<main id="mainContent">
  <!-- Page Hero -->
  <section class="page-hero">
    <div class="container">
      <nav class="breadcrumbs" aria-label="Breadcrumb">
        <a href="{{ route('home') }}">Home</a>
        <i class="fas fa-chevron-right" style="font-size: 0.7rem;"></i>
        <span>Our Services</span>
      </nav>
      <h1 class="page-hero-title">End-to-End <span class="text-gradient">Recruitment &amp; HR Advisory</span></h1>
      <p class="page-hero-desc text-muted">Scalable, compliant, and technology-powered human resources solutions designed to accelerate hiring velocity and workforce productivity.</p>
    </div>
  </section>

  <!-- Services Deep Dive Section -->
  <section class="section">
    <div class="container">
      @foreach($services as $index => $service)
        <div class="hero-grid" id="{{ $service->slug }}" style="margin-bottom: 5rem; align-items: center; {{ $index % 2 === 1 ? 'direction: rtl;' : '' }}">
          <div class="reveal" style="{{ $index % 2 === 1 ? 'direction: ltr;' : '' }}">
            <span class="section-badge"><i class="{{ $service->icon }}"></i> Comprehensive Solution</span>
            <h2 class="section-title">{{ $service->title }}</h2>
            <p>{{ $service->short_description }}</p>
            @if($service->full_description)
              <p>{!! nl2br(e($service->full_description)) !!}</p>
            @endif

            @if($service->features && count($service->features) > 0)
              <ul class="service-features" style="margin-bottom: 1.5rem; list-style: none; padding: 0;">
                @foreach($service->features as $feature)
                  <li style="margin-bottom: 0.75rem; display: flex; align-items: flex-start; gap: 0.75rem;">
                    <i class="fas fa-check-circle" style="color: var(--success); margin-top: 0.25rem;"></i>
                    <span>{{ $feature }}</span>
                  </li>
                @endforeach
              </ul>
            @endif

            <div style="display: flex; gap: 1rem; flex-wrap: wrap;">
              <a href="{{ route('contact') }}?service={{ $service->slug }}" class="btn btn-primary">
                <i class="fas fa-briefcase"></i> Inquire About {{ $service->title }}
              </a>
              <a href="{{ route('services.show', $service->slug) }}" class="btn btn-outline">
                Detailed Scope
              </a>
            </div>
          </div>
          
          <div class="reveal" style="{{ $index % 2 === 1 ? 'direction: ltr;' : '' }}">
            <div class="hero-image-wrapper">
              <img src="{{ $service->image ?: 'https://images.unsplash.com/photo-1552664730-d307ca884978?auto=format&fit=crop&w=800&q=80' }}" 
                   alt="{{ $service->title }} consulting at Zhelhire Nagpur" 
                   loading="lazy" width="800" height="480">
            </div>
          </div>
        </div>
      @endforeach
    </div>
  </section>

  <!-- CTA Banner -->
  @include('partials.cta-banner')
</main>
@endsection