@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="nova-section nova-section--muted nova-svc-rail" id="nova-solutions" aria-labelledby="nova-svc-rail-title">
    <div class="nova-wrap">
        <header class="nova-section-head">
            <span class="nova-tag">What we build</span>
            <h2 id="nova-svc-rail-title" class="nova-section-head__title">
                {!! Highlight::word($title, $highlight) !!}
            </h2>
            <p class="nova-section-head__lede">Four ways we help trade businesses look established — on the road, online, and on every job.</p>
        </header>

        <div class="nova-svc-rail__track" tabindex="0" role="region" aria-label="Our solutions">
            @foreach($cards as $card)
                @php
                    $imageFile = $imageMap[$card['slug']] ?? null;
                    $imageSrc = $imageFile ? asset("images/portfolio/{$imageFile}") : '';
                @endphp
                <a href="{{ route('services.show', $card['slug']) }}" class="nova-svc-rail__card">
                    @if($imageSrc)
                        <img
                            class="nova-svc-rail__img"
                            src="{{ $imageSrc }}"
                            alt=""
                            loading="lazy"
                            decoding="async"
                            width="480"
                            height="640"
                        >
                    @endif
                    <div class="nova-svc-rail__shade" aria-hidden="true"></div>
                    <div class="nova-svc-rail__content">
                        <span class="nova-svc-rail__num">{{ str_pad((string) $loop->iteration, 2, '0', STR_PAD_LEFT) }}</span>
                        <h3 class="nova-svc-rail__name">{{ $card['title'] }}</h3>
                        <p class="nova-svc-rail__desc">{{ $card['description'] }}</p>
                        <span class="nova-svc-rail__cta">View service <span aria-hidden="true">→</span></span>
                    </div>
                </a>
            @endforeach
        </div>

        <p class="nova-svc-rail__hint" aria-hidden="true">Scroll to explore</p>
    </div>
</section>