@page "/blocks/form-wizard"
@namespace Lumeo.Docs.Pages.Patterns

<PageTitle>Form Wizard — Lumeo Patterns</PageTitle>

<PageHeader Title="Multi-Step Form Wizard" Description="A polished four-step onboarding wizard with progress steps, real field inputs, preferences, and a review summary before submission." />

<Stack Gap="12">

    <ComponentDemo Title="Onboarding Wizard" Code="@_wizardCode">
        @if (_submitted)
        {
            <!-- Success State -->
            <Stack Class="w-full max-w-2xl mx-auto" Gap="0">
                <Card>
                    <CardContent Class="py-16">
                        <Stack Gap="6" Class="items-center text-center">
                            <Flex Class="h-20 w-20 items-center justify-center rounded-full bg-primary/10 mx-auto">
                                <DynamicIcon Name="CheckCircle" Class="h-10 w-10 text-primary" />
                            </Flex>
                            <Stack Gap="2">
                                <Heading Level="2" Size="xl" Class="font-bold">Welcome aboard, @_firstName!</Heading>
                                <Lumeo.Text Color="muted" Class="max-w-sm mx-auto">
                                    Your account is set up and ready to go. We've sent a confirmation to <Lumeo.Text As="span" Weight="medium" Color="foreground">@_email</Lumeo.Text>.
                                </Lumeo.Text>
                            </Stack>
                            <Flex Gap="3">
                                <Button Variant="Button.ButtonVariant.Outline" OnClick="@Reset">
                                    <DynamicIcon Name="RefreshCw" Class="h-4 w-4" />
                                    Start Over
                                </Button>
                                <Button Variant="Button.ButtonVariant.Default">
                                    <DynamicIcon Name="ArrowRight" Class="h-4 w-4" />
                                    Go to Dashboard
                                </Button>
                            </Flex>
                        </Stack>
                    </CardContent>
                </Card>
            </Stack>
        }
        else
        {
            <Flex Direction="col" Gap="4" Class="w-full min-w-[700px] max-w-3xl mx-auto">

                <!-- Steps Progress Bar -->
                <Card Class="border-border/60">
                    <CardContent Class="py-4">
                        <Steps CurrentStep="@(_currentStep - 1)" Class="w-full">
                            <StepsItem Title="Account" Description="Credentials" />
                            <StepsItem Title="Profile" Description="About you" />
                            <StepsItem Title="Preferences" Description="Customize" />
                            <StepsItem Title="Review" Description="Confirm" />
                        </Steps>
                    </CardContent>
                </Card>

                <!-- Main Content -->
                <Flex Direction="col" Gap="4" Class="lg:flex-row">

                    <!-- Step Form Card -->
                    <Card Class="flex-1">
                        <CardHeader Class="pb-4">
                            <Flex Align="center" Gap="3">
                                <Flex Class="h-9 w-9 items-center justify-center rounded-[var(--radius)] bg-primary/10 shrink-0">
                                    <DynamicIcon Name="@StepIcon" Class="h-4 w-4 text-primary" />
                                </Flex>
                                <Stack Gap="0.5">
                                    <Heading Level="3" Size="base" Class="font-semibold leading-tight">@StepTitle</Heading>
                                    <Lumeo.Text Size="sm" Color="muted">@StepSubtitle</Lumeo.Text>
                                </Stack>
                                <Badge Variant="Badge.BadgeVariant.Outline" Class="ml-auto text-xs">Step @_currentStep / 4</Badge>
                            </Flex>
                        </CardHeader>

                        <Separator />

                        <CardContent Class="pt-5">
                            <!-- Step 1: Account -->
                            @if (_currentStep == 1)
                            {
                                <Stack Gap="4">
                                    <Grid Class="grid-cols-1 sm:grid-cols-2 gap-4">
                                        <Stack Gap="2">
                                            <Label>First name</Label>
                                            <Input @bind-Value="_firstName" placeholder="Jordan" />
                                        </Stack>
                                        <Stack Gap="2">
                                            <Label>Last name</Label>
                                            <Input @bind-Value="_lastName" placeholder="Rivera" />
                                        </Stack>
                                    </Grid>
                                    <Stack Gap="2">
                                        <Label>Work email</Label>
                                        <Input @bind-Value="_email" type="email" placeholder="jordan@acme.com" />
                                    </Stack>
                                    <Stack Gap="2">
                                        <Label>Password</Label>
                                        <PasswordInput @bind-Value="_password" Placeholder="Minimum 8 characters" ShowStrength="true" />
                                        <Lumeo.Text Size="xs" Color="muted">Use at least 8 characters, one uppercase and one number.</Lumeo.Text>
                                    </Stack>
                                    <Stack Gap="2">
                                        <Label>Confirm password</Label>
                                        <PasswordInput @bind-Value="_confirmPassword" Placeholder="Re-enter password" />
                                        @if (!string.IsNullOrEmpty(_confirmPassword) && _password != _confirmPassword)
                                        {
                                            <Lumeo.Text Size="xs" Class="text-destructive">Passwords do not match.</Lumeo.Text>
                                        }
                                    </Stack>
                                    @if (!string.IsNullOrEmpty(_step1Error))
                                    {
                                        <Alert Variant="Alert.AlertVariant.Destructive">
                                            <Flex Align="center" Gap="2">
                                                <DynamicIcon Name="CircleAlert" Class="h-4 w-4 shrink-0" />
                                                <Lumeo.Text Size="sm">@_step1Error</Lumeo.Text>
                                            </Flex>
                                        </Alert>
                                    }
                                </Stack>
                            }

                            <!-- Step 2: Profile -->
                            @if (_currentStep == 2)
                            {
                                <Stack Gap="4">
                                    <Grid Class="grid-cols-1 sm:grid-cols-2 gap-4">
                                        <Stack Gap="2">
                                            <Label>Job title</Label>
                                            <Input @bind-Value="_jobTitle" placeholder="Product Designer" />
                                        </Stack>
                                        <Stack Gap="2">
                                            <Label>Department</Label>
                                            <Select @bind-Value="_department">
                                                <SelectTrigger>
                                                    <Text As="span" Class="@(_department == null ? "text-muted-foreground" : "")">
                                                        @(_department ?? "Select department")
                                                    </Text>
                                                </SelectTrigger>
                                                <SelectContent>
                                                    <SelectItem Value="Engineering">Engineering</SelectItem>
                                                    <SelectItem Value="Design">Design</SelectItem>
                                                    <SelectItem Value="Product">Product</SelectItem>
                                                    <SelectItem Value="Marketing">Marketing</SelectItem>
                                                    <SelectItem Value="Sales">Sales</SelectItem>
                                                    <SelectItem Value="Finance">Finance</SelectItem>
                                                    <SelectItem Value="HR">HR &amp; People</SelectItem>
                                                </SelectContent>
                                            </Select>
                                        </Stack>
                                    </Grid>
                                    <Stack Gap="2">
                                        <Label>Company / Organization</Label>
                                        <Input @bind-Value="_company" placeholder="Acme Inc." />
                                    </Stack>
                                    <Grid Class="grid-cols-1 sm:grid-cols-2 gap-4">
                                        <Stack Gap="2">
                                            <Label>Country</Label>
                                            <Select @bind-Value="_country">
                                                <SelectTrigger>
                                                    <Text As="span" Class="@(_country == null ? "text-muted-foreground" : "")">
                                                        @(_country ?? "Select country")
                                                    </Text>
                                                </SelectTrigger>
                                                <SelectContent>
                                                    <SelectItem Value="US">United States</SelectItem>
                                                    <SelectItem Value="GB">United Kingdom</SelectItem>
                                                    <SelectItem Value="CA">Canada</SelectItem>
                                                    <SelectItem Value="AU">Australia</SelectItem>
                                                    <SelectItem Value="DE">Germany</SelectItem>
                                                    <SelectItem Value="FR">France</SelectItem>
                                                    <SelectItem Value="JP">Japan</SelectItem>
                                                    <SelectItem Value="IN">India</SelectItem>
                                                    <SelectItem Value="BR">Brazil</SelectItem>
                                                    <SelectItem Value="SG">Singapore</SelectItem>
                                                    <SelectItem Value="NL">Netherlands</SelectItem>
                                                    <SelectItem Value="Other">Other</SelectItem>
                                                </SelectContent>
                                            </Select>
                                        </Stack>
                                        <Stack Gap="2">
                                            <Label>Timezone</Label>
                                            <Select @bind-Value="_timezone">
                                                <SelectTrigger>
                                                    <Text As="span" Class="@(_timezone == null ? "text-muted-foreground" : "")">
                                                        @(_timezone ?? "Select timezone")
                                                    </Text>
                                                </SelectTrigger>
                                                <SelectContent>
                                                    <SelectItem Value="PST">Pacific (PST / UTC-8)</SelectItem>
                                                    <SelectItem Value="MST">Mountain (MST / UTC-7)</SelectItem>
                                                    <SelectItem Value="CST">Central (CST / UTC-6)</SelectItem>
                                                    <SelectItem Value="EST">Eastern (EST / UTC-5)</SelectItem>
                                                    <SelectItem Value="GMT">London (GMT / UTC+0)</SelectItem>
                                                    <SelectItem Value="CET">Central Europe (CET / UTC+1)</SelectItem>
                                                    <SelectItem Value="IST">India (IST / UTC+5:30)</SelectItem>
                                                    <SelectItem Value="SGT">Singapore (SGT / UTC+8)</SelectItem>
                                                    <SelectItem Value="AEST">Sydney (AEST / UTC+10)</SelectItem>
                                                </SelectContent>
                                            </Select>
                                        </Stack>
                                    </Grid>
                                    <Stack Gap="2">
                                        <Label>Bio <Lumeo.Text As="span" Color="muted" Size="xs">(optional)</Lumeo.Text></Label>
                                        <Textarea @bind-Value="_bio" placeholder="A short bio visible to your teammates..." Rows="3" />
                                    </Stack>
                                </Stack>
                            }

                            <!-- Step 3: Preferences -->
                            @if (_currentStep == 3)
                            {
                                <Stack Gap="5">
                                    <!-- Notifications Section -->
                                    <Stack Gap="3">
                                        <Heading Level="5" Size="sm" Class="font-medium">Notifications</Heading>
                                        <Card Class="bg-muted/30 border-border/40">
                                            <CardContent Class="pt-4 pb-4">
                                                <Stack Gap="0" Class="divide-y divide-border/40">
                                                    <Flex Align="center" Justify="between" Class="py-3">
                                                        <Stack Gap="0.5">
                                                            <Lumeo.Text Size="sm" Weight="medium">Product updates</Lumeo.Text>
                                                            <Lumeo.Text Size="xs" Color="muted">New features, releases, and announcements</Lumeo.Text>
                                                        </Stack>
                                                        <Switch @bind-Checked="_notifProduct" />
                                                    </Flex>
                                                    <Flex Align="center" Justify="between" Class="py-3">
                                                        <Stack Gap="0.5">
                                                            <Lumeo.Text Size="sm" Weight="medium">Team activity</Lumeo.Text>
                                                            <Lumeo.Text Size="xs" Color="muted">Comments, mentions, and assignment changes</Lumeo.Text>
                                                        </Stack>
                                                        <Switch @bind-Checked="_notifTeam" />
                                                    </Flex>
                                                    <Flex Align="center" Justify="between" Class="py-3">
                                                        <Stack Gap="0.5">
                                                            <Lumeo.Text Size="sm" Weight="medium">Weekly digest</Lumeo.Text>
                                                            <Lumeo.Text Size="xs" Color="muted">A summary of activity sent every Monday</Lumeo.Text>
                                                        </Stack>
                                                        <Switch @bind-Checked="_notifDigest" />
                                                    </Flex>
                                                    <Flex Align="center" Justify="between" Class="py-3">
                                                        <Stack Gap="0.5">
                                                            <Lumeo.Text Size="sm" Weight="medium">Security alerts</Lumeo.Text>
                                                            <Lumeo.Text Size="xs" Color="muted">Sign-ins from new devices or locations</Lumeo.Text>
                                                        </Stack>
                                                        <Switch @bind-Checked="_notifSecurity" />
                                                    </Flex>
                                                </Stack>
                                            </CardContent>
                                        </Card>
                                    </Stack>

                                    <!-- Role / Primary Use -->
                                    <Stack Gap="3">
                                        <Heading Level="5" Size="sm" Class="font-medium">Primary use case</Heading>
                                        <RadioGroup @bind-Value="_primaryUse">
                                            <Grid Class="grid-cols-1 sm:grid-cols-2 gap-2">
                                                @foreach (var (val, label, desc) in _useCases)
                                                {
                                                    var v = val;
                                                    <label class="@($"flex items-start gap-3 rounded-[var(--radius-lg)] border p-3 cursor-pointer transition-colors {(_primaryUse == v ? "border-primary bg-primary/5" : "border-border/60 hover:bg-accent/40")}")">
                                                        <RadioGroupItem Value="@v" Class="mt-0.5" />
                                                        <Stack Gap="0.5">
                                                            <Lumeo.Text Size="sm" Weight="medium">@label</Lumeo.Text>
                                                            <Lumeo.Text Size="xs" Color="muted">@desc</Lumeo.Text>
                                                        </Stack>
                                                    </label>
                                                }
                                            </Grid>
                                        </RadioGroup>
                                    </Stack>

                                    <!-- Interests -->
                                    <Stack Gap="3">
                                        <Heading Level="5" Size="sm" Class="font-medium">Topics of interest</Heading>
                                        <Grid Class="grid-cols-2 sm:grid-cols-3 gap-2">
                                            @foreach (var interest in _interests)
                                            {
                                                var i = interest;
                                                <label class="@($"flex items-center gap-2 rounded-[var(--radius)] border p-2.5 cursor-pointer transition-colors {(i.Selected ? "border-primary bg-primary/5" : "border-border/60 hover:bg-accent/40")}")">
                                                    <Checkbox Checked="@i.Selected" CheckedChanged="@(v => i.Selected = v)" />
                                                    <Lumeo.Text Size="sm">@i.Label</Lumeo.Text>
                                                </label>
                                            }
                                        </Grid>
                                    </Stack>
                                </Stack>
                            }

                            <!-- Step 4: Review -->
                            @if (_currentStep == 4)
                            {
                                <Stack Gap="5">
                                    <Heading Level="4" Size="sm" Class="font-medium">Review your information</Heading>

                                    <!-- Account Section -->
                                    <Stack Gap="0" Class="rounded-[var(--radius-lg)] border border-border/60 overflow-hidden">
                                        <Flex Align="center" Justify="between" Class="px-4 py-2 bg-muted/40 border-b border-border/40">
                                            <Lumeo.Text Size="xs" Weight="semibold" Class="uppercase tracking-wide text-muted-foreground">Account</Lumeo.Text>
                                            <button @onclick="@(() => _currentStep = 1)" class="text-xs text-primary hover:underline">Edit</button>
                                        </Flex>
                                        <Grid Class="grid-cols-2 gap-x-6 gap-y-1 px-4 py-3 text-sm">
                                            <Lumeo.Text Color="muted">Name</Lumeo.Text>
                                            <Lumeo.Text Weight="medium">@(_firstName) @(_lastName)</Lumeo.Text>
                                            <Lumeo.Text Color="muted">Email</Lumeo.Text>
                                            <Lumeo.Text>@(_email.Length > 0 ? _email : "—")</Lumeo.Text>
                                            <Lumeo.Text Color="muted">Password</Lumeo.Text>
                                            <Lumeo.Text>••••••••</Lumeo.Text>
                                        </Grid>
                                    </Stack>

                                    <!-- Profile Section -->
                                    <Stack Gap="0" Class="rounded-[var(--radius-lg)] border border-border/60 overflow-hidden">
                                        <Flex Align="center" Justify="between" Class="px-4 py-2 bg-muted/40 border-b border-border/40">
                                            <Lumeo.Text Size="xs" Weight="semibold" Class="uppercase tracking-wide text-muted-foreground">Profile</Lumeo.Text>
                                            <button @onclick="@(() => _currentStep = 2)" class="text-xs text-primary hover:underline">Edit</button>
                                        </Flex>
                                        <Grid Class="grid-cols-2 gap-x-6 gap-y-1 px-4 py-3 text-sm">
                                            <Lumeo.Text Color="muted">Title</Lumeo.Text>
                                            <Lumeo.Text>@(_jobTitle.Length > 0 ? _jobTitle : "—")</Lumeo.Text>
                                            <Lumeo.Text Color="muted">Department</Lumeo.Text>
                                            <Lumeo.Text>@(_department ?? "—")</Lumeo.Text>
                                            <Lumeo.Text Color="muted">Company</Lumeo.Text>
                                            <Lumeo.Text>@(_company.Length > 0 ? _company : "—")</Lumeo.Text>
                                            <Lumeo.Text Color="muted">Country / TZ</Lumeo.Text>
                                            <Lumeo.Text>@($"{_country ?? "—"} · {_timezone ?? "—"}")</Lumeo.Text>
                                        </Grid>
                                    </Stack>

                                    <!-- Preferences Section -->
                                    <Stack Gap="0" Class="rounded-[var(--radius-lg)] border border-border/60 overflow-hidden">
                                        <Flex Align="center" Justify="between" Class="px-4 py-2 bg-muted/40 border-b border-border/40">
                                            <Lumeo.Text Size="xs" Weight="semibold" Class="uppercase tracking-wide text-muted-foreground">Preferences</Lumeo.Text>
                                            <button @onclick="@(() => _currentStep = 3)" class="text-xs text-primary hover:underline">Edit</button>
                                        </Flex>
                                        <Grid Class="grid-cols-2 gap-x-6 gap-y-1 px-4 py-3 text-sm">
                                            <Lumeo.Text Color="muted">Notifications</Lumeo.Text>
                                            <Lumeo.Text>
                                                @{
                                                    var notifs = new List<string>();
                                                    if (_notifProduct) notifs.Add("Product");
                                                    if (_notifTeam) notifs.Add("Team");
                                                    if (_notifDigest) notifs.Add("Digest");
                                                    if (_notifSecurity) notifs.Add("Security");
                                                }
                                                @(notifs.Count > 0 ? string.Join(", ", notifs) : "None")
                                            </Lumeo.Text>
                                            <Lumeo.Text Color="muted">Primary use</Lumeo.Text>
                                            <Lumeo.Text Class="capitalize">@(_primaryUse ?? "—")</Lumeo.Text>
                                            <Lumeo.Text Color="muted">Interests</Lumeo.Text>
                                            <Lumeo.Text>
                                                @{
                                                    var sel = _interests.Where(x => x.Selected).Select(x => x.Label).ToList();
                                                }
                                                @(sel.Count > 0 ? string.Join(", ", sel) : "None selected")
                                            </Lumeo.Text>
                                        </Grid>
                                    </Stack>

                                    <!-- Terms -->
                                    <label class="flex items-start gap-3 cursor-pointer rounded-[var(--radius-lg)] border border-border/60 p-3 hover:bg-accent/30 transition-colors">
                                        <Checkbox @bind-Checked="_confirmed" Class="mt-0.5" />
                                        <Lumeo.Text Size="sm" Color="muted">
                                            I confirm that all information is accurate and I agree to the
                                            <Lumeo.Link Href="#" Class="text-primary hover:underline">Terms of Service</Lumeo.Link>
                                            and
                                            <Lumeo.Link Href="#" Class="text-primary hover:underline">Privacy Policy</Lumeo.Link>.
                                        </Lumeo.Text>
                                    </label>
                                </Stack>
                            }
                        </CardContent>

                        <Separator />

                        <CardFooter Class="pt-4">
                            <Flex Justify="between" Class="w-full">
                                @if (_currentStep > 1)
                                {
                                    <Button Variant="Button.ButtonVariant.Outline" OnClick="@PreviousStep">
                                        <DynamicIcon Name="ChevronLeft" Class="h-4 w-4" />
                                        Back
                                    </Button>
                                }
                                else
                                {
                                    <div></div>
                                }

                                <Flex Gap="2">
                                    @if (_currentStep < 4 && _currentStep != 1)
                                    {
                                        <Button Variant="Button.ButtonVariant.Ghost" OnClick="@NextStep">
                                            Skip
                                        </Button>
                                    }
                                    @if (_currentStep < 4)
                                    {
                                        <Button Variant="Button.ButtonVariant.Default" OnClick="@NextStep">
                                            Continue
                                            <DynamicIcon Name="ChevronRight" Class="h-4 w-4" />
                                        </Button>
                                    }
                                    else
                                    {
                                        <Button Variant="Button.ButtonVariant.Default" OnClick="@Submit" Disabled="@(!_confirmed)">
                                            <DynamicIcon Name="Check" Class="h-4 w-4" />
                                            Create Account
                                        </Button>
                                    }
                                </Flex>
                            </Flex>
                        </CardFooter>
                    </Card>

                    <!-- Side Illustration Card -->
                    <Stack Class="w-full lg:w-64 shrink-0">
                        <Card Class="h-full bg-muted/30 border-border/40">
                            <CardContent Class="py-6">
                                <Stack Gap="4">
                                    <Flex Class="h-12 w-12 items-center justify-center rounded-[var(--radius-lg)] bg-primary/10">
                                        <DynamicIcon Name="@StepIcon" Class="h-6 w-6 text-primary" />
                                    </Flex>
                                    <Stack Gap="2">
                                        <Heading Level="4" Size="sm" Class="font-semibold">@StepSideTitle</Heading>
                                        <Lumeo.Text Size="sm" Color="muted" Class="leading-relaxed">@StepSideBody</Lumeo.Text>
                                    </Stack>
                                    <Separator />
                                    <Stack Gap="2">
                                        @foreach (var tip in StepTips)
                                        {
                                            <Flex Align="start" Gap="2">
                                                <DynamicIcon Name="Check" Class="h-3.5 w-3.5 text-primary mt-0.5 shrink-0" />
                                                <Lumeo.Text Size="xs" Color="muted">@tip</Lumeo.Text>
                                            </Flex>
                                        }
                                    </Stack>
                                </Stack>
                            </CardContent>
                        </Card>
                    </Stack>

                </Flex>
            </Flex>
        }
    </ComponentDemo>

</Stack>

@code {
    private int _currentStep = 1;
    private bool _submitted = false;

    // Step 1 — Account
    private string _firstName = "";
    private string _lastName = "";
    private string _email = "";
    private string _password = "";
    private string _confirmPassword = "";
    private string? _step1Error;

    // Step 2 — Profile
    private string _jobTitle = "";
    private string? _department;
    private string _company = "";
    private string? _country;
    private string? _timezone;
    private string _bio = "";

    // Step 3 — Preferences
    private bool _notifProduct = true;
    private bool _notifTeam = true;
    private bool _notifDigest = false;
    private bool _notifSecurity = true;
    private string? _primaryUse = "teams";

    private List<(string Val, string Label, string Desc)> _useCases = new()
    {
        ("personal",    "Personal",        "Individual projects and personal productivity"),
        ("teams",       "Team collaboration", "Working with colleagues on shared projects"),
        ("clients",     "Client work",     "Managing deliverables and client communications"),
        ("enterprise",  "Enterprise",      "Large-scale org rollout and admin oversight"),
    };

    private List<InterestItem> _interests = new()
    {
        new("Product Design"),
        new("Engineering"),
        new("Data & Analytics"),
        new("Marketing"),
        new("Leadership"),
        new("AI & Automation"),
    };

    // Step 4 — Confirm
    private bool _confirmed = false;

    // Step metadata
    private string StepIcon => _currentStep switch
    {
        1 => "UserPlus",
        2 => "User",
        3 => "Settings2",
        4 => "ClipboardCheck",
        _ => "Circle"
    };

    private string StepTitle => _currentStep switch
    {
        1 => "Create your account",
        2 => "Tell us about yourself",
        3 => "Personalize your experience",
        4 => "Review &amp; confirm",
        _ => ""
    };

    private string StepSubtitle => _currentStep switch
    {
        1 => "Set up your login credentials",
        2 => "Help teammates find and recognize you",
        3 => "Choose what matters to you",
        4 => "Double-check before we create your account",
        _ => ""
    };

    private string StepSideTitle => _currentStep switch
    {
        1 => "Secure by default",
        2 => "Your public profile",
        3 => "Your feed, your way",
        4 => "Almost there!",
        _ => ""
    };

    private string StepSideBody => _currentStep switch
    {
        1 => "We use bcrypt hashing and zero-knowledge proofs. Your password is never stored in plain text.",
        2 => "A complete profile helps teammates understand your role and contact you through the right channels.",
        3 => "We use your preferences to surface the most relevant content, integrations, and suggestions.",
        4 => "Review everything before creating your account. You can always change these settings later.",
        _ => ""
    };

    private IEnumerable<string> StepTips => _currentStep switch
    {
        1 => new[] { "Use a work email address", "Password must be 8+ characters", "You can add SSO later" },
        2 => new[] { "Profile photo can be added later", "Bio is visible to your org", "Timezone affects notifications" },
        3 => new[] { "All notifications can be changed anytime", "Your data is never sold", "You can update interests any time" },
        4 => new[] { "Confirmation email sent instantly", "You can invite teammates next", "Full setup takes under 2 minutes" },
        _ => Array.Empty<string>()
    };

    private void NextStep()
    {
        if (_currentStep == 1)
        {
            _step1Error = null;
            if (string.IsNullOrWhiteSpace(_firstName) || string.IsNullOrWhiteSpace(_email))
            {
                _step1Error = "Please fill in your name and email to continue.";
                return;
            }
            if (!string.IsNullOrEmpty(_password) && _password != _confirmPassword)
            {
                _step1Error = "Passwords do not match.";
                return;
            }
        }
        if (_currentStep < 4) _currentStep++;
    }

    private void PreviousStep()
    {
        if (_currentStep > 1) _currentStep--;
    }

    private void Submit()
    {
        if (_confirmed) _submitted = true;
    }

    private void Reset()
    {
        _currentStep = 1;
        _submitted = false;
        _firstName = _lastName = _email = _password = _confirmPassword = "";
        _jobTitle = _company = _bio = "";
        _department = _country = _timezone = null;
        _notifProduct = _notifTeam = _notifSecurity = true;
        _notifDigest = false;
        _primaryUse = "teams";
        _confirmed = false;
        _step1Error = null;
        foreach (var i in _interests) i.Selected = false;
    }

    private class InterestItem
    {
        public string Label { get; init; }
        public bool Selected { get; set; }
        public InterestItem(string label, bool selected = false) { Label = label; Selected = selected; }
    }

    private string _wizardCode = @"<!-- 4-step onboarding wizard with Steps progress bar, side illustration, and review summary -->
<Stack Class=""max-w-3xl mx-auto"" Gap=""4"">

    <!-- Steps progress indicator -->
    <Card>
        <CardContent Class=""py-4"">
            <Steps CurrentStep=""@(_currentStep - 1)"" Class=""w-full"">
                <StepsItem Title=""Account"" Description=""Credentials"" />
                <StepsItem Title=""Profile"" Description=""About you"" />
                <StepsItem Title=""Preferences"" Description=""Customize"" />
                <StepsItem Title=""Review"" Description=""Confirm"" />
            </Steps>
        </CardContent>
    </Card>

    <Flex Gap=""4"" Class=""lg:flex-row"">
        <!-- Form Card -->
        <Card Class=""flex-1"">
            <CardHeader>
                <Flex Align=""center"" Gap=""3"">
                    <Flex Class=""h-9 w-9 items-center justify-center rounded-[var(--radius)] bg-primary/10"">
                        <DynamicIcon Name=""UserPlus"" Class=""h-4 w-4 text-primary"" />
                    </Flex>
                    <Stack>
                        <Heading Level=""3"">Create your account</Heading>
                        <Lumeo.Text Size=""sm"" Color=""muted"">Set up your login credentials</Lumeo.Text>
                    </Stack>
                </Flex>
            </CardHeader>
            <CardContent>
                @if (_currentStep == 1)
                {
                    <!-- Step 1: First/Last name, Email, Password + PasswordInput with ShowStrength -->
                }
                @if (_currentStep == 2)
                {
                    <!-- Step 2: Job title, Department Select, Company, Country, Timezone, Bio Textarea -->
                }
                @if (_currentStep == 3)
                {
                    <!-- Step 3: Notification switches, Use-case RadioGroup in styled cards, Interest checkboxes -->
                }
                @if (_currentStep == 4)
                {
                    <!-- Step 4: Review sections with Edit links, Terms checkbox, Submit -->
                }
            </CardContent>
            <CardFooter>
                <Flex Justify=""between"" Class=""w-full"">
                    <Button Variant=""Button.ButtonVariant.Outline"" OnClick=""PreviousStep"" Disabled=""@(_currentStep == 1)"">
                        <DynamicIcon Name=""ChevronLeft"" Class=""h-4 w-4"" /> Back
                    </Button>
                    @if (_currentStep < 4)
                    {
                        <Button Variant=""Button.ButtonVariant.Default"" OnClick=""NextStep"">
                            Continue <DynamicIcon Name=""ChevronRight"" Class=""h-4 w-4"" />
                        </Button>
                    }
                    else
                    {
                        <Button Variant=""Button.ButtonVariant.Default"" OnClick=""Submit"" Disabled=""@(!_confirmed)"">
                            <DynamicIcon Name=""Check"" Class=""h-4 w-4"" /> Create Account
                        </Button>
                    }
                </Flex>
            </CardFooter>
        </Card>

        <!-- Side illustration / tips panel -->
        <Card Class=""w-64 bg-muted/30 border-border/40"">
            <CardContent Class=""py-6"">
                <!-- Step-specific icon, title, body copy, and tip bullets -->
            </CardContent>
        </Card>
    </Flex>
</Stack>

@code {
    private int _currentStep = 1;
    private bool _confirmed = false;

    private void NextStep() { if (_currentStep < 4) _currentStep++; }
    private void PreviousStep() { if (_currentStep > 1) _currentStep--; }
    private void Submit() { if (_confirmed) { /* create account */ } }
}";
}
