{{--
    体験 progress pills (1-5 + N/5 完了), dùng chung SCR-45→50 (Figma 2061:1070→1497).
    $doneCount: int 0-5 — số bước đã hoàn tất (pill hiện dấu ✓).
    $activeIndex: int 0-5 — bước đang active (viền xanh); 0 = chưa có bước nào active (SCR-45).
--}}
@php
    $doneCount = (int)($doneCount ?? 0);
    $activeIndex = (int)($activeIndex ?? 0);
@endphp
<div style="display: flex; justify-content: space-between; margin-bottom: 24px">
    <div class="exp45-steps-row">
        @for($n = 1; $n <= 5; $n++)
            <span class="exp45-steps-dot {{ $n === $activeIndex ? 'is-active' : ($n <= $doneCount ? 'is-done' : '') }}">
            @if($n <= $doneCount)
                    {{ $n }}
                    {{--                <lme-icon color="#fff">--}}
                    {{--                    <svg width="11" height="12" viewBox="0 0 11 12" fill="none" xmlns="http://www.w3.org/2000/svg">--}}
                    {{--                        <path d="M2.47802 11.228C2.26335 10.6307 2.03002 10.0707 1.77802 9.54801C1.53535 9.01601 1.26935 8.50267 0.980016 8.00801C0.690682 7.51334 0.364016 7.00934 1.56257e-05 6.49601L1.31602 5.62801C1.75468 6.27201 2.13735 6.93934 2.46402 7.63001C2.79068 8.31134 3.08468 8.98801 3.34602 9.66001H3.40202C3.68202 8.70801 4.01335 7.77934 4.39602 6.87401C4.78802 5.95934 5.21268 5.08667 5.67002 4.25601C6.13668 3.41601 6.63135 2.63667 7.15402 1.91801C7.68602 1.19934 8.23202 0.560005 8.79202 5.24521e-06L10.066 1.12001C9.31935 1.82001 8.59602 2.65067 7.89602 3.61201C7.19602 4.57334 6.54735 5.67001 5.95002 6.90201C5.36202 8.12467 4.85802 9.48734 4.43802 10.99L2.47802 11.228Z" fill="white"/>--}}
                    {{--                    </svg>--}}
                    {{--                </lme-icon>--}}
                @else
                    {{ $n }}
                @endif
        </span>
        @endfor
        <span class="exp45-steps-count"><span style="font-weight: 600;color: #1F1F1F;">{{ $activeIndex - 1 < 0 ? 0 : $activeIndex - 1 }}</span>/5 完了</span>
    </div>
    <div class="exp45-skip-row">
        <button @click="skipExperienceStep" class="exp45-skip-btn">スキップして設定に進む <lme-icon file_name="right-outlined" class="lme-icon-em"></lme-icon></button>
    </div>
</div>