@php
    $groupPool = collect([
        data_get($groups, 'spotlight'),
        ...array_values(is_array(data_get($groups, 'featured')) ? data_get($groups, 'featured') : []),
        ...array_values(is_array(data_get($groups, 'recruiting')) ? data_get($groups, 'recruiting') : []),
        ...array_values(is_array(data_get($groups, 'rising')) ? data_get($groups, 'rising') : []),
    ])->filter();

    $groupItems = $groupPool->unique(fn ($group) => (int) ($group['id'] ?? 0))->take(4)->values();
@endphp

@if ($groupItems->isNotEmpty())
    <section class="mt-14 px-4 sm:px-6 lg:px-8">
        <div class="mb-5 flex items-center justify-between">
            <h2 class="text-xl font-bold text-white">Group Spotlight</h2>
            <a href="/groups" class="text-sm text-nova-300 transition hover:text-white">All groups →</a>
        </div>

        <div class="grid grid-cols-1 gap-4 sm:grid-cols-2 xl:grid-cols-4">
            @foreach ($groupItems as $group)
                @php
                    $stats = collect([
                        ['key' => 'artworks', 'label' => 'artworks', 'value' => (int) data_get($group, 'counts.artworks', 0)],
                        ['key' => 'members', 'label' => 'members', 'value' => (int) data_get($group, 'counts.members', 0)],
                        ['key' => 'followers', 'label' => 'followers', 'value' => (int) data_get($group, 'counts.followers', 0)],
                    ])->filter(fn ($item) => $item['value'] > 0)->values();
                @endphp
                <article class="group relative flex flex-col overflow-hidden rounded-xl bg-panel p-5 shadow-sm transition hover:ring-1 hover:ring-nova-500">
                    @if (!empty($group['banner_url']))
                        <img src="{{ $group['banner_url'] }}" alt="" aria-hidden="true" class="pointer-events-none absolute inset-0 h-full w-full object-cover opacity-40 transition duration-500 group-hover:scale-105 group-hover:opacity-20" loading="lazy" decoding="async">
                        <div class="pointer-events-none absolute inset-0 bg-gradient-to-t from-panel via-panel/85 to-panel/70"></div>
                    @endif

                    <a href="{{ data_get($group, 'urls.public', '/groups') }}" class="relative block">
                        <div class="flex h-16 w-16 items-center justify-center overflow-hidden rounded-2xl bg-nova-800/80 ring-4 ring-nova-800">
                            @if (!empty($group['avatar_url']))
                                <img src="{{ $group['avatar_url'] }}" alt="" class="h-full w-full object-cover" loading="lazy" decoding="async">
                            @else
                                <span class="text-2xl text-white">G</span>
                            @endif
                        </div>
                        <h3 class="mt-3 text-base font-semibold text-white">{{ $group['name'] ?? 'Group' }}</h3>
                    </a>

                    <p class="relative mt-2 line-clamp-3 text-sm text-soft">{{ $group['headline'] ?? $group['bio_excerpt'] ?? 'Shared publishing identity for collaborative releases and artwork.' }}</p>

                    <div class="relative mt-3 flex flex-wrap gap-2 text-xs text-soft">
                        @if (!empty($group['is_recruiting']))
                            <span class="rounded-full bg-emerald-400/15 px-2.5 py-1 font-semibold text-emerald-200">Recruiting</span>
                        @endif
                        @if (!empty($group['is_verified']))
                            <span class="rounded-full bg-sky-400/15 px-2.5 py-1 font-semibold text-sky-200">Verified</span>
                        @endif
                        @if (!empty(data_get($group, 'owner.username')) || !empty(data_get($group, 'owner.name')))
                            <span>Led by {{ data_get($group, 'owner.username') ?: data_get($group, 'owner.name') }}</span>
                        @endif
                    </div>

                    @if ($stats->isNotEmpty())
                        <div class="relative mt-4 flex flex-wrap gap-3 text-xs text-soft">
                            @foreach ($stats as $stat)
                                <span>{{ number_format($stat['value']) }} {{ $stat['label'] }}</span>
                            @endforeach
                        </div>
                    @endif

                    <a href="{{ data_get($group, 'urls.public', '/groups') }}" class="relative mt-4 inline-flex w-fit rounded-lg bg-nova-700 px-4 py-1.5 text-xs font-semibold text-white transition hover:bg-nova-600">
                        View Group
                    </a>
                </article>
            @endforeach
        </div>
    </section>
@endif