<?php require APP_ROOT . '/views/layouts/_head.php'; ?>
<body class="h-full bg-gray-100 text-gray-900 dark:bg-gray-900 dark:text-gray-100 transition-colors duration-200">
    <!-- Skip to main content for accessibility -->
    <a href="#main-content" class="sr-only focus:not-sr-only focus:absolute focus:top-4 focus:left-4 bg-primary-600 text-white px-4 py-2 rounded-md z-50">
        <?= Lang::get('skip_to_main_content') ?>
    </a>

<?php if (Session::isLoggedIn()): ?>
<?php
$unreadMessagesCount = 0;
try {
    require_once APP_ROOT . '/models/Message.php';
    $unreadMessagesCount = (new Message())->countUnreadForUser(Session::getUserId());
} catch (Throwable $e) {
    error_log('Unread messages count error: ' . $e->getMessage());
}
?>
<nav class="bg-white dark:bg-gray-800 shadow-md border-b border-gray-200 dark:border-gray-700" role="navigation" aria-label="<?= Lang::get('main_navigation') ?>">
    <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
        <div class="flex justify-between h-16">
            <div class="flex items-center space-x-8">
                <a href="<?= APP_URL ?>/home" class="text-xl font-bold text-primary-600 dark:text-primary-400" aria-label="<?= Lang::get('app_name') ?> <?= Lang::get('home') ?>">
                    <?= Lang::get('app_name') ?>
                </a>
                <a href="<?= APP_URL ?>/home" class="hidden md:inline-block text-gray-600 dark:text-gray-300 hover:text-primary-600 dark:hover:text-primary-400 px-3 py-2 text-sm font-medium transition-colors" aria-label="<?= Lang::get('home') ?> page">
                    <?= Lang::get('home') ?>
                </a>
                <a href="<?= APP_URL ?>/articles" class="hidden md:inline-block text-gray-600 dark:text-gray-300 hover:text-primary-600 dark:hover:text-primary-400 px-3 py-2 text-sm font-medium transition-colors" aria-label="<?= Lang::get('articles') ?>">
                    <?= Lang::get('articles') ?>
                </a>
                <a href="<?= APP_URL ?>/literature" class="hidden md:inline-block text-gray-600 dark:text-gray-300 hover:text-primary-600 dark:hover:text-primary-400 px-3 py-2 text-sm font-medium transition-colors" aria-label="<?= Lang::get('literature') ?>">
                    <?= Lang::get('literature') ?>
                </a>
                <a href="<?= APP_URL ?>/lists" class="hidden md:inline-block text-gray-600 dark:text-gray-300 hover:text-primary-600 dark:hover:text-primary-400 px-3 py-2 text-sm font-medium transition-colors" aria-label="<?= Lang::get('lists') ?>">
                    <?= Lang::get('lists') ?>
                </a>
                <a href="<?= APP_URL ?>/marketplace" class="hidden md:inline-block text-gray-600 dark:text-gray-300 hover:text-primary-600 dark:hover:text-primary-400 px-3 py-2 text-sm font-medium transition-colors" aria-label="<?= Lang::get('marketplace') ?>">
                    <?= Lang::get('marketplace') ?>
                </a>
            </div>

            <!-- Desktop Nav -->
            <div class="hidden md:flex items-center space-x-4">
                <!-- Search -->
                <button id="searchBtn" type="button" class="p-2 rounded-lg bg-gray-100 dark:bg-gray-700 text-gray-600 dark:text-gray-300 hover:bg-gray-200 dark:hover:bg-gray-600 transition-colors" title="<?= Lang::get('search') ?> (Ctrl+K)" aria-label="<?= Lang::get('search') ?>">
                    <svg 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="M21 21l-6-6m2-5a7 7 0 11-14 0 7 7 0 0114 0z"/>
                    </svg>
                </button>

                <!-- Language Dropdown -->
                <?php $dropdownId = 'header'; require APP_ROOT . '/views/partials/language_dropdown.php'; ?>

                <!-- Dark/Light Toggle -->
                <button id="themeToggle" type="button" class="p-2 rounded-lg bg-gray-100 dark:bg-gray-700 text-gray-600 dark:text-gray-300 hover:bg-gray-200 dark:hover:bg-gray-600 transition-colors" title="<?= Lang::get('dark_mode') ?>" aria-label="<?= Lang::get('toggle_dark_mode') ?>">
                    <svg id="sunIcon" class="w-5 h-5 hidden" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 3v1m0 16v1m9-9h-1M4 12H3m15.364 6.364l-.707-.707M6.343 6.343l-.707-.707m12.728 0l-.707.707M6.343 17.657l-.707.707M16 12a4 4 0 11-8 0 4 4 0 018 0z"/>
                    </svg>
                    <svg id="moonIcon" class="w-5 h-5 hidden" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M20.354 15.354A9 9 0 018.646 3.646 9.003 9.003 0 0012 21a9.003 9.003 0 008.354-5.646z"/>
                    </svg>
                </button>

                <!-- Profile Dropdown -->
                <div class="relative" id="profileDropdown">
                    <button type="button" class="flex items-center space-x-2 text-gray-600 dark:text-gray-300 hover:text-primary-600 dark:hover:text-primary-400 transition-colors whitespace-nowrap min-w-[140px]" id="profileBtn" aria-label="<?= Lang::get('profile') ?> menu" aria-expanded="false" aria-controls="profileMenu">
                        <?php if (Session::get('avatar')): ?>
                            <img src="<?= APP_URL ?>/uploads/avatars/<?= htmlspecialchars(Session::get('avatar')) ?>" alt="" class="w-7 h-7 rounded-full object-cover flex-shrink-0">
                        <?php else: ?>
                            <svg class="w-5 h-5 flex-shrink-0" 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>
                        <?php endif; ?>
                        <span class="text-sm font-medium truncate flex-1"><?= htmlspecialchars(Session::get('display_name', Session::get('username'))) ?></span>
                        <svg class="w-4 h-4 flex-shrink-0 ml-1" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 9l-7 7-7-7"/>
                        </svg>
                    </button>
                    <div id="profileMenu" class="hidden absolute right-0 mt-2 w-72 bg-white dark:bg-gray-800 rounded-lg shadow-lg border border-gray-200 dark:border-gray-700 py-1 z-50">
                        <a href="<?= APP_URL ?>/profile" class="block whitespace-nowrap px-4 py-2 text-sm text-gray-700 dark:text-gray-300 hover:bg-gray-100 dark:hover:bg-gray-700" role="menuitem">
                            <?= Lang::get('profile') ?>
                        </a>
                        <a href="<?= APP_URL ?>/wishlist" class="block whitespace-nowrap px-4 py-2 text-sm text-gray-700 dark:text-gray-300 hover:bg-gray-100 dark:hover:bg-gray-700" role="menuitem">
                            <svg class="w-4 h-4 mr-2 inline" fill="currentColor" viewBox="0 0 24 24">
                                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M20.84 4.61a5.5 5.5 0 0 0-7.78 0L12 5.67l-1.06-1.06a5.5 5.5 0 0 0-7.78 7.78l1.06 1.06L12 21.23l7.78-7.78 1.06-1.06a5.5 5.5 0 0 0 0-7.78z"/>
                            </svg>
                            Wishlist
                        </a>
                        <a href="<?= APP_URL ?>/messages" class="flex items-center justify-between gap-3 whitespace-nowrap px-4 py-2 text-sm text-gray-700 dark:text-gray-300 hover:bg-gray-100 dark:hover:bg-gray-700" role="menuitem">
                            <span>
                                <svg class="w-4 h-4 mr-2 inline" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M8 10h8m-8 4h5m8-2a9 9 0 11-18 0 9 9 0 0118 0z"/></svg>
                                <?= Lang::get('messages') ?>
                            </span>
                            <?php if ($unreadMessagesCount > 0): ?>
                                <span class="inline-flex items-center justify-center px-2 py-0.5 rounded-full bg-red-600 text-white text-xs font-semibold"><?= $unreadMessagesCount > 99 ? '99+' : (int)$unreadMessagesCount ?></span>
                            <?php endif; ?>
                        </a>
                        <hr class="border-gray-200 dark:border-gray-700">
                        <div class="px-4 py-2 text-xs font-semibold uppercase tracking-wider text-gray-500 dark:text-gray-400 bg-gray-50 dark:bg-gray-900/40">
                            <?= Lang::get('marketplace') ?>
                        </div>
                        <a href="<?= APP_URL ?>/marketplace/my-listings" class="block whitespace-nowrap px-4 py-2 text-sm text-gray-700 dark:text-gray-300 hover:bg-gray-100 dark:hover:bg-gray-700" role="menuitem">
                            <svg class="w-4 h-4 mr-2 inline" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 11H5m14 0a2 2 0 012 2v6a2 2 0 01-2 2H5a2 2 0 01-2-2v-6a2 2 0 012-2m14 0V9a2 2 0 00-2-2M5 11V9a2 2 0 012-2m0 0V5a2 2 0 012-2h6a2 2 0 012 2v2M7 7h10"/></svg>
                            <?= Lang::get('my_listings') ?>
                        </a>
                        <a href="<?= APP_URL ?>/marketplace/bookmarks" class="block whitespace-nowrap px-4 py-2 text-sm text-gray-700 dark:text-gray-300 hover:bg-gray-100 dark:hover:bg-gray-700" role="menuitem">
                            <svg class="w-4 h-4 mr-2 inline" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 5a2 2 0 012-2h10a2 2 0 012 2v16l-7-3.5L5 21V5z"/></svg>
                            <?= Lang::get('bookmarks') ?>
                        </a>
                        <a href="<?= APP_URL ?>/marketplace/saved-searches" class="block whitespace-nowrap px-4 py-2 text-sm text-gray-700 dark:text-gray-300 hover:bg-gray-100 dark:hover:bg-gray-700" role="menuitem">
                            <svg class="w-4 h-4 mr-2 inline" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M21 21l-6-6m2-5a7 7 0 11-14 0 7 7 0 0114 0z"/></svg>
                            <?= Lang::get('saved_searches') ?>
                        </a>
                        <?php if (Session::get('role') === 'admin'): ?>
                        <hr class="border-gray-200 dark:border-gray-700">
                        <a href="<?= APP_URL ?>/admin" class="block whitespace-nowrap px-4 py-2 text-sm text-gray-700 dark:text-gray-300 hover:bg-gray-100 dark:hover:bg-gray-700" role="menuitem">
                            <svg class="w-4 h-4 mr-2 inline" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M10.325 4.317c.426-1.756 2.924-1.756 3.35 0a1.724 1.724 0 002.573 1.066c1.543-.94 3.31.826 2.37 2.37a1.724 1.724 0 001.065 2.572c1.756.426 1.756 2.924 0 3.35a1.724 1.724 0 00-1.066 2.573c.94 1.543-.826 3.31-2.37 2.37a1.724 1.724 0 00-2.572 1.065c-.426 1.756-2.924 1.756-3.35 0a1.724 1.724 0 00-2.573-1.066c-1.543.94-3.31-.826-2.37-2.37a1.724 1.724 0 00-1.065-2.572c-1.756-.426-1.756-2.924 0-3.35a1.724 1.724 0 001.066-2.573c-.94-1.543.826-3.31 2.37-2.37.996.608 2.296.07 2.572-1.065z"/><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15 12a3 3 0 11-6 0 3 3 0 016 0z"/></svg>
                            <?= Lang::get('admin_panel') ?>
                        </a>
                        <?php endif; ?>
                        <hr class="border-gray-200 dark:border-gray-700">
                        <a href="<?= APP_URL ?>/logout" class="block whitespace-nowrap px-4 py-2 text-sm text-red-600 dark:text-red-400 hover:bg-gray-100 dark:hover:bg-gray-700" role="menuitem">
                            <svg class="w-4 h-4 mr-2 inline" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M17 16l4-4m0 0l-4-4m4 4H7m6 4v1a3 3 0 01-3 3H6a3 3 0 01-3-3V7a3 3 0 013-3h4a3 3 0 013 3v1"/></svg>
                            <?= Lang::get('logout') ?>
                        </a>
                    </div>
                </div>
            </div>

            <!-- Mobile Hamburger Button -->
            <div class="flex items-center md:hidden">
                <!-- Search Button -->
                <button id="searchBtnMobile" type="button" class="p-2 rounded-lg text-gray-600 dark:text-gray-300 hover:bg-gray-100 dark:hover:bg-gray-700 transition-colors mr-2" title="<?= Lang::get('search') ?>" aria-label="<?= Lang::get('search') ?>">
                    <svg 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="M21 21l-6-6m2-5a7 7 0 11-14 0 7 7 0 0114 0z"/>
                    </svg>
                </button>
                
                <button id="mobileMenuBtn" type="button" class="p-2 rounded-lg text-gray-600 dark:text-gray-300 hover:bg-gray-100 dark:hover:bg-gray-700 transition-colors" aria-label="<?= Lang::get('toggle_mobile_menu') ?>" aria-expanded="false" aria-controls="mobileMenu">
                    <svg id="menuOpenIcon" class="w-6 h-6" 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 id="menuCloseIcon" class="w-6 h-6 hidden" 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>
        </div>
    </div>

    <!-- Mobile Menu Panel -->
    <div id="mobileMenu" class="hidden md:hidden border-t border-gray-200 dark:border-gray-700 bg-white dark:bg-gray-800" role="menu" aria-labelledby="mobileMenuBtn">
        <div class="px-4 py-3 space-y-3">
            <a href="<?= APP_URL ?>/home" class="block px-3 py-2 text-sm font-medium text-gray-700 dark:text-gray-300 hover:bg-gray-100 dark:hover:bg-gray-700 rounded-lg transition-colors" role="menuitem">
                <?= Lang::get('home') ?>
            </a>
            <a href="<?= APP_URL ?>/articles" class="block px-3 py-2 text-sm font-medium text-gray-700 dark:text-gray-300 hover:bg-gray-100 dark:hover:bg-gray-700 rounded-lg transition-colors" role="menuitem">
                <?= Lang::get('articles') ?>
            </a>
            <a href="<?= APP_URL ?>/literature" class="block px-3 py-2 text-sm font-medium text-gray-700 dark:text-gray-300 hover:bg-gray-100 dark:hover:bg-gray-700 rounded-lg transition-colors" role="menuitem">
                <?= Lang::get('literature') ?>
            </a>
            <a href="<?= APP_URL ?>/lists" class="block px-3 py-2 text-sm font-medium text-gray-700 dark:text-gray-300 hover:bg-gray-100 dark:hover:bg-gray-700 rounded-lg transition-colors" role="menuitem">
                <?= Lang::get('lists') ?>
            </a>
            <a href="<?= APP_URL ?>/marketplace" class="block px-3 py-2 text-sm font-medium text-gray-700 dark:text-gray-300 hover:bg-gray-100 dark:hover:bg-gray-700 rounded-lg transition-colors" role="menuitem">
                <?= Lang::get('marketplace') ?>
            </a>
            <a href="<?= APP_URL ?>/profile" class="block px-3 py-2 text-sm font-medium text-gray-700 dark:text-gray-300 hover:bg-gray-100 dark:hover:bg-gray-700 rounded-lg transition-colors" role="menuitem">
                <?= Lang::get('profile') ?>
            </a>
            <a href="<?= APP_URL ?>/wishlist" class="block px-3 py-2 text-sm font-medium text-gray-700 dark:text-gray-300 hover:bg-gray-100 dark:hover:bg-gray-700 rounded-lg transition-colors" role="menuitem">
                <svg class="w-4 h-4 mr-2 inline" fill="currentColor" viewBox="0 0 24 24">
                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M20.84 4.61a5.5 5.5 0 0 0-7.78 0L12 5.67l-1.06-1.06a5.5 5.5 0 0 0-7.78 7.78l1.06 1.06L12 21.23l7.78-7.78 1.06-1.06a5.5 5.5 0 0 0 0-7.78z"/>
                </svg>
                Wishlist
            </a>
            <?php if (Session::get('role') === 'admin'): ?>
            <a href="<?= APP_URL ?>/admin" class="block px-3 py-2 text-sm font-medium text-gray-700 dark:text-gray-300 hover:bg-gray-100 dark:hover:bg-gray-700 rounded-lg transition-colors" role="menuitem">
                <?= Lang::get('admin_panel') ?>
            </a>
            <?php endif; ?>
            <hr class="border-gray-200 dark:border-gray-700">
            <div class="flex items-center justify-between px-3 py-2">
                <span class="text-sm text-gray-500 dark:text-gray-400"><?= Lang::get('dark_mode') ?></span>
                <button id="themeToggleMobile" type="button" class="p-2 rounded-lg bg-gray-100 dark:bg-gray-700 text-gray-600 dark:text-gray-300 hover:bg-gray-200 dark:hover:bg-gray-600 transition-colors" aria-label="<?= Lang::get('toggle_dark_mode') ?>">
                    <svg class="w-5 h-5 sun-icon hidden" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 3v1m0 16v1m9-9h-1M4 12H3m15.364 6.364l-.707-.707M6.343 6.343l-.707-.707m12.728 0l-.707.707M6.343 17.657l-.707.707M16 12a4 4 0 11-8 0 4 4 0 018 0z"/></svg>
                    <svg class="w-5 h-5 moon-icon hidden" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M20.354 15.354A9 9 0 018.646 3.646 9.003 9.003 0 0012 21a9.003 9.003 0 008.354-5.646z"/></svg>
                </button>
            </div>
            <div class="flex items-center justify-between px-3 py-2">
                <span class="text-sm text-gray-500 dark:text-gray-400"><?= Lang::get('language') ?></span>
                <?php $dropdownId = 'mobile'; require APP_ROOT . '/views/partials/language_dropdown.php'; ?>
            </div>
            <hr class="border-gray-200 dark:border-gray-700">
            <a href="<?= APP_URL ?>/logout" class="block px-3 py-2 text-sm font-medium text-red-600 dark:text-red-400 hover:bg-gray-100 dark:hover:bg-gray-700 rounded-lg transition-colors" role="menuitem">
                <?= Lang::get('logout') ?>
            </a>
        </div>
    </div>
</nav>
<?php else: ?>
<!-- Navigation for non-logged-in users -->
<nav class="bg-white dark:bg-gray-800 shadow-md border-b border-gray-200 dark:border-gray-700" role="navigation" aria-label="<?= Lang::get('main_navigation') ?>">
    <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
        <div class="flex justify-between h-16">
            <div class="flex items-center space-x-8">
                <a href="<?= APP_URL ?>/" class="text-xl font-bold text-primary-600 dark:text-primary-400" aria-label="<?= Lang::get('app_name') ?> <?= Lang::get('home') ?>">
                    <?= Lang::get('app_name') ?>
                </a>
                <a href="<?= APP_URL ?>/" class="hidden md:inline-block text-gray-600 dark:text-gray-300 hover:text-primary-600 dark:hover:text-primary-400 px-3 py-2 text-sm font-medium transition-colors" aria-label="<?= Lang::get('home') ?> page">
                    <?= Lang::get('home') ?>
                </a>
                <a href="<?= APP_URL ?>/articles" class="hidden md:inline-block text-gray-600 dark:text-gray-300 hover:text-primary-600 dark:hover:text-primary-400 px-3 py-2 text-sm font-medium transition-colors" aria-label="<?= Lang::get('articles') ?>">
                    <?= Lang::get('articles') ?>
                </a>
                <a href="<?= APP_URL ?>/support" class="hidden md:inline-block text-gray-600 dark:text-gray-300 hover:text-primary-600 dark:hover:text-primary-400 px-3 py-2 text-sm font-medium transition-colors" aria-label="<?= Lang::get('support') ?>">
                    <?= Lang::get('support') ?>
                </a>
                <a href="<?= APP_URL ?>/contact" class="hidden md:inline-block text-gray-600 dark:text-gray-300 hover:text-primary-600 dark:hover:text-primary-400 px-3 py-2 text-sm font-medium transition-colors" aria-label="<?= Lang::get('contact') ?>">
                    <?= Lang::get('contact') ?>
                </a>
                <a href="<?= APP_URL ?>/marketplace" class="hidden md:inline-block text-gray-600 dark:text-gray-300 hover:text-primary-600 dark:hover:text-primary-400 px-3 py-2 text-sm font-medium transition-colors" aria-label="<?= Lang::get('marketplace') ?>">
                    <?= Lang::get('marketplace') ?>
                </a>
            </div>

            <!-- Desktop Nav -->
            <div class="hidden md:flex items-center space-x-4">
                <!-- Language Dropdown -->
                <?php $dropdownId = 'header'; require APP_ROOT . '/views/partials/language_dropdown.php'; ?>

                <!-- Dark/Light Toggle -->
                <button id="themeToggle" type="button" class="p-2 rounded-lg bg-gray-100 dark:bg-gray-700 text-gray-600 dark:text-gray-300 hover:bg-gray-200 dark:hover:bg-gray-600 transition-colors" title="<?= Lang::get('dark_mode') ?>" aria-label="<?= Lang::get('toggle_dark_mode') ?>">
                    <svg id="sunIcon" class="w-5 h-5 hidden" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 3v1m0 16v1m9-9h-1M4 12H3m15.364 6.364l-.707-.707M6.343 6.343l-.707-.707m12.728 0l-.707.707M6.343 17.657l-.707.707M16 12a4 4 0 11-8 0 4 4 0 018 0z"/>
                    </svg>
                    <svg id="moonIcon" class="w-5 h-5 hidden" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M20.354 15.354A9 9 0 018.646 3.646 9.003 9.003 0 0012 21a9.003 9.003 0 008.354-5.646z"/>
                    </svg>
                </button>

                <!-- Login/Register Buttons -->
                <a href="<?= APP_URL ?>/login" class="btn-gradient btn-gradient-blue btn-gradient-sm" aria-label="<?= Lang::get('login') ?>">
                    <?= Lang::get('login') ?>
                </a>
                <a href="<?= APP_URL ?>/register" class="btn-gradient btn-gradient-blue btn-gradient-sm" aria-label="<?= Lang::get('register') ?>">
                    <?= Lang::get('register') ?>
                </a>
            </div>

            <!-- Mobile Hamburger Button -->
            <div class="flex items-center md:hidden">
                <button id="mobileMenuBtn" type="button" class="p-2 rounded-lg text-gray-600 dark:text-gray-300 hover:bg-gray-100 dark:hover:bg-gray-700 transition-colors" aria-label="<?= Lang::get('toggle_mobile_menu') ?>" aria-expanded="false" aria-controls="mobileMenu">
                    <svg id="menuOpenIcon" class="w-6 h-6" 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 id="menuCloseIcon" class="w-6 h-6 hidden" 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>
        </div>
    </div>

    <!-- Mobile Menu Panel -->
    <div id="mobileMenu" class="hidden md:hidden border-t border-gray-200 dark:border-gray-700 bg-white dark:bg-gray-800" role="menu" aria-labelledby="mobileMenuBtn">
        <div class="px-4 py-3 space-y-3">
            <a href="<?= APP_URL ?>/" class="block px-3 py-2 text-sm font-medium text-gray-700 dark:text-gray-300 hover:bg-gray-100 dark:hover:bg-gray-700 rounded-lg transition-colors" role="menuitem">
                <?= Lang::get('home') ?>
            </a>
            <a href="<?= APP_URL ?>/articles" class="block px-3 py-2 text-sm font-medium text-gray-700 dark:text-gray-300 hover:bg-gray-100 dark:hover:bg-gray-700 rounded-lg transition-colors" role="menuitem">
                <?= Lang::get('articles') ?>
            </a>
            <a href="<?= APP_URL ?>/support" class="block px-3 py-2 text-sm font-medium text-gray-700 dark:text-gray-300 hover:bg-gray-100 dark:hover:bg-gray-700 rounded-lg transition-colors" role="menuitem">
                <?= Lang::get('support') ?>
            </a>
            <a href="<?= APP_URL ?>/contact" class="block px-3 py-2 text-sm font-medium text-gray-700 dark:text-gray-300 hover:bg-gray-100 dark:hover:bg-gray-700 rounded-lg transition-colors" role="menuitem">
                <?= Lang::get('contact') ?>
            </a>
            <a href="<?= APP_URL ?>/marketplace" class="block px-3 py-2 text-sm font-medium text-gray-700 dark:text-gray-300 hover:bg-gray-100 dark:hover:bg-gray-700 rounded-lg transition-colors" role="menuitem">
                <?= Lang::get('marketplace') ?>
            </a>
            <hr class="border-gray-200 dark:border-gray-700">
            <div class="flex items-center justify-between px-3 py-2">
                <span class="text-sm text-gray-500 dark:text-gray-400"><?= Lang::get('dark_mode') ?></span>
                <button id="themeToggleMobile" type="button" class="p-2 rounded-lg bg-gray-100 dark:bg-gray-700 text-gray-600 dark:text-gray-300 hover:bg-gray-200 dark:hover:bg-gray-600 transition-colors" aria-label="<?= Lang::get('toggle_dark_mode') ?>">
                    <svg class="w-5 h-5 sun-icon hidden" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 3v1m0 16v1m9-9h-1M4 12H3m15.364 6.364l-.707-.707M6.343 6.343l-.707-.707m12.728 0l-.707.707M6.343 17.657l-.707.707M16 12a4 4 0 11-8 0 4 4 0 018 0z"/></svg>
                    <svg class="w-5 h-5 moon-icon hidden" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M20.354 15.354A9 9 0 018.646 3.646 9.003 9.003 0 0012 21a9.003 9.003 0 008.354-5.646z"/></svg>
                </button>
            </div>
            <div class="flex items-center justify-between px-3 py-2">
                <span class="text-sm text-gray-500 dark:text-gray-400"><?= Lang::get('language') ?></span>
                <?php $dropdownId = 'mobile'; require APP_ROOT . '/views/partials/language_dropdown.php'; ?>
            </div>
            <hr class="border-gray-200 dark:border-gray-700">
            <a href="<?= APP_URL ?>/login" class="block btn-gradient btn-gradient-blue btn-gradient-sm" role="menuitem">
                <?= Lang::get('login') ?>
            </a>
            <a href="<?= APP_URL ?>/register" class="block btn-gradient btn-gradient-blue btn-gradient-sm" role="menuitem">
                <?= Lang::get('register') ?>
            </a>
        </div>
    </div>
</nav>
<?php endif; ?>

<!-- Flash Messages -->
<?php if (Session::hasFlash('success')): ?>
<div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 mt-4">
    <div class="bg-green-50 dark:bg-green-900/30 border border-green-200 dark:border-green-800 text-green-700 dark:text-green-400 px-4 py-3 rounded-lg flex justify-between items-center flash-message" role="alert">
        <span><?= htmlspecialchars(Session::getFlash('success')) ?></span>
        <button onclick="this.parentElement.remove()" class="text-green-500 hover:text-green-700" aria-label="<?= Lang::get('close') ?>">&times;</button>
    </div>
</div>
<?php endif; ?>

<?php if (Session::hasFlash('error')): ?>
<div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 mt-4">
    <div class="bg-red-50 dark:bg-red-900/30 border border-red-200 dark:border-red-800 text-red-700 dark:text-red-400 px-4 py-3 rounded-lg flex justify-between items-center flash-message" role="alert">
        <span><?= htmlspecialchars(Session::getFlash('error')) ?></span>
        <button onclick="this.parentElement.remove()" class="text-red-500 hover:text-red-700" aria-label="<?= Lang::get('close') ?>">&times;</button>
    </div>
</div>
<?php endif; ?>

<!-- Cookie Consent Modal -->
<div id="cookieConsentModal" class="hidden fixed inset-0 bg-black bg-opacity-50 z-50 flex items-center justify-center p-4" role="dialog" aria-modal="true" aria-labelledby="cookieConsentHeading">
    <div class="bg-white dark:bg-gray-800 rounded-lg shadow-xl border border-gray-200 dark:border-gray-700 w-full max-w-md mx-auto">
        <div class="p-6">
            <div class="flex items-center mb-4">
                <svg class="w-6 h-6 text-amber-500 mr-3" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 15v2m-6 4h12a2 2 0 002-2v-6a2 2 0 00-2-2H6a2 2 0 00-2 2v6a2 2 0 002 2zm10-10V7a4 4 0 00-8 0v4h8z"/>
                </svg>
                <h3 id="cookieConsentHeading" class="text-lg font-semibold text-gray-900 dark:text-gray-100"><?= Lang::get('cookie_consent_title') ?></h3>
            </div>
            
            <p class="text-gray-600 dark:text-gray-400 text-sm mb-4"><?= Lang::get('cookie_consent_description') ?></p>
            
            <div class="space-y-2 mb-4">
                <div class="flex items-start">
                    <input type="checkbox" id="essentialCookies" checked disabled class="mt-1 mr-2">
                    <div>
                        <label for="essentialCookies" class="text-sm font-medium text-gray-700 dark:text-gray-300"><?= Lang::get('cookie_consent_required_title') ?></label>
                        <p class="text-xs text-gray-500 dark:text-gray-400"><?= Lang::get('cookie_consent_required_desc') ?></p>
                    </div>
                </div>
                
                <div class="flex items-start">
                    <input type="checkbox" id="analyticsCookies" class="mt-1 mr-2">
                    <div>
                        <label for="analyticsCookies" class="text-sm font-medium text-gray-700 dark:text-gray-300"><?= Lang::get('cookie_consent_analytics_title') ?></label>
                        <p class="text-xs text-gray-500 dark:text-gray-400"><?= Lang::get('cookie_consent_analytics_desc') ?></p>
                    </div>
                </div>
                
                <div class="flex items-start">
                    <input type="checkbox" id="marketingCookies" class="mt-1 mr-2">
                    <div>
                        <label for="marketingCookies" class="text-sm font-medium text-gray-700 dark:text-gray-300"><?= Lang::get('cookie_consent_marketing_title') ?></label>
                        <p class="text-xs text-gray-500 dark:text-gray-400"><?= Lang::get('cookie_consent_marketing_desc') ?></p>
                    </div>
                </div>
            </div>
            
            <div class="flex space-x-3">
                <button id="rejectCookiesBtn" type="button" class="flex-1 bg-red-600 hover:bg-red-700 text-white font-medium py-2 px-4 rounded-lg transition-colors focus:outline-none focus:ring-2 focus:ring-red-500 focus:ring-offset-2 dark:focus:ring-offset-gray-800">
                    <?= Lang::get('cookie_consent_reject') ?>
                </button>
                <button id="acceptCookiesBtn" type="button" class="flex-1 bg-green-600 hover:bg-green-700 text-white font-medium py-2 px-4 rounded-lg transition-colors focus:outline-none focus:ring-2 focus:ring-green-500 focus:ring-offset-2 dark:focus:ring-offset-gray-800">
                    <?= Lang::get('cookie_consent_accept') ?>
                </button>
            </div>
        </div>
    </div>
</div>

<!-- Search Modal -->
<div id="searchModal" class="hidden fixed inset-0 bg-black bg-opacity-50 z-50 flex items-start justify-center pt-20" role="dialog" aria-modal="true" aria-label="<?= Lang::get('search_placeholder') ?>">
    <div class="bg-white dark:bg-gray-800 rounded-lg shadow-xl border border-gray-200 dark:border-gray-700 w-full max-w-2xl mx-4">
        <div class="p-4 border-b border-gray-200 dark:border-gray-700">
            <div class="flex items-center">
                <svg class="w-5 h-5 text-gray-400 mr-3" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M21 21l-6-6m2-5a7 7 0 11-14 0 7 7 0 0114 0z"/>
                </svg>
                <label for="searchInput" class="sr-only"><?= Lang::get('search_placeholder') ?></label>
                <input type="text" id="searchInput" placeholder="<?= Lang::get('search_placeholder') ?>" 
                       class="flex-1 bg-transparent outline-none text-gray-900 dark:text-gray-100 placeholder-gray-500 dark:placeholder-gray-400"
                       autocomplete="off">
                <button id="searchCloseBtn" class="p-1 rounded hover:bg-gray-100 dark:hover:bg-gray-700" aria-label="<?= Lang::get('close') ?>">
                    <svg class="w-5 h-5 text-gray-400" 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>
        </div>
        <div id="searchResults" class="max-h-96 overflow-y-auto" aria-live="polite">
            <div class="p-8 text-center text-gray-500 dark:text-gray-400">
                <svg class="w-12 h-12 mx-auto mb-4 text-gray-300 dark:text-gray-600" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M21 21l-6-6m2-5a7 7 0 11-14 0 7 7 0 0114 0z"/>
                </svg>
                <p><?= Lang::get('search_type_to_search') ?></p>
            </div>
        </div>
    </div>
</div>

<main id="main-content" class="<?= !empty($fullWidth) ? 'max-w-full' : 'max-w-7xl' ?> mx-auto px-4 sm:px-6 lg:px-8 py-8 pb-20" role="main">
