<section id="features-cards" class="features-cards section">
    <div class="container">
        <div class="row gy-4">
            @php
                $cards = [
                    [
                        'icon' => 'bi-people',
                        'title' => 'Absensi Pegawai',
                        'text' => 'Pantau kehadiran perangkat desa secara real-time dan lebih transparan.',
                        'class' => 'orange',
                    ],
                    [
                        'icon' => 'bi-newspaper',
                        'title' => 'Informasi Desa',
                        'text' => 'Akses berita, pengumuman, dan kegiatan terbaru di Desa Pelem.',
                        'class' => 'blue',
                    ],
                    [
                        'icon' => 'bi-diagram-3',
                        'title' => 'Struktur Desa',
                        'text' => 'Warga dapat melihat struktur organisasi dan perangkat desa secara jelas.',
                        'class' => 'green',
                    ],
                    [
                        'icon' => 'bi-graph-up',
                        'title' => 'Laporan & Statistik',
                        'text' => 'Data absensi, jumlah penduduk, dan perkembangan desa secara terukur.',
                        'class' => 'red',
                    ],
                ];

            @endphp

            @foreach ($cards as $i => $c)
                <div class="col-xl-3 col-md-6" data-aos="zoom-in" data-aos-delay="{{ ($i + 1) * 100 }}">
                    <div class="feature-box {{ $c['class'] }}">
                        <i class="bi {{ $c['icon'] }}"></i>
                        <h4>{{ $c['title'] }}</h4>
                        <p>{{ $c['text'] }}</p>
                    </div>
                </div>
            @endforeach
        </div>
    </div>
</section>
