@props([
    'title',
    'cards',
    'highlight' => null,
])
@php
    $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="nx-solutions" aria-labelledby="nx-solutions-title">
    <div class="nx-shell">
        <x-nx.section-head
            index="02"
            label="What we build"
            :title="$title"
            :highlight="$highlight"
            id="nx-solutions-title"
        />

        <div class="nx-solutions__grid">
            @foreach($cards as $card)
                @php
                    $slug = $card['slug'] ?? null;
                    $imageFile = $imageMap[$slug] ?? null;
                    $imageSrc = $imageFile ? asset("images/portfolio/{$imageFile}") : '';
                @endphp
                <a href="{{ route('services.show', $card['slug']) }}" class="nx-card nx-solutions__card">
                    <div class="nx-solutions__media">
                        @if($imageSrc)
                            <img
                                src="{{ $imageSrc }}"
                                alt="{{ $card['title'] ?? '' }}"
                                loading="lazy"
                                decoding="async"
                                width="640"
                                height="480"
                            >
                        @endif
                    </div>
                    <div class="nx-solutions__body">
                        <h3 class="nx-solutions__name">{{ $card['title'] }}</h3>
                        <p class="nx-solutions__desc">{{ $card['description'] }}</p>
                        <span class="nx-solutions__link">Learn more</span>
                    </div>
                </a>
            @endforeach
        </div>
    </div>
</section>