@page "/blocks/sign-up"
@namespace Lumeo.Docs.Pages.Blocks

<PageTitle>Sign Up — Lumeo Blocks</PageTitle>

<PageHeader Title="Sign Up"
            Description="Centered card for account creation with first/last name, email, password strength meter, terms checkbox, and social options." />

<ComponentDemo Title="Sign Up Block" Code="@_code">
    <div class="flex items-center justify-center w-full bg-muted/30 rounded-[var(--radius-lg)] border border-border/40 p-8">
        <Card Class="w-full max-w-md border-border/60 shadow-lg">
            <CardContent Class="px-8 pt-10 pb-8">
                <Stack Gap="6">
                    <Stack Gap="4" Class="items-center text-center">
                        <Flex Class="h-12 w-12 items-center justify-center rounded-[var(--radius-lg)] bg-primary">
                            <Icon Name="Zap" Class="h-6 w-6 text-primary-foreground" />
                        </Flex>
                        <Stack Gap="1.5">
                            <Heading Level="1" Class="text-2xl font-bold tracking-tight">Create your account</Heading>
                            <Lumeo.Text Color="muted" Size="sm">Start your 14-day free trial — no credit card required</Lumeo.Text>
                        </Stack>
                    </Stack>

                    <Grid Class="grid-cols-2 gap-3">
                        <Button Variant="Button.ButtonVariant.Outline" Class="w-full gap-2">
                            <Icon Name="Chrome" Class="h-4 w-4" />
                            Google
                        </Button>
                        <Button Variant="Button.ButtonVariant.Outline" Class="w-full gap-2">
                            <Icon Name="Github" Class="h-4 w-4" />
                            GitHub
                        </Button>
                    </Grid>

                    <div class="relative">
                        <div class="absolute inset-0 flex items-center"><Separator /></div>
                        <div class="relative flex justify-center text-xs uppercase">
                            <Lumeo.Text As="span" Class="bg-card px-2 text-muted-foreground tracking-wider">Or register with email</Lumeo.Text>
                        </div>
                    </div>

                    <Stack Gap="4">
                        <Grid Class="grid-cols-2 gap-3">
                            <Stack Gap="2">
                                <Label for="su-first">First name</Label>
                                <Input id="su-first" @bind-Value="_firstName" placeholder="Ada" />
                            </Stack>
                            <Stack Gap="2">
                                <Label for="su-last">Last name</Label>
                                <Input id="su-last" @bind-Value="_lastName" placeholder="Lovelace" />
                            </Stack>
                        </Grid>

                        <Stack Gap="2">
                            <Label for="su-email">Work email</Label>
                            <Lumeo.Input id="su-email" type="email" placeholder="you@company.com"
                                         Value="@_email" OnInput="@(e => _email = e.Value?.ToString() ?? string.Empty)">
                                <Prefix><Icon Name="Mail" Class="h-4 w-4 text-muted-foreground" /></Prefix>
                            </Lumeo.Input>
                        </Stack>

                        <Stack Gap="2">
                            <Label for="su-pass">Password</Label>
                            <PasswordInput id="su-pass" @bind-Value="_password" Placeholder="At least 8 characters" ShowStrength="true" />
                        </Stack>

                        <Flex Align="start" Gap="2">
                            <Checkbox @bind-Checked="_terms" Class="mt-0.5" />
                            <Lumeo.Text Size="sm" Color="muted">
                                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>
                        </Flex>

                        <Button Class="w-full" Disabled="@(!_terms)">
                            <Icon Name="UserPlus" Class="h-4 w-4" />
                            Create account
                        </Button>
                    </Stack>

                    <Lumeo.Text Size="sm" Color="muted" Align="center">
                        Already have an account?
                        <Lumeo.Link Href="/blocks/sign-in" Class="text-primary hover:underline font-medium ml-1">Sign in</Lumeo.Link>
                    </Lumeo.Text>
                </Stack>
            </CardContent>
        </Card>
    </div>
</ComponentDemo>

@code {
    private string _firstName = string.Empty;
    private string _lastName = string.Empty;
    private string _email = string.Empty;
    private string _password = string.Empty;
    private bool _terms;

    private readonly string _code = @"<Card Class=""w-full max-w-md"">
    <CardContent Class=""p-8"">
        <Stack Gap=""6"">
            <Heading Level=""1"">Create your account</Heading>

            <Grid Class=""grid-cols-2 gap-3"">
                <Button Variant=""Button.ButtonVariant.Outline"" Class=""gap-2"">
                    <Icon Name=""Chrome"" Class=""h-4 w-4"" /> Google
                </Button>
                <Button Variant=""Button.ButtonVariant.Outline"" Class=""gap-2"">
                    <Icon Name=""Github"" Class=""h-4 w-4"" /> GitHub
                </Button>
            </Grid>

            <Stack Gap=""4"">
                <Grid Class=""grid-cols-2 gap-3"">
                    <Input @bind-Value=""_firstName"" placeholder=""First name"" />
                    <Input @bind-Value=""_lastName"" placeholder=""Last name"" />
                </Grid>
                <Lumeo.Input type=""email"" placeholder=""you@company.com"">
                    <Prefix><Icon Name=""Mail"" Class=""h-4 w-4 text-muted-foreground"" /></Prefix>
                </Lumeo.Input>
                <PasswordInput @bind-Value=""_password"" ShowStrength=""true"" />
                <Flex Align=""start"" Gap=""2"">
                    <Checkbox @bind-Checked=""_terms"" />
                    <Lumeo.Text Size=""sm"" Color=""muted"">I agree to the Terms and Privacy Policy.</Lumeo.Text>
                </Flex>
                <Button Class=""w-full"" Disabled=""@(!_terms)"">
                    <Icon Name=""UserPlus"" Class=""h-4 w-4"" /> Create account
                </Button>
            </Stack>
        </Stack>
    </CardContent>
</Card>";
}
