<section class="ssa-case-study-section">
    <div class="text-center ssa-section-heading reveal-on-scroll">
        <div class="prespa-saas-box ssa-badge justify-center">
            <img src="{{ asset('assets/themes/prespa-saas/assets/img/ps-patterns/icons/rocket.png') }}" alt="">
            <span>{{ $caseStudies['badge'] ?? 'Case studies' }}</span>
        </div>

        <h2>{{ $caseStudies['title'] ?? 'Before-and-after reporting snapshots that show what cleaner tracking can change.' }}</h2>
        <p>{{ $caseStudies['description'] ?? 'Use dashboard screenshots, summary notes, and key outcomes to explain the difference between broken reporting and a cleaner setup.' }}</p>
    </div>

    <div class="ssa-case-study-grid">
        @foreach($caseStudies['studies'] ?? [] as $study)
            @php($beforeMedia = filled($study['before_media_id'] ?? null) ? $pageMedia->get((int) $study['before_media_id']) : null)
            @php($afterMedia = filled($study['after_media_id'] ?? null) ? $pageMedia->get((int) $study['after_media_id']) : null)
            <article class="ssa-case-study-card reveal-on-scroll">
                <div class="ssa-case-study-copy">
                    @if(! empty($study['label']))
                        <span class="ssa-blog-chip">{{ $study['label'] }}</span>
                    @endif
                    <h3>{{ $study['title'] ?? 'Tracking clean-up case study' }}</h3>
                    <p>{{ $study['summary'] ?? '' }}</p>
                    @if(! empty($study['result']))
                        <p class="ssa-case-study-result">{{ $study['result'] }}</p>
                    @endif
                </div>

                <div class="ssa-case-study-visuals">
                    <figure class="ssa-case-study-shot">
                        <figcaption>Before</figcaption>
                        <img src="{{ $beforeMedia?->url ?? asset('uploads/placeholders/default-service.jpg') }}" alt="{{ $beforeMedia?->alt_text ?? 'Before dashboard screenshot' }}">
                    </figure>
                    <figure class="ssa-case-study-shot">
                        <figcaption>After</figcaption>
                        <img src="{{ $afterMedia?->url ?? asset('uploads/placeholders/default-service.jpg') }}" alt="{{ $afterMedia?->alt_text ?? 'After dashboard screenshot' }}">
                    </figure>
                </div>
            </article>
        @endforeach
    </div>
</section>
