@model OnboardingJourneyHeaderViewModel
@{
    var steps = BuildDefaultSteps();
    var totalSteps = Math.Max(Model.TotalSteps, steps.Count);
    var currentStep = Math.Clamp(Model.CurrentStep, 1, totalSteps);
    var progressWidth = totalSteps <= 1
        ? 100
        : ((currentStep - 1) * 100) / (totalSteps - 1);
}

<div class="onboarding-progress" aria-label="@Model.AriaLabel">
    <span>Step @currentStep of @totalSteps</span>
    <div class="onboarding-progress-track">
        <span style="width:@progressWidth%"></span>
    </div>
</div>
<ol class="onboarding-stepper" style="--onboarding-step-count:@steps.Count" aria-label="Manuscript import journey">
    @foreach (var step in steps)
    {
        <li class="@StepClass(step.Order, currentStep)">
            <span>@step.Order</span>
            <strong>@step.Label</strong>
        </li>
    }
</ol>

@functions {
    private sealed record HeaderStep(string Label, int Order);

    private static IReadOnlyList<HeaderStep> BuildDefaultSteps() =>
    [
        new("Welcome", 1),
        new("Writing Stage", 2),
        new("Writing Software", 3),
        new("Project", 4),
        new("Book", 5),
        new("Connect Word", 6),
        new("Review Chapters", 7),
        new("Detect Scenes", 8),
        new("Review Characters", 9),
        new("Complete", 10)
    ];

    private static string StepClass(int order, int currentStep)
    {
        if (order < currentStep)
        {
            return "is-complete";
        }

        return order == currentStep ? "is-current" : "is-upcoming";
    }
}