@php
    $steps = [
        'email' => 'Email',
        'verified' => 'Verified',
        'password' => 'Password',
        'complete' => 'Username',
    ];

    $currentIndex = array_search($currentStep ?? 'email', array_keys($steps), true);
    if ($currentIndex === false) {
        $currentIndex = 0;
    }
@endphp

<div class="mb-6">
    <div class="flex items-center justify-between text-xs sm:text-sm text-gray-600">
        @foreach($steps as $key => $label)
            @php $idx = array_search($key, array_keys($steps), true); @endphp
            <span class="{{ $idx <= $currentIndex ? 'text-gray-900 font-semibold' : '' }}">
                {{ $label }}
            </span>
        @endforeach
    </div>
    <div class="mt-2 h-2 w-full bg-gray-200 rounded-full overflow-hidden">
        <div class="h-full bg-gray-900 rounded-full" style="width: {{ (($currentIndex + 1) / count($steps)) * 100 }}%"></div>
    </div>
</div>