@php
    $title = $section['parameters']['title'] ?? '';
    $subtitle = $section['parameters']['subtitle'] ?? '';
    $titleColor = $section['parameters']['title_color'] ?? '#ffffff';
    $subtitleColor = $section['parameters']['subtitle_color'] ?? '#ffffff';
    $backgroundImageUrl = $section['parameters']['background_image_url'] ?? null;
    $backgroundImageAlt = $section['parameters']['background_image_alt'] ?? 'Imagem de destaque principal';
@endphp

<section class="hero-wrap" 
         style="background-image: url('{{ $backgroundImageUrl }}'); background-size: cover; background-position: center; min-height: 60vh; position: relative; display: flex; align-items: center;"
         role="banner" 
         aria-label="{{ $title ?: 'Destaque principal' }}">
    
    <div class="overlay" style="position: absolute; top: 0; left: 0; right: 0; bottom: 0; background: rgba(0,0,0,0.3); z-index: 1;" aria-hidden="true"></div>
    
    @php
        $alignment = $section['parameters']['text_alignment'] ?? 'left';
        $rowJustify = '';
        if ($alignment === 'center') $rowJustify = 'text-center';
        if ($alignment === 'right') $rowJustify = 'text-right';
    @endphp
    
    <div class="container" style="position: relative; z-index: 2;">
        <div class="row {{ $rowJustify }}">
            <header class="col-md-8 ftco-animate text-{{ $alignment }}">
                @if($subtitle)
                    <p class="subheading" style="text-transform: uppercase; letter-spacing: 2px; font-weight: bold; font-size: 14px; margin-bottom: 0.5rem; color: {{ $subtitleColor }};">{{ $subtitle }}</p>
                @endif
                @if($title)
                    <h1 style="margin-bottom: 24px; font-size: 48px; font-weight: 800; line-height: 1.2; color: {{ $titleColor }};">{{ $title }}</h1>
                @endif
            </header>
        </div>
    </div>
</section>