@php
    $steps = [
        ['label' => '1. Design Cover', 'route' => 'books.design'],
        ['label' => '2. Review Interior', 'route' => 'books.review'],
        ['label' => '3. Quantity', 'route' => 'books.quantity'],
        ['label' => '4. Shipping', 'route' => 'books.shipping'],
        ['label' => '5. Checkout', 'route' => 'books.checkout'],
    ];
@endphp

<div class="mb-8">
    <div class="flex items-center gap-1 max-w-2xl">
        @foreach($steps as $index => $step)
            @php
                $stepNumber = $index + 1;
                $isActive = $stepNumber === $currentStep;
                $isCompleted = $stepNumber < $currentStep;
            @endphp
            <div class="flex-1">
                <div class="h-1 rounded-full" style="background: {{ $isCompleted || $isActive ? 'var(--color-primary)' : 'var(--color-border)' }};"></div>
                <p class="text-xs mt-2 {{ $isActive ? 'font-medium' : '' }}" style="color: {{ $isActive ? 'var(--color-primary)' : 'var(--color-text-tertiary)' }};">{{ $step['label'] }}</p>
            </div>
        @endforeach
    </div>
</div>