@page "/blocks/settings"
@namespace Lumeo.Docs.Pages.Patterns

<PageTitle>Settings Pattern — Lumeo</PageTitle>

<PageHeader Title="Settings Page" Description="A full settings layout with sidebar navigation, profile, account security, billing, notifications, team management, and danger zone." />

<ComponentDemo Title="Settings" Code="@_code">
    <Stack Class="w-full min-w-[700px]">
        <Flex Class="gap-8 min-h-[620px]">

            <!-- Left Nav -->
            <Stack Class="w-52 shrink-0 space-y-0.5">
                <Lumeo.Text Class="px-3 pb-2 text-xs font-semibold uppercase tracking-wider text-muted-foreground">Settings</Lumeo.Text>
                @foreach (var item in _sections)
                {
                    <Button Variant="Button.ButtonVariant.Ghost"
                            Class="@($"w-full justify-start gap-3 rounded-md px-3 py-2 text-sm font-medium transition-colors {(_activeSection == item.Id ? "bg-accent text-accent-foreground" : "text-muted-foreground hover:bg-accent/60 hover:text-accent-foreground")}")"
                            @onclick="@(() => _activeSection = item.Id)">
                        <DynamicIcon Name="@item.Icon" Class="h-4 w-4 shrink-0" />
                        @item.Label
                    </Button>
                }
            </Stack>

            <!-- Content Area -->
            <Stack Class="flex-1 min-w-0" Gap="6">

                <!-- PROFILE -->
                @if (_activeSection == "profile")
                {
                    <Card Class="border-border/40">
                        <CardHeader>
                            <Heading Level="3" Class="text-lg font-semibold leading-none tracking-tight">Profile</Heading>
                            <Lumeo.Text Class="text-sm text-muted-foreground">Manage your public profile information.</Lumeo.Text>
                        </CardHeader>
                        <CardContent>
                            <Stack Gap="6">
                                <Flex Class="items-center gap-4">
                                    <Avatar Class="h-20 w-20">
                                        <AvatarFallback Class="text-2xl">KS</AvatarFallback>
                                    </Avatar>
                                    <Stack Gap="1.5">
                                        <Lumeo.Text Class="text-sm font-medium text-foreground">Profile photo</Lumeo.Text>
                                        <Lumeo.Text Class="text-xs text-muted-foreground">JPG, GIF or PNG. Max 2 MB.</Lumeo.Text>
                                        <Flex Class="gap-2 mt-1">
                                            <Button Variant="Button.ButtonVariant.Outline" Size="Button.ButtonSize.Sm">
                                                <DynamicIcon Name="Upload" Class="h-3.5 w-3.5 mr-1" />
                                                Upload
                                            </Button>
                                            <Button Variant="Button.ButtonVariant.Ghost" Size="Button.ButtonSize.Sm" Class="text-destructive hover:text-destructive">Remove</Button>
                                        </Flex>
                                    </Stack>
                                </Flex>
                                <Separator Class="border-border/40" />
                                <Grid Class="grid-cols-1 sm:grid-cols-2 gap-4">
                                    <Stack Gap="2">
                                        <Label>First name</Label>
                                        <Input placeholder="First name" Value="Keiko" />
                                    </Stack>
                                    <Stack Gap="2">
                                        <Label>Last name</Label>
                                        <Input placeholder="Last name" Value="Sato" />
                                    </Stack>
                                </Grid>
                                <Stack Gap="2">
                                    <Label>Email address</Label>
                                    <Input type="email" placeholder="name@example.com" Value="keiko.sato@lumeo.io" />
                                </Stack>
                                <Stack Gap="2">
                                    <Label>Job title</Label>
                                    <Input placeholder="e.g. Software Engineer" Value="Store Manager" />
                                </Stack>
                                <Stack Gap="2">
                                    <Label>Bio</Label>
                                    <Textarea placeholder="Write a short bio about yourself..." Class="min-h-[80px]" />
                                    <Lumeo.Text Class="text-xs text-muted-foreground">Max 240 characters. Shown on your public profile.</Lumeo.Text>
                                </Stack>
                                <Stack Gap="2">
                                    <Label>Website</Label>
                                    <Input type="url" placeholder="https://your-website.com" />
                                </Stack>
                            </Stack>
                        </CardContent>
                        <CardFooter>
                            <Flex Class="justify-end gap-2 w-full">
                                <Button Variant="Button.ButtonVariant.Outline">Cancel</Button>
                                <Button>Save changes</Button>
                            </Flex>
                        </CardFooter>
                    </Card>
                }

                <!-- ACCOUNT / SECURITY -->
                @if (_activeSection == "account")
                {
                    <Stack Gap="5">
                        <Card Class="border-border/40">
                            <CardHeader>
                                <Heading Level="3" Class="text-lg font-semibold leading-none tracking-tight">Change Password</Heading>
                                <Lumeo.Text Class="text-sm text-muted-foreground">Update your password to keep your account secure.</Lumeo.Text>
                            </CardHeader>
                            <CardContent>
                                <Stack Gap="4" Class="max-w-sm">
                                    <Stack Gap="2">
                                        <Label>Current password</Label>
                                        <Input type="password" placeholder="Enter current password" />
                                    </Stack>
                                    <Stack Gap="2">
                                        <Label>New password</Label>
                                        <Input type="password" placeholder="At least 12 characters" />
                                        <Lumeo.Text Class="text-xs text-muted-foreground">Must include uppercase, number, and symbol.</Lumeo.Text>
                                    </Stack>
                                    <Stack Gap="2">
                                        <Label>Confirm new password</Label>
                                        <Input type="password" placeholder="Re-enter new password" />
                                    </Stack>
                                </Stack>
                            </CardContent>
                            <CardFooter>
                                <Button>Update password</Button>
                            </CardFooter>
                        </Card>

                        <Card Class="border-border/40">
                            <CardHeader>
                                <Heading Level="3" Class="text-lg font-semibold leading-none tracking-tight">Two-Factor Authentication</Heading>
                                <Lumeo.Text Class="text-sm text-muted-foreground">Add an extra layer of security to your account.</Lumeo.Text>
                            </CardHeader>
                            <CardContent>
                                <Stack Gap="4">
                                    <Flex Class="items-center justify-between">
                                        <Stack>
                                            <Lumeo.Text Class="text-sm font-medium text-foreground">Authenticator app</Lumeo.Text>
                                            <Lumeo.Text Class="text-sm text-muted-foreground">Use an app like Google Authenticator or 1Password.</Lumeo.Text>
                                        </Stack>
                                        <Switch @bind-Checked="_twoFactor" />
                                    </Flex>
                                    <Separator Class="border-border/40" />
                                    <Flex Class="items-center justify-between">
                                        <Stack>
                                            <Lumeo.Text Class="text-sm font-medium text-foreground">SMS verification</Lumeo.Text>
                                            <Lumeo.Text Class="text-sm text-muted-foreground">Receive a code via text message when signing in.</Lumeo.Text>
                                        </Stack>
                                        <Switch @bind-Checked="_smsAuth" />
                                    </Flex>
                                </Stack>
                            </CardContent>
                        </Card>

                        <Card Class="border-border/40">
                            <CardHeader>
                                <Heading Level="3" Class="text-lg font-semibold leading-none tracking-tight">Active Sessions</Heading>
                                <Lumeo.Text Class="text-sm text-muted-foreground">Devices currently logged in to your account.</Lumeo.Text>
                            </CardHeader>
                            <CardContent>
                                <Stack Gap="0">
                                    @foreach (var session in _sessions)
                                    {
                                        <Flex Class="items-center gap-3 py-3 border-b border-border/40 last:border-0">
                                            <Flex Class="h-9 w-9 shrink-0 items-center justify-center rounded-md bg-muted">
                                                <DynamicIcon Name="@session.Icon" Class="h-4 w-4 text-muted-foreground" />
                                            </Flex>
                                            <Stack Class="flex-1 min-w-0">
                                                <Flex Class="items-center gap-2">
                                                    <Lumeo.Text Class="text-sm font-medium text-foreground">@session.Device</Lumeo.Text>
                                                    @if (session.IsCurrent)
                                                    {
                                                        <Badge Variant="Badge.BadgeVariant.Success" Class="text-[10px]">Current</Badge>
                                                    }
                                                </Flex>
                                                <Lumeo.Text Class="text-xs text-muted-foreground">@session.Location · @session.LastActive</Lumeo.Text>
                                            </Stack>
                                            @if (!session.IsCurrent)
                                            {
                                                <Button Variant="Button.ButtonVariant.Ghost" Size="Button.ButtonSize.Sm" Class="text-destructive hover:text-destructive shrink-0">Revoke</Button>
                                            }
                                        </Flex>
                                    }
                                </Stack>
                            </CardContent>
                            <CardFooter>
                                <Button Variant="Button.ButtonVariant.Outline" Class="text-destructive hover:text-destructive">
                                    <DynamicIcon Name="LogOut" Class="h-4 w-4 mr-2" />
                                    Sign out all other sessions
                                </Button>
                            </CardFooter>
                        </Card>

                        <Card Class="border-destructive/40 border-border/40">
                            <CardHeader>
                                <Heading Level="3" Class="text-lg font-semibold leading-none tracking-tight text-destructive">Danger Zone</Heading>
                                <Lumeo.Text Class="text-sm text-muted-foreground">Irreversible and destructive actions.</Lumeo.Text>
                            </CardHeader>
                            <CardContent>
                                <Alert Variant="Alert.AlertVariant.Destructive" Class="mb-4">
                                    <DynamicIcon Name="TriangleAlert" Class="h-4 w-4" />
                                    <Lumeo.Text Class="font-medium">Warning — this cannot be undone</Lumeo.Text>
                                    <Lumeo.Text Class="text-sm mt-1">Deleting your account is permanent. All your data, workspaces, and billing information will be immediately removed and cannot be recovered.</Lumeo.Text>
                                </Alert>
                                <Button Variant="Button.ButtonVariant.Destructive">
                                    <DynamicIcon Name="Trash2" Class="h-4 w-4 mr-2" />
                                    Delete my account
                                </Button>
                            </CardContent>
                        </Card>
                    </Stack>
                }

                <!-- BILLING -->
                @if (_activeSection == "billing")
                {
                    <Stack Gap="5">
                        <!-- Current Plan -->
                        <Card Class="border-border/40">
                            <CardHeader>
                                <Heading Level="3" Class="text-lg font-semibold leading-none tracking-tight">Current Plan</Heading>
                                <Lumeo.Text Class="text-sm text-muted-foreground">Manage your subscription and billing cycle.</Lumeo.Text>
                            </CardHeader>
                            <CardContent>
                                <Flex Class="items-start justify-between gap-4 rounded-[var(--radius-lg)] border border-border/40 bg-muted/30 p-4">
                                    <Stack Gap="1">
                                        <Flex Class="items-center gap-2">
                                            <Heading Level="4" Class="text-base font-semibold text-foreground">Pro Plan</Heading>
                                            <Badge Variant="Badge.BadgeVariant.Success">Active</Badge>
                                        </Flex>
                                        <Lumeo.Text Class="text-sm text-muted-foreground">$49.00 / month · Renews Apr 30, 2026</Lumeo.Text>
                                        <Lumeo.Text Class="text-xs text-muted-foreground mt-1">Unlimited projects · 25 team members · 100 GB storage</Lumeo.Text>
                                    </Stack>
                                    <Flex Class="gap-2 shrink-0">
                                        <Button Variant="Button.ButtonVariant.Outline" Size="Button.ButtonSize.Sm">Downgrade</Button>
                                        <Button Size="Button.ButtonSize.Sm">
                                            <DynamicIcon Name="Zap" Class="h-3.5 w-3.5 mr-1" />
                                            Upgrade
                                        </Button>
                                    </Flex>
                                </Flex>

                                <Stack Gap="3" Class="mt-4">
                                    <Lumeo.Text Class="text-sm font-medium text-foreground">Usage this cycle</Lumeo.Text>
                                    @foreach (var usage in _usageItems)
                                    {
                                        <Stack Gap="1">
                                            <Flex Class="items-center justify-between text-sm">
                                                <Lumeo.Text As="span" Class="text-muted-foreground">@usage.Label</Lumeo.Text>
                                                <Lumeo.Text As="span" Class="font-medium text-foreground">@usage.Used / @usage.Limit</Lumeo.Text>
                                            </Flex>
                                            <Progress Value="@usage.Pct" Class="h-1.5" Variant="@(usage.Pct > 85 ? Progress.ProgressVariant.Warning : Progress.ProgressVariant.Default)" />
                                        </Stack>
                                    }
                                </Stack>
                            </CardContent>
                        </Card>

                        <!-- Payment Method -->
                        <Card Class="border-border/40">
                            <CardHeader>
                                <Heading Level="3" Class="text-lg font-semibold leading-none tracking-tight">Payment Method</Heading>
                                <Lumeo.Text Class="text-sm text-muted-foreground">Update your billing card or payment details.</Lumeo.Text>
                            </CardHeader>
                            <CardContent>
                                <Stack Gap="4">
                                    <Flex Class="items-center gap-3 rounded-[var(--radius-lg)] border border-border/40 p-3">
                                        <Flex Class="h-9 w-14 shrink-0 items-center justify-center rounded-md bg-muted">
                                            <DynamicIcon Name="CreditCard" Class="h-5 w-5 text-muted-foreground" />
                                        </Flex>
                                        <Stack Class="flex-1">
                                            <Lumeo.Text Class="text-sm font-medium text-foreground">Visa ending in 4242</Lumeo.Text>
                                            <Lumeo.Text Class="text-xs text-muted-foreground">Expires 08 / 2028</Lumeo.Text>
                                        </Stack>
                                        <Badge Variant="Badge.BadgeVariant.Secondary">Default</Badge>
                                    </Flex>
                                    <Button Variant="Button.ButtonVariant.Outline" Size="Button.ButtonSize.Sm" Class="w-fit">
                                        <DynamicIcon Name="Plus" Class="h-4 w-4 mr-1" />
                                        Add payment method
                                    </Button>
                                </Stack>
                            </CardContent>
                        </Card>

                        <!-- Invoice History -->
                        <Card Class="border-border/40">
                            <CardHeader>
                                <Heading Level="3" Class="text-lg font-semibold leading-none tracking-tight">Invoice History</Heading>
                                <Lumeo.Text Class="text-sm text-muted-foreground">Download past invoices for your records.</Lumeo.Text>
                            </CardHeader>
                            <CardContent Class="p-0">
                                <Table>
                                    <TableHeader>
                                        <TableRow>
                                            <TableHead>Invoice</TableHead>
                                            <TableHead>Date</TableHead>
                                            <TableHead>Amount</TableHead>
                                            <TableHead>Status</TableHead>
                                            <TableHead Class="text-right"></TableHead>
                                        </TableRow>
                                    </TableHeader>
                                    <TableBody>
                                        @foreach (var inv in _invoices)
                                        {
                                            <TableRow Class="hover:bg-muted/40 transition-colors">
                                                <TableCell Class="font-mono text-sm text-foreground">@inv.Number</TableCell>
                                                <TableCell Class="text-muted-foreground">@inv.Date</TableCell>
                                                <TableCell Class="font-medium text-foreground">@inv.Amount</TableCell>
                                                <TableCell><Badge Variant="Badge.BadgeVariant.Success">@inv.Status</Badge></TableCell>
                                                <TableCell Class="text-right">
                                                    <Button Variant="Button.ButtonVariant.Ghost" Size="Button.ButtonSize.Sm">
                                                        <DynamicIcon Name="Download" Class="h-3.5 w-3.5 mr-1" />
                                                        PDF
                                                    </Button>
                                                </TableCell>
                                            </TableRow>
                                        }
                                    </TableBody>
                                </Table>
                            </CardContent>
                        </Card>
                    </Stack>
                }

                <!-- NOTIFICATIONS -->
                @if (_activeSection == "notifications")
                {
                    <Card Class="border-border/40">
                        <CardHeader>
                            <Heading Level="3" Class="text-lg font-semibold leading-none tracking-tight">Notifications</Heading>
                            <Lumeo.Text Class="text-sm text-muted-foreground">Choose which events trigger notifications and how they reach you.</Lumeo.Text>
                        </CardHeader>
                        <CardContent>
                            <Stack Gap="0">
                                @foreach (var notif in _notifications)
                                {
                                    <Flex Class="items-start justify-between py-4 border-b border-border/40 last:border-0">
                                        <Stack Gap="0.5" Class="max-w-sm">
                                            <Lumeo.Text Class="text-sm font-medium text-foreground">@notif.Title</Lumeo.Text>
                                            <Lumeo.Text Class="text-sm text-muted-foreground">@notif.Description</Lumeo.Text>
                                        </Stack>
                                        <Switch @bind-Checked="notif.Enabled" />
                                    </Flex>
                                }
                            </Stack>
                        </CardContent>
                        <CardFooter>
                            <Flex Class="justify-end w-full">
                                <Button>Save preferences</Button>
                            </Flex>
                        </CardFooter>
                    </Card>
                }

                <!-- TEAM -->
                @if (_activeSection == "team")
                {
                    <Stack Gap="5">
                        <Card Class="border-border/40">
                            <CardHeader>
                                <Flex Class="items-center justify-between">
                                    <Stack>
                                        <Heading Level="3" Class="text-lg font-semibold leading-none tracking-tight">Team Members</Heading>
                                        <Lumeo.Text Class="text-sm text-muted-foreground">Manage who has access to your workspace.</Lumeo.Text>
                                    </Stack>
                                    <Button Size="Button.ButtonSize.Sm">
                                        <DynamicIcon Name="UserPlus" Class="h-4 w-4 mr-1" />
                                        Invite
                                    </Button>
                                </Flex>
                            </CardHeader>
                            <CardContent>
                                <Stack Gap="0">
                                    @foreach (var member in _teamMembers)
                                    {
                                        <Flex Class="items-center gap-3 py-3 border-b border-border/40 last:border-0">
                                            <Avatar Size="Avatar.AvatarSize.Sm">
                                                <AvatarFallback>@member.Initials</AvatarFallback>
                                            </Avatar>
                                            <Stack Class="flex-1 min-w-0">
                                                <Lumeo.Text Class="text-sm font-medium text-foreground">@member.Name</Lumeo.Text>
                                                <Lumeo.Text Class="text-xs text-muted-foreground">@member.Email</Lumeo.Text>
                                            </Stack>
                                            <Badge Variant="@(member.Role == "Owner" ? Badge.BadgeVariant.Default : member.Role == "Admin" ? Badge.BadgeVariant.Secondary : Badge.BadgeVariant.Outline)">@member.Role</Badge>
                                            @if (member.Role != "Owner")
                                            {
                                                <Button Variant="Button.ButtonVariant.Ghost" Size="Button.ButtonSize.Icon" Class="h-8 w-8 text-muted-foreground hover:text-destructive">
                                                    <DynamicIcon Name="UserMinus" Class="h-4 w-4" />
                                                </Button>
                                            }
                                        </Flex>
                                    }
                                </Stack>
                            </CardContent>
                        </Card>

                        <Card Class="border-border/40">
                            <CardHeader>
                                <Heading Level="3" Class="text-lg font-semibold leading-none tracking-tight">Pending Invitations</Heading>
                                <Lumeo.Text Class="text-sm text-muted-foreground">These users have been invited but haven't accepted yet.</Lumeo.Text>
                            </CardHeader>
                            <CardContent>
                                <Stack Gap="0">
                                    @foreach (var invite in _pendingInvites)
                                    {
                                        <Flex Class="items-center gap-3 py-3 border-b border-border/40 last:border-0">
                                            <Flex Class="h-8 w-8 items-center justify-center rounded-full bg-muted shrink-0">
                                                <DynamicIcon Name="Mail" Class="h-4 w-4 text-muted-foreground" />
                                            </Flex>
                                            <Stack Class="flex-1 min-w-0">
                                                <Lumeo.Text Class="text-sm text-foreground">@invite.Email</Lumeo.Text>
                                                <Lumeo.Text Class="text-xs text-muted-foreground">Invited @invite.SentAt · Expires @invite.ExpiresAt</Lumeo.Text>
                                            </Stack>
                                            <Badge Variant="Badge.BadgeVariant.Warning">Pending</Badge>
                                            <Button Variant="Button.ButtonVariant.Ghost" Size="Button.ButtonSize.Sm" Class="text-muted-foreground">Resend</Button>
                                            <Button Variant="Button.ButtonVariant.Ghost" Size="Button.ButtonSize.Icon" Class="h-8 w-8 text-muted-foreground hover:text-destructive">
                                                <DynamicIcon Name="X" Class="h-4 w-4" />
                                            </Button>
                                        </Flex>
                                    }
                                </Stack>
                            </CardContent>
                        </Card>
                    </Stack>
                }

                <!-- DISPLAY / APPEARANCE -->
                @if (_activeSection == "display")
                {
                    <Card Class="border-border/40">
                        <CardHeader>
                            <Heading Level="3" Class="text-lg font-semibold leading-none tracking-tight">Display</Heading>
                            <Lumeo.Text Class="text-sm text-muted-foreground">Control layout and visual preferences.</Lumeo.Text>
                        </CardHeader>
                        <CardContent>
                            <Stack Gap="0">
                                <Flex Class="items-center justify-between py-4 border-b border-border/40">
                                    <Stack>
                                        <Lumeo.Text Class="text-sm font-medium text-foreground">Show online status</Lumeo.Text>
                                        <Lumeo.Text Class="text-sm text-muted-foreground">Let others see when you are active.</Lumeo.Text>
                                    </Stack>
                                    <Switch @bind-Checked="_showOnlineStatus" />
                                </Flex>
                                <Flex Class="items-center justify-between py-4 border-b border-border/40">
                                    <Stack>
                                        <Lumeo.Text Class="text-sm font-medium text-foreground">Compact mode</Lumeo.Text>
                                        <Lumeo.Text Class="text-sm text-muted-foreground">Reduce spacing for a denser layout.</Lumeo.Text>
                                    </Stack>
                                    <Switch @bind-Checked="_compactMode" />
                                </Flex>
                                <Flex Class="items-center justify-between py-4 border-b border-border/40">
                                    <Stack>
                                        <Lumeo.Text Class="text-sm font-medium text-foreground">Show activity feed</Lumeo.Text>
                                        <Lumeo.Text Class="text-sm text-muted-foreground">Display recent activity on the dashboard.</Lumeo.Text>
                                    </Stack>
                                    <Switch @bind-Checked="_showActivityFeed" />
                                </Flex>
                                <Flex Class="items-center justify-between py-4">
                                    <Stack>
                                        <Lumeo.Text Class="text-sm font-medium text-foreground">Keyboard shortcuts</Lumeo.Text>
                                        <Lumeo.Text Class="text-sm text-muted-foreground">Enable keyboard shortcuts for faster navigation.</Lumeo.Text>
                                    </Stack>
                                    <Switch @bind-Checked="_keyboardShortcuts" />
                                </Flex>
                            </Stack>
                        </CardContent>
                        <CardFooter>
                            <Flex Class="justify-end w-full">
                                <Button>Save preferences</Button>
                            </Flex>
                        </CardFooter>
                    </Card>
                }

            </Stack>
        </Flex>
    </Stack>
</ComponentDemo>

@code {
    private string _activeSection = "profile";

    private bool _twoFactor;
    private bool _smsAuth;
    private bool _showOnlineStatus = true;
    private bool _compactMode;
    private bool _showActivityFeed = true;
    private bool _keyboardShortcuts = true;

    private record NavItem(string Id, string Label, string Icon);

    private readonly List<NavItem> _sections = new()
    {
        new("profile",       "Profile",       "User"),
        new("account",       "Account",       "Shield"),
        new("billing",       "Billing",       "CreditCard"),
        new("notifications", "Notifications", "Bell"),
        new("team",          "Team",          "Users"),
        new("display",       "Display",       "Monitor"),
    };

    private record SessionItem(string Device, string Location, string LastActive, string Icon, bool IsCurrent);
    private readonly List<SessionItem> _sessions = new()
    {
        new("macOS · Chrome 124",    "Tokyo, JP",       "Active now",       "Monitor",    true),
        new("iPhone 16 Pro · Safari","Tokyo, JP",       "2 hours ago",      "Smartphone", false),
        new("Windows · Edge 124",    "Osaka, JP",       "Yesterday, 18:42", "Monitor",    false),
    };

    private record UsageItem(string Label, string Used, string Limit, int Pct);
    private readonly List<UsageItem> _usageItems = new()
    {
        new("Projects",    "18",     "unlimited", 72),
        new("Team seats",  "9",      "25",        36),
        new("Storage",     "87 GB",  "100 GB",    87),
        new("API calls",   "142k",   "500k",      28),
    };

    private record InvoiceItem(string Number, string Date, string Amount, string Status);
    private readonly List<InvoiceItem> _invoices = new()
    {
        new("INV-2026-0041", "Apr 1, 2026",  "$49.00", "Paid"),
        new("INV-2026-0028", "Mar 1, 2026",  "$49.00", "Paid"),
        new("INV-2026-0016", "Feb 1, 2026",  "$49.00", "Paid"),
        new("INV-2026-0003", "Jan 1, 2026",  "$49.00", "Paid"),
        new("INV-2025-0184", "Dec 1, 2025",  "$49.00", "Paid"),
    };

    private class NotificationSetting
    {
        public string Title { get; init; } = "";
        public string Description { get; init; } = "";
        public bool Enabled { get; set; }
    }

    private readonly List<NotificationSetting> _notifications = new()
    {
        new() { Title = "Email notifications",  Description = "Receive activity updates and account alerts via email.",               Enabled = true  },
        new() { Title = "Push notifications",   Description = "Get real-time alerts on your desktop or mobile device.",              Enabled = true  },
        new() { Title = "SMS notifications",    Description = "Receive critical account alerts as text messages.",                   Enabled = false },
        new() { Title = "New order alerts",     Description = "Be notified when a new order is placed in your store.",               Enabled = true  },
        new() { Title = "Inventory warnings",   Description = "Alert when a product stock falls below the reorder threshold.",       Enabled = true  },
        new() { Title = "Marketing emails",     Description = "Receive tips, feature announcements, and special offers.",            Enabled = false },
        new() { Title = "Security alerts",      Description = "Be notified about new sign-ins and any suspicious activity.",        Enabled = true  },
        new() { Title = "Weekly digest",        Description = "A weekly summary of your store performance delivered every Monday.",  Enabled = true  },
    };

    private record TeamMember(string Name, string Email, string Initials, string Role);
    private readonly List<TeamMember> _teamMembers = new()
    {
        new("Keiko Sato",       "keiko.sato@lumeo.io",       "KS", "Owner"),
        new("Amara Diallo",     "amara.diallo@lumeo.io",     "AD", "Admin"),
        new("Carlos Herrera",   "c.herrera@lumeo.io",        "CH", "Admin"),
        new("Priya Nair",       "priya.nair@lumeo.io",       "PN", "Member"),
        new("Lucas Andersen",   "l.andersen@lumeo.io",       "LA", "Member"),
        new("Fatou Ba",         "fatou.ba@lumeo.io",         "FB", "Member"),
    };

    private record PendingInvite(string Email, string SentAt, string ExpiresAt);
    private readonly List<PendingInvite> _pendingInvites = new()
    {
        new("takeshi.y@partner.co", "Apr 14, 2026", "Apr 21, 2026"),
        new("saoirse.m@agency.ie",  "Apr 15, 2026", "Apr 22, 2026"),
    };

    private string _code = @"<!-- Settings Layout -->
<Flex Class=""gap-8"">
    <!-- Sidebar Nav -->
    <Stack Class=""w-52 shrink-0 space-y-0.5"">
        @foreach (var item in _sections) {
            <Button Variant=""Button.ButtonVariant.Ghost""
                    Class=""w-full justify-start gap-3""
                    @onclick=""@(() => _activeSection = item.Id)"">
                <DynamicIcon Name=""@item.Icon"" Class=""h-4 w-4"" />
                @item.Label
            </Button>
        }
    </Stack>
    <!-- Content -->
    <Stack Class=""flex-1"" Gap=""6"">
        @if (_activeSection == ""profile"") { /* Profile form */ }
        @if (_activeSection == ""billing"") { /* Plan, payment, invoices */ }
        @if (_activeSection == ""team"")    { /* Members, pending invites */ }
        @if (_activeSection == ""account"") {
            /* Password change, 2FA, sessions, danger zone */
            <Card>
                <CardHeader><Heading Level=""3"">Danger Zone</Heading></CardHeader>
                <CardContent>
                    <Button Variant=""Button.ButtonVariant.Destructive"">Delete my account</Button>
                </CardContent>
            </Card>
        }
    </Stack>
</Flex>";
}
