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

    $imageMap = [
        'fleet-branding' => 'fleet-designs-1.jpg',
        'website-design' => 'websites-1.jpg',
        'logo-design' => 'logo-designs-1.jpg',
        'uniform-design' => 'uniform-designs-1.jpg',
    ];
@endphp
<section class="atlas-stack" aria-labelledby="atlas-stack-title">
    <header class="atlas-stack__intro">
        <p class="atlas-kicker">What we deliver</p>
        <h2 id="atlas-stack-title" class="atlas-display atlas-stack__title">
            {!! Highlight::word($title, $highlight) !!}
        </h2>
    </header>

    <div class="atlas-stack__rows">
        @foreach($cards as $card)
            @php
                $slug = $card['slug'] ?? null;
                $imageFile = $imageMap[$slug] ?? null;
                $imageSrc = $imageFile ? asset("images/portfolio/{$imageFile}") : '';
            @endphp
            <article @class(['atlas-row', 'atlas-row--flip' => $loop->even])>
                <div class="atlas-row__visual">
                    @if($imageSrc)
                        <img
                            src="{{ $imageSrc }}"
                            alt="{{ $card['title'] ?? '' }}"
                            loading="lazy"
                            decoding="async"
                            width="800"
                            height="600"
                        >
                    @endif
                </div>
                <div class="atlas-row__content">
                    <span class="atlas-row__index">{{ str_pad((string) $loop->iteration, 2, '0', STR_PAD_LEFT) }}</span>
                    <h3 class="atlas-row__name">{{ $card['title'] }}</h3>
                    <p class="atlas-body">{{ $card['description'] }}</p>
                    @if(! empty($card['bullets']))
                        <ul class="atlas-row__list">
                            @foreach($card['bullets'] as $bullet)
                                <li>{{ $bullet }}</li>
                            @endforeach
                        </ul>
                    @endif
                    <a href="{{ route('services.show', $card['slug']) }}" class="atlas-row__link">
                        Explore {{ $card['title'] }}
                        <span aria-hidden="true">→</span>
                    </a>
                </div>
            </article>
        @endforeach
    </div>
</section>