<script setup>
import { computed } from 'vue';
import { Link, usePage } from '@inertiajs/vue3';

const page = usePage();
const branding = computed(() => page.props.branding || {});

const backgroundStyle = computed(() => ({
    backgroundImage: [
        'radial-gradient(circle at 12% 10%, rgb(var(--brand-accent-rgb) / 0.28), transparent 55%)',
        'radial-gradient(circle at 86% 24%, rgb(var(--brand-secondary-rgb) / 0.25), transparent 60%)',
        'radial-gradient(circle at 50% 110%, rgb(var(--brand-primary-rgb) / 0.18), transparent 55%)',
        'linear-gradient(to bottom, #020617, #0b1220)',
    ].join(', '),
}));
</script>

<template>
    <div class="relative min-h-screen overflow-hidden bg-slate-950" :style="backgroundStyle">
        <div class="pointer-events-none absolute -left-24 -top-16 h-72 w-72 rounded-full bg-[rgb(var(--brand-accent-rgb)/0.25)] blur-3xl"></div>
        <div class="pointer-events-none absolute -right-24 top-28 h-80 w-80 rounded-full bg-[rgb(var(--brand-secondary-rgb)/0.22)] blur-3xl"></div>
        <div class="pointer-events-none absolute -bottom-20 left-1/2 h-72 w-72 -translate-x-1/2 rounded-full bg-[rgb(var(--brand-primary-rgb)/0.18)] blur-3xl"></div>

        <div class="relative mx-auto flex min-h-screen w-full max-w-md items-center px-4 py-6 sm:py-8">
            <div class="w-full rounded-[2rem] border border-white/15 bg-white/95 p-4 shadow-[0_30px_80px_-35px_rgba(15,23,42,0.95)] backdrop-blur sm:p-5">
                <div class="rounded-2xl border border-slate-200 bg-white px-3 py-3.5 shadow-sm">
                    <Link href="/" class="flex items-center gap-3">
                        <span class="inline-flex h-12 w-12 shrink-0 items-center justify-center overflow-hidden rounded-2xl border border-slate-200 bg-white shadow-sm">
                            <img v-if="branding.logo_url" :src="branding.logo_url" alt="App logo" class="h-10 w-10 object-contain" />
                            <span v-else class="inline-flex h-9 w-9 items-center justify-center rounded-xl brand-primary-bg text-sm font-bold text-white">V</span>
                        </span>
                        <span class="min-w-0 flex-1">
                            <span class="block text-[10px] font-semibold uppercase tracking-[0.18em] text-slate-500">Welcome</span>
                            <span class="mt-0.5 block break-all text-[15px] font-semibold leading-tight text-slate-900">
                                {{ branding.app_name || 'VTU Wallet' }}
                            </span>
                        </span>
                    </Link>
                </div>

                <div class="mt-4 rounded-2xl border border-slate-200 bg-white p-4 shadow-sm sm:p-5">
                    <slot />
                </div>
            </div>
        </div>
    </div>
</template>
