<div class="max-w-md mx-auto">
    <div class="text-center mb-8">
        <h3 class="text-2xl font-bold mb-2">Welcome back</h3>
        <p class="text-base-content/60">Sign in to your account</p>
    </div>
    
    <form class="space-y-6">
        <c-form.input
            label="Email address"
            type="email"
            placeholder="Enter your email"
            required="true"
        />
        
        <c-form.input
            label="Password"
            type="password"
            placeholder="Enter your password"
            required="true"
        />
        
        <div class="flex items-center justify-between">
            <c-checkbox label="Remember me" />
            <a href="#" class="text-sm text-primary hover:text-primary/80">Forgot password?</a>
        </div>
        
        <c-button variant="primary" size="lg" class="w-full">
            Sign in
        </c-button>
    </form>
    
    <div class="mt-6 text-center">
        <p class="text-sm text-base-content/60">
            Don't have an account? 
            <a href="#" class="text-primary hover:text-primary/80 font-medium">Sign up</a>
        </p>
    </div>
</div>

<div class="max-w-md mx-auto">
    <div class="text-center mb-8">
        <h3 class="text-2xl font-bold mb-2">Sign in</h3>
        <p class="text-base-content/60">Choose your preferred sign-in method</p>
    </div>
    
    <!-- Social Login Buttons -->
    <div class="space-y-3 mb-6">
        <c-button variant="outline" size="lg" class="w-full">
            <c-icon name="github" size="20" class="mr-2" />
            Continue with GitHub
        </c-button>
        <c-button variant="outline" size="lg" class="w-full">
            <c-icon name="chrome" size="20" class="mr-2" />
            Continue with Google
        </c-button>
    </div>
    
    <!-- Divider -->
    <div class="relative mb-6">
        <div class="absolute inset-0 flex items-center">
            <div class="w-full border-t border-base-300"></div>
        </div>
        <div class="relative flex justify-center text-sm">
            <span class="px-2 bg-base-200 text-base-content/60">Or continue with email</span>
        </div>
    </div>
    
    <form class="space-y-5">
        <c-form.input
            label="Email"
            type="email"
            placeholder="name@example.com"
            required="true"
        />
        
        <c-form.input
            label="Password"
            type="password"
            placeholder="••••••••"
            required="true"
        />
        
        <c-button variant="primary" size="lg" class="w-full">
            Sign in
        </c-button>
    </form>
</div>

<form class="space-y-5">
    <div class="grid grid-cols-2 gap-4">
        <c-form.input
            label="First name"
            placeholder="John"
            required="true"
        />
        <c-form.input
            label="Last name"
            placeholder="Doe"
            required="true"
        />
    </div>
    
    <c-form.input
        label="Email address"
        type="email"
        placeholder="john@example.com"
        required="true"
    />
    
    <c-form.input
        label="Password"
        type="password"
        placeholder="••••••••"
        help="Must be at least 8 characters"
        required="true"
    />
    
    <c-form.input
        label="Confirm password"
        type="password"
        placeholder="••••••••"
        required="true"
    />
    
    <div class="space-y-3">
        <c-checkbox 
            label="I agree to the Terms of Service and Privacy Policy"
            required="true"
        />
        <c-checkbox label="Send me marketing emails" />
    </div>
    
    <c-button variant="primary" size="lg" class="w-full">
        Create account
    </c-button>
</form>

<div class="grid lg:grid-cols-2 min-h-[600px]">
    <!-- Left Side - Branding -->
    <div class="bg-gradient-to-br from-primary to-secondary p-12 flex items-center justify-center">
        <div class="text-center text-primary-content">
            <div class="w-16 h-16 bg-primary-content/20 rounded-full mx-auto mb-6 flex items-center justify-center">
                <c-icon name="zap" size="32" />
            </div>
            <h3 class="text-3xl font-bold mb-4">Welcome to Our Platform</h3>
            <p class="text-xl opacity-90 mb-8">Join thousands of users who trust our platform.</p>
            <div class="space-y-4">
                <div class="flex items-center justify-center space-x-3">
                    <c-icon name="check-circle" size="20" />
                    <span>Secure & Reliable</span>
                </div>
            </div>
        </div>
    </div>
    
    <!-- Right Side - Form -->
    <div class="p-12 flex items-center justify-center">
        <div class="w-full max-w-sm">
            <form class="space-y-6">
                <c-form.input
                    label="Email"
                    type="email"
                    placeholder="Enter your email"
                    required="true"
                />
                
                <c-form.input
                    label="Password"
                    type="password"
                    placeholder="••••••••"
                    required="true"
                />
                
                <c-button variant="primary" size="lg" class="w-full">
                    Sign in
                </c-button>
            </form>
        </div>
    </div>
</div>