<section class="alignfull prespa-saas-dark-features ssa-dark-benefits">
    <div class="ssa-dark-inner">
        <div class="text-center ssa-section-heading reveal-on-scroll">
            <div class="prespa-saas-box ssa-badge ssa-badge--dark justify-center">
                <img src="{{ asset('assets/themes/prespa-saas/assets/img/ps-patterns/icons/features/zap.png') }}" alt="">
                <span>{{ $benefits['badge'] ?? 'Benefits' }}</span>
                <span class="ssa-badge-highlight">{{ $benefits['highlight'] ?? 'Built for accurate reporting' }}</span>
            </div>

            <h2>{{ $benefits['title'] ?? 'Why businesses choose Saleem Sial Analytics' }}</h2>
            <p>{{ $benefits['description'] ?? 'You get a setup that is easier to trust, easier to explain, and easier to scale.' }}</p>
        </div>

        <div class="ssa-benefit-grid">
            @foreach($benefits['items'] ?? [] as $item)
                @php($icon = filled($item['media_id'] ?? null) ? $pageMedia->get((int) $item['media_id']) : null)
                <div class="ssa-dark-card reveal-on-scroll">
                    <img src="{{ $icon?->url ?? asset('assets/themes/prespa-saas/assets/img/ps-patterns/icons/features/bar-chart.png') }}" alt="{{ $icon?->alt_text ?? '' }}">
                    <h3>{{ $item['title'] }}</h3>
                    <p>{{ $item['description'] }}</p>
                </div>
            @endforeach
        </div>
    </div>
</section>
