<!DOCTYPE html>
<html lang="{{ str_replace('_', '-', app()->getLocale()) }}">
    <head>
        <meta charset="utf-8">
        <meta name="viewport" content="width=device-width, initial-scale=1">
        <meta name="csrf-token" content="{{ csrf_token() }}">

        <title>{{ config('app.name', 'Laravel') }}</title>

        <!-- Fonts -->
        <link rel="preconnect" href="https://fonts.bunny.net">
        <link href="https://fonts.bunny.net/css?family=figtree:400,500,600&display=swap" rel="stylesheet" />

        <!-- Scripts -->
        @vite(['resources/css/app.css', 'resources/js/app.js'])

        <link rel="icon" type="image/png" href="{{ asset('assets/img/logos/LOGO.png') }}" />
    </head>
    <body class="font-sans text-gray-900 antialiased">
        <div class="min-h-screen flex flex-col sm:justify-center items-center pt-6 sm:pt-0 bg-gradient-to-br from-primary/10 via-accent/10 to-primary/20">
            <!-- Background Pattern -->
            <div class="absolute inset-0 bg-grid-pattern opacity-5"></div>
            
            <div class="relative z-10 w-full max-w-md">
                <!-- Logo Section -->
                <div class="text-center mb-8">
                    <a href="/" class="inline-block">
                        <img src="{{ asset('assets/img/logos/LOGO.png') }}" alt="Logo" class="w-24 h-24 object-contain mx-auto mb-4 drop-shadow-lg" />
                    </a>
                    <h1 class="text-2xl font-bold text-gray-900 mb-2">Sistem Monitoring Santri</h1>
                    <p class="text-gray-600 text-sm">Pondok Pesantren</p>
                </div>

                <!-- Login Card -->
                <div class="bg-white/95 backdrop-blur-sm shadow-xl rounded-2xl border border-white/20 overflow-hidden">
                    <div class="px-8 py-8">
                        {{ $slot }}
                    </div>
                </div>

                <!-- Footer -->
                <div class="text-center mt-8">
                    <p class="text-gray-500 text-sm">
                        &copy; {{ date('Y') }} Sistem Monitoring Santri. All rights reserved.
                    </p>
                </div>
            </div>
        </div>

        <style>
            .bg-grid-pattern {
                background-image: 
                    linear-gradient(rgba(22, 163, 74, 0.1) 1px, transparent 1px),
                    linear-gradient(90deg, rgba(22, 163, 74, 0.1) 1px, transparent 1px);
                background-size: 20px 20px;
            }
        </style>
    </body>
</html>
