@php
    $whatsapp_cards = collect(json_decode(SettingHelper::getSetting('whatsapp_channels', '[]'), true) ?: [])
        ->filter(fn($card) => !empty($card['title']));
@endphp

<div class="grid grid-cols-1 md:grid-cols-2 xl:grid-cols-{{ $whatsapp_cards->count() > 4 ? '4' : $whatsapp_cards->count() }} gap-6 dynamic-grid">
    @foreach ($whatsapp_cards as $card)
        <div class="border border-transparent rounded-lg shadow-lg p-6 bg-white flex flex-col justify-between">
            <div>
                <div class="flex justify-center mb-4">
                    <div class="inline-flex items-center justify-center w-12 h-12 text-2xl text-white bg-green-500 rounded-full">
                        <i class='bx bxl-whatsapp'></i>
                    </div>
                </div>
                <h2 class="text-lg font-bold text-center">{{ $card['title'] }}</h2>
                <p class="text-sm text-center text-gray-600">{{ $card['description'] }}</p>
            </div>
            
            <a href="{{ $card['link'] }}" target="_blank" class="block mt-4 bg-gradient-to-r from-green-500 to-main text-white text-center py-2 rounded-lg hover:bg-secondary transition">
                Join Now
            </a>
        </div>
    @endforeach
</div>