<!DOCTYPE html>
<html lang="id">

<head>
    <meta charset="UTF-8">
    <title>@yield('title', 'Sarakata — Perpustakaan Digital')</title>
    <meta name="description" content="Sarakata - Sistem Informasi Perpustakaan Digital untuk Generasi Modern">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <script src="https://cdn.tailwindcss.com"></script>
    <link href="https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700;800;900&display=swap"
        rel="stylesheet">
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
    <script>
        tailwind.config = {
            theme: {
                extend: {
                    fontFamily: {
                        sans: ['Inter', 'sans-serif']
                    },
                    colors: {
                        primary: {
                            50: '#eef2ff',
                            100: '#e0e7ff',
                            200: '#c7d2fe',
                            300: '#a5b4fc',
                            400: '#818cf8',
                            500: '#6366f1',
                            600: '#4f46e5',
                            700: '#4338ca',
                            800: '#3730a3',
                            900: '#312e81'
                        },
                        accent: {
                            50: '#ecfdf5',
                            100: '#d1fae5',
                            200: '#a7f3d0',
                            300: '#6ee7b7',
                            400: '#34d399',
                            500: '#10b981',
                            600: '#059669'
                        },
                    }
                }
            }
        }
    </script>
    <style>
        .gradient-text {
            background: linear-gradient(135deg, #4f46e5 0%, #7c3aed 50%, #2563eb 100%);
            -webkit-background-clip: text;
            -webkit-text-fill-color: transparent;
            background-clip: text;
        }

        .glass-nav {
            backdrop-filter: blur(20px);
            -webkit-backdrop-filter: blur(20px);
            background: rgba(255, 255, 255, 0.85);
        }

        .hero-gradient {
            background: linear-gradient(135deg, #eef2ff 0%, #e0e7ff 30%, #f5f3ff 60%, #ede9fe 100%);
        }

        .card-hover {
            transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
        }

        .card-hover:hover {
            transform: translateY(-8px);
            box-shadow: 0 25px 50px -12px rgba(79, 70, 229, 0.15);
        }

        .float-animation {
            animation: float 6s ease-in-out infinite;
        }

        @keyframes float {

            0%,
            100% {
                transform: translateY(0);
            }

            50% {
                transform: translateY(-20px);
            }
        }

        .fade-up {
            opacity: 0;
            transform: translateY(30px);
            animation: fadeUp 0.8s ease forwards;
        }

        @keyframes fadeUp {
            to {
                opacity: 1;
                transform: translateY(0);
            }
        }

        .blob {
            border-radius: 30% 70% 70% 30% / 30% 30% 70% 70%;
        }
    </style>
    @stack('styles')
</head>

<body class="bg-white text-gray-800 font-sans antialiased overflow-x-hidden w-full">

    {{-- NAVBAR --}}
    <nav class="glass-nav fixed w-full top-0 z-50 border-b border-gray-100/50">
        <div class="max-w-7xl mx-auto px-6 py-4 flex justify-between items-center relative">
            <a href="{{ route('home') }}" class="flex items-center gap-3 group">
                <div
                    class="w-10 h-10 bg-gradient-to-br from-primary-500 to-primary-700 rounded-xl flex items-center justify-center shadow-lg shadow-primary-200 group-hover:shadow-primary-300 transition-shadow">
                    <i class="fas fa-book-open text-white text-sm"></i>
                </div>
                <div class="flex flex-col">
                    <span class="font-extrabold text-xl tracking-tight text-gray-900 leading-none">Sara<span
                            class="gradient-text">kata</span></span>
                    <span
                        class="text-[10px] font-bold text-gray-500 uppercase tracking-widest mt-1 hidden sm:inline-block">Perpustakaan
                        Daerah Jember</span>
                </div>
            </a>

            <!-- Hamburger Button for Mobile -->
            <button id="mobile-menu-btn" class="md:hidden text-gray-600 hover:text-primary-600 focus:outline-none p-2 rounded-lg bg-gray-50">
                <i class="fas fa-bars text-xl"></i>
            </button>

            <!-- Desktop Menu -->
            <div class="hidden md:flex items-center gap-8 text-sm font-medium">
                <a href="{{ route('home') }}"
                    class="relative transition-colors {{ request()->routeIs('home') ? 'text-primary-600 font-semibold' : 'text-gray-600 hover:text-primary-600' }} after:absolute after:bottom-[-4px] after:left-0 {{ request()->routeIs('home') ? 'after:w-full' : 'after:w-0 hover:after:w-full' }} after:h-0.5 after:bg-primary-500 after:transition-all">Beranda</a>
                <a href="{{ route('katalog.index') }}"
                    class="relative transition-colors {{ request()->routeIs('katalog.*') ? 'text-primary-600 font-semibold' : 'text-gray-600 hover:text-primary-600' }} after:absolute after:bottom-[-4px] after:left-0 {{ request()->routeIs('katalog.*') ? 'after:w-full' : 'after:w-0 hover:after:w-full' }} after:h-0.5 after:bg-primary-500 after:transition-all">Katalog
                    Buku</a>
                <a href="{{ route('home') }}#fitur"
                    class="relative transition-colors {{ request()->routeIs('home') && request()->getQueryString() == '' ? 'text-primary-600 font-semibold' : 'text-gray-600 hover:text-primary-600' }} after:absolute after:bottom-[-4px] after:left-0 after:w-0 after:h-0.5 after:bg-primary-500 after:transition-all hover:after:w-full">Fitur</a>
                <a href="{{ route('home') }}#rekomendasi"
                    class="relative transition-colors {{ request()->routeIs('home') && request()->getQueryString() == '' ? 'text-primary-600 font-semibold' : 'text-gray-600 hover:text-primary-600' }} after:absolute after:bottom-[-4px] after:left-0 after:w-0 after:h-0.5 after:bg-primary-500 after:transition-all hover:after:w-full">Koleksi</a>

                @guest
                    <button onclick="openGuestModal()"
                        class="px-5 py-2.5 bg-primary-50 text-primary-600 rounded-xl font-semibold hover:bg-primary-100 transition-colors cursor-pointer">
                        <i class="fas fa-book-reader mr-1.5"></i> Buku Tamu
                    </button>
                    <a href="{{ route('login') }}"
                        class="px-5 py-2.5 bg-gradient-to-r from-primary-600 to-primary-700 text-white rounded-xl font-semibold shadow-lg shadow-primary-200 hover:shadow-primary-300 hover:from-primary-700 hover:to-primary-800 transition-all">
                        <i class="fas fa-sign-in-alt mr-1.5"></i> Login
                    </a>
                @endguest

                @auth
                    @if (auth()->user()->role === 'admin')
                        <a href="{{ route('admin.dashboard') }}"
                            class="px-5 py-2.5 bg-gradient-to-r from-primary-600 to-primary-700 text-white rounded-xl font-semibold shadow-lg shadow-primary-200 hover:shadow-primary-300 transition-all">
                            <i class="fas fa-tachometer-alt mr-1.5"></i> Dashboard Admin
                        </a>
                    @else
                        <a href="{{ route('user.dashboard') }}"
                            class="px-5 py-2.5 bg-gradient-to-r from-green-600 to-green-700 text-white rounded-xl font-semibold shadow-lg shadow-green-200 hover:shadow-green-300 transition-all">
                            <i class="fas fa-user mr-1.5"></i> Dashboard Anggota
                        </a>
                    @endif
                @endauth
            </div>
        </div>

        <!-- Mobile Menu -->
        <div id="mobile-menu" class="hidden md:hidden bg-white/95 backdrop-blur-xl border-t border-gray-100 shadow-xl absolute w-full left-0 top-full flex-col gap-4 px-6 py-6 transition-all">
            <a href="{{ route('home') }}" class="block font-bold text-gray-700 hover:text-primary-600 py-2 border-b border-gray-50">Beranda</a>
            <a href="{{ route('katalog.index') }}" class="block font-bold text-gray-700 hover:text-primary-600 py-2 border-b border-gray-50">Katalog Buku</a>
            <a href="{{ route('home') }}#fitur" class="block font-bold text-gray-700 hover:text-primary-600 py-2 border-b border-gray-50">Fitur</a>
            <a href="{{ route('home') }}#rekomendasi" class="block font-bold text-gray-700 hover:text-primary-600 py-2 border-b border-gray-50">Koleksi</a>

            <div class="flex flex-col gap-3 mt-4">
                @guest
                    <button onclick="openGuestModal()" class="w-full px-5 py-3 bg-primary-50 text-primary-600 rounded-xl font-bold hover:bg-primary-100 transition-colors text-center">
                        <i class="fas fa-book-reader mr-1.5"></i> Buku Tamu
                    </button>
                    <a href="{{ route('login') }}" class="w-full px-5 py-3 bg-gradient-to-r from-primary-600 to-primary-700 text-white rounded-xl font-bold shadow-lg shadow-primary-200 text-center">
                        <i class="fas fa-sign-in-alt mr-1.5"></i> Login
                    </a>
                @endguest

                @auth
                    @if (auth()->user()->role === 'admin')
                        <a href="{{ route('admin.dashboard') }}" class="w-full px-5 py-3 bg-gradient-to-r from-primary-600 to-primary-700 text-white rounded-xl font-bold shadow-lg text-center">
                            <i class="fas fa-tachometer-alt mr-1.5"></i> Dashboard Admin
                        </a>
                    @else
                        <a href="{{ route('user.dashboard') }}" class="w-full px-5 py-3 bg-gradient-to-r from-green-600 to-green-700 text-white rounded-xl font-bold shadow-lg text-center">
                            <i class="fas fa-user mr-1.5"></i> Dashboard Anggota
                        </a>
                    @endif
                @endauth
            </div>
        </div>
    </nav>

    {{-- CONTENT --}}
    <main class="pt-[72px]">
        @yield('content')
    </main>

    {{-- FOOTER --}}
    <footer class="bg-gray-900 text-gray-400 mt-0">
        <div class="max-w-7xl mx-auto px-6 py-16">
            <div class="grid md:grid-cols-4 gap-12">
                {{-- Brand --}}
                <div class="md:col-span-2">
                    <div class="flex items-center gap-3 mb-4">
                        <div
                            class="w-10 h-10 bg-gradient-to-br from-primary-500 to-primary-700 rounded-xl flex items-center justify-center">
                            <i class="fas fa-book-open text-white text-sm"></i>
                        </div>
                        <span class="font-extrabold text-xl text-white">Sarakata</span>
                    </div>
                    <p class="text-sm leading-relaxed max-w-sm">
                        Sistem Informasi Perpustakaan Digital yang dirancang untuk memudahkan akses, pengelolaan, dan
                        peminjaman buku secara modern.
                    </p>
                </div>

                {{-- Quick Links --}}
                <div>
                    <h4 class="text-white font-semibold mb-4 text-sm uppercase tracking-wider">Menu</h4>
                    <ul class="space-y-3 text-sm">
                        <li><a href="{{ route('home') }}" class="hover:text-white transition-colors">Beranda</a></li>
                        <li><a href="{{ route('katalog.index') }}" class="hover:text-white transition-colors">Katalog
                                Buku</a></li>
                        <li><a href="{{ route('home') }}#fitur" class="hover:text-white transition-colors">Fitur</a>
                        </li>
                        <li><a href="{{ route('home') }}#rekomendasi"
                                class="hover:text-white transition-colors">Koleksi
                                Buku</a></li>
                        <li><a href="{{ route('buku_tamu.index') }}" class="hover:text-white transition-colors">Buku
                                Tamu</a></li>
                    </ul>
                </div>

                {{-- Contact --}}
                <div>
                    <h4 class="text-white font-semibold mb-4 text-sm uppercase tracking-wider">Kontak</h4>
                    <ul class="space-y-3 text-sm">
                        <li class="flex items-center gap-2"><i class="fas fa-map-marker-alt w-4 text-primary-400"></i>
                            Jl. Perpustakaan No. 1</li>
                        <li class="flex items-center gap-2"><i class="fas fa-envelope w-4 text-primary-400"></i>
                            info@sarakata.id</li>
                        <li class="flex items-center gap-2"><i class="fas fa-phone w-4 text-primary-400"></i> (021)
                            1234-5678</li>
                    </ul>
                </div>
            </div>

            <div
                class="border-t border-gray-800 mt-12 pt-8 flex flex-col md:flex-row justify-between items-center gap-4">
                <p class="text-xs">© {{ date('Y') }} Sarakata Library System. All rights reserved.</p>
                <div class="flex gap-4">
                    <a href="#"
                        class="w-9 h-9 rounded-lg bg-gray-800 flex items-center justify-center hover:bg-primary-600 transition-colors"><i
                            class="fab fa-instagram text-sm"></i></a>
                    <a href="#"
                        class="w-9 h-9 rounded-lg bg-gray-800 flex items-center justify-center hover:bg-primary-600 transition-colors"><i
                            class="fab fa-facebook text-sm"></i></a>
                    <a href="#"
                        class="w-9 h-9 rounded-lg bg-gray-800 flex items-center justify-center hover:bg-primary-600 transition-colors"><i
                            class="fab fa-twitter text-sm"></i></a>
                </div>
            </div>
        </div>
    </footer>

    @stack('scripts')
    <script>
        document.addEventListener('DOMContentLoaded', function() {
            const btn = document.getElementById('mobile-menu-btn');
            const menu = document.getElementById('mobile-menu');
            const icon = btn.querySelector('i');

            btn.addEventListener('click', () => {
                menu.classList.toggle('hidden');
                menu.classList.toggle('flex');
                
                // Toggle icon
                if (menu.classList.contains('flex')) {
                    icon.classList.remove('fa-bars');
                    icon.classList.add('fa-times');
                } else {
                    icon.classList.remove('fa-times');
                    icon.classList.add('fa-bars');
                }
            });
        });
    </script>
</body>

</html>
