@props([
    'title',
    'comparisons',
    'highlight' => null,
])
@php
    use App\Support\Highlight;

    $featured = $comparisons[0] ?? null;
    $secondary = array_slice($comparisons, 1);
@endphp
<section class="atlas-shift" aria-labelledby="atlas-shift-title">
    <div class="atlas-shift__head">
        <p class="atlas-kicker">Transformation</p>
        <h2 id="atlas-shift-title" class="atlas-display atlas-shift__title">
            {!! Highlight::word($title, $highlight) !!}
        </h2>
    </div>

    @if($featured)
        @php
            $label = $featured['label'] ?? '';
            $cat = $featured['category'] ?? '';
            $beforeImg = $cat ? asset("images/portfolio/{$cat}-1.jpg") : '';
            $afterImg = $cat ? asset("images/portfolio/{$cat}-2.jpg") : '';
        @endphp
        <div class="atlas-shift__hero">
            <div class="atlas-compare atlas-compare--lg">
                <figure class="atlas-compare__pane">
                    <span class="atlas-compare__label">Before</span>
                    @if($beforeImg)
                        <img src="{{ $beforeImg }}" alt="{{ $label }} before" loading="lazy" decoding="async" width="800" height="600">
                    @endif
                </figure>
                <figure class="atlas-compare__pane atlas-compare__pane--after">
                    <span class="atlas-compare__label atlas-compare__label--after">After</span>
                    @if($afterImg)
                        <img src="{{ $afterImg }}" alt="{{ $label }} after" loading="lazy" decoding="async" width="800" height="600">
                    @endif
                </figure>
            </div>
            <p class="atlas-shift__feat-label">{{ $label }}</p>
        </div>
    @endif

    @if(count($secondary))
        <div class="atlas-shift__pair">
            @foreach($secondary 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="atlas-shift__mini">
                    <div class="atlas-compare">
                        <figure class="atlas-compare__pane">
                            <span class="atlas-compare__label">Before</span>
                            @if($beforeImg)
                                <img src="{{ $beforeImg }}" alt="{{ $label }} before" loading="lazy" decoding="async" width="400" height="400">
                            @endif
                        </figure>
                        <figure class="atlas-compare__pane atlas-compare__pane--after">
                            <span class="atlas-compare__label atlas-compare__label--after">After</span>
                            @if($afterImg)
                                <img src="{{ $afterImg }}" alt="{{ $label }} after" loading="lazy" decoding="async" width="400" height="400">
                            @endif
                        </figure>
                    </div>
                    <p class="atlas-shift__mini-label">{{ $label }}</p>
                </article>
            @endforeach
        </div>
    @endif

    <div class="atlas-shift__foot">
        <a href="{{ route('work.show', 'fleet-designs') }}" class="atlas-btn atlas-btn--outline">View full portfolio</a>
    </div>
</section>