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

<div class="grid grid-cols-1 md:grid-cols-2 xl:grid-cols-{{ $cards->count() > 4 ? '4' : $cards->count() }} gap-6 dynamic-grid">
    @foreach ($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-main rounded-full">
                        <i class='bx bxl-telegram'></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'] ?? 'No Description' }}</p>
            </div>
            <a href="{{ $card['link'] ?? '#' }}" target="_blank" class="block mt-4 bg-gradient-to-r from-main to-[#6e4dff] text-white text-center py-2 rounded-lg hover:bg-secondary transition">
                Join Now
            </a>
        </div>
    @endforeach
</div>