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

<section class="ftco-section" style="padding-top: 48px; padding-bottom: 48px; background-color: {{ $backgroundColor }};" aria-labelledby="cards-numbered-title-{{ $section['id'] }}">
    <div class="container">
        @if($title || $subtitle)
            <header class="row" style="text-align: center; margin-bottom: 48px;">
                <div class="col-md-8 col-md-offset-2 ftco-animate">
                    @if($subtitle) <p class="subheading" style="text-transform: uppercase; letter-spacing: 2px; font-size: 13px; color: var(--tenant-primary); font-weight: bold;">{{ $subtitle }}</p> @endif
                    @if($title) <h2 id="cards-numbered-title-{{ $section['id'] }}" style="font-size: 32px; font-weight: bold; color: #333;">{{ $title }}</h2> @endif
                </div>
            </header>
        @endif

        <div class="row" role="list">
            @foreach($cards as $index => $card)
                <article class="col-md-4" style="margin-bottom: 24px;" role="listitem">
                    <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; width: 100%; position: relative; transition: 0.3s;">
                        <div class="card-number" style="position: absolute; top: 10px; right: 20px; font-size: 40px; font-weight: bold; color: #f0f0f0;" aria-hidden="true">
                            {{ $index + 1 }}
                        </div>
                        
                        <div class="icon" style="margin-bottom: 16px; margin-left: auto; margin-right: auto; width: 100%; display: flex; align-items: center; justify-content: center;" aria-hidden="true">
                            @if(($card['media_type'] ?? 'icon') === 'image' && !empty($card['image_url']))
                                <img src="{{ $card['image_url'] }}" alt="{{ $card['image_alt'] ?? ($card['title'] ?? '') }}" class="img-responsive img-circle" style="width: 80px; height: 80px; object-fit: cover; border: 3px solid #f8f9fa; box-shadow: 0 0.125rem 0.25rem rgba(0,0,0,0.075);">
                            @else
                                <span class="{{ $card['icon'] ?? 'fa-star' }}" style="font-size: 50px; color: var(--tenant-primary);"></span>
                            @endif
                        </div>

                        <header class="media-body" style="width: 100%;">
                            <h3 class="heading" style="margin: 0; font-size: 18px; font-weight: bold;">{{ $card['title'] ?? '' }}</h3>
                        </header>
                    </div>
                </article>
            @endforeach
        </div>
    </div>
</section>