import { Link } from '@inertiajs/react';
import { PropsWithChildren } from 'react';

export default function Guest({ children }: PropsWithChildren) {
    return (
        <div className="pf-page-bg relative flex min-h-screen flex-col items-center justify-center px-4 py-16">
            {/* Ambient orbs — visible in dark mode through the glass card */}
            <div
                className="pointer-events-none fixed inset-0 overflow-hidden"
                aria-hidden="true"
            >
                <div
                    className="absolute -top-40 right-1/3 h-[500px] w-[500px] rounded-full opacity-25 blur-[100px]"
                    style={{
                        background:
                            'radial-gradient(circle, hsl(17 92% 58%), transparent 70%)',
                    }}
                />
                <div
                    className="absolute -bottom-32 left-1/4 h-[400px] w-[400px] rounded-full opacity-18 blur-[80px]"
                    style={{
                        background:
                            'radial-gradient(circle, hsl(66 72% 65%), transparent 70%)',
                    }}
                />
                <div
                    className="absolute top-1/2 left-1/2 h-[280px] w-[280px] -translate-x-1/2 -translate-y-1/2 rounded-full opacity-10 blur-[100px]"
                    style={{
                        background:
                            'radial-gradient(circle, hsl(17 92% 58%), transparent 70%)',
                    }}
                />
            </div>

            {/* Brand */}
            <Link
                href="/"
                className="group relative z-10 mb-8 flex items-center gap-3"
            >
                <img
                    src="/images/logo.png"
                    alt="Upepo Finance"
                    className="h-10 w-10 object-contain transition-transform group-hover:scale-105"
                />
                <span className="pf-display text-foreground text-lg font-semibold tracking-tight">
                    Upepo Finance
                </span>
            </Link>

            {/* Glass card */}
            <div className="pf-glass relative z-10 w-full max-w-md p-8">
                {children}
            </div>

            <p className="text-muted-foreground/40 relative z-10 mt-8 text-xs">
                © {new Date().getFullYear()} Upepo Finance · Isolated per
                institution
            </p>
        </div>
    );
}