@model OnboardingJourneyHeaderViewModel
@{
    var steps = new[]
    {
        new { Label = "Welcome", Order = 1 },
        new { Label = "Writing Stage", Order = 2 },
        new { Label = "Writing Software", Order = 3 },
        new { Label = "Project", Order = 4 },
        new { Label = "Book", Order = 5 },
        new { Label = "Connect Word", Order = 6 },
        new { Label = "Review Chapters", Order = 7 },
        new { Label = "Review Characters", Order = 8 },
        new { Label = "Analyse Manuscript", Order = 9 },
        new { Label = "Complete", Order = 10 }
    };
}

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

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

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