@props(['services', 'domains'])

<section class="v2-section v2-services" aria-labelledby="home2-services-title">
    <div class="v2-shell">
        <div class="v2-section-head">
            <div>
                <p class="v2-eyebrow">Core services</p>
                <h2 id="home2-services-title">Solutions built around three specialist domains.</h2>
            </div>
            <a href="{{ route('services') }}">View all services</a>
        </div>
        <div class="v2-service-grid">
            @forelse($services as $service)
                <article class="v2-service-card">
                    <div class="v2-service-icon">{{ strtoupper(substr($service->title, 0, 2)) }}</div>
                    <h3>{{ $service->title }}</h3>
                    <p>{{ $service->summary }}</p>
                    <a href="{{ route('services.show', $service->slug) }}">Explore service</a>
                </article>
            @empty
                @foreach($domains->take(3) as $domain)
                    <article class="v2-service-card">
                        <div class="v2-service-icon">{{ strtoupper(substr($domain->name, 0, 2)) }}</div>
                        <h3>{{ $domain->name }}</h3>
                        <p>{{ $domain->description }}</p>
                        <a href="{{ route('category.show', $domain->slug) }}">Explore domain</a>
                    </article>
                @endforeach
            @endforelse
        </div>
    </div>
</section>