@inject WizardState State

<div class="step flavour-step">
    <h1>What's this device for?</h1>
    <p class="step-subtitle">Choose the flavour that best matches how this PC will be used.</p>
    <div class="flavour-grid">
        @foreach (var f in Flavours)
        {
            <div class="flavour-card @(State.Flavour?.Id == f.Id ? "selected" : "")"
                 data-id="@f.Id"
                 @onclick="() => Select(f)">
                <h3>@f.Label</h3>
                <p>@f.Description</p>
            </div>
        }
    </div>
</div>

@code {
    [Parameter] public IReadOnlyList<FlavourManifest> Flavours { get; set; } = Array.Empty<FlavourManifest>();

    /// <summary>Notifies the wizard host when the selection changes so it re-evaluates
    /// the Next button (otherwise Next stays disabled until a back/forward re-render).</summary>
    [Parameter] public EventCallback OnSelected { get; set; }

    protected override async Task OnInitializedAsync()
    {
        State.Flavour ??= Flavours.FirstOrDefault(f => f.IsDefault);
        await OnSelected.InvokeAsync();
    }

    async Task Select(FlavourManifest f)
    {
        State.Flavour = f;
        await OnSelected.InvokeAsync();
    }
}