@php
    $creatorItems = collect(is_array($creators ?? null) ? $creators : [])->filter()->take(4)->values();
    $avatarFallback = 'https://files.skinbase.org/default/avatar_default.webp';
@endphp

@if ($creatorItems->isNotEmpty())
    <section class="mt-14 px-4 sm:px-6 lg:px-8">
        <div class="mb-5 flex items-center justify-between">
            <div>
                <h2 class="text-xl font-bold text-white">Suggested Creators</h2>
                <p class="mt-0.5 text-xs text-nova-400">Creators you might enjoy following</p>
            </div>
            <a href="/creators/top" class="text-sm text-nova-300 transition hover:text-white">Explore all →</a>
        </div>

        <div class="grid grid-cols-2 gap-4 sm:grid-cols-3 md:grid-cols-4 lg:grid-cols-4">
            @foreach ($creatorItems as $creator)
                <article class="group flex flex-col items-center rounded-2xl bg-nova-800/60 p-5 ring-1 ring-white/5 transition hover:bg-nova-800 hover:ring-white/10">
                    <a href="{{ $creator['url'] ?? '#' }}" class="block">
                        <img src="{{ $creator['avatar'] ?? $avatarFallback }}" alt="{{ $creator['name'] ?? 'Creator' }}" class="mx-auto h-14 w-14 rounded-full object-cover ring-2 ring-white/10 transition group-hover:ring-accent/50" loading="lazy" decoding="async">
                    </a>
                    <div class="mt-3 w-full text-center">
                        <a href="{{ $creator['url'] ?? '#' }}" class="block truncate text-sm font-semibold text-white transition hover:text-accent">{{ $creator['name'] ?? 'Creator' }}</a>
                        @if (!empty($creator['username']))
                            <p class="truncate text-xs text-nova-400">@{{ $creator['username'] }}</p>
                        @endif
                        <div class="mt-2 flex items-center justify-center gap-3 text-xs text-nova-500">
                            @if ((int) ($creator['followers_count'] ?? 0) > 0)
                                <span>{{ number_format((int) ($creator['followers_count'] ?? 0)) }} followers</span>
                            @endif
                            @if ((int) ($creator['artworks_count'] ?? 0) > 0)
                                <span>{{ number_format((int) ($creator['artworks_count'] ?? 0)) }} artworks</span>
                            @endif
                        </div>
                    </div>
                    <a href="{{ $creator['url'] ?? '#' }}" class="mt-4 w-full rounded-lg bg-nova-700 py-1.5 text-center text-xs font-medium text-white transition hover:bg-nova-600">
                        View Profile
                    </a>
                </article>
            @endforeach
        </div>
    </section>
@endif