@props(['data' => []])

@php
    $services = \Apex\Modules\Services\Models\Service::query()->where('status', 'published')->orderBy('sort_order')->limit($data['limit'] ?? 8)->get();
@endphp

<section class="section-padding bg-[#f8fafc]">
    <div class="container-page">
        <span class="home-eyebrow">Services</span>
        <h2 class="section-heading mt-6">{{ $data['title'] ?? 'Our Services' }}</h2>
        <div class="mt-12 grid gap-5 sm:grid-cols-2 lg:grid-cols-4">
            @forelse($services as $service)
                <a href="{{ route('services.show', $service->slug) }}" class="hub-card group">
                    <h3 class="font-bold text-secondary group-hover:text-primary">{{ $service->title }}</h3>
                    <p class="mt-2 line-clamp-3 text-sm text-muted">{{ Str::limit($service->summary, 80) }}</p>
                </a>
            @empty
                @foreach(['Virtual Assistants', 'Executive Assistants', 'Marketing', 'Sales'] as $title)
                    <div class="premium-card p-6"><h3 class="font-bold">{{ $title }}</h3></div>
                @endforeach
            @endforelse
        </div>
    </div>
</section>