@php
    $cards = $cchpActivityCards ?? [];
    $count = count($cards);
@endphp

@if ($count > 0)
    <section
        class="cchp-activity"
        aria-label="{{ __('site.activity_banner_aria') }}"
        style="--cchp-activity-count: {{ $count }}"
    >
        <div class="site-container">
            <div class="cchp-activity__intro">
                <div class="cchp-activity__intro-copy">
                    <h2 class="cchp-activity__title">{{ __('site.activity_banner_title') }}</h2>
                    <p class="cchp-activity__lead">{{ __('site.activity_banner_lead') }}</p>
                    <span class="cchp-activity__rule" aria-hidden="true"></span>
                </div>
                <div class="cchp-activity__intro-kicker">
                    <h2 class="cchp-activity__kicker">
                        {{ __('site.activity_banner_kicker') }}
                        <span class="cchp-activity__kicker-accent">{{ __('site.activity_banner_kicker_accent') }}</span>
                    </h2>
                    <p class="cchp-activity__tagline">{{ __('site.activity_banner_tagline') }}</p>
                </div>
            </div>

            <ul class="cchp-activity__grid mx-2">
                @foreach ($cards as $card)
                    @php
                        $cardTitle = trim((string) ($card['title'] ?? ''));
                        $cardUrl = $card['url'] ?? null;
                        $cardTarget = $card['target'] ?? '_self';
                    @endphp
                    <li>
                        @if ($cardUrl)
                            <a
                                href="{{ $cardUrl }}"
                                class="cchp-activity__card cchp-activity__card--linked"
                                target="{{ $cardTarget }}"
                                @if ($cardTarget === '_blank') rel="noopener noreferrer" @endif
                                aria-label="{{ $cardTitle !== '' ? $cardTitle : __('site.hero_gallery_view') }}"
                            >
                                @include('components.site.sliders.partials.cchp-activity-card-inner', ['card' => $card])
                            </a>
                        @else
                            <div class="cchp-activity__card" @if ($cardTitle !== '') aria-label="{{ $cardTitle }}" @endif>
                                @include('components.site.sliders.partials.cchp-activity-card-inner', ['card' => $card])
                            </div>
                        @endif
                    </li>
                @endforeach
            </ul>
        </div>
    </section>
@endif