@extends('layouts.inner')

@section('title', $service['title'])
@section('description', $service['summary'])

@section('content')
<article class="service-detail" data-service-detail>

  {{-- ============ 1. HERO — "The Cargo Journey" ============ --}}
  <section class="service-hero">
    <div class="service-hero__backdrop" aria-hidden="true"></div>
    <div class="container-wide service-hero__inner">
      <div class="service-hero__top">
        <a href="{{ route('services.index') }}" class="service-hero__back">
          <span aria-hidden="true">&larr;</span> All Services
        </a>
        <span class="reveal-mask service-hero__label-mask"><span class="reveal-mask__inner" data-hero-label>Service {{ $service['number'] }} / {{ str_pad($total, 2, '0', STR_PAD_LEFT) }}</span></span>
      </div>

      <div class="service-hero__grid">
        <div class="service-hero__copy">
          <h1 class="service-hero__title">
            <span class="reveal-mask"><span class="reveal-mask__inner" data-hero-title>{{ $service['title'] }}</span></span>
          </h1>

          <div class="reveal-mask service-hero__desc-mask"><p class="service-hero__desc reveal-mask__inner" data-hero-desc>{{ $service['summary'] }}</p></div>

          <div class="service-hero__actions" data-hero-fade>
            <a href="{{ route('contact') }}?service={{ urlencode($service['title']) }}#quote" class="btn btn--hero btn--lg">
              Get a Quote
              <svg viewBox="0 0 24 24" fill="none" aria-hidden="true"><path d="M5 12h14M13 6l6 6-6 6" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/></svg>
            </a>
            <span class="service-hero__eyebrow">{{ $service['eyebrow'] }}</span>
          </div>

          <div class="service-hero__route" data-hero-fade aria-hidden="true">
            <span class="service-hero__route-node"></span>
            <span class="service-hero__route-line">
              <span class="service-hero__route-track" data-route-track></span>
              <span class="service-hero__route-fill" data-route-fill></span>
              <span class="service-hero__route-marker" data-route-marker></span>
            </span>
            <span class="service-hero__route-node service-hero__route-node--end"></span>
          </div>
        </div>

        <div class="service-hero__media">
          <div class="service-hero__media-clip" data-hero-image-clip>
            <img src="{{ asset($service['image']) }}" alt="{{ $service['title'] }}" class="service-hero__img" data-hero-image loading="eager" />
          </div>
        </div>
      </div>
    </div>
  </section>

  {{-- ============ 2. SERVICE OVERVIEW ============ --}}
  <section class="service-overview">
    <div class="container service-overview__grid">
      <div class="service-copy">
        <span class="page-kicker" data-reveal>A1 Movex Expertise</span>
        <h2 data-reveal>Built around your cargo,<br><em>not convention.</em></h2>
        @foreach($service['paragraphs'] as $paragraph)
          <p data-reveal>{{ $paragraph }}</p>
        @endforeach
      </div>

      <aside class="service-overview__highlight" data-reveal>
        <span class="service-overview__quote" aria-hidden="true">&ldquo;</span>
        <p class="service-overview__highlight-text">{{ $service['highlight'] }}</p>
        <span class="service-overview__highlight-line"><span></span></span>
        <a href="{{ route('contact') }}#quote" class="service-overview__cta">
          Discuss your shipment
          <svg viewBox="0 0 24 24" fill="none" aria-hidden="true"><path d="M5 12h14M13 6l6 6-6 6" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/></svg>
        </a>
      </aside>
    </div>
  </section>

  {{-- ============ 3. CAPABILITIES ============ --}}
  <section class="service-capabilities">
    <div class="container">
      <div class="service-heading" data-reveal>
        <span class="page-kicker">Our Capabilities</span>
        <h2>Every detail,<br><em>accounted for.</em></h2>
      </div>

      <div class="capability-rows">
        @foreach($service['capabilities'] as $index => $capability)
          <a href="{{ route('contact') }}#quote" class="capability-row" data-capability-row>
            <span class="capability-row__num">{{ str_pad($index + 1, 2, '0', STR_PAD_LEFT) }}</span>
            <span class="capability-row__body">
              <span class="capability-row__title">{{ $capability['title'] }}</span>
              <span class="capability-row__desc">{{ $capability['desc'] }}</span>
            </span>
            <span class="capability-row__arrow" aria-hidden="true">&#8599;</span>
          </a>
        @endforeach
      </div>
    </div>
  </section>

  {{-- ============ 4. HOW IT WORKS ============ --}}
  {{-- Same Shipment Journey sticky scroll-story as the homepage —
       identical markup/classes (data-driven from $process here instead
       of hardcoded), so the existing initHowItWorks() module (already
       wired globally in app.js) picks it up automatically. --}}
  @php
    $journeyImageAlts = [
      'Logistics consultant discussing shipment details with a client at a planning desk',
      'Freight planner reviewing route options and a quotation on a logistics dashboard',
      'Warehouse team loading cargo into a container during freight execution',
      'Delivery truck arrived at destination with cargo ready for customer handover',
    ];
  @endphp
  <section class="shipment-journey" id="how-it-works" aria-label="The Shipment Journey" data-autoplay>
    <div class="shipment-journey__scroller">

      <div class="shipment-journey__stage">
        <div class="shipment-journey__visual" aria-hidden="true">
          @foreach($process as $index => $step)
            <img class="shipment-journey__image @if($index === 0) is-active @endif" data-step-image="{{ $index }}"
                 src="{{ asset($step['image']) }}"
                 alt="{{ $journeyImageAlts[$index] ?? ($step['label'] . ': ' . $step['title']) }}"
                 loading="{{ $index === 0 ? 'eager' : 'lazy' }}"
                 @if($index === 0) fetchpriority="high" @endif
                 width="1920" height="1080" />
          @endforeach
          <div class="shipment-journey__scrim"></div>
        </div>

        <div class="shipment-journey__hud">
          <div class="shipment-journey__top-row">
            <span class="shipment-journey__eyebrow">Start a Shipment</span>
            <span class="shipment-journey__counter" aria-hidden="true">
              <span class="shipment-journey__counter-current">01</span><span class="shipment-journey__counter-sep">/</span><span class="shipment-journey__counter-total">{{ str_pad(count($process), 2, '0', STR_PAD_LEFT) }}</span>
            </span>
          </div>

          <p class="shipment-journey__intro" aria-hidden="true">
            A shipment doesn&rsquo;t move in steps.<br>It moves as one connected journey.
          </p>

          <ol class="shipment-journey__steps">
            @foreach($process as $index => $step)
              <li class="shipment-journey__step @if($index === 0) is-active @endif" data-step-index="{{ $index }}" @if($index === 0) aria-current="step" @endif style="--step-image: url('{{ asset($step['image']) }}')">
                <span class="shipment-journey__label">{{ $step['label'] }}</span>
                <h3 class="shipment-journey__heading">{{ $step['title'] }}</h3>
                <p class="shipment-journey__desc">{{ $step['desc'] }}</p>
              </li>
            @endforeach
          </ol>

          <div class="shipment-journey__bottom-row">
            <nav class="shipment-journey__route" aria-hidden="true">
              <span class="shipment-journey__route-track"></span>
              <span class="shipment-journey__route-fill"></span>
              <span class="shipment-journey__marker" aria-hidden="true">
                <svg viewBox="0 0 24 24" fill="none"><rect x="3.5" y="7" width="17" height="13" rx="1.5" stroke="currentColor" stroke-width="1.6"/><path d="M3.5 11.5h17M9 7V4.5h6V7" stroke="currentColor" stroke-width="1.6" stroke-linecap="round"/></svg>
              </span>
              <ol class="shipment-journey__checkpoints">
                @foreach($process as $index => $step)
                  <li class="shipment-journey__checkpoint @if($index === 0) is-active @endif" data-checkpoint="{{ $index }}"><button type="button" class="shipment-journey__checkpoint-btn" aria-label="Go to step {{ $index + 1 }}: {{ $step['label'] }}"><span class="shipment-journey__checkpoint-dot"></span><span class="shipment-journey__checkpoint-label">{{ $step['label'] }}</span></button></li>
                @endforeach
              </ol>
            </nav>

            <a href="{{ route('contact') }}?service={{ urlencode($service['title']) }}#quote" class="shipment-journey__cta">
              <span>Start your shipment</span>
              <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>
            </a>
          </div>
        </div>
      </div>
    </div>
  </section>

  {{-- ============ 6. FAQ ============ --}}
  <section class="service-faq">
    <div class="container service-faq__inner">
      <div class="service-heading" data-reveal>
        <span class="page-kicker">Frequently Asked</span>
        <h2>Questions,<br><em>answered.</em></h2>
      </div>

      <div class="service-faq__list" data-faq-list>
        @foreach($service['faqs'] as $index => $faq)
          @php $faqId = $slug . '-faq-' . $index; @endphp
          <div class="service-faq__item" data-faq-item>
            <h3 class="service-faq__question">
              <button
                type="button"
                class="service-faq__trigger"
                id="trigger-{{ $faqId }}"
                aria-expanded="false"
                aria-controls="panel-{{ $faqId }}"
                data-faq-trigger
              >
                <span>{{ $faq['q'] }}</span>
                <span class="service-faq__icon" aria-hidden="true"></span>
              </button>
            </h3>
            <div class="service-faq__panel" id="panel-{{ $faqId }}" role="region" aria-labelledby="trigger-{{ $faqId }}" data-faq-panel>
              <div class="service-faq__panel-inner">
                <p>{{ $faq['a'] }}</p>
              </div>
            </div>
          </div>
        @endforeach
      </div>
    </div>
  </section>

  {{-- ============ FINAL CTA ============ --}}
  {{-- Reuses the site-wide "Ready to Ship?" CTA rendered automatically by layouts/inner.blade.php --}}

</article>
@endsection