@extends('layouts.inner')
@section('title', 'Our Services')
@section('description', 'Air, ocean and land freight, customs clearance, warehousing and specialist cargo-handling services from A1 Movex Global: one partner for the full shipment lifecycle.')

@php
  // Single source of truth: config('movex.services') also backs each service's
  // own detail page (services.show) — keeping one array here in sync by hand
  // is what let this page and the detail pages drift apart before.
  $slides = config('movex.services');
@endphp

@section('content')
<section class="services-hero">
  <div class="services-hero__bg" style="background-image:url('{{ asset('assets/images/page-heroes/services.webp') }}')"></div>
  <div class="services-hero__overlay" aria-hidden="true"></div>
  <div class="container-wide services-hero__inner">
    <div class="services-hero__meta" data-page-reveal>
      <span>Services</span>
      <span>{{ count($slides) }} Specialist Solutions</span>
    </div>
    <h1 class="services-hero__title" data-page-title>Our Services</h1>
    <p class="services-hero__sub" data-page-reveal>Every mode of freight, one accountable partner: from first mile to final delivery, we keep your cargo moving.</p>
  </div>
  <div class="services-hero__scroll-cue" aria-hidden="true"><span></span><em>Scroll</em></div>
</section>

<section class="services-grid">
  <div class="container-wide">
    <div class="services-grid__heading" data-page-reveal>
      <span class="page-kicker">What we offer</span>
      <h2>Specialist logistics,<br><em>built around your cargo.</em></h2>
      <p>Every mode, every mile — explore the {{ count($slides) }} services that keep freight moving end to end.</p>
    </div>

    <div class="services-grid__list">
      @foreach($slides as $slug => $slide)
        <a href="{{ route('services.show', $slug) }}" class="service-card" data-page-card>
          <div class="service-card__media">
            <img class="service-card__img" src="{{ asset($slide['image']) }}" alt="" loading="lazy">
            <div class="service-card__media-overlay" aria-hidden="true"></div>
            <span class="service-card__num" aria-hidden="true">{{ $slide['number'] }}</span>
            <span class="service-card__arrow" aria-hidden="true">
              <svg viewBox="0 0 24 24" fill="none"><path d="M7 17 17 7M9 7h8v8" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/></svg>
            </span>
          </div>
          <div class="service-card__body">
            <span class="service-card__eyebrow">{{ $slide['eyebrow'] }}</span>
            <h3 class="service-card__title">{{ $slide['title'] }}</h3>
            <p class="service-card__desc">{{ $slide['summary'] }}</p>
            <span class="service-card__link">
              View details
              <svg viewBox="0 0 24 24" fill="none"><path d="M5 12h14M13 6l6 6-6 6" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/></svg>
            </span>
          </div>
        </a>
      @endforeach
    </div>
  </div>
</section>
@endsection