@props([
    'title',
    'comparisons',
    'highlight' => null,
])
<section class="nx-showcase" aria-labelledby="nx-showcase-title">
    <div class="nx-shell">
        <x-nx.section-head
            index="03"
            label="Before & after"
            :title="$title"
            :highlight="$highlight"
            id="nx-showcase-title"
        />

        <div class="nx-showcase__grid">
            @foreach($comparisons as $comparison)
                @php
                    $label = $comparison['label'] ?? '';
                    $cat = $comparison['category'] ?? '';
                    $beforeImg = $cat ? asset("images/portfolio/{$cat}-1.jpg") : '';
                    $afterImg = $cat ? asset("images/portfolio/{$cat}-2.jpg") : '';
                @endphp
                <article class="nx-card nx-showcase__item">
                    <div class="nx-showcase__pair">
                        <figure class="nx-showcase__shot">
                            <span class="nx-showcase__tag">Before</span>
                            @if($beforeImg)
                                <img src="{{ $beforeImg }}" alt="{{ $label }} before" loading="lazy" decoding="async" width="400" height="400">
                            @endif
                        </figure>
                        <figure class="nx-showcase__shot nx-showcase__shot--after">
                            <span class="nx-showcase__tag nx-showcase__tag--after">After</span>
                            @if($afterImg)
                                <img src="{{ $afterImg }}" alt="{{ $label }} after" loading="lazy" decoding="async" width="400" height="400">
                            @endif
                        </figure>
                    </div>
                    <p class="nx-showcase__caption">{{ $label }}</p>
                </article>
            @endforeach
        </div>

        <div class="nx-section-foot">
            <a href="{{ route('work.show', 'fleet-designs') }}" class="nx-link-arrow">Explore full portfolio</a>
        </div>
    </div>
</section>