Multi-Step Wizard

<BbCard class="w-full max-w-lg">
    <BbCardHeader>
        <BbCardTitle class="text-2xl">Create Your Account</BbCardTitle>
        <BbCardDescription>Complete the steps below to set up your account.</BbCardDescription>
    </BbCardHeader>
    <BbCardContent>
        <BbFormWizard @bind-CurrentStep="currentStep"
                      CompleteLabel="Create Account"
                      Class="space-y-6"
                      ContentClass="min-h-[180px]">
            <BbWizardStep Title="Account" Icon="user" Description="Email & password">
                <div class="space-y-4">
                    <div class="space-y-2">
                        <BbLabel For="email">Email</BbLabel>
                        <BbInput Id="email" Type="InputType.Email" Placeholder="[email protected]"
                                 @bind-Value="email" />
                    </div>
                    <div class="space-y-2">
                        <BbLabel For="password">Password</BbLabel>
                        <BbInput Id="password" Type="InputType.Password"
                                 @bind-Value="password" />
                        <p class="text-xs text-muted-foreground">Must be at least 8 characters long.</p>
                    </div>
                </div>
            </BbWizardStep>

            <BbWizardStep Title="Profile" Icon="contact" Description="Personal info">
                <div class="space-y-4">
                    <div class="space-y-2">
                        <BbLabel For="fullname">Full Name</BbLabel>
                        <BbInput Id="fullname" Placeholder="John Doe"
                                 @bind-Value="fullName" />
                    </div>
                    <div class="space-y-2">
                        <BbLabel For="bio">Bio</BbLabel>
                        <BbTextarea Id="bio" Rows="3" Placeholder="Tell us about yourself..."
                                    @bind-Value="bio" />
                    </div>
                </div>
            </BbWizardStep>

            <BbWizardStep Title="Confirm" Icon="circle-check" Description="Review details">
                <div class="space-y-4">
                    <p class="text-sm text-muted-foreground">
                        Review your information before completing signup.
                    </p>
                    <div class="rounded-md bg-muted p-4 space-y-2 text-sm">
                        <div class="flex justify-between">
                            <span class="text-muted-foreground">Email</span>
                            <span class="font-medium">@email</span>
                        </div>
                        <BbSeparator />
                        <div class="flex justify-between">
                            <span class="text-muted-foreground">Full Name</span>
                            <span class="font-medium">@fullName</span>
                        </div>
                    </div>
                </div>
            </BbWizardStep>
        </BbFormWizard>
    </BbCardContent>
</BbCard>

@code {
    private int currentStep = 0;
    private string email = "";
    private string password = "";
    private string fullName = "";
    private string bio = "";
}