<script setup lang="ts">
import { Link } from '@inertiajs/vue3';
import { home } from '@/routes';

defineProps<{
    title?: string;
    description?: string;
}>();
</script>

<template>
    <div class="min-h-screen bg-[#020617] text-white flex flex-col justify-center items-center relative overflow-hidden">

        <!-- Background Stars (simple CSS version to avoid canvas logic here) -->
        <div class="fixed inset-0 w-full h-full z-0 bg-[radial-gradient(circle_at_center,#0f172a_0%,#020617_100%)]"></div>
        <div class="absolute w-[800px] h-[800px] rounded-full bg-purple-600/10 blur-[150px] -top-64 -right-64 z-0 pointer-events-none"></div>
        <div class="absolute w-[600px] h-[600px] rounded-full bg-blue-600/10 blur-[150px] -bottom-64 -left-64 z-0 pointer-events-none"></div>

        <div class="w-full max-w-md relative z-10 p-8 bg-gray-900/60 backdrop-blur-xl border border-white/10 rounded-3xl shadow-2xl">
            <div class="flex flex-col gap-8">
                <div class="flex flex-col items-center gap-4">
                    <Link
                        :href="home()"
                        class="text-2xl font-black italic tracking-tighter uppercase text-white hover:opacity-80 transition-opacity"
                    >
                        BRATANBONUS.NET
                    </Link>
                    <div class="space-y-2 text-center mt-4">
                        <h1 class="text-2xl font-bold">{{ title }}</h1>
                        <p class="text-center text-sm text-gray-400">
                            {{ description }}
                        </p>
                    </div>
                </div>
                <slot />
            </div>
        </div>
    </div>
</template>
