@php
    $cards = $data['cards'] ?? [];
    $count = count($cards);
    $sectionBg = $data['background_color'] ?? '#f8f9fa';
    
    // Calcula a largura da coluna baseada no número de cards
    $colClass = 'col-md-12';
    if ($count == 2) {
        $colClass = 'col-md-6';
    } elseif ($count >= 3) {
        $colClass = 'col-md-4';
    }

    $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 multi-card-section" aria-label="Seção de Informativos" style="background-color: {{ $sectionBg }};">
    <div class="container">
        <div class="row">
            @foreach($cards as $card)
                @php
                    $titleColor = $card['title_color'] ?? '#333333';
                    $subtitleColor = $card['subtitle_color'] ?? '#888888';
                    $textColor = $card['text_color'] ?? '#666666';
                    $cardBg = $card['background_color'] ?? '#ffffff';
                @endphp
                <div class="{{ $colClass }}">
                    <div class="card-content-wrapper" style="width: 100%; margin-bottom: 24px;">
                        <div class="card-header-info text-center" style="margin-bottom: 24px;">
                            @if(!empty($card['subtitle']))
                                <span class="subtitle" style="text-transform: uppercase; letter-spacing: 2px; color: {{ $subtitleColor }}; font-size: 0.9rem; display: block; margin-bottom: 8px;">
                                    {{ $card['subtitle'] }}
                                </span>
                            @endif
                            <h2 class="title" style="font-weight: 800; color: {{ $titleColor }}; font-size: 2.5rem;">
                                {{ $card['title'] }}
                            </h2>
                        </div>
                        
                        <div class="card-body-rich card border shadow-sm mb-3" style="border-radius: 15px; border: 1px solid #eee; padding: 40px; background: {{ $cardBg }}; box-shadow: 0 5px 20px rgba(0,0,0,0.05); height: 100%; color: {{ $textColor }};">
                            <div class="rich-text-content" style="color: {{ $textColor }};">
                                {!! $renderText($card['content'] ?? '') !!}
                            </div>
                        </div>
                    </div>
                </div>
            @endforeach
        </div>
    </div>
</section>

<style>
    .multi-card-section .rich-text-content img {
        max-width: 100%;
        height: auto;
        border-radius: 8px;
        margin-top: 15px;
        box-shadow: 0 4px 12px rgba(0,0,0,0.1);
    }
    
    .multi-card-section .card-content-wrapper {
        display: flex;
        flex-direction: column;
    }
    
    .multi-card-section .rich-text-content p {
        color: inherit;
        line-height: 1.8;
        font-size: 1.1rem;
    }
    
    .multi-card-section .rich-text-content strong {
        color: inherit;
        filter: brightness(0.8);
    }

    @media (max-width: 768px) {
        .multi-card-section .title {
            font-size: 1.8rem !important;
        }
    }
</style>