@php
    $title = $data['title'] ?? '';
    $subtitle = $data['subtitle'] ?? '';
    $text = $data['text'] ?? '';
    $buttonText = $data['button_text'] ?? '';
    $buttonLink = $data['button_link'] ?? '#';
    $imageUrl = $data['image_url'] ?? null;
    $imageAlt = $data['image_alt'] ?? 'Imagem da seção';
    $backgroundColor = $data['background_color'] ?? '#ffffff';
    $textColor = $data['text_color'] ?? '#333333';

    $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;
    };
    
    // Configurações de Posicionamento e Tamanho
    $imagePosition = $data['image_position'] ?? 'left';
    $sizeType = $data['image_size_type'] ?? '50';
    $customSize = $data['image_size_custom'] ?? '';
    
    $imageWidth = ($sizeType === 'custom' && $customSize) ? $customSize : $sizeType;
    $textWidth = 100 - (int)$imageWidth;

    // Se for 100%, força top/bottom ou ocupa tudo
    if ((int)$imageWidth >= 100) {
        $imageWidth = 100;
        $textWidth = 100;
        if ($imagePosition === 'left') $imagePosition = 'top';
        if ($imagePosition === 'right') $imagePosition = 'bottom';
    }

    $isVertical = in_array($imagePosition, ['top', 'bottom']);
@endphp

<section class="ftco-section" style="padding-top: 48px; padding-bottom: 48px; background-color: {{ $backgroundColor }};">
    <div class="container">
        <div class="row" style="display: flex; align-items: center; {{ $imagePosition === 'right' ? 'flex-direction: row-reverse;' : '' }} {{ $isVertical ? 'flex-direction: column;' : '' }}">
            
            {{-- Container da Imagem --}}
            <div class="ftco-animate"
                 style="{{ !$isVertical ? "flex: 0 0 $imageWidth%; max-width: $imageWidth%;" : "width: $imageWidth%;" }} {{ $imagePosition === 'bottom' ? 'order: 2;' : '' }} text-align: center; margin-bottom: 24px;">
                @if($imageUrl)
                    <img src="{{ $imageUrl }}" alt="{{ $imageAlt }}" class="img-responsive" style="width: 100%; box-shadow: 0 0.125rem 0.25rem rgba(0,0,0,0.075); border-radius: 0.25rem;">
                @else
                    <div style="background-color: #f8f9fa; padding: 48px; border-radius: 0.25rem; text-align: center; color: #777; border: 1px solid #ddd; width: 100%;">
                        <i class="bi bi-image fa-4x"></i>
                    </div>
                @endif
            </div>

            {{-- Container do Texto --}}
            <div class="ftco-animate text-{{ $data['text_alignment'] ?? 'left' }}" 
                 style="{{ !$isVertical ? "flex: 0 0 $textWidth%; max-width: $textWidth%;" : "" }} {{ $imagePosition === 'bottom' ? 'order: 1;' : '' }} {{ $imagePosition === 'left' ? 'padding-left: 48px;' : 'padding-right: 48px;' }} @media (max-width: 767px) { padding-left: 0; padding-right: 0; }">
                <div class="heading-section">
                    @if($subtitle)
                        <span class="subheading" style="text-transform: uppercase; letter-spacing: 2px; font-size: 13px; color: var(--tenant-primary); font-weight: bold; display: block; margin-bottom: 8px;">{{ $subtitle }}</span>
                    @endif
                    @if($title)
                        <h2 style="margin-bottom: 24px; font-size: 32px; font-weight: bold; color: {{ $textColor }};">{{ $title }}</h2>
                    @endif
                    <div style="margin-bottom: 24px; font-size: 16px; line-height: 1.8; color: {{ $textColor }};">
                        {!! $renderText($text) !!}
                    </div>
                    @if($buttonText)
                        <a href="{{ $buttonLink }}" class="btn btn-primary" style="padding-left: 24px; padding-right: 24px; padding-top: 16px; padding-bottom: 16px;" aria-label="{{ $buttonText }} - {{ $title }}">
                            {{ $buttonText }}
                        </a>
                    @endif
                </div>
            </div>

        </div>
    </div>
</section>