(function() {
    // Import Komponen Navigasi
    // Pastikan Public_Nav.jsx sudah dimuat sebelum file ini di app-shell.php
    const PublicNav = window.PublicNav;

    const LayoutPublic = ({ children }) => {
        return (
            // Container utama: Simulasi Mobile App Viewport (max-w-md)
            // Di layar besar, dia tetap di tengah seperti aplikasi HP
            <div className="min-h-screen bg-[#0f0f1a] font-sans text-gray-100 max-w-md mx-auto shadow-2xl overflow-hidden relative border-x border-white/5 pb-24">
                
                {/* 1. Background Ambient Glow (Efek Aurora) */}
                <div className="fixed top-1/2 left-1/2 -translate-x-1/2 -translate-y-1/2 w-full max-w-md h-full pointer-events-none z-0 overflow-hidden">
                    <div className="absolute top-[10%] left-[-20%] w-[300px] h-[300px] bg-purple-900/20 blur-[100px] rounded-full animate-float"></div>
                    <div className="absolute bottom-[20%] right-[-20%] w-[300px] h-[300px] bg-orange-900/10 blur-[80px] rounded-full animate-float" style={{ animationDelay: '2s' }}></div>
                </div>

                {/* 2. Content Area */}
                {/* Menggunakan z-index relatif agar di atas background glow */}
                <main className="relative z-10 animate-in fade-in duration-500">
                    {children}
                </main>

                {/* 3. Bottom Navigation */}
                {/* Wrapper untuk menu navigasi bawah */}
                <PublicNav />

            </div>
        );
    };

    // Expose ke Global
    window.LayoutPublic = LayoutPublic;
})();