@extends('layouts.app')

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

@section('content')
@php
  // Breadcrumb's final crumb: ServiceCatalog's clean per-route name (e.g.
  // "Customs Clearing") rather than hero.badge, which sometimes carries a
  // "Services / " prefix of its own (would read "Home / Services / Services / ...").
  $currentServiceName = collect(\App\Support\ServiceCatalog::all())->firstWhere('route', $service['slug'])['name'] ?? $service['hero']['badge'];

  // Floating trust chip: prefer the service's own first stat (big number +
  // label), falling back to its first overview highlight, then a static
  // trust badge — hero.php has no dedicated field for this, so all three
  // paths reuse data the service already has rather than inventing new copy.
  if (!empty($service['stats']['items'][0])) {
      $firstStat = $service['stats']['items'][0];
      $heroChip = ['big' => number_format($firstStat['target']) . $firstStat['suffix'], 'label' => $firstStat['label']];
  } elseif (!empty($service['overview']['highlights'][0])) {
      $heroChip = ['big' => null, 'label' => $service['overview']['highlights'][0]];
  } else {
      $heroChip = ['big' => null, 'label' => 'IATA Accredited'];
  }
@endphp
<!-- HERO -->
<section class="relative pt-28 pb-10 lg:pt-32 lg:pb-14 overflow-hidden bg-[#060c1b] text-white">
  <div class="absolute inset-0 hero-bg-zoom" style="background-image:url('{{ $service['hero']['image'] }}');background-size:cover;background-position:center"></div>
  <div class="absolute inset-0" style="background:linear-gradient(100deg, rgba(6,12,27,.93) 0%, rgba(6,12,27,.8) 45%, rgba(6,12,27,.55) 100%)"></div>
  <div class="absolute inset-0 grid-overlay-dark opacity-25"></div>
  <div class="relative z-10 max-w-[1400px] mx-auto px-6 sm:px-10">
    <div class="max-w-[640px] zoom-reveal">
      <nav class="flex items-center gap-1.5 sm:gap-2 mb-3 sm:mb-4 text-[9px] sm:text-[10px] font-semibold text-white/40 uppercase tracking-wide">
        <a href="{{ route('home') }}" class="hover:text-white/70 transition-colors duration-200">Home</a>
        <span class="text-white/25">/</span>
        <a href="{{ route('services') }}" class="hover:text-white/70 transition-colors duration-200">Services</a>
        <span class="text-white/25">/</span>
        <span class="text-white/60">{{ $currentServiceName }}</span>
      </nav>
      <div class="inline-flex items-center gap-2.5 glass rounded-full px-4 py-1.5 mb-5">
        <span class="w-1.5 h-1.5 rounded-full bg-[#c8102e] animate-pulse flex-shrink-0"></span>
        <span class="text-[10px] font-semibold text-white/55 tracking-[0.2em] uppercase">{{ $service['hero']['badge'] }}</span>
      </div>
      <div class="hero-heading-mask overflow-hidden">
        <h1 class="hero-heading font-display font-extrabold leading-[1.05] tracking-tight" style="font-size:clamp(1.75rem,3.4vw,2.75rem)">
          {!! $service['hero']['title'] !!}
        </h1>
      </div>
    </div>
  </div>

  <!-- Floating trust chip — desktop only -->
  <div class="hero-float-chip hidden lg:flex flex-col items-start glass rounded-2xl px-6 py-5 absolute right-10 xl:right-16 top-1/2 -translate-y-1/2 z-10">
    @if ($heroChip['big'])
    <span class="font-display font-black leading-none" style="font-size:1.9rem">{{ $heroChip['big'] }}</span>
    @endif
    <span class="text-[11px] font-semibold text-white/55 uppercase tracking-wide{{ $heroChip['big'] ? ' mt-1.5' : '' }}">{{ $heroChip['label'] }}</span>
  </div>

  <!-- Scroll cue -->
  <div class="absolute bottom-6 sm:bottom-8 left-1/2 -translate-x-1/2 z-10 flex flex-col items-center gap-2">
    <div class="relative" style="width:2px;height:30px;background:rgba(255,255,255,.3)">
      <span class="hero-scroll-dot absolute left-1/2 -translate-x-1/2 top-0 w-1.5 h-1.5 rounded-full bg-white"></span>
    </div>
    <span class="text-[9px] sm:text-[10px] font-semibold text-white/40 uppercase tracking-wide">Scroll</span>
  </div>
</section>

<!-- OVERVIEW -->
<section class="max-w-[1400px] mx-auto px-6 sm:px-10 py-16 lg:py-20 overview-section">
  <div class="overview-heading mb-10 lg:mb-12">
    <span class="section-label">Overview</span>
    <h2 class="font-display font-extrabold text-[#0c1427] leading-[1.04] tracking-tight" style="font-size:clamp(2.8rem,5.5vw,5rem)">
      {!! $service['overview']['heading'] !!}
    </h2>
  </div>

  <div class="grid grid-cols-1 lg:grid-cols-12 gap-10 lg:gap-16 items-start">
    <div class="lg:col-span-7 overview-left">
      @foreach ($service['overview']['description'] as $paragraph)
      <p class="text-[#64748b] text-base lg:text-lg leading-relaxed mb-4 last:mb-0">{{ $paragraph }}</p>
      @endforeach
      @if (!empty($service['overview']['highlights']))
      <div class="flex flex-wrap gap-2.5 mt-7 overview-highlights">
        @foreach ($service['overview']['highlights'] as $highlight)
        <span class="svc-tag-light overview-highlight-tag" style="color:#c8102e;background:rgba(200,16,46,.08);border-color:rgba(200,16,46,.18)">{{ $highlight }}</span>
        @endforeach
      </div>
      @endif
    </div>

    <div class="lg:col-span-5">
      <div class="overview-sticky-card lg:sticky lg:top-24">
        @if (!empty($service['overview']['lead']))
        <p class="text-[#64748b] text-base lg:text-lg leading-relaxed italic pl-5 mb-8 border-l" style="border-color:rgba(200,16,46,.35)">{{ $service['overview']['lead'] }}</p>
        @endif
        <div class="overview-image rounded-2xl overflow-hidden w-full" style="aspect-ratio:4/3">
          <img src="{{ $service['overview']['image'] ?? $service['hero']['image'] }}" alt="{{ $service['hero']['badge'] }}" class="w-full h-full object-cover" loading="lazy"/>
        </div>
      </div>
    </div>
  </div>
</section>

<!-- FEATURES: pinned split-scroll (left image stack sticks while right-column
     steps scroll past; GSAP ScrollTrigger crossfades the left image to match
     whichever step is centered — desktop/lg only, see feature-scroll init in
     app.js) -->
<section class="bg-[#f5f7ff] relative feature-scroll-section">
  <div class="absolute inset-0 grid-overlay"></div>
  <div class="relative z-10 max-w-[1400px] mx-auto px-6 sm:px-10 pt-16 lg:pt-20">
    <div class="mb-7 zoom-reveal">
      <span class="section-label">{{ $service['features']['label'] }}</span>
      <h2 class="font-display font-extrabold text-[#0c1427] leading-[1.04] tracking-tight" style="font-size:clamp(2.2rem,4vw,3.4rem)">{!! $service['features']['heading'] !!}</h2>
    </div>
  </div>

  @php
    $featureItems = $service['features']['items'];
    $heroFeature = null;
    $listFeatures = $featureItems;
    if (!empty($featureItems) && ($featureItems[0]['type'] ?? 'text') === 'photo') {
        $heroFeature = $featureItems[0];
        $listFeatures = array_slice($featureItems, 1);
    }
    $listTotal = count($listFeatures);

    // Per-step images: use the item's own image if the data has one, else
    // cycle through the service's other known photos (hero feature / overview
    // / hero) so steps without dedicated art still look visually distinct
    // from one another instead of all repeating the same shot.
    $fallbackImages = array_values(array_unique(array_filter([
        $heroFeature['image'] ?? null,
        $service['overview']['image'] ?? null,
        $service['hero']['image'] ?? null,
    ])));
    if (empty($fallbackImages)) {
        $fallbackImages = [$service['hero']['image']];
    }
    // Overlay darkness cycles through 3 preset CSS classes (feature-overlay-0/1/2,
    // defined in app.css) rather than inline gradients, purely so steps without
    // dedicated art still read as visually distinct from one another.
    $overlayCount = 3;
  @endphp

  @if ($listTotal)
  <div class="relative z-10 max-w-[1400px] mx-auto lg:px-10 grid grid-cols-1 lg:grid-cols-2 mt-9 lg:mt-12">
    <!-- LEFT: sticky image stack — desktop/lg only -->
    <div class="feature-stack-col hidden lg:block lg:sticky lg:top-0 lg:h-screen relative overflow-hidden lg:rounded-3xl">
      @if ($heroFeature)
      <div class="feature-stack-img active" data-stack-step="0" style="background-image:url('{{ $heroFeature['image'] }}')">
        <div class="feature-stack-overlay feature-overlay-0"></div>
      </div>
      @endif
      @foreach ($listFeatures as $item)
      @php
        $img = $item['image'] ?? $fallbackImages[$loop->index % count($fallbackImages)];
        $overlayIndex = $loop->index % $overlayCount;
      @endphp
      <div class="feature-stack-img{{ (!$heroFeature && $loop->first) ? ' active' : '' }}" data-stack-step="{{ $loop->iteration }}" style="background-image:url('{{ $img }}')">
        <div class="feature-stack-overlay feature-overlay-{{ $overlayIndex }}"></div>
      </div>
      @endforeach
    </div>

    <!-- RIGHT: step content, normal scroll flow -->
    <div class="feature-steps-col px-6 sm:px-10 lg:px-16">
      @foreach ($listFeatures as $item)
      @php
        $mobileImg = $item['image'] ?? $fallbackImages[$loop->index % count($fallbackImages)];
      @endphp
      <div class="feature-step lg:min-h-screen flex flex-col justify-center py-10 lg:py-0" data-step-trigger="{{ $loop->iteration }}">
        <div class="feature-step-mobile-img lg:hidden rounded-2xl overflow-hidden mb-6" style="background-image:url('{{ $mobileImg }}');background-size:cover;background-position:center;height:220px"></div>
        <div class="feature-step-inner max-w-lg">
          <span class="feature-step-num font-display font-light block" style="font-size:clamp(3.4rem,6vw,6rem);color:#d6dcec;line-height:1">{{ str_pad($loop->iteration, 2, '0', STR_PAD_LEFT) }}</span>
          <h3 class="font-display font-bold text-[#0c1427] text-2xl lg:text-3xl mt-4 mb-3">{{ $item['title'] }}</h3>
          <p class="text-[#64748b] leading-relaxed mb-4">{{ $item['description'] }}</p>
          @if (!empty($item['tags']))
          <div class="flex flex-wrap gap-2">
            @foreach ($item['tags'] as $tag)
            <span class="svc-tag-light" style="font-size:12px">{{ $tag }}</span>
            @endforeach
          </div>
          @endif
        </div>
      </div>
      @endforeach
    </div>
  </div>
  @endif

  @if (!empty($service['features']['extra']))
  <div class="relative z-10 max-w-[1400px] mx-auto px-6 sm:px-10 pb-16 lg:pb-20">
    <div class="zoom-reveal pt-8 mt-2 border-t" style="border-color:#eee">
      <h3 class="font-display font-bold text-[#0c1427] text-lg mb-4">{{ $service['features']['extra']['title'] }}</h3>
      <div class="flex flex-wrap gap-2">
        @foreach ($service['features']['extra']['tags'] as $tag)
        <span class="svc-tag-light" style="font-size:12px">{{ $tag }}</span>
        @endforeach
      </div>
    </div>
  </div>
  @else
  <div class="pb-16 lg:pb-20"></div>
  @endif
</section>

<!-- STATS: "Cargo Manifest Strip" (service-detail "By The Numbers"). A single
     unified strip with dashed ticket-perforation dividers between stats and
     a "DATA POINT 0N" micro-label per block — a waybill/manifest motif that
     ties the numbers to the company's air-freight documentation identity.
     See stats-manifest-section init in app.js for the divider draw-in +
     staggered count-up. -->
@if (!empty($service['stats']))
<section class="max-w-[1400px] mx-auto px-6 sm:px-10 py-16 lg:py-20 stats-manifest-section">
  <div class="mb-10 lg:mb-14 zoom-reveal">
    <span class="section-label">{{ $service['stats']['label'] }}</span>
    <h2 class="font-display font-extrabold text-[#0c1427] leading-[1.04] tracking-tight" style="font-size:clamp(2.2rem,4vw,3.4rem)">{!! $service['stats']['heading'] !!}</h2>
  </div>

  <!-- Route-line accent — one decorative touch, not repeated -->
  <div class="hidden lg:flex items-center gap-2 mb-3 zoom-reveal" style="width:140px">
    <span class="flex-1 border-t border-dashed" style="border-color:rgba(200,16,46,.4)"></span>
    <svg class="w-4 h-4 flex-shrink-0" style="color:rgba(200,16,46,.4)" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.6">
      <path stroke-linecap="round" stroke-linejoin="round" d="M6 12L3.269 3.126A59.77 59.77 0 0121.485 12 59.77 59.77 0 013.27 20.876L5.999 12zm0 0h7.5"/>
    </svg>
  </div>

  <div class="stats-manifest-strip zoom-reveal bg-[#fafbff] border border-[#d6dcec] rounded-2xl overflow-hidden">
    <div class="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-4">
      @php $statsTotal = count($service['stats']['items']); @endphp
      @foreach ($service['stats']['items'] as $stat)
      @php
        $i = $loop->iteration;
        $isLastOverall = $loop->last;
        $smLastInRow = $i % 2 === 0;
        $smLastRow = $i > (intdiv($statsTotal - 1, 2) * 2);
        $lgLastInRow = $i % 4 === 0;
        $lgLastRow = $i > (intdiv($statsTotal - 1, 4) * 4);
      @endphp
      <div class="stat-manifest-block relative p-8 lg:p-10">
        <div class="stat-manifest-divider-v absolute top-0 bottom-0 right-0 pointer-events-none hidden
          {{ $smLastInRow ? 'sm:hidden' : 'sm:block' }}
          {{ $lgLastInRow ? 'lg:hidden' : 'lg:block' }}"></div>
        <div class="stat-manifest-divider-h absolute left-0 right-0 bottom-0 pointer-events-none
          {{ $isLastOverall ? 'hidden' : 'block' }}
          {{ $smLastRow ? 'sm:hidden' : 'sm:block' }}
          {{ $lgLastRow ? 'lg:hidden' : 'lg:block' }}"></div>

        <div class="flex items-center gap-2 mb-4">
          <span class="w-1.5 h-1.5 rounded-full bg-[#c8102e] animate-pulse flex-shrink-0"></span>
          <span class="text-[10px] uppercase tracking-[0.15em] text-[#94a3b8] font-semibold">Data Point {{ str_pad($i, 2, '0', STR_PAD_LEFT) }}</span>
        </div>
        <div class="stat-manifest-num font-display font-black text-[#c8102e] counter-trigger" style="font-size:clamp(2.75rem,3.6vw,3.25rem);line-height:1;font-variant-numeric:tabular-nums" data-target="{{ $stat['target'] }}" data-suffix="{{ $stat['suffix'] }}">{{ number_format($stat['target']) }}{{ $stat['suffix'] }}</div>
        <div class="font-display font-bold text-[#0c1427] text-base mt-1.5">{{ $stat['label'] }}</div>
        <p class="text-sm text-[#64748b] leading-relaxed mt-1.5">{{ $stat['description'] }}</p>
      </div>
      @endforeach
    </div>

    @if (!empty($service['stats']['note']))
    <div class="border-t border-dashed border-[#e5e9f5] px-8 lg:px-10 py-4">
      <p class="text-[11px] text-[#94a3b8] uppercase tracking-wide">{{ $service['stats']['note'] }}</p>
    </div>
    @endif
  </div>
</section>
@endif

<!-- RELATED SERVICES — always all other services, current one filtered out automatically -->
<section class="bg-[#f5f7ff] relative overflow-hidden">
  <div class="absolute inset-0 grid-overlay"></div>
  <div class="relative z-10 max-w-[1400px] mx-auto px-6 sm:px-10 py-16 lg:py-20">
    <div class="mb-14 zoom-reveal">
      <span class="section-label">Explore More</span>
      <h2 class="font-display font-extrabold text-[#0c1427] leading-[1.04] tracking-tight" style="font-size:clamp(2.2rem,4vw,3.4rem)">Related <span class="text-gradient-red">services.</span></h2>
    </div>
    @php
      $allServices = \App\Support\ServiceCatalog::all();
      $relatedTotal = 0;
      foreach ($allServices as $s) { if ($s['route'] !== $service['slug']) $relatedTotal++; }
      $relatedIndex = 0;
    @endphp
    <div class="grid grid-cols-1 lg:grid-cols-2 lg:gap-x-16 related-list">
      @foreach ($allServices as $related)
      @continue($related['route'] === $service['slug'])
      @php
        $relatedIndex++;
        $relatedOrphan = $relatedIndex === $relatedTotal && $relatedTotal % 2 === 1;
      @endphp
      <a href="{{ route($related['route']) }}" data-preview-image="{{ $related['image'] }}" class="related-row group flex items-center justify-between gap-6 py-8 px-6 border-t hover:bg-[#0c14270a] transition-colors duration-200{{ $relatedOrphan ? ' lg:col-span-2' : '' }}" style="border-color:#eee">
        <div class="flex items-center gap-6">
          <span class="font-display flex-shrink-0" style="font-size:36px;font-weight:300;line-height:1;color:#c9c9c9;font-variant-numeric:tabular-nums">{{ str_pad($relatedIndex, 2, '0', STR_PAD_LEFT) }}</span>
          <span class="font-display font-bold text-[#0c1427] text-lg transition-colors duration-200 group-hover:text-[#c8102e]">{{ $related['name'] }}</span>
        </div>
        <span class="flex items-center justify-center flex-shrink-0 rounded-full border transition-all duration-200 group-hover:bg-[#0c1427] group-hover:border-[#0c1427]" style="width:40px;height:40px;border-color:#e2e5ee">
          <svg class="w-4 h-4 transition-all duration-200 text-[#0c1427]/35 group-hover:text-white group-hover:translate-x-0.5" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2.5"><path stroke-linecap="round" stroke-linejoin="round" d="M13.5 4.5L21 12m0 0l-7.5 7.5M21 12H3"/></svg>
        </span>
      </a>
      @endforeach
    </div>
  </div>
  <div class="related-hover-preview pointer-events-none fixed top-0 left-0 z-50 opacity-0 rounded-xl overflow-hidden" id="related-hover-preview" style="width:220px; height:150px;">
    <img class="related-hover-preview-img w-full h-full object-cover" src="" alt=""/>
    <img class="related-hover-preview-img w-full h-full object-cover" src="" alt=""/>
  </div>
</section>

<!-- CTA -->
<section class="relative py-12 lg:py-16 overflow-hidden grain cta-bg">
  <div class="absolute inset-0 grid-overlay-dark opacity-28"></div>
  <div class="absolute right-[-2%] top-1/2 -translate-y-1/2 font-display font-black leading-none text-white/[0.022] pointer-events-none select-none hidden xl:block" style="font-size:18vw">A1</div>
  <div class="relative z-10 max-w-[1400px] mx-auto px-6 sm:px-10 text-center zoom-reveal">
    <div class="inline-flex items-center gap-2.5 glass rounded-full px-4 py-1.5 mb-6">
      <span class="w-1.5 h-1.5 rounded-full bg-[#c8102e] animate-pulse flex-shrink-0"></span>
      <span class="text-[10px] font-semibold text-white/48 tracking-[0.2em] uppercase">{{ $service['cta']['badge'] ?? 'Ready to Ship?' }}</span>
    </div>
    <h2 class="font-display font-extrabold text-white leading-[0.97] tracking-tight mb-5" style="font-size:clamp(2.4rem,5.5vw,5.5rem)">
      Let's move the world<br/>together.
    </h2>
    <p class="text-white/42 leading-relaxed mb-8 max-w-lg mx-auto font-light" style="font-size:clamp(.95rem,1.4vw,1.1rem)">{{ $service['cta']['description'] ?? 'Get a tailored logistics proposal in under 24 hours — no obligations, just a clear plan and an honest price.' }}</p>
    <div class="flex flex-col sm:flex-row gap-3 justify-center">
      <a href="{{ route('contact') }}" class="btn-primary font-display font-bold text-white px-8 py-4 rounded-xl flex items-center justify-center gap-2.5 text-base">
        Get a Free Quote
        <svg class="w-4 h-4" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2.5"><path stroke-linecap="round" stroke-linejoin="round" d="M13.5 4.5L21 12m0 0l-7.5 7.5M21 12H3"/></svg>
      </a>
      <a href="tel:+911142630977" class="btn-ghost font-display font-semibold px-8 py-4 rounded-xl flex items-center justify-center gap-2.5 text-base">
        <svg class="w-4 h-4" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2"><path stroke-linecap="round" stroke-linejoin="round" d="M2.25 6.75c0 8.284 6.716 15 15 15h2.25a2.25 2.25 0 002.25-2.25v-1.372c0-.516-.351-.966-.852-1.091l-4.423-1.106c-.44-.11-.902.055-1.173.417l-.97 1.293c-.282.376-.769.542-1.21.38a12.035 12.035 0 01-7.143-7.143c-.162-.441.004-.928.38-1.21l1.293-.97c.363-.271.527-.734.417-1.173L6.963 3.102a1.125 1.125 0 00-1.091-.852H4.5A2.25 2.25 0 002.25 4.5v2.25z"/></svg>
        Speak to a Specialist
      </a>
    </div>
  </div>
</section>
@endsection