import { ThemeProvider } from "@/Components/ThemeProvider";
import { Link } from "@inertiajs/react";
import React from "react";

export default function AuthLayout({ children }: { children: React.ReactNode }) {
    return (
        <ThemeProvider defaultTheme="dark" storageKey="nihonbuzz-theme">
            <div className="min-h-screen bg-background relative overflow-hidden flex items-center justify-center p-4">
                {/* Background Decorations - Pure CSS */}
                <div className="absolute inset-0 z-0">
                    <div className="absolute top-[-10%] left-[-10%] w-[40%] h-[40%] bg-nihonbuzz-red/5 rounded-full blur-[100px]" />
                    <div className="absolute bottom-[-10%] right-[-10%] w-[40%] h-[40%] bg-nihonbuzz-red/10 rounded-full blur-[100px]" />
                    
                    {/* Minimalist Japanese Pattern Overlay (CSS-based) */}
                    <div className="absolute inset-0 opacity-[0.03] dark:opacity-[0.05]" 
                         style={{ 
                             backgroundImage: `radial-gradient(circle at 2px 2px, currentColor 1px, transparent 0)`,
                             backgroundSize: '40px 40px' 
                         }} 
                    />
                </div>

                <div className="w-full max-w-[440px] z-10 space-y-8 animate-in fade-in zoom-in duration-700">
                    <div className="flex flex-col items-center text-center space-y-2">
                        <Link href="/" className="mb-4">
                            <div className="w-16 h-16 bg-nihonbuzz-red rounded-[2rem] flex items-center justify-center shadow-2xl shadow-nihonbuzz-red/20 rotate-12 hover:rotate-0 transition-transform duration-500">
                                <span className="text-white font-black text-2xl tracking-tighter">NB</span>
                            </div>
                        </Link>
                        <h2 className="text-sm font-black text-nihonbuzz-red uppercase tracking-[0.3em]">LPK NihonBuzz</h2>
                        <p className="text-xs text-muted-foreground font-medium uppercase tracking-widest">Kurasu Academy Digital Platform</p>
                    </div>

                    {children}

                    <div className="text-center">
                        <p className="text-[10px] text-muted-foreground/50 font-bold uppercase tracking-widest">
                            &copy; {new Date().getFullYear()} LPK NihonBuzz Academy. All Rights Reserved.
                        </p>
                    </div>
                </div>
            </div>
        </ThemeProvider>
    );
}