@php
use App\Models\KpiCard;

$impactKpis = KpiCard::query()
    ->where('is_active', true)
    ->orderBy('sort_order')
    ->take(4)
    ->get();


@endphp
<section class="impact-section" id="our-impact">
    <div class="container">
        {{-- Heading --}}
        <div class="row justify-content-center text-center mb-4">
            <div class="col-lg-8">
                <div class="impact-kicker">Our Impact</div>
                <h2 class="impact-title">Empowering Communities for the Future</h2>
                <p class="impact-subtitle">
                    Our commitment and innovative approaches continue to deliver measurable results that
                    strengthen and uplift Afghan communities.
                </p>
            </div>
        </div>

        {{-- KPI Cards --}}
        <div class="row g-3 justify-content-center impact-row">
            @forelse(($impactKpis ?? collect()) as $k)
                <div class="col-12 col-sm-6 col-md-3">
                    <div class="impact-card h-100">
                        <div class="impact-icon">
                            <i class="{{ $k->icon ?: 'bi bi-bar-chart' }}"></i>
                        </div>
                        <div>
                            <div class="impact-number">
                                {{ number_format((int) $k->value) }}{{ $k->suffix }}
                            </div>
                            <div class="impact-label">
                                {{ $k->title }}
                            </div>
                        </div>
                    </div>
                </div>
            @empty
                {{-- Fallback (optional) --}}
                <div class="col-12">
                    <div class="text-center text-muted">
                        No impact metrics available.
                    </div>
                </div>
            @endforelse
        </div>
    </div>
</section>