@props([
    'stories',
    'service',
    'slug' => null,
    'localizedRoute',
])

@php
    use App\Helpers\ServiceCaseStudies;

    $displayStories = ServiceCaseStudies::resolve(
        $service,
        $stories ?? [],
        3,
        $slug ?? ($service['slug'] ?? $service['id'] ?? null)
    );
    $sliderId = 'case-studies-cards-' . preg_replace('/[^a-z0-9-]/', '', (string) ($slug ?? 'service'));
@endphp

@if(count($displayStories) > 0)
@once
@push('styles')
<link rel="stylesheet" href="{{ asset('css/service-page-hero.css') }}?v=6">
<link rel="stylesheet" href="{{ asset('css/hero-cards-slider.css') }}?v=11">
@endpush
@push('scripts')
<script src="{{ asset('js/hero-cards-slider.js') }}?v=2"></script>
@endpush
@endonce

<section id="case-studies" class="svc-section svc-section--white scroll-mt-24" aria-labelledby="case-studies-heading">
    <div class="site-container">
        <x-service-detail.section-intro
            :eyebrow="__('messages.service_detail.case_studies_section_label')"
            :title="__('messages.service_detail.case_studies', ['service' => $service['name']])"
            :description="__('messages.service_detail.case_studies_desc', ['service' => strtolower($service['name'])])"
            heading-id="case-studies-heading"
        />

        <div class="svc-cases-slider svc-reveal">
            <div id="{{ $sliderId }}"
                 class="hero-cards-slider hide-scrollbar pb-4 md:pb-0 h-[320px] sm:h-[380px] md:h-[480px] lg:h-[540px] overflow-x-auto md:overflow-visible snap-x snap-mandatory md:snap-none"
                 data-hero-cards-slider
                 data-rotate-ms="5500"
                 role="region"
                 aria-label="{{ __('messages.service_detail.case_studies', ['service' => $service['name']]) }}">
                @foreach($displayStories as $index => $story)
                @php
                    $caseUrl = ! empty($story['slug'])
                        ? $localizedRoute('portfolio.show', ['slug' => $story['slug']])
                        : null;
                    $imagePath = $story['image'] ?? null;
                    $cardStats = $story['stats'] ?? [];
                @endphp
                <article class="hero-card hero-card--case-study group bg-slate-200 snap-center {{ $index === 0 ? 'is-expanded is-revealed' : '' }}"
                     data-index="{{ $index }}"
                     aria-labelledby="{{ $sliderId }}-title-{{ $index }}">
                    @if($imagePath)
                    <img src="{{ asset(ltrim($imagePath, '/')) }}"
                         alt="{{ $story['client'] }}"
                         loading="{{ $index === 0 ? 'eager' : 'lazy' }}"
                         decoding="{{ $index === 0 ? 'sync' : 'async' }}"
                         width="800"
                         height="550">
                    @else
                    <div class="hero-card__fallback" aria-hidden="true"></div>
                    @endif

                    <div class="hero-card__shade hero-card__shade--case" aria-hidden="true"></div>

                    <div class="card-content-collapsed" aria-hidden="true">
                        <h3>{{ $story['client'] }}</h3>
                    </div>

                    <div class="card-content-expanded hero-card__case-dock">
                        <div class="hero-card__case-panel">
                            <div class="hero-card__layer hero-card__layer--1">
                                @if(! empty($story['scope']))
                                <p class="hero-card__scope">{{ $story['scope'] }}</p>
                                @endif
                                <h2 id="{{ $sliderId }}-title-{{ $index }}" class="hero-card__title">
                                    {{ $story['client'] }}
                                </h2>
                                @if($cardStats !== [])
                                <ul class="hero-card__stats" aria-label="{{ __('messages.service_detail.case_studies_section_label') }}">
                                    @foreach($cardStats as $stat)
                                    <li class="hero-card__stat">
                                        <span class="hero-card__stat-value">{{ $stat['value'] }}</span>
                                        <span class="hero-card__stat-label">{{ $stat['label'] }}</span>
                                    </li>
                                    @endforeach
                                </ul>
                                @endif
                            </div>

                            @if($cardStats === [] && ! empty($story['result']))
                            <div class="hero-card__layer hero-card__layer--2">
                                <p class="hero-card__result">{{ $story['result'] }}</p>
                            </div>
                            @endif

                            @if(! empty($story['summary']))
                            <div class="hero-card__layer hero-card__layer--3">
                                <p class="hero-card__summary">{{ $story['summary'] }}</p>
                            </div>
                            @endif

                            @if($caseUrl)
                            <div class="hero-card__layer hero-card__layer--4">
                                <a href="{{ $caseUrl }}"
                                   class="hero-card__cta"
                                   onclick="event.stopPropagation();"
                                   title="{{ $story['client'] }}">
                                    {{ __('messages.nav.view_case_study') }}
                                    <svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24" aria-hidden="true"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M17 8l4 4m0 0l-4 4m4-4H3"/></svg>
                                </a>
                            </div>
                            @endif
                        </div>
                    </div>
                </article>
                @endforeach
            </div>
        </div>

        <a href="{{ $localizedRoute('portfolio.index') }}" class="svc-link svc-reveal svc-reveal--delay-2">
            {{ __('messages.service_detail.view_all_case_studies') }}
            <svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24" aria-hidden="true"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 5l7 7-7 7"/></svg>
        </a>
    </div>
</section>
@endif