@php
    $cards = $section['parameters']['cards'] ?? [];
    $backgroundColor = $section['parameters']['background_color'] ?? '#f8f9fa';
@endphp

<section class="ftco-section" style="padding-top: 48px; padding-bottom: 48px; background-color: {{ $backgroundColor }};" aria-label="Seção de atalhos e links úteis">
    <div class="container">
        <div class="row text-center" role="list">
            @foreach($cards as $card)
                @php
                    $link = $card['link'] ?? '#';
                    $target = !empty($card['new_tab']) ? '_blank' : '_self';
                @endphp
                <article class="col-md-3" style="margin-bottom: 24px;" role="listitem">
                    <a href="{{ $link }}" target="{{ $target }}" style="color: inherit; text-decoration: none; width: 100%; display: block;" aria-label="Saiba mais sobre {{ $card['title'] ?? 'este link' }}">
                        <div class="media block-6 services text-center" style="background-color: #fff; padding: 24px; box-shadow: 0 0.125rem 0.25rem rgba(0,0,0,0.075); border-radius: 0.25rem; border: 1px solid #ddd; height: 100%; transition: 0.3s;">
                            <div class="icon" style="margin-bottom: 16px; margin-left: auto; margin-right: auto; font-size: 50px; color: var(--tenant-primary); width: 100%; display: flex; align-items: center; justify-content: center;" aria-hidden="true">
                                <span class="{{ $card['icon'] ?? 'fa-link' }}"></span>
                            </div>
                            <header class="media-body" style="width: 100%;">
                                <h3 class="heading" style="margin-bottom: 8px; font-size: 18px; font-weight: bold;">{{ $card['title'] ?? '' }}</h3>
                                <p class="small text-muted" style="margin-bottom: 0;">Saiba mais</p>
                            </header>
                        </div>
                    </a>
                </article>
            @endforeach
        </div>
    </div>
</section>