<!DOCTYPE html>
<html lang="{{ str_replace('_', '-', app()->getLocale()) }}" data-theme="@themeId">
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    @unless(timebank_config('seo.allow_indexing_guest'))
        <meta name="robots" content="noindex, nofollow, noarchive, nosnippet">
    @endunless

    @php
        // Determine page title: explicit title > header content > fallback
        $pageTitle = null;

        // Check if header slot is set and extract text from it
        if (isset($header) && $header) {
            $headerContent = (string) $header;
            $pageTitle = trim(strip_tags($headerContent));
        }

        // Fall back to StringHelper if no valid header content
        if (empty($pageTitle)) {
            $pageTitle = \App\Helpers\StringHelper::getPageTitle();
        }
    @endphp

    <title>@yield('title', $pageTitle) - {{ config('app.name') }}</title>
    <link rel="icon" type="image/x-icon" href="{{ asset('favicon.ico') }}">
    <link rel="icon" type="image/png" sizes="32x32" href="{{ asset('favicon-32x32.png') }}">
    <link rel="icon" type="image/png" sizes="16x16" href="{{ asset('favicon-16x16.png') }}">
    <link rel="apple-touch-icon" sizes="180x180" href="{{ asset('apple-touch-icon.png') }}">
    {{-- <link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Nunito:wght@400;600;700&display=swap"> --}}

    <!-- Scripts -->
    <wireui:scripts />
    {{-- <script src="{{ mix('js/app.js') }}" defer></script> --}}
 <!-- Styles -->
    @vite(['resources/css/app.css', 'resources/css/fonts.css', 'resources/sass/custom_timebank.css', 'resources/js/app.js'])
    @livewireStyles
    @wirechatStyles

    <!-- Dynamic Theme CSS Custom Properties -->
    <style>
        :root {
            {!! theme_css_vars() !!}
        }
    </style>

    <style>
/* Theme-aware typography */
body {
    font-family: var(--font-family-body, 'Poppins', sans-serif) !important;
}

/* Theme-aware heading styles */
h1, h2, h3, h4, h5, h6 {
    font-family: var(--font-family-heading, 'Oswald', sans-serif) !important;
    text-transform: var(--heading-transform, uppercase) !important;
}

/* Apply theme-specific CSS custom properties */
:root {
    @themeCssVars
}
    </style>

</head>
<body class="font-sans antialiased flex flex-col min-h-screen">
    <x-jetstream.banner />
    <x-jetstream.toaster />
    <x-notifications position="bottom-end" />

    <!-- Fixed navigation menu -->
    @include('components.navigation-menu-guest')

    <!-- Main content with top padding to account for fixed navigation -->
    <div class="flex-grow bg-theme-surface pt-16">
        <x-notifications position="bottom-end" />

        <!-- System Announcement - positioned below fixed navigation -->
        @livewire('system-announcement', ['type' => 'SiteContents\SystemAnnouncement' ?? null, 'limit' => 1])

        <header class="bg-theme-brand text-theme-surface shadow">
            <!-- Header --->
            @if (isset($header))
            <div class="max-w-7xl mx-auto pt-1 pb-2 px-4 sm:px-6 lg:px-8">
                    {{ $header }}
                </div>
            @endif
            </header>
        <main>
            {{ $slot }}
        </main>
    </div>

    <!-- Footer -->
    <div class="mt-auto w-full">
        <x-footer />
    </div>

    <!-- Scripts body-->
    <!-- Be careful with changing the loading order! -->
    @livewireScripts
    @wirechatAssets
    @stack('scripts')
    @yield('scripts_body')
    @yield('js')
</body>
</html>