<!DOCTYPE html>
<html lang="id">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>@yield('title', 'Persegi') — Organisasi Pemuda Desa Karangdadap</title>
    <link rel="preconnect" href="https://fonts.googleapis.com">
    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
    <link href="https://fonts.googleapis.com/css2?family=Playfair+Display:wght@400;600;700&family=Roboto:wght@300;400;500;700&display=swap" rel="stylesheet">
    @vite('resources/css/app.css')
</head>
<body class="bg-white text-gray-900 font-sans antialiased" style="font-family: 'Roboto', sans-serif;">

    {{-- Navbar --}}
    <nav class="fixed top-0 left-0 right-0 z-50 bg-white border-b border-gray-100" x-data="{open: false}">
        <div class="max-w-6xl mx-auto px-4 py-3 flex items-center justify-between">
            <a href="{{ route('home') }}" class="font-bold text-base tracking-tight">Persegi <span class="text-gray-400">///</span></a>

            {{-- Desktop --}}
            <div class="hidden md:flex items-center gap-8 text-sm text-gray-600">
                <a href="{{ route('tentang') }}" class="hover:text-gray-900 transition">Tentang</a>
                <a href="{{ route('kegiatan') }}" class="hover:text-gray-900 transition">Kegiatan</a>
                <a href="{{ route('blog') }}" class="hover:text-gray-900 transition">Blog</a>
                <a href="{{ route('kontak') }}" class="hover:text-gray-900 transition">Kontak</a>
                <a href="{{ route('filament.admin.auth.login') }}"
                    class="flex items-center gap-1.5 bg-gray-900 text-white text-xs font-medium px-4 py-2 rounded-full hover:bg-gray-700 transition">
                    <svg class="w-3.5 h-3.5" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M16 7a4 4 0 11-8 0 4 4 0 018 0zM12 14a7 7 0 00-7 7h14a7 7 0 00-7-7z"/></svg>
                    Masuk
                </a>
            </div>

            {{-- Hamburger --}}
            <button @click="open = !open" class="md:hidden p-2 text-gray-600 hover:text-gray-900">
                <svg x-show="!open" class="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 6h16M4 12h16M4 18h16"/></svg>
                <svg x-show="open" x-cloak class="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M6 18L18 6M6 6l12 12"/></svg>
            </button>
        </div>

        {{-- Mobile menu --}}
        <div x-show="open" x-cloak @click.outside="open = false"
            class="md:hidden border-t border-gray-100 bg-white px-4 py-4 flex flex-col gap-4 text-sm text-gray-600">
            <a href="{{ route('tentang') }}" class="hover:text-gray-900 transition">Tentang</a>
            <a href="{{ route('kegiatan') }}" class="hover:text-gray-900 transition">Kegiatan</a>
            <a href="{{ route('blog') }}" class="hover:text-gray-900 transition">Blog</a>
            <a href="{{ route('kontak') }}" class="hover:text-gray-900 transition">Kontak</a>
            <a href="{{ route('filament.admin.auth.login') }}"
                class="inline-flex items-center gap-1.5 bg-gray-900 text-white text-xs font-medium px-4 py-2 rounded-full w-fit hover:bg-gray-700 transition">
                <svg class="w-3.5 h-3.5" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M16 7a4 4 0 11-8 0 4 4 0 018 0zM12 14a7 7 0 00-7 7h14a7 7 0 00-7-7z"/></svg>
                Masuk
            </a>
        </div>
    </nav>

    <script src="//unpkg.com/alpinejs" defer></script>
    <x-impersonate::banner/>
</body>
</html>

    <main class="pt-16">
        @yield('content')
    </main>

    {{-- Footer --}}
    <footer class="border-t border-gray-100 mt-24">
        <div class="max-w-6xl mx-auto px-6 py-8 flex flex-col md:flex-row items-center justify-between gap-4">
            <p class="text-sm text-gray-400">
                Copyright © {{ date('Y') }} — Persegi, Desa Karangdadap, Kalibagor, Banyumas
            </p>
            <div class="flex items-center gap-4 text-gray-400">
                <a href="{{ route('kontak') }}" class="hover:text-gray-700 text-sm transition">Kontak</a>
                <a href="{{ route('tentang') }}" class="hover:text-gray-700 text-sm transition">Tentang</a>
            </div>
        </div>
    </footer>

</body>
</html>
