<section class="ssa-section-grid">
    <div class="ssa-section-copy reveal-on-scroll">
        <div class="prespa-saas-box ssa-badge">
            <img src="{{ asset('assets/themes/prespa-saas/assets/img/ps-patterns/icons/rocket.png') }}" alt="">
            <span>{{ $whyTracking['badge'] ?? 'Why tracking matters' }}</span>
        </div>

        <h2>{{ $whyTracking['title'] ?? 'Better measurement leads to better marketing decisions.' }}</h2>
        <p>{{ $whyTracking['description'] ?? 'When your tracking is inaccurate, reporting becomes noisy and optimization becomes guesswork.' }}</p>

        <div class="wp-block-button p-btn-animation-hover-arrow">
            <a class="wp-block-button__link has-background wp-element-button ssa-primary-button" href="{{ url($whyTracking['cta_url'] ?? '/about') }}">
                {{ $whyTracking['cta_label'] ?? 'About Saleem Sial' }}
            </a>
        </div>
    </div>

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