<div class="grid lg:grid-cols-2 min-h-screen">
    <!-- Left column - branded panel -->
    <div class="relative hidden lg:flex flex-col justify-between bg-primary text-primary-foreground p-10 overflow-hidden">
        <div class="absolute inset-0"
             style="background-image: radial-gradient(circle, color-mix(in oklch, var(--primary-foreground) 8%, transparent) 1px, transparent 1px); background-size: 24px 24px;">
        </div>
        <div class="relative flex items-center gap-2 text-lg font-medium">
            <!-- icon SVG -->
            Acme Inc.
        </div>
        <div class="relative space-y-4">
            <blockquote class="text-lg leading-relaxed">
                "This platform has transformed the way we build applications. The component library is incredibly well-designed."
            </blockquote>
            <div class="text-sm opacity-80">
                Sofia Davis, CEO at TechCorp
            </div>
        </div>
    </div>

    <!-- Right column - form -->
    <div class="relative flex flex-col items-center justify-center p-8">
        <div class="lg:hidden absolute left-8 top-8 flex items-center gap-2 text-lg font-medium">
            <!-- icon SVG -->
            Acme Inc.
        </div>
        <div class="w-full max-w-sm 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">
                    Enter your credentials to access your 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">
                    <BbLabel For="password">Password</BbLabel>
                    <BbInput Id="password" Type="InputType.Password" />
                </div>
                <div class="flex items-center justify-between">
                    <div class="flex items-center gap-2">
                        <BbCheckbox Id="remember" />
                        <BbLabel For="remember" class="text-sm font-normal">Remember me</BbLabel>
                    </div>
                    <a href="#" class="text-sm text-muted-foreground underline-offset-4 hover:underline">
                        Forgot password?
                    </a>
                </div>
                <BbButton Class="w-full">Sign in</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-background px-2 text-muted-foreground">Or continue with</span>
                    </div>
                </div>
                <div class="grid grid-cols-2 gap-4">
                    <BbButton Variant="ButtonVariant.Outline">
                        <!-- icon SVG -->
                        Google
                    </BbButton>
                    <BbButton Variant="ButtonVariant.Outline">
                        <!-- icon SVG -->
                        GitHub
                    </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>
</div>