import { Link } from '@inertiajs/react';
import { home } from '@/routes';

export default function RegisterLayout({ children }: { children: React.ReactNode }) {
    return (
        <div
            className="relative flex min-h-dvh flex-col items-center justify-center overflow-hidden px-4 py-12"
            style={{ backgroundColor: '#0D0F12' }}
        >
            {/* Background blobs */}
            <div
                className="pointer-events-none fixed -top-52 -left-52 h-[700px] w-[700px] rounded-full opacity-[0.14]"
                style={{ background: 'radial-gradient(circle, #118AB2, transparent 68%)' }}
            />
            <div
                className="pointer-events-none fixed -right-32 bottom-0 h-[480px] w-[480px] rounded-full opacity-[0.09]"
                style={{ background: 'radial-gradient(circle, #06D6A0, transparent 68%)' }}
            />

            {/* Logo */}
            <Link href={home()} className="relative z-10 mb-8 flex items-center gap-2">
                <div className="flex h-9 w-9 items-center justify-center rounded-xl bg-white p-1">
                    <img src="/logo.png" alt="Natagara LMS" className="h-full w-auto" />
                </div>
                <span className="text-lg font-bold text-white">Natagara LMS</span>
            </Link>

            {/* Page content (card or no-card depending on step) */}
            <div className="relative z-10 w-full max-w-[520px]">
                {children}
            </div>

            <p className="relative z-10 mt-8 text-[11px]" style={{ color: 'rgba(255,255,255,0.2)' }}>
                &copy; {new Date().getFullYear()} Natagara LMS
            </p>
        </div>
    );
}