<!DOCTYPE html>
<html lang="id" class="scroll-smooth">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta name="description" content="@yield('meta_description', 'Website Resmi Desa Suka Baru, Kecamatan Marga Sakti Sebelat, Kabupaten Bengkulu Utara, Provinsi Bengkulu.')">
    <meta name="keywords" content="Desa Suka Baru, Bengkulu Utara, Marga Sakti Sebelat, profil desa, potensi desa">
    <title>@yield('title', 'Beranda') — Desa Suka Baru</title>

    <!-- Favicon -->
    @if(file_exists(public_path('images/logo_cropped.png')))
        <link rel="icon" type="image/png" href="{{ asset('images/logo_cropped.png') }}">
    @elseif(file_exists(public_path('images/logo.png')))
        <link rel="icon" type="image/png" href="{{ asset('images/logo.png') }}">
    @elseif(file_exists(public_path('images/logo.jpg')))
        <link rel="icon" type="image/jpeg" href="{{ asset('images/logo.jpg') }}">
    @elseif(file_exists(public_path('images/logo.jpeg')))
        <link rel="icon" type="image/jpeg" href="{{ asset('images/logo.jpeg') }}">
    @elseif(file_exists(public_path('images/logo.svg')))
        <link rel="icon" type="image/svg+xml" href="{{ asset('images/logo.svg') }}">
    @else
        <link rel="icon" href="{{ asset('favicon.ico') }}">
    @endif

    <!-- Leaflet CSS -->
    <link rel="stylesheet" href="https://unpkg.com/leaflet@1.9.4/dist/leaflet.css" crossorigin="">

    <!-- GLightbox CSS -->
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/glightbox/dist/css/glightbox.min.css">

    <!-- Vite Assets -->
    @vite(['resources/css/app.css', 'resources/js/app.js'])
</head>
<body class="font-sans bg-white text-text-main">

    <!-- Navbar -->
    @include('partials.navbar')

    <!-- Main Content -->
    <main>
        @yield('content')
    </main>

    <!-- Footer -->
    @include('partials.footer')

    <!-- Leaflet JS -->
    <script src="https://unpkg.com/leaflet@1.9.4/dist/leaflet.js" crossorigin=""></script>

    <!-- GLightbox JS -->
    <script src="https://cdn.jsdelivr.net/npm/glightbox/dist/js/glightbox.min.js"></script>

    <!-- Init GLightbox -->
    <script>
        document.addEventListener('DOMContentLoaded', function () {
            if (typeof GLightbox !== 'undefined') {
                const lightbox = GLightbox({
                    touchNavigation: true,
                    loop: true,
                    autoplayVideos: true,
                });
            }
        });
    </script>

    @stack('scripts')
</body>
</html>
