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

@php $industries = \Apex\Modules\Industries\Models\Industry::query()->where('status', 'published')->limit(10)->get(); @endphp

<section class="section-padding bg-white">
    <div class="container-page">
        <div class="mx-auto max-w-3xl text-center">
            <span class="home-eyebrow">Industries</span>
            <h2 class="section-heading mt-6">{{ $data['title'] ?? 'Industries we serve' }}</h2>
        </div>
        <div class="mt-8 grid gap-4 sm:grid-cols-2 md:grid-cols-3 lg:grid-cols-5">
            @forelse($industries as $industry)
                <a href="{{ route('industries.show', $industry->slug) }}" class="hub-card group text-center">
                    <span class="mx-auto flex h-12 w-12 items-center justify-center rounded-2xl bg-primary/10 text-lg font-bold text-primary">
                        {{ strtoupper(substr($industry->name, 0, 1)) }}
                    </span>
                    <h3 class="mt-4 font-semibold text-secondary group-hover:text-primary">{{ $industry->name }}</h3>
                </a>
            @empty
                @foreach(['Small Business', 'Agencies', 'Startups', 'Healthcare', 'E-commerce'] as $name)
                    <div class="hub-card text-center">
                        <span class="mx-auto flex h-12 w-12 items-center justify-center rounded-2xl bg-primary/10 text-lg font-bold text-primary">
                            {{ strtoupper(substr($name, 0, 1)) }}
                        </span>
                        <h3 class="mt-4 font-semibold text-secondary">{{ $name }}</h3>
                    </div>
                @endforeach
            @endforelse
        </div>
    </div>
</section>