<script lang="ts">
    import Icon from "$lib/components/atoms/icon.svelte";
    import Title from "$lib/components/atoms/title.svelte";
    import * as Card from "$lib/components/ui/card/index.js";
    import EmailLoginForm from "$lib/domains/security/email-login-form.svelte";
    import { Shield } from "@lucide/svelte";
</script>

<main
    class="from-background via-muted/20 to-accent/5 relative grid h-screen w-screen place-items-center overflow-hidden bg-gradient-to-br"
>
    <!-- Animated Background Elements -->
    <div class="absolute inset-0 overflow-hidden">
        <div
            class="bg-primary/5 absolute -top-40 -right-40 h-80 w-80 rounded-full blur-3xl"
        ></div>
        <div
            class="bg-accent/5 absolute -bottom-40 -left-40 h-80 w-80 rounded-full blur-3xl"
        ></div>
        <div
            class="bg-primary/3 absolute top-1/3 left-1/4 h-32 w-32 animate-pulse rounded-full blur-2xl"
        ></div>
    </div>

    <div class="relative z-10 w-full max-w-lg px-4">
        <Card.Root
            class="bg-card/95 border-border/50 hover:shadow-3xl border-2 shadow-2xl backdrop-blur-lg transition-all duration-300"
        >
            <Card.Header class="pt-8 pb-6 text-center">
                <div class="flex flex-col items-center space-y-4">
                    <div class="relative">
                        <div
                            class="bg-primary/20 absolute inset-0 animate-pulse rounded-full blur-lg"
                        ></div>
                        <div
                            class="from-primary/10 to-accent/10 border-primary/20 relative rounded-full border-2 bg-gradient-to-br p-4"
                        >
                            <Icon icon={Shield} cls="h-8 w-8 text-primary" />
                        </div>
                    </div>

                    <div class="space-y-2">
                        <Card.Title>
                            <Title size="h3" weight="semibold" center>
                                Welcome Back
                            </Title>
                        </Card.Title>
                        <Card.Description class="text-muted-foreground">
                            Sign in with your username and password
                        </Card.Description>
                    </div>
                </div>
            </Card.Header>

            <Card.Content class="px-8 pb-8">
                <EmailLoginForm />
            </Card.Content>

            <Card.Footer class="flex items-center justify-between">
                <p class="text-muted-foreground text-xs w-full text-center">
                    By signing in, you agree to our
                    <button class="text-primary hover:underline">Terms</button>
                    and
                    <button class="text-primary hover:underline"
                        >Privacy Policy</button
                    >
                </p>
            </Card.Footer>
        </Card.Root>
    </div>
</main>
