<BbCard class="overflow-hidden">
    <div class="grid md:grid-cols-2">
        <!-- Left column - form -->
        <div class="p-6 md:p-8">
            <div class="space-y-6">
                <div class="space-y-2">
                    <h1 class="text-2xl font-bold tracking-tight">Welcome back</h1>
                    <p class="text-sm text-muted-foreground">Login to your Acme Inc account</p>
                </div>
                <div class="space-y-4">
                    <div class="space-y-2">
                        <BbLabel For="email">Email</BbLabel>
                        <BbInput Id="email" Type="InputType.Email" Placeholder="[email protected]" />
                    </div>
                    <div class="space-y-2">
                        <div class="flex items-center justify-between">
                            <BbLabel For="password">Password</BbLabel>
                            <a href="#" class="text-sm text-muted-foreground underline-offset-4 hover:underline">
                                Forgot your password?
                            </a>
                        </div>
                        <BbInput Id="password" Type="InputType.Password" />
                    </div>
                    <BbButton Class="w-full">Login</BbButton>
                    <div class="relative">
                        <div class="absolute inset-0 flex items-center">
                            <BbSeparator />
                        </div>
                        <div class="relative flex justify-center text-xs uppercase">
                            <span class="bg-card px-2 text-muted-foreground">Or continue with</span>
                        </div>
                    </div>
                    <div class="grid grid-cols-3 gap-4">
                        <BbButton Variant="ButtonVariant.Outline" Class="w-full" AriaLabel="Login with Apple">
                            <!-- Apple icon SVG -->
                        </BbButton>
                        <BbButton Variant="ButtonVariant.Outline" Class="w-full" AriaLabel="Login with Google">
                            <!-- Google icon SVG -->
                        </BbButton>
                        <BbButton Variant="ButtonVariant.Outline" Class="w-full" AriaLabel="Login with GitHub">
                            <!-- GitHub icon SVG -->
                        </BbButton>
                    </div>
                </div>
                <div class="text-center text-sm text-muted-foreground">
                    Don't have an account?
                    <a href="#" class="text-primary underline-offset-4 hover:underline">Sign up</a>
                </div>
            </div>
        </div>

        <!-- Right column - image placeholder -->
        <div class="relative hidden md:block bg-muted overflow-hidden">
            <div class="absolute inset-0"
                 style="background-image: radial-gradient(circle, color-mix(in oklch, var(--foreground) 10%, transparent) 1px, transparent 1px); background-size: 24px 24px;">
            </div>
            <div class="absolute inset-0"
                 style="background: radial-gradient(ellipse at center, transparent 40%, var(--muted) 100%);">
            </div>
        </div>
    </div>
</BbCard>
<p class="mt-4 text-center text-xs text-muted-foreground">
    By clicking continue, you agree to our
    <a href="#" class="underline underline-offset-4 hover:text-primary">Terms of Service</a>
    and
    <a href="#" class="underline underline-offset-4 hover:text-primary">Privacy Policy</a>.
</p>