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

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

<PageHeader Title="Sign In"
            Description="Centered card with email + password, social providers, and a footer sign-up link. Drop into any app as a full-page sign-in experience." />

<ComponentDemo Title="Sign In 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">Welcome back</Heading>
                            <Lumeo.Text Color="muted" Size="sm">Sign in to your account to continue</Lumeo.Text>
                        </Stack>
                    </Stack>

                    <Stack Gap="4">
                        <Stack Gap="2">
                            <Label for="signin-email">Email</Label>
                            <Lumeo.Input id="signin-email" type="email" placeholder="you@example.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">
                            <Flex Align="center" Justify="between">
                                <Label for="signin-password">Password</Label>
                                <Lumeo.Link Href="#" Class="text-xs text-primary hover:underline">Forgot password?</Lumeo.Link>
                            </Flex>
                            <PasswordInput id="signin-password" @bind-Value="_password" Placeholder="Enter your password" />
                        </Stack>

                        <Flex Align="center" Gap="2">
                            <Checkbox @bind-Checked="_remember" />
                            <Label Class="text-sm font-normal cursor-pointer">Remember me for 30 days</Label>
                        </Flex>

                        <Button Class="w-full">
                            <Icon Name="LogIn" Class="h-4 w-4" />
                            Sign in
                        </Button>
                    </Stack>

                    <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 continue with</Lumeo.Text>
                        </div>
                    </div>

                    <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>

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

@code {
    private string _email = string.Empty;
    private string _password = string.Empty;
    private bool _remember;

    private readonly string _code = @"<Card Class=""w-full max-w-md"">
    <CardContent Class=""p-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>
                <Heading Level=""1"" Class=""text-2xl font-bold"">Welcome back</Heading>
                <Lumeo.Text Color=""muted"" Size=""sm"">Sign in to your account to continue</Lumeo.Text>
            </Stack>

            <Stack Gap=""4"">
                <Stack Gap=""2"">
                    <Label for=""email"">Email</Label>
                    <Lumeo.Input id=""email"" type=""email"" placeholder=""you@example.com"">
                        <Prefix><Icon Name=""Mail"" Class=""h-4 w-4 text-muted-foreground"" /></Prefix>
                    </Lumeo.Input>
                </Stack>
                <Stack Gap=""2"">
                    <Flex Align=""center"" Justify=""between"">
                        <Label for=""password"">Password</Label>
                        <Lumeo.Link Href=""#"" Class=""text-xs text-primary hover:underline"">Forgot password?</Lumeo.Link>
                    </Flex>
                    <PasswordInput id=""password"" @bind-Value=""_password"" Placeholder=""Enter your password"" />
                </Stack>
                <Flex Align=""center"" Gap=""2"">
                    <Checkbox @bind-Checked=""_remember"" />
                    <Label Class=""text-sm font-normal"">Remember me for 30 days</Label>
                </Flex>
                <Button Class=""w-full"">
                    <Icon Name=""LogIn"" Class=""h-4 w-4"" /> Sign in
                </Button>
            </Stack>

            <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"">Or continue with</Lumeo.Text>
                </div>
            </div>

            <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>

            <Lumeo.Text Size=""sm"" Color=""muted"" Align=""center"">
                Don't have an account?
                <Lumeo.Link Href=""#"" Class=""text-primary hover:underline font-medium"">Sign up</Lumeo.Link>
            </Lumeo.Text>
        </Stack>
    </CardContent>
</Card>";
}
