{{-- ============================================= --}}
{{-- FASE: SELEÇÃO DE CURSO (visual, com imagens) --}}
{{-- ============================================= --}}

<div class="space-y-6"
     x-data="{
        scrollToStep(step) {
            setTimeout(() => {
                const element = document.getElementById(step);
                if (element) {
                    element.scrollIntoView({ behavior: 'smooth', block: 'center' });
                    element.classList.add('highlight-active');
                    setTimeout(() => element.classList.remove('highlight-active'), 3000);
                }
            }, 500);
        },
        showPrereqModal: false,
        prereqModalData: {
            cursoNome: '',
            mensagens: []
        },
        openPrereqModal(cursoNome, mensagens) {
            this.prereqModalData = { cursoNome, mensagens };
            this.showPrereqModal = true;
        }
     }"
     @scroll-to-step.window="scrollToStep($event.detail.step)">

<style>
@keyframes pulse-highlight {
    0%, 100% {
        box-shadow: 0 0 0 0 rgba(99, 102, 241, 0);
        transform: scale(1);
    }
    50% {
        box-shadow: 0 0 30px 10px rgba(99, 102, 241, 0.5);
        transform: scale(1.02);
    }
}

.highlight-active {
    animation: pulse-highlight 1s ease-in-out 3;
    border-radius: 0.75rem;
    position: relative;
    z-index: 10;
}
</style>

    {{-- Card resumo do aluno --}}
    <x-matricula.info-card :aluno="$aluno" compact titulo="Aluno" :alterar="true" />

    @if ($turmaEmFormacao ?? false)

        {{-- ═══════════════════════════════════════════════════ --}}
        {{-- MODO REFERÊNCIA DE CURSO (refCurso via GET) --}}
        {{-- ═══════════════════════════════════════════════════ --}}
        @if ($referencia_curso_id ?? null)
        @php
            $refCursoObj = \App\Models\Curso\Curso::find($referencia_curso_id);
            $situacoesPermitidas = listCursosTurmaSituacao()->whereIn('slug', ['em-formacao','aberta'])->pluck('id')->toArray();
            $turmasDisponiveis   = listCursosTurmas(curso_id: $referencia_curso_id, recebe_matricula: true)
                ->whereIn('situacao_id', $situacoesPermitidas);
        @endphp

        <div class="space-y-5">

            {{-- Card informativo: curso fixado --}}
            <div class="flex items-center gap-3 px-4 py-3 bg-indigo-50 dark:bg-indigo-950/20 border border-indigo-200 dark:border-indigo-800 rounded-xl">
                <div class="w-9 h-9 rounded-lg bg-indigo-500 flex items-center justify-center shrink-0">
                    <svg class="w-5 h-5 text-white" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" d="M12 6.253v13m0-13C10.832 5.477 9.246 5 7.5 5S4.168 5.477 3 6.253v13C4.168 18.477 5.754 18 7.5 18s3.332.477 4.5 1.253m0-13C13.168 5.477 14.754 5 16.5 5c1.747 0 3.332.477 4.5 1.253v13C19.832 18.477 18.247 18 16.5 18c-1.746 0-3.332.477-4.5 1.253"/>
                    </svg>
                </div>
                <div>
                    <p class="text-[10px] font-semibold text-indigo-500 dark:text-indigo-400 uppercase tracking-widest">Curso selecionado</p>
                    <p class="text-sm font-bold text-indigo-800 dark:text-indigo-200 uppercase leading-tight">
                        {{ $refCursoObj->nome ?? '—' }}
                    </p>
                </div>
            </div>

            {{-- Turmas do curso referenciado --}}
            <div>
                <div class="flex items-center gap-2 mb-3">
                    <div class="w-6 h-6 rounded-full bg-indigo-600 text-white flex items-center justify-center text-xs font-bold shrink-0">1</div>
                    <div>
                        <div class="text-sm font-bold text-gray-700 dark:text-gray-300 uppercase tracking-wide">Turma</div>
                        <div class="text-xs text-gray-500 dark:text-gray-400">Clique em uma das opções abaixo</div>
                    </div>
                </div>

                <div class="grid grid-cols-1 sm:grid-cols-2 gap-2.5 sm:gap-3">
                    @forelse ($turmasDisponiveis as $turma_item)
                        @php $isSelected = ($curso_turma_id ?? null) == $turma_item->id; @endphp
                        <button type="button"
                            wire:click="$set('curso_turma_id', '{{ $turma_item->id }}')"
                            class="relative flex items-start gap-3 px-3 py-3 sm:px-4 sm:py-4 rounded-lg border text-left transition-all duration-200
                                   {{ $isSelected
                                        ? 'border-indigo-400 bg-indigo-50 dark:bg-indigo-950/30 shadow-sm'
                                        : 'border-gray-200 dark:border-gray-700 bg-white dark:bg-gray-900 hover:border-indigo-300 hover:shadow-sm' }}">
                            <div class="w-8 h-8 sm:w-9 sm:h-9 rounded-lg shrink-0 flex items-center justify-center
                                {{ $isSelected ? 'bg-indigo-600' : 'bg-indigo-100 dark:bg-indigo-900/30' }}">
                                <svg class="w-4 h-4 sm:w-5 sm:h-5 {{ $isSelected ? 'text-white' : 'text-indigo-600 dark:text-indigo-400' }}" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" d="M17 20h5v-2a3 3 0 00-5.356-1.857M17 20H7m10 0v-2c0-.656-.126-1.283-.356-1.857M7 20H2v-2a3 3 0 015.356-1.857M7 20v-2c0-.656.126-1.283.356-1.857m0 0a5.002 5.002 0 019.288 0M15 7a3 3 0 11-6 0 3 3 0 016 0z"/>
                                </svg>
                            </div>
                            <div class="flex-1 min-w-0">
                                <p class="text-xs sm:text-sm font-bold {{ $isSelected ? 'text-indigo-700 dark:text-indigo-300' : 'text-gray-800 dark:text-gray-100' }} uppercase leading-tight">
                                    {{ $turma_item->turma_nome }}
                                </p>
                                @if ($turma_item->turma_descricao ?? false)
                                    <p class="text-[10px] sm:text-xs mt-0.5 {{ $isSelected ? 'text-indigo-500' : 'text-gray-500 dark:text-gray-400' }} line-clamp-1">
                                        {{ $turma_item->turma_descricao }}
                                    </p>
                                @endif
                                <div class="flex items-center gap-1.5 sm:gap-2 mt-1.5 sm:mt-2">
                                    @if ($turma_item->valor_parcelas_qtd ?? false)
                                        <span class="text-[10px] sm:text-xs text-gray-400">{{ $turma_item->valor_parcelas_qtd }}x</span>
                                    @endif
                                    <span class="text-sm sm:text-base font-extrabold {{ $isSelected ? 'text-indigo-600 dark:text-indigo-400' : 'text-gray-700 dark:text-gray-300' }}">
                                        {{ convertMoney($turma_item->valor_parcela,'R$ ') }}
                                    </span>
                                    <span class="text-[10px] sm:text-xs {{ $isSelected ? 'text-indigo-400' : 'text-gray-400' }}">/mês</span>
                                </div>
                            </div>
                            @if ($isSelected)
                                <div class="absolute top-2 right-2 w-4 h-4 sm:w-5 sm:h-5 rounded-full bg-indigo-600 flex items-center justify-center shrink-0">
                                    <svg class="w-2.5 h-2.5 sm:w-3 sm:h-3 text-white" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="3" d="M5 13l4 4L19 7"/></svg>
                                </div>
                            @endif
                        </button>
                    @empty
                        <div class="col-span-full flex items-center gap-3 px-4 py-3 bg-amber-50 dark:bg-amber-950/20 border border-amber-200 dark:border-amber-800 rounded-xl">
                            <svg class="w-5 h-5 text-amber-500 shrink-0" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 9v2m0 4h.01m-6.938 4h13.856c1.54 0 2.502-1.667 1.732-3L13.732 4c-.77-1.333-2.694-1.333-3.464 0L3.34 16c-.77 1.333.192 3 1.732 3z"/></svg>
                            <p class="text-sm font-medium text-amber-700 dark:text-amber-400">Nenhuma turma disponível para este curso.</p>
                        </div>
                    @endforelse
                </div>
            </div>

        </div>

        <x-ead-alerts class="my-2" />

        <div class="flex items-center justify-between gap-3 pt-2">
            <button wire:click.prevent="$set('fase_atual','dadosAluno')"
                class="inline-flex items-center gap-2 px-6 py-3 bg-white dark:bg-gray-800 border border-gray-300 dark:border-gray-600
                       text-gray-700 dark:text-gray-300 text-sm font-semibold rounded-xl hover:bg-gray-50 dark:hover:bg-gray-700 transition-all duration-200 shadow-sm">
                <svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M11 17l-5-5m0 0l5-5m-5 5h12"/></svg>
                VOLTAR
            </button>
            @if ($curso_turma_id ?? false)
                <button wire:click.prevent="$set('fase_atual','confirmarDados')"
                    class="inline-flex items-center gap-2 px-8 py-3 bg-gradient-to-r from-indigo-600 to-indigo-700
                           hover:from-indigo-700 hover:to-indigo-800 text-white font-semibold text-sm rounded-xl
                           shadow-md shadow-indigo-200 dark:shadow-indigo-900/40 transition-all duration-200">
                    PRÓXIMO
                    <svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M13 7l5 5m0 0l-5 5m5-5H6"/></svg>
                </button>
            @else
                <button disabled
                    class="inline-flex items-center gap-2 px-8 py-3 bg-gray-200 dark:bg-gray-700 text-gray-400 dark:text-gray-500
                           font-semibold text-sm rounded-xl cursor-not-allowed" title="Selecione uma turma acima">
                    PRÓXIMO
                    <svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M18.364 18.364A9 9 0 005.636 5.636m12.728 12.728A9 9 0 015.636 5.636m12.728 12.728L5.636 5.636"/></svg>
                </button>
            @endif
        </div>

        @else
        {{-- ═══════════════════════════════════════════════════ --}}
        {{-- MODO NORMAL: Etapas 1, 2 e 3 completas            --}}
        {{-- ═══════════════════════════════════════════════════ --}}

        <div class="space-y-5">

            {{-- ═══════════════════════════════════════════ --}}
            {{-- ETAPA 1: FORMATO                           --}}
            {{-- ═══════════════════════════════════════════ --}}
            <div id="etapa-formatos">
                <div class="flex items-center gap-2 mb-3">
                    <div class="w-6 h-6 rounded-full bg-indigo-600 text-white flex items-center justify-center text-xs font-bold shrink-0">1</div>
                    <div>
                        <div class="text-sm font-bold text-gray-700 dark:text-gray-300 uppercase tracking-wide">Formato das Aulas</div>
                        <div class="text-xs text-gray-500 dark:text-gray-400">Clique em uma das opções abaixo</div>
                    </div>
                </div>

                @php $tiposList = listCursoTipo(); @endphp
                <div class="grid grid-cols-1 sm:grid-cols-2 md:grid-cols-3 gap-2.5 sm:gap-3">
                    @forelse ($tiposList as $tipo_item)
                        @php $isSelected = ($tipo_id ?? null) == $tipo_item->id; @endphp
                        <button type="button"
                            wire:click="$set('tipo_id', '{{ $tipo_item->id }}')"
                            class="relative flex items-center gap-3 px-3 py-3 sm:flex-col sm:items-center sm:gap-2.5 sm:px-4 sm:py-4 rounded-lg border transition-all duration-200 text-left sm:text-center
                                   {{ $isSelected
                                        ? 'border-indigo-400 bg-indigo-50 dark:bg-indigo-950/30 shadow-sm'
                                        : 'border-gray-200 dark:border-gray-700 bg-white dark:bg-gray-900 hover:border-indigo-300 dark:hover:border-indigo-700' }}">
                            {{-- Ícone por tipo --}}
                            @if (stripos($tipo_item->nome, 'online') !== false || stripos($tipo_item->descricao, 'distância') !== false)
                                <div class="w-9 h-9 sm:w-10 sm:h-10 rounded-lg {{ $isSelected ? 'bg-indigo-500' : 'bg-indigo-100 dark:bg-indigo-900/30' }} flex items-center justify-center transition-colors shrink-0">
                                    <svg class="w-5 h-5 sm:w-5 sm:h-5 {{ $isSelected ? 'text-white' : 'text-indigo-600 dark:text-indigo-400' }}" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" d="M9.75 17L9 20l-1 1h8l-1-1-.75-3M3 13h18M5 17h14a2 2 0 002-2V5a2 2 0 00-2-2H5a2 2 0 00-2 2v10a2 2 0 002 2z"/>
                                    </svg>
                                </div>
                            @elseif (stripos($tipo_item->nome, 'presencial') !== false)
                                <div class="w-9 h-9 sm:w-10 sm:h-10 rounded-lg {{ $isSelected ? 'bg-indigo-500' : 'bg-indigo-100 dark:bg-indigo-900/30' }} flex items-center justify-center transition-colors shrink-0">
                                    <svg class="w-5 h-5 sm:w-5 sm:h-5 {{ $isSelected ? 'text-white' : 'text-indigo-600 dark:text-indigo-400' }}" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" d="M19 21V5a2 2 0 00-2-2H7a2 2 0 00-2 2v16m14 0h2m-2 0h-5m-9 0H3m2 0h5M9 7h1m-1 4h1m4-4h1m-1 4h1m-5 10v-5a1 1 0 011-1h2a1 1 0 011 1v5m-4 0h4"/>
                                    </svg>
                                </div>
                            @else
                                <div class="w-9 h-9 sm:w-10 sm:h-10 rounded-lg {{ $isSelected ? 'bg-indigo-500' : 'bg-indigo-100 dark:bg-indigo-900/30' }} flex items-center justify-center transition-colors shrink-0">
                                    <svg class="w-5 h-5 sm:w-5 sm:h-5 {{ $isSelected ? 'text-white' : 'text-indigo-600 dark:text-indigo-400' }}" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" d="M12 6.253v13m0-13C10.832 5.477 9.246 5 7.5 5S4.168 5.477 3 6.253v13C4.168 18.477 5.754 18 7.5 18s3.332.477 4.5 1.253m0-13C13.168 5.477 14.754 5 16.5 5c1.747 0 3.332.477 4.5 1.253v13C19.832 18.477 18.247 18 16.5 18c-1.746 0-3.332.477-4.5 1.253"/>
                                    </svg>
                                </div>
                            @endif
                            <div class="flex-1 min-w-0">
                                <p class="text-xs sm:text-sm font-bold {{ $isSelected ? 'text-indigo-700 dark:text-indigo-300' : 'text-gray-800 dark:text-gray-200' }} uppercase">{{ $tipo_item->nome }}</p>
                                @if ($tipo_item->descricao ?? false)
                                    <p class="text-[10px] sm:text-xs mt-0.5 {{ $isSelected ? 'text-indigo-500 dark:text-indigo-400' : 'text-gray-400 dark:text-gray-500' }} line-clamp-1 sm:line-clamp-2">{{ $tipo_item->descricao }}</p>
                                @endif
                            </div>
                            {{-- Check mark --}}
                            @if ($isSelected)
                                <div class="absolute top-2 right-2 w-4 h-4 sm:w-5 sm:h-5 rounded-full bg-indigo-600 flex items-center justify-center">
                                    <svg class="w-2.5 h-2.5 sm:w-3 sm:h-3 text-white" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="3" d="M5 13l4 4L19 7"/></svg>
                                </div>
                            @endif
                        </button>
                    @empty
                        <p class="text-sm text-gray-400 col-span-full">Nenhum formato disponível.</p>
                    @endforelse
                </div>
            </div>

            {{-- ═══════════════════════════════════════════ --}}
            {{-- ETAPA 2: CURSO (com imagem)                --}}
            {{-- ═══════════════════════════════════════════ --}}
            @if ($tipo_id ?? false)
                @php
                    // Filtrar apenas turmas com status "em formação" ou "aberta"
                    $situacoesPermitidas = listCursosTurmaSituacao()->whereIn('slug', ['em-formacao','aberta'])->pluck('id')->toArray();
                    $cursosComTurmaDisponivel = \App\Models\Curso\Turma::whereIn('situacao_id', $situacoesPermitidas)->pluck('curso_id')->unique()->toArray();

                    // Filtrar cursos: tipo correto + tem turma disponível + ativo para matrícula
                    $cursosDisponiveis = listCursos(tipo_id: $tipo_id ? $tipo_id : 9999)
                        ->whereIn('id', $cursosComTurmaDisponivel)
                        ->where('ativo_matricula', 1);
                @endphp

                <div id="etapa-cursos">
                    <div class="flex items-center gap-2 mb-3">
                        <div class="w-6 h-6 rounded-full bg-indigo-600 text-white flex items-center justify-center text-xs font-bold shrink-0">2</div>
                        <div>
                            <h3 class="text-sm font-bold text-gray-700 dark:text-gray-300 uppercase tracking-wide">Escolha o Curso</h3>
                            <div class="text-xs text-gray-500 dark:text-gray-400">Clique em uma das opções abaixo</div>
                        </div>
                    </div>

                    @if ($cursosDisponiveis->count())
                        <div class="grid grid-cols-1 sm:grid-cols-2 gap-2.5 sm:gap-4">
                            @foreach ($cursosDisponiveis as $curso_item)
                                @php
                                    $isSelected = ($curso_id ?? null) == $curso_item->id;
                                    $imgUrl = $curso_item->image_url;

                                    // Verificar pré-requisitos
                                    $verificacao = $this->verificarPrerequisitos($curso_item->id);
                                    $cumpre = $verificacao['cumpre'];
                                    $mensagensPrereq = $verificacao['mensagens'];
                                    $temPrerequisitos = !empty($mensagensPrereq);
                                @endphp
                                <div class="relative">
                                    <button type="button"
                                        @if ($cumpre)
                                            wire:click="$set('curso_id', '{{ $curso_item->id }}')"
                                        @endif
                                        {{ !$cumpre ? 'disabled' : '' }}
                                        class="w-full relative flex flex-row sm:flex-col rounded-lg border overflow-hidden text-left transition-all duration-200
                                               {{ !$cumpre ? 'opacity-70 bg-red-50 dark:bg-red-950/20 border-red-200 dark:border-red-800 cursor-not-allowed' : '' }}
                                               {{ $cumpre && $isSelected
                                                    ? 'border-indigo-400 shadow-md'
                                                    : ($cumpre ? 'border-gray-200 dark:border-gray-700 hover:border-indigo-300 dark:hover:border-indigo-700 hover:shadow-sm' : '') }}">

                                    {{-- Imagem / Placeholder --}}
                                    @if ($imgUrl)
                                        <div class="relative w-24 sm:w-full h-full sm:h-32 overflow-hidden shrink-0
                                            {{ !$cumpre ? 'bg-red-100 dark:bg-red-900/30' : 'bg-indigo-100 dark:bg-indigo-900/30' }}">
                                            <img src="{{ $imgUrl }}" alt="{{ $curso_item->nome }}"
                                                 class="w-full h-full object-cover transition-transform duration-300 {{ $isSelected ? 'scale-105' : '' }} {{ !$cumpre ? 'opacity-60' : '' }}"
                                                 onerror="this.parentElement.innerHTML='<div class=\'w-full h-full flex items-center justify-center\'><svg class=\'w-6 h-6 sm:w-8 sm:h-8 text-indigo-300\' fill=\'none\' stroke=\'currentColor\' viewBox=\'0 0 24 24\'><path stroke-linecap=\'round\' stroke-linejoin=\'round\' stroke-width=\'1\' d=\'M12 6.253v13m0-13C10.832 5.477 9.246 5 7.5 5S4.168 5.477 3 6.253v13C4.168 18.477 5.754 18 7.5 18s3.332.477 4.5 1.253m0-13C13.168 5.477 14.754 5 16.5 5c1.747 0 3.332.477 4.5 1.253v13C19.832 18.477 18.247 18 16.5 18c-1.746 0-3.332.477-4.5 1.253\'></path></svg></div>'">
                                            {{-- Gradiente sobre a imagem --}}
                                            <div class="absolute inset-0 bg-gradient-to-t sm:bg-gradient-to-t from-black/40 to-transparent"></div>
                                            @if ($isSelected)
                                                <div class="absolute inset-0 bg-indigo-600/15"></div>
                                            @endif
                                            @if (!$cumpre)
                                                <div class="absolute inset-0 bg-red-600/20"></div>
                                            @endif
                                        </div>
                                    @else
                                        {{-- Placeholder sem imagem --}}
                                        <div class="w-24 sm:w-full h-full sm:h-32 flex items-center justify-center shrink-0
                                            {{ !$cumpre ? 'bg-gradient-to-br from-red-100 to-red-200 dark:from-red-900/40 dark:to-red-800/40' : 'bg-gradient-to-br from-indigo-100 to-indigo-200 dark:from-indigo-900/40 dark:to-indigo-800/40' }}">
                                            <svg class="w-6 h-6 sm:w-10 sm:h-10 {{ !$cumpre ? 'text-red-300 dark:text-red-600' : 'text-indigo-300 dark:text-indigo-600' }}" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                                                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="1" d="M12 6.253v13m0-13C10.832 5.477 9.246 5 7.5 5S4.168 5.477 3 6.253v13C4.168 18.477 5.754 18 7.5 18s3.332.477 4.5 1.253m0-13C13.168 5.477 14.754 5 16.5 5c1.747 0 3.332.477 4.5 1.253v13C19.832 18.477 18.247 18 16.5 18c-1.746 0-3.332.477-4.5 1.253"/>
                                            </svg>
                                        </div>
                                    @endif

                                    {{-- Conteúdo textual --}}
                                    <div class="flex-1 p-3 sm:p-4 transition-colors
                                        {{ !$cumpre ? 'bg-red-50 dark:bg-red-950/20' : ($isSelected ? 'bg-indigo-50 dark:bg-indigo-950/30' : 'bg-white dark:bg-gray-900') }}">
                                        <p class="text-xs sm:text-sm font-bold {{ $isSelected ? 'text-indigo-700 dark:text-indigo-300' : 'text-gray-800 dark:text-gray-100' }} uppercase leading-tight">
                                            {{ $curso_item->nome }}
                                        </p>
                                        @if ($curso_item->descricao ?? false)
                                            <p class="text-[10px] sm:text-xs mt-0.5 sm:mt-1 {{ $isSelected ? 'text-indigo-500 dark:text-indigo-400' : 'text-gray-500 dark:text-gray-400' }} line-clamp-1 sm:line-clamp-2">
                                                {{ $curso_item->descricao }}
                                            </p>
                                        @endif
                                        @if ($curso_item->tipo ?? false)
                                            <span class="inline-block mt-1 sm:mt-2 px-2 py-0.5 text-[9px] sm:text-[10px] font-semibold uppercase rounded-full
                                                {{ $isSelected ? 'bg-indigo-200 text-indigo-700 dark:bg-indigo-800 dark:text-indigo-300' : 'bg-gray-100 text-gray-500 dark:bg-gray-800 dark:text-gray-400' }}">
                                                {{ $curso_item->tipo->nome ?? '' }}
                                            </span>
                                        @endif
                                    </div>

                                    {{-- Check mark selecionado --}}
                                    @if ($isSelected)
                                        <div class="absolute top-2 right-2 w-4 h-4 sm:w-5 sm:h-5 rounded-full bg-indigo-600 shadow-md flex items-center justify-center">
                                            <svg class="w-2.5 h-2.5 sm:w-3 sm:h-3 text-white" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="3" d="M5 13l4 4L19 7"/></svg>
                                        </div>
                                    @endif
                                </button>

                                {{-- Badge de requisitos mínimos --}}
                                @if (!$cumpre)
                                    <button type="button"
                                        @click.stop="openPrereqModal('{{ str_replace("'", "\\'", $curso_item->nome) }}', {{ json_encode($mensagensPrereq, JSON_HEX_APOS | JSON_HEX_QUOT) }})"
                                        class="absolute bottom-2 right-2 px-2.5 py-1.5 bg-red-600 hover:bg-red-700 text-white text-[10px] sm:text-xs font-bold uppercase tracking-wide rounded-lg shadow-lg transition-all duration-200 hover:scale-105 z-10">
                                        <span class="flex items-center gap-1">
                                            <svg class="w-3 h-3" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                                                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M13 16h-1v-4h-1m1-4h.01M21 12a9 9 0 11-18 0 9 9 0 0118 0z"/>
                                            </svg>
                                            Ver requisitos
                                        </span>
                                    </button>
                                @endif
                            </div>
                            @endforeach
                        </div>
                    @else
                        <div class="flex items-center gap-3 px-4 py-3 bg-red-50 dark:bg-red-950/20 border border-red-200 dark:border-red-800 rounded-xl">
                            <svg class="w-5 h-5 text-red-500 shrink-0" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 9v2m0 4h.01m-6.938 4h13.856c1.54 0 2.502-1.667 1.732-3L13.732 4c-.77-1.333-2.694-1.333-3.464 0L3.34 16c-.77 1.333.192 3 1.732 3z"/></svg>
                            <p class="text-sm font-medium text-red-700 dark:text-red-400">Nenhum curso disponível para matrícula neste formato.</p>
                        </div>
                    @endif
                </div>
            @endif

            {{-- ═══════════════════════════════════════════ --}}
            {{-- ETAPA 3: TURMA                             --}}
            {{-- ═══════════════════════════════════════════ --}}
            @if ($curso_id ?? false)
                @php
                    // Filtrar apenas turmas "em formação" ou "aberta"
                    $situacoesPermitidas = listCursosTurmaSituacao()->whereIn('slug', ['em-formacao','aberta'])->pluck('id')->toArray();
                    $turmasDisponiveis = listCursosTurmas(curso_id: ($curso_id ? $curso_id : 9999), recebe_matricula: true)
                        ->whereIn('situacao_id', $situacoesPermitidas);
                @endphp

                <div id="etapa-turmas">
                    <div class="flex items-center gap-2 mb-3">
                        <div class="w-6 h-6 rounded-full bg-indigo-600 text-white flex items-center justify-center text-xs font-bold shrink-0">3</div>
                        <div>
                            <div class="text-sm font-bold text-gray-700 dark:text-gray-300 uppercase tracking-wide">Turma</div>
                            <div class="text-xs text-gray-500 dark:text-gray-400">Clique em uma das opções abaixo</div>
                        </div>
                    </div>

                    <div class="grid grid-cols-1 sm:grid-cols-2 gap-2.5 sm:gap-3">
                        @forelse ($turmasDisponiveis as $turma_item)
                            @php $isSelected = ($curso_turma_id ?? null) == $turma_item->id; @endphp
                            <button type="button"
                                wire:click="$set('curso_turma_id', '{{ $turma_item->id }}')"
                                class="relative flex items-start gap-3 px-3 py-3 sm:px-4 sm:py-4 rounded-lg border text-left transition-all duration-200
                                       {{ $isSelected
                                            ? 'border-indigo-400 bg-indigo-50 dark:bg-indigo-950/30 shadow-sm'
                                            : 'border-gray-200 dark:border-gray-700 bg-white dark:bg-gray-900 hover:border-indigo-300 hover:shadow-sm' }}">
                                {{-- Ícone de turma --}}
                                <div class="w-8 h-8 sm:w-9 sm:h-9 rounded-lg shrink-0 flex items-center justify-center
                                    {{ $isSelected ? 'bg-indigo-600' : 'bg-indigo-100 dark:bg-indigo-900/30' }}">
                                    <svg class="w-4 h-4 sm:w-5 sm:h-5 {{ $isSelected ? 'text-white' : 'text-indigo-600 dark:text-indigo-400' }}" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" d="M17 20h5v-2a3 3 0 00-5.356-1.857M17 20H7m10 0v-2c0-.656-.126-1.283-.356-1.857M7 20H2v-2a3 3 0 015.356-1.857M7 20v-2c0-.656.126-1.283.356-1.857m0 0a5.002 5.002 0 019.288 0M15 7a3 3 0 11-6 0 3 3 0 016 0z"/>
                                    </svg>
                                </div>
                                <div class="flex-1 min-w-0">
                                    <p class="text-xs sm:text-sm font-bold {{ $isSelected ? 'text-indigo-700 dark:text-indigo-300' : 'text-gray-800 dark:text-gray-100' }} uppercase leading-tight">
                                        {{ $turma_item->turma_nome }}
                                    </p>
                                    @if ($turma_item->turma_descricao ?? false)
                                        <p class="text-[10px] sm:text-xs mt-0.5 {{ $isSelected ? 'text-indigo-500' : 'text-gray-500 dark:text-gray-400' }} line-clamp-1">
                                            {{ $turma_item->turma_descricao }}
                                        </p>
                                    @endif
                                    {{-- Valor --}}
                                    <div class="flex items-center gap-1.5 sm:gap-2 mt-1.5 sm:mt-2">
                                        @if ($turma_item->valor_parcelas_qtd ?? false)
                                            <span class="text-[10px] sm:text-xs text-gray-400">{{ $turma_item->valor_parcelas_qtd }}x</span>
                                        @endif
                                        <span class="text-sm sm:text-base font-extrabold {{ $isSelected ? 'text-indigo-600 dark:text-indigo-400' : 'text-gray-700 dark:text-gray-300' }}">
                                            {{ convertMoney($turma_item->valor_parcela,'R$ ') }}
                                        </span>
                                        <span class="text-[10px] sm:text-xs {{ $isSelected ? 'text-indigo-400' : 'text-gray-400' }}">/mês</span>
                                    </div>
                                </div>
                                {{-- Check mark --}}
                                @if ($isSelected)
                                    <div class="absolute top-2 right-2 w-4 h-4 sm:w-5 sm:h-5 rounded-full bg-indigo-600 flex items-center justify-center shrink-0">
                                        <svg class="w-2.5 h-2.5 sm:w-3 sm:h-3 text-white" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="3" d="M5 13l4 4L19 7"/></svg>
                                    </div>
                                @endif
                            </button>
                        @empty
                            <div class="col-span-full flex items-center gap-3 px-4 py-3 bg-amber-50 dark:bg-amber-950/20 border border-amber-200 dark:border-amber-800 rounded-xl">
                                <svg class="w-5 h-5 text-amber-500 shrink-0" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 9v2m0 4h.01m-6.938 4h13.856c1.54 0 2.502-1.667 1.732-3L13.732 4c-.77-1.333-2.694-1.333-3.464 0L3.34 16c-.77 1.333.192 3 1.732 3z"/></svg>
                                <p class="text-sm font-medium text-amber-700 dark:text-amber-400">Nenhuma turma disponível para este curso.</p>
                            </div>
                        @endforelse
                    </div>
                </div>
            @endif

        </div>

        <x-ead-alerts class="my-2" />

        {{-- Botões de navegação --}}
        <div class="flex items-center justify-between gap-3 pt-2">
            <button wire:click.prevent="$set('fase_atual','dadosAluno')"
                class="inline-flex items-center gap-2 px-6 py-3 bg-white dark:bg-gray-800 border border-gray-300 dark:border-gray-600
                       text-gray-700 dark:text-gray-300 text-sm font-semibold rounded-xl hover:bg-gray-50 dark:hover:bg-gray-700 transition-all duration-200 shadow-sm">
                <svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M11 17l-5-5m0 0l5-5m-5 5h12"/></svg>
                VOLTAR
            </button>

            @if ($curso_turma_id ?? false)
                <button wire:click.prevent="$set('fase_atual','confirmarDados')"
                    class="inline-flex items-center gap-2 px-8 py-3 bg-gradient-to-r from-indigo-600 to-indigo-700
                           hover:from-indigo-700 hover:to-indigo-800 text-white font-semibold text-sm rounded-xl
                           shadow-md shadow-indigo-200 dark:shadow-indigo-900/40 transition-all duration-200">
                    PRÓXIMO
                    <svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M13 7l5 5m0 0l-5 5m5-5H6"/></svg>
                </button>
            @else
                <button disabled
                    class="inline-flex items-center gap-2 px-8 py-3 bg-gray-200 dark:bg-gray-700 text-gray-400 dark:text-gray-500
                           font-semibold text-sm rounded-xl cursor-not-allowed" title="Selecione as opções acima">
                    PRÓXIMO
                    <svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M18.364 18.364A9 9 0 005.636 5.636m12.728 12.728A9 9 0 015.636 5.636m12.728 12.728L5.636 5.636"/></svg>
                </button>
            @endif
        </div>

        @endif
        {{-- FIM: @if ($referencia_curso_id) / @else modo normal --}}

    @else
        {{-- Sem turmas abertas --}}
        <div class="bg-white dark:bg-gray-900 border border-gray-200 dark:border-gray-700 rounded-2xl p-8 text-center shadow-sm">
            <div class="w-16 h-16 mx-auto mb-4 rounded-2xl bg-amber-100 dark:bg-amber-900/30 flex items-center justify-center">
                <svg class="w-8 h-8 text-amber-500" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" d="M12 9v2m0 4h.01m-6.938 4h13.856c1.54 0 2.502-1.667 1.732-2.5L13.732 4.5c-.77-.833-2.694-.833-3.464 0L3.34 16.5c-.77.833.192 2.5 1.732 2.5z"/></svg>
            </div>
            <h3 class="text-xl font-semibold text-gray-800 dark:text-gray-200">Nenhuma turma disponível</h3>
            <p class="text-sm text-gray-500 dark:text-gray-400 mt-2">No momento não temos turmas abertas ou em formação. Tente novamente em outra oportunidade.</p>
        </div>

        <div class="flex justify-start">
            <button wire:click.prevent="$set('fase_atual','dadosAluno')"
                class="inline-flex items-center gap-2 px-6 py-3 bg-white dark:bg-gray-800 border border-gray-300 dark:border-gray-600
                       text-gray-700 dark:text-gray-300 text-sm font-semibold rounded-xl hover:bg-gray-50 dark:hover:bg-gray-700 transition-all duration-200 shadow-sm">
                <svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M11 17l-5-5m0 0l5-5m-5 5h12"/></svg>
                VOLTAR
            </button>
        </div>
    @endif

    {{-- Modal de Pré-requisitos --}}
    <div x-show="showPrereqModal"
         x-cloak
         @keydown.escape.window="showPrereqModal = false"
         class="fixed inset-0 z-50 flex items-center justify-center p-4 bg-black/60 backdrop-blur-sm"
         x-transition:enter="transition ease-out duration-300"
         x-transition:enter-start="opacity-0"
         x-transition:enter-end="opacity-100"
         x-transition:leave="transition ease-in duration-200"
         x-transition:leave-start="opacity-100"
         x-transition:leave-end="opacity-0">

        <div @click.away="showPrereqModal = false"
             class="relative w-full max-w-lg bg-white dark:bg-gray-800 rounded-2xl shadow-2xl overflow-hidden"
             x-transition:enter="transition ease-out duration-300"
             x-transition:enter-start="opacity-0 scale-90"
             x-transition:enter-end="opacity-100 scale-100"
             x-transition:leave="transition ease-in duration-200"
             x-transition:leave-start="opacity-100 scale-100"
             x-transition:leave-end="opacity-0 scale-90">

            {{-- Header com gradiente --}}
            <div class="relative px-6 py-8 bg-gradient-to-br from-red-500 to-red-600 dark:from-red-600 dark:to-red-700">
                <button @click="showPrereqModal = false"
                        class="absolute top-4 right-4 text-white/80 hover:text-white transition-colors">
                    <svg class="w-6 h-6" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M6 18L18 6M6 6l12 12"/>
                    </svg>
                </button>

                <div class="flex items-center gap-4">
                    <div class="w-14 h-14 rounded-2xl bg-white/20 backdrop-blur-sm flex items-center justify-center shrink-0">
                        <svg class="w-8 h-8 text-white" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 15v2m-6 4h12a2 2 0 002-2v-6a2 2 0 00-2-2H6a2 2 0 00-2 2v6a2 2 0 002 2zm10-10V7a4 4 0 00-8 0v4h8z"/>
                        </svg>
                    </div>
                    <div class="flex-1 min-w-0">
                        <p class="text-xs font-semibold text-white/80 uppercase tracking-wider mb-1">Curso bloqueado</p>
                        <h3 class="text-lg font-bold text-white leading-tight uppercase" x-text="prereqModalData.cursoNome"></h3>
                    </div>
                </div>
            </div>

            {{-- Corpo do modal --}}
            <div class="px-6 py-6">
                <div class="mb-5">
                    <div class="flex items-start gap-3 p-4 bg-red-50 dark:bg-red-950/20 border border-red-200 dark:border-red-800 rounded-xl">
                        <svg class="w-5 h-5 text-red-600 dark:text-red-400 shrink-0 mt-0.5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 9v2m0 4h.01m-6.938 4h13.856c1.54 0 2.502-1.667 1.732-3L13.732 4c-.77-1.333-2.694-1.333-3.464 0L3.34 16c-.77 1.333.192 3 1.732 3z"/>
                        </svg>
                        <p class="text-sm text-red-700 dark:text-red-300 leading-relaxed">
                            Este curso possui <strong>pré-requisitos obrigatórios</strong> para se matricular
                        </p>
                    </div>
                </div>

                <div class="space-y-3">
                    <h4 class="text-xs font-bold text-gray-500 dark:text-gray-400 uppercase tracking-wider">Pré-requisitos necessários</h4>

                    <div class="space-y-2.5">
                        <template x-for="(msg, index) in prereqModalData.mensagens" :key="index">
                            <div class="flex items-start gap-3 p-3.5 rounded-lg transition-colors"
                                 :class="msg.bloqueia ? 'bg-red-50 dark:bg-red-950/30 border border-red-200 dark:border-red-800' : 'bg-blue-50 dark:bg-blue-950/30 border border-blue-200 dark:border-blue-800'">

                                <div class="shrink-0 mt-0.5">
                                    <svg x-show="msg.bloqueia" class="w-5 h-5 text-red-600 dark:text-red-400" fill="currentColor" viewBox="0 0 20 20">
                                        <path fill-rule="evenodd" d="M10 18a8 8 0 100-16 8 8 0 000 16zM8.707 7.293a1 1 0 00-1.414 1.414L8.586 10l-1.293 1.293a1 1 0 101.414 1.414L10 11.414l1.293 1.293a1 1 0 001.414-1.414L11.414 10l1.293-1.293a1 1 0 00-1.414-1.414L10 8.586 8.707 7.293z" clip-rule="evenodd"/>
                                    </svg>
                                    <svg x-show="!msg.bloqueia" class="w-5 h-5 text-blue-600 dark:text-blue-400" fill="currentColor" viewBox="0 0 20 20">
                                        <path fill-rule="evenodd" d="M18 10a8 8 0 11-16 0 8 8 0 0116 0zm-7-4a1 1 0 11-2 0 1 1 0 012 0zM9 9a1 1 0 000 2v3a1 1 0 001 1h1a1 1 0 100-2v-3a1 1 0 00-1-1H9z" clip-rule="evenodd"/>
                                    </svg>
                                </div>

                                <div class="flex-1 min-w-0">
                                    <p class="text-sm leading-relaxed"
                                       :class="msg.bloqueia ? 'text-red-700 dark:text-red-300 font-semibold' : 'text-blue-700 dark:text-blue-300'"
                                       x-text="msg.mensagem"></p>
                                </div>
                            </div>
                        </template>
                    </div>
                </div>
            </div>

            {{-- Footer --}}
            <div class="px-6 py-4 bg-gray-50 dark:bg-gray-900/50 border-t border-gray-200 dark:border-gray-700">
                <button @click="showPrereqModal = false"
                        class="w-full px-4 py-3 bg-gray-600 hover:bg-gray-700 text-white font-semibold text-sm rounded-xl transition-colors duration-200 shadow-sm">
                    Entendi
                </button>
            </div>
        </div>
    </div>
</div>