<!DOCTYPE html>
<html lang="{{ str_replace('_', '-', app()->getLocale()) }}">

<x-layout.head :title="$title" />

<body class="flex w-full min-h-screen bg-gray-50">
    <!-- Pattern Background -->
    <div class="fixed inset-0 -z-10 opacity-10">
        <div class="absolute h-full w-full bg-white">
            <svg class="h-full w-full" viewBox="0 0 80 80" xmlns="http://www.w3.org/2000/svg">
                <pattern id="grid" width="40" height="40" patternUnits="userSpaceOnUse">
                    <path d="M 40 0 L 0 0 0 40" fill="none" stroke="currentColor" stroke-width="1" />
                </pattern>
                <rect width="100%" height="100%" fill="url(#grid)" />
            </svg>
        </div>
        <div class="absolute inset-0 bg-gradient-to-br from-blue-500/30 to-purple-500/30"></div>
    </div>

    <main class="flex flex-col w-full min-h-screen">
        <x-layout.navbar />
        <div class="flex-grow mt-24 relative">
            <!-- Glass morphism container for content -->
            <div class="relative rounded-2xl">
                {{ $slot }}
            </div>
        </div>
    </main>

    <!-- Decorative blobs -->
    <div class="fixed top-0 left-0 -z-10 h-96 w-96 animate-blob">
        <div class="absolute h-full w-full rounded-full bg-purple-500 opacity-20 blur-3xl"></div>
    </div>
    <div class="fixed top-0 right-0 -z-10 h-96 w-96 animate-blob animation-delay-2000">
        <div class="absolute h-full w-full rounded-full bg-blue-500 opacity-20 blur-3xl"></div>
    </div>
    <div class="fixed bottom-0 left-1/2 -z-10 h-96 w-96 animate-blob animation-delay-4000">
        <div class="absolute h-full w-full rounded-full bg-indigo-500 opacity-20 blur-3xl"></div>
    </div>
</body>

</html>
