@php
    $title = $data['title'] ?? '';
    $subtitle = $data['subtitle'] ?? '';
    $imageUrl = $data['image_url'] ?? null;
    $imageAlt = $data['image_alt'] ?? ($title ?: 'Imagem de destaque');
    $backgroundColor = $data['background_color'] ?? '#ffffff';

    // Configurações de Tamanho
    $sizeType = $data['image_size_type'] ?? '100';
    $customSize = $data['image_size_custom'] ?? '';
    $imageWidth = ($sizeType === 'custom' && $customSize) ? $customSize : $sizeType;
@endphp

<section class="ftco-section" style="padding-top: 48px; padding-bottom: 48px; background-color: {{ $backgroundColor }};" aria-labelledby="only-image-title-{{ $section['id'] }}">
    <div class="container">
        <div class="row text-center">
            <article class="col-12 ftco-animate" style="text-align: center;">
                @if($title || $subtitle)
                    <header style="margin-bottom: 24px;">
                        @if($subtitle) <p class="subheading" style="text-transform: uppercase; letter-spacing: 2px; font-size: 13px; color: var(--tenant-primary);">{{ $subtitle }}</p> @endif
                        @if($title) <h2 id="only-image-title-{{ $section['id'] }}" style="font-size: 32px; font-weight: bold;">{{ $title }}</h2> @endif
                    </header>
                @endif
                
                <figure style="margin: 0 auto; width: {{ $imageWidth }}%;">
                    @if($imageUrl)
                        <img src="{{ $imageUrl }}" alt="{{ $imageAlt }}" class="img-responsive" style="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; border: 1px solid #ddd; color: #777;" aria-hidden="true">
                            <i class="bi bi-image fa-4x" style="margin-bottom: 8px;"></i>
                            <p>Nenhuma imagem selecionada</p>
                        </div>
                    @endif
                </figure>
            </article>
        </div>
    </div>
</section>