{{-- ============================================= --}}
{{-- ORQUESTRADOR: VALIDAÇÃO DE DOCUMENTO         --}}
{{-- Layout: Hero + Card Central Full             --}}
{{-- Backup original: matricula-valida-documento.blade.OLD.php --}}
{{-- ============================================= --}}

<div id="div_top" class="{{ ($size ?? false) ? 'w-full' : 'max-w-5xl mx-auto pt-0 md:pt-8 px-2 md:px-0' }}">

    {{-- Background azul claro na página --}}
    <style>body { background-color: #f0f4fb !important; }</style>

    {{-- Hero Header --}}
    <x-matricula.hero-header
        titulo="REALIZAR MATRÍCULA"
        subtitulo="Informe seu CPF e data de nascimento para iniciar"
        :sandbox="$sandbox ?? false"
    />

    {{-- ========== CARD CENTRAL FULL ========== --}}
    <div class="w-full bg-white dark:bg-dark-card border border-gray-200 dark:border-gray-700 rounded-2xl shadow-sm mt-5 pb-4 overflow-hidden">

        {{-- Banner de referência de curso (ACIMA do stepper) --}}
        @php
            $refBannerCurso = ($referencia_curso_id ?? null)
                ? \App\Models\Curso\Curso::find($referencia_curso_id)
                : null;
        @endphp
        @if ($refBannerCurso && $refBannerCurso->image_url)
            <div class="rounded-t-2xl overflow-hidden">
                <div class="relative h-44 sm:h-60">
                    <img src="{{ $refBannerCurso->image_url }}"
                         alt="{{ $refBannerCurso->nome }}"
                         class="w-full h-full object-cover">
                    <div class="absolute inset-0 bg-gradient-to-t from-black/65 to-transparent"></div>
                    <div class="absolute bottom-3 left-5 md:left-8 right-5 md:right-8">
                        <p class="text-[10px] font-semibold text-white/60 uppercase tracking-widest">Curso</p>
                        <p class="text-sm sm:text-base font-bold text-white uppercase leading-tight truncate">
                            {{ $refBannerCurso->nome }}
                        </p>
                    </div>
                </div>
            </div>
        @endif

        {{-- Stepper embutido no topo do card --}}
        <div class="px-5 md:px-8 pt-5 md:pt-6">
            <x-matricula.stepper faseAtual="" />
        </div>

        {{-- Separador fino --}}
        <div class="mx-5 md:mx-8 mt-4 border-b border-gray-100 dark:border-gray-800"></div>

        {{-- Conteúdo principal --}}
        <div class="px-5 md:px-8 py-5 md:py-6">
            @include('livewire.matricula.fase-valida-documento')
        </div>
    </div>


</div>