<script setup>
import LocaleSwitcher from '@/Components/LocaleSwitcher.vue'
import OnoxLogo from '@/Components/OnoxLogo.vue'
import { Link } from '@inertiajs/vue3'
</script>

<template>
    <div class="flex min-h-screen flex-col items-center justify-center bg-gradient-to-br from-slate-900 via-slate-800 to-slate-900 px-4 py-8">
        <!-- Background pattern -->
        <div class="absolute inset-0 overflow-hidden opacity-20 pointer-events-none">
            <div class="absolute -top-40 -right-40 h-96 w-96 rounded-full bg-rose-500 blur-3xl"></div>
            <div class="absolute -bottom-40 -left-40 h-96 w-96 rounded-full bg-rose-700 blur-3xl"></div>
        </div>

        <!-- Logo + brand -->
        <Link href="/" class="relative z-10 mb-6 flex flex-col items-center gap-3">
            <OnoxLogo variant="mark" theme="dark" class="h-16 w-16" />
            <div class="text-center">
                <div class="text-3xl font-bold text-white tracking-tight">Onoxsoft Panel</div>
                <div class="text-xs uppercase tracking-widest text-slate-400">Kontrol Paneli</div>
            </div>
        </Link>

        <!-- Card -->
        <div class="relative z-10 w-full max-w-md overflow-hidden rounded-2xl border border-slate-700 bg-white shadow-2xl">
            <div class="px-8 py-8">
                <slot />
            </div>
        </div>

        <!-- Locale switcher + Footer -->
        <div class="relative z-10 mt-6 flex items-center gap-4">
            <p class="text-xs text-slate-500">
                Onoxsoft Control Panel · v0.1.0-beta · <span class="text-slate-400">AlmaLinux 9</span>
            </p>
            <LocaleSwitcher />
        </div>
    </div>
</template>
