@php
    $title = $section['parameters']['title'] ?? '';
    $subtitle = $section['parameters']['subtitle'] ?? '';
    $items = $section['parameters']['items'] ?? [];

    $renderText = function($text) {
        if (is_string($text) && (strpos($text, '{"type"') === 0 || strpos($text, '{"content"') === 0)) {
            return app(\V2\Services\ContentRichEditor\Services\ContentRichEditorRendererService::class)->toHtml($text);
        }
        return $text;
    };
@endphp

<section class="ftco-section" style="padding-top: 48px; padding-bottom: 48px; background-color: #fff;" aria-labelledby="grid-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);">{{ $subtitle }}</p> @endif
                    <h2 id="grid-title-{{ $section['id'] }}" style="font-size: 36px; font-weight: bold; color: #333;">{{ $title }}</h2>
                </div>
            </header>
        @endif

        <div class="row" style="text-align: center;" role="list">
            @foreach($items as $item)
                <article class="col-md-4" style="margin-bottom: 24px;" role="listitem">
                    <div class="card border shadow-sm mb-3 text-center" style="height: 100%; border: 0; box-shadow: 0 0.125rem 0.25rem rgba(0,0,0,0.075); display: flex; flex-direction: column; overflow: hidden;">
                        <figure>
                            @if(!empty($item['image_url']))
                                <img src="{{ $item['image_url'] }}" alt="{{ $item['image_alt'] ?? "Imagem para {$item['title']}" }}" style="height: 200px; width:100%; object-fit: cover;">
                            @else
                                <div style="background-color: #f8f9fa; height: 200px; display: flex; align-items: center; justify-content: center;" aria-hidden="true">
                                    <i class="bi bi-image fa-3x text-muted"></i>
                                </div>
                            @endif
                        </figure>
                        <header class="card-body" style="display: flex; flex-direction: column; flex: 1;">
                            <h3 style="font-weight: bold; margin-bottom: 8px; font-size: 18px;">{{ $item['title'] ?? '' }}</h3>
                            <div style="color: #777; margin-bottom: 24px; font-size: 15px;">{!! $renderText($item['description'] ?? '') !!}</div>

                            @if(!empty($item['button_title']) && !empty($item['button_link']))
                                <div style="margin-top: auto;">
                                    <a href="{{ $item['button_link'] }}" class="btn btn-primary btn-block" style="padding-top: 8px; padding-bottom: 8px;" aria-label="{{ $item['button_title'] }} - {{ $item['title'] }}">
                                        {{ $item['button_title'] }}
                                    </a>
                                </div>
                            @endif
                        </header>
                    </div>
                </article>
            @endforeach
        </div>
    </div>
</section>