@props([
    'faseAtual' => null,
])

@php
    $steps = [
        ['key' => 'validaDocumento', 'label' => 'Documento',    'fases' => [null, false, '']],
        ['key' => 'dadosAluno',      'label' => 'Dados',        'fases' => ['dadosAluno', 'matriculasRealizadas']],
        ['key' => 'selecionaCurso',  'label' => 'Curso',        'fases' => ['selecionaCurso']],
        ['key' => 'confirmarDados',  'label' => 'Confirmação',  'fases' => ['confirmarDados']],
        ['key' => 'realizaPagamento','label' => 'Pagamento',     'fases' => ['realizaPagamento']],
        ['key' => 'conclusao',       'label' => 'Conclusão',     'fases' => ['matriculado', 'cancelado']],
    ];

    $activeIndex = 0;
    foreach ($steps as $i => $step) {
        if (in_array($faseAtual, $step['fases'], true)) {
            $activeIndex = $i;
            break;
        }
    }
    $total = count($steps);
@endphp

{{-- Barra de progresso integrada ao card --}}
<div class="w-full">

    {{-- Progress bar visual (fina, no topo) --}}
    <div class="h-1.5 bg-gray-100 dark:bg-gray-800 rounded-full overflow-hidden mb-4">
        <div class="h-full bg-gradient-to-r from-indigo-500 to-indigo-600 rounded-full transition-all duration-500 ease-out"
             style="width: {{ $activeIndex === 0 ? 4 : round(($activeIndex / ($total - 1)) * 100) }}%"></div>
    </div>

    {{-- Desktop: etapas inline --}}
    <div class="hidden md:flex items-center justify-between">
        @foreach ($steps as $i => $step)
            @php
                $state = $i < $activeIndex ? 'done' : ($i === $activeIndex ? 'active' : 'pending');
            @endphp

            <div class="flex items-center gap-1.5 {{ $state === 'pending' ? 'opacity-40' : '' }}">
                {{-- Indicador numérico / check --}}
                <div class="w-6 h-6 rounded-full flex items-center justify-center text-xs font-bold
                    @if ($state === 'done')
                        bg-emerald-500 text-white
                    @elseif ($state === 'active')
                        bg-indigo-600 text-white
                    @else
                        bg-gray-200 dark:bg-gray-700 text-gray-400 dark:text-gray-500
                    @endif
                ">
                    @if ($state === 'done')
                        <svg class="w-3.5 h-3.5" 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>
                    @else
                        {{ $i + 1 }}
                    @endif
                </div>

                {{-- Label --}}
                <span class="text-xs font-semibold whitespace-nowrap
                    @if ($state === 'done')    text-emerald-600 dark:text-emerald-400
                    @elseif ($state === 'active') text-indigo-700 dark:text-indigo-300
                    @else                       text-gray-400 dark:text-gray-500
                    @endif
                ">{{ $step['label'] }}</span>
            </div>

            {{-- Conector --}}
            @if ($i < $total - 1)
                <div class="flex-1 mx-2 h-px {{ $i < $activeIndex ? 'bg-emerald-300 dark:bg-emerald-700' : 'bg-gray-200 dark:bg-gray-700' }}"></div>
            @endif
        @endforeach
    </div>

    {{-- Mobile: compacto --}}
    <div class="flex md:hidden items-center justify-between">
        <div class="flex items-center gap-1.5">
            @foreach ($steps as $i => $step)
                @php $state = $i < $activeIndex ? 'done' : ($i === $activeIndex ? 'active' : 'pending'); @endphp
                <div class="transition-all duration-300
                    @if ($state === 'done')    w-2 h-2 rounded-full bg-emerald-500
                    @elseif ($state === 'active') w-6 h-2 rounded-full bg-indigo-600
                    @else                       w-2 h-2 rounded-full bg-gray-300 dark:bg-gray-600
                    @endif
                "></div>
            @endforeach
        </div>
        <span class="text-xs font-semibold text-indigo-600 dark:text-indigo-400">
            {{ $activeIndex + 1 }}/{{ $total }} · {{ $steps[$activeIndex]['label'] }}
        </span>
    </div>
</div>