<?php
/**
 * @var string $locale
 * @var Johncms\System\Legacy\Tools $tools
 * @var Johncms\System\Users\User $user
 * @var Johncms\Ads $ads
 */

/** @var \Johncms\Counters $counters */
$counters = $container->get('counters');
$forum_counters = $counters->forumCounters();
$guestbook_counters = $counters->guestbookCounters();
$downloads_counters = $counters->downloadsCounters();
$library_counters = $counters->libraryCounters();
$users_counters = $counters->usersCounters();
$album_counters = $counters->albumCounters();
$news_counters = $counters->news();
$ads = di(Johncms\Ads::class);
$ads_array = $ads->getAds();

?>
<!-- Main Menu -->
<div class="flex-1">
    <!-- Ads Before Menu -->
    <?php if (! empty($ads_array['before_menu'])): ?>
        <div class="px-4 py-3 space-y-3 animate-fade-in-up" style="animation-delay: 0.1s">
            <?php foreach ($ads_array['before_menu'] as $item): ?>
                <div class="bg-gradient-to-r from-blue-500/10 to-purple-500/10 backdrop-blur-lg p-4 rounded-2xl border border-white/20 shadow-lg hover:shadow-xl transition-all duration-500 hover:scale-[1.02] group relative overflow-hidden">
                    <div class="absolute inset-0 bg-gradient-to-r from-blue-500/5 to-purple-500/5 opacity-0 group-hover:opacity-100 transition-opacity duration-500"></div>
                    <div class="relative">
                        <?= $item ?>
                    </div>
                </div>
            <?php endforeach; ?>
        </div>
    <?php endif; ?>

    <!-- Navigation Menu -->
    <nav class="space-y-2 px-3 py-6">
        <!-- News -->
        <a href="/news/" class="group flex items-center px-4 py-4 text-sm font-semibold rounded-2xl text-gray-700 dark:text-gray-200 hover:text-white transition-all duration-500 transform hover:scale-[1.02] hover:shadow-2xl relative overflow-hidden bg-white/70 dark:bg-gray-800/70 backdrop-blur-lg hover:bg-gradient-to-r hover:from-blue-500 hover:to-purple-600 border border-white/30 dark:border-gray-700/30 hover:border-transparent animate-fade-in-up" style="animation-delay: 0.2s">
            <div class="absolute inset-0 bg-gradient-to-r from-blue-500 to-purple-600 opacity-0 group-hover:opacity-100 transition-all duration-500"></div>
            <div class="relative flex items-center w-full">
                <div class="w-10 h-10 rounded-xl bg-gradient-to-br from-blue-100 to-blue-200 dark:from-blue-900/30 dark:to-blue-800/30 group-hover:from-white/20 group-hover:to-white/10 flex items-center justify-center mr-4 transition-all duration-500 group-hover:scale-110 shadow-lg">
                    <svg class="w-5 h-5 text-blue-600 dark:text-blue-400 group-hover:text-white transition-colors duration-500" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" d="M19 20H5a2 2 0 01-2-2V6a2 2 0 012-2h10a2 2 0 012 2v1m2 13a2 2 0 01-2-2V7m2 13a2 2 0 002-2V9a2 2 0 00-2-2h-2m-4-3H9m0 0v12m0-12a2 2 0 012-2h2a2 2 0 012 2M9 6a2 2 0 012-2h2a2 2 0 012 2m-3 9l3-3m0 0l3 3m-3-3v6"></path>
                    </svg>
                </div>
                <span class="flex-1 font-semibold transition-colors duration-300"><?= d__('system', 'News archive') ?></span>
                <?php if ($news_counters['new'] > 0): ?>
                    <span class="inline-flex items-center px-3 py-1.5 rounded-full text-xs font-bold bg-gradient-to-r from-red-500 to-pink-500 text-white shadow-lg transform group-hover:scale-110 transition-transform duration-300 animate-pulse-slow">
                        + <?= $tools->formatNumber($news_counters['new']) ?>
                    </span>
                <?php endif ?>
            </div>
        </a>

        <!-- Forum -->
        <?php if ($config['mod_forum'] || $user->rights >= 7): ?>
            <a href="/forum/" class="group flex items-center px-4 py-4 text-sm font-semibold rounded-2xl text-gray-700 dark:text-gray-200 hover:text-white transition-all duration-500 transform hover:scale-[1.02] hover:shadow-2xl relative overflow-hidden bg-white/70 dark:bg-gray-800/70 backdrop-blur-lg hover:bg-gradient-to-r hover:from-green-500 hover:to-emerald-600 border border-white/30 dark:border-gray-700/30 hover:border-transparent animate-fade-in-up" style="animation-delay: 0.3s">
                <div class="absolute inset-0 bg-gradient-to-r from-green-500 to-emerald-600 opacity-0 group-hover:opacity-100 transition-all duration-500"></div>
                <div class="relative flex items-center w-full">
                    <div class="w-10 h-10 rounded-xl bg-gradient-to-br from-green-100 to-green-200 dark:from-green-900/30 dark:to-green-800/30 group-hover:from-white/20 group-hover:to-white/10 flex items-center justify-center mr-4 transition-all duration-500 group-hover:scale-110 shadow-lg">
                        <svg class="w-5 h-5 text-green-600 dark:text-green-400 group-hover:text-white transition-colors duration-500" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" d="M17 8h2a2 2 0 012 2v6a2 2 0 01-2 2h-2v4l-4-4H9a1.994 1.994 0 01-1.414-.586m0 0L11 14h4a2 2 0 002-2V6a2 2 0 00-2-2H5a2 2 0 00-2 2v6a2 2 0 002 2h2v4l.586-.586z"></path>
                        </svg>
                    </div>
                    <span class="flex-1 font-semibold transition-colors duration-300"><?= d__('system', 'Forum') ?></span>
                    <?php if ($forum_counters['new_messages'] > 0): ?>
                        <span class="inline-flex items-center px-3 py-1.5 rounded-full text-xs font-bold bg-gradient-to-r from-red-500 to-pink-500 text-white shadow-lg transform group-hover:scale-110 transition-transform duration-300 animate-pulse-slow">
                            + <?= $tools->formatNumber($forum_counters['new_messages']) ?>
                        </span>
                    <?php endif; ?>
                </div>
            </a>
        <?php endif ?>

        <!-- Guestbook -->
        <?php if ($config['mod_guest'] || $user->rights >= 7): ?>
            <a href="/guestbook/ga" class="group flex items-center px-4 py-4 text-sm font-semibold rounded-2xl text-gray-700 dark:text-gray-200 hover:text-white transition-all duration-500 transform hover:scale-[1.02] hover:shadow-2xl relative overflow-hidden bg-white/70 dark:bg-gray-800/70 backdrop-blur-lg hover:bg-gradient-to-r hover:from-orange-500 hover:to-amber-600 border border-white/30 dark:border-gray-700/30 hover:border-transparent animate-fade-in-up" style="animation-delay: 0.4s">
                <div class="absolute inset-0 bg-gradient-to-r from-orange-500 to-amber-600 opacity-0 group-hover:opacity-100 transition-all duration-500"></div>
                <div class="relative flex items-center w-full">
                    <div class="w-10 h-10 rounded-xl bg-gradient-to-br from-orange-100 to-orange-200 dark:from-orange-900/30 dark:to-orange-800/30 group-hover:from-white/20 group-hover:to-white/10 flex items-center justify-center mr-4 transition-all duration-500 group-hover:scale-110 shadow-lg">
                        <svg class="w-5 h-5 text-orange-600 dark:text-orange-400 group-hover:text-white transition-colors duration-500" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" d="M8 10h.01M12 10h.01M16 10h.01M9 16H5a2 2 0 01-2-2V6a2 2 0 012-2h14a2 2 0 012 2v8a2 2 0 01-2 2h-5l-5 5v-5z"></path>
                        </svg>
                    </div>
                    <span class="flex-1 font-semibold transition-colors duration-300"><?= d__('system', 'Guestbook') ?></span>
                    <?php if ($guestbook_counters['guestbook'] > 0): ?>
                        <span class="inline-flex items-center px-3 py-1.5 rounded-full text-xs font-bold bg-gradient-to-r from-red-500 to-pink-500 text-white shadow-lg transform group-hover:scale-110 transition-transform duration-300 animate-pulse-slow">
                            + <?= $tools->formatNumber($guestbook_counters['guestbook']) ?>
                        </span>
                    <?php endif ?>
                </div>
            </a>
        <?php endif ?>

        <!-- Downloads -->
        <?php if ($config['mod_down'] || $user->rights >= 7): ?>
            <a href="/downloads/" class="group flex items-center px-4 py-4 text-sm font-semibold rounded-2xl text-gray-700 dark:text-gray-200 hover:text-white transition-all duration-500 transform hover:scale-[1.02] hover:shadow-2xl relative overflow-hidden bg-white/70 dark:bg-gray-800/70 backdrop-blur-lg hover:bg-gradient-to-r hover:from-purple-500 hover:to-indigo-600 border border-white/30 dark:border-gray-700/30 hover:border-transparent animate-fade-in-up" style="animation-delay: 0.5s">
                <div class="absolute inset-0 bg-gradient-to-r from-purple-500 to-indigo-600 opacity-0 group-hover:opacity-100 transition-all duration-500"></div>
                <div class="relative flex items-center w-full">
                    <div class="w-10 h-10 rounded-xl bg-gradient-to-br from-purple-100 to-purple-200 dark:from-purple-900/30 dark:to-purple-800/30 group-hover:from-white/20 group-hover:to-white/10 flex items-center justify-center mr-4 transition-all duration-500 group-hover:scale-110 shadow-lg">
                        <svg class="w-5 h-5 text-purple-600 dark:text-purple-400 group-hover:text-white transition-colors duration-500" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" d="M4 16v1a3 3 0 003 3h10a3 3 0 003-3v-1m-4-4l-4 4m0 0l-4-4m4 4V4"></path>
                        </svg>
                    </div>
                    <span class="flex-1 font-semibold transition-colors duration-300"><?= d__('system', 'Downloads') ?></span>
                    <?php if ($downloads_counters['new'] > 0): ?>
                        <span class="inline-flex items-center px-3 py-1.5 rounded-full text-xs font-bold bg-gradient-to-r from-red-500 to-pink-500 text-white shadow-lg transform group-hover:scale-110 transition-transform duration-300 animate-pulse-slow"><?= $tools->formatNumber($downloads_counters['new']) ?>
                        </span>
                    <?php endif ?>
                </div>
            </a>
        <?php endif ?>

        <!-- Library -->
        <?php if ($config['mod_lib'] || $user->rights >= 7): ?>
            <a href="/library/" class="group flex items-center px-4 py-4 text-sm font-semibold rounded-2xl text-gray-700 dark:text-gray-200 hover:text-white transition-all duration-500 transform hover:scale-[1.02] hover:shadow-2xl relative overflow-hidden bg-white/70 dark:bg-gray-800/70 backdrop-blur-lg hover:bg-gradient-to-r hover:from-cyan-500 hover:to-blue-600 border border-white/30 dark:border-gray-700/30 hover:border-transparent animate-fade-in-up" style="animation-delay: 0.6s">
                <div class="absolute inset-0 bg-gradient-to-r from-cyan-500 to-blue-600 opacity-0 group-hover:opacity-100 transition-all duration-500"></div>
                <div class="relative flex items-center w-full">
                    <div class="w-10 h-10 rounded-xl bg-gradient-to-br from-cyan-100 to-cyan-200 dark:from-cyan-900/30 dark:to-cyan-800/30 group-hover:from-white/20 group-hover:to-white/10 flex items-center justify-center mr-4 transition-all duration-500 group-hover:scale-110 shadow-lg">
                        <svg class="w-5 h-5 text-cyan-600 dark:text-cyan-400 group-hover:text-white transition-colors duration-500" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" d="M9 12h6m-6 4h6m2 5H7a2 2 0 01-2-2V5a2 2 0 012-2h5.586a1 1 0 01.707.293l5.414 5.414a1 1 0 01.293.707V19a2 2 0 01-2 2z"></path>
                        </svg>
                    </div>
                    <span class="flex-1 font-semibold transition-colors duration-300"><?= d__('system', 'Library') ?></span>
                    <?php if ($library_counters['new'] > 0): ?>
                        <span class="inline-flex items-center px-3 py-1.5 rounded-full text-xs font-bold bg-gradient-to-r from-red-500 to-pink-500 text-white shadow-lg transform group-hover:scale-110 transition-transform duration-300 animate-pulse-slow">
                            + <?= $tools->formatNumber($library_counters['new']) ?>
                        </span>
                    <?php endif ?>
                </div>
            </a>
        <?php endif ?>

        <!-- Users -->
        <a href="/community/" class="group flex items-center px-4 py-4 text-sm font-semibold rounded-2xl text-gray-700 dark:text-gray-200 hover:text-white transition-all duration-500 transform hover:scale-[1.02] hover:shadow-2xl relative overflow-hidden bg-white/70 dark:bg-gray-800/70 backdrop-blur-lg hover:bg-gradient-to-r hover:from-pink-500 hover:to-rose-600 border border-white/30 dark:border-gray-700/30 hover:border-transparent animate-fade-in-up" style="animation-delay: 0.7s">
            <div class="absolute inset-0 bg-gradient-to-r from-pink-500 to-rose-600 opacity-0 group-hover:opacity-100 transition-all duration-500"></div>
            <div class="relative flex items-center w-full">
                <div class="w-10 h-10 rounded-xl bg-gradient-to-br from-pink-100 to-pink-200 dark:from-pink-900/30 dark:to-pink-800/30 group-hover:from-white/20 group-hover:to-white/10 flex items-center justify-center mr-4 transition-all duration-500 group-hover:scale-110 shadow-lg">
                    <svg class="w-5 h-5 text-pink-600 dark:text-pink-400 group-hover:text-white transition-colors duration-500" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" d="M12 4.354a4 4 0 110 5.292M15 21H3v-1a6 6 0 0112 0v1zm0 0h6v-1a6 6 0 00-9-5.197m13.5-9a2.5 2.5 0 11-5 0 2.5 2.5 0 015 0z"></path>
                    </svg>
                </div>
                <span class="flex-1 font-semibold transition-colors duration-300"><?= d__('system', 'Users') ?></span>
                <?php if ($users_counters['new'] > 0): ?>
                    <span class="inline-flex items-center px-3 py-1.5 rounded-full text-xs font-bold bg-gradient-to-r from-red-500 to-pink-500 text-white shadow-lg transform group-hover:scale-110 transition-transform duration-300 animate-pulse-slow">
                        + <?= $tools->formatNumber($users_counters['new']) ?>
                    </span>
                <?php endif ?>
            </div>
        </a>

        <!-- Photo Albums -->
        <a href="/album/" class="group flex items-center px-4 py-4 text-sm font-semibold rounded-2xl text-gray-700 dark:text-gray-200 hover:text-white transition-all duration-500 transform hover:scale-[1.02] hover:shadow-2xl relative overflow-hidden bg-white/70 dark:bg-gray-800/70 backdrop-blur-lg hover:bg-gradient-to-r hover:from-teal-500 hover:to-green-600 border border-white/30 dark:border-gray-700/30 hover:border-transparent animate-fade-in-up" style="animation-delay: 0.8s">
            <div class="absolute inset-0 bg-gradient-to-r from-teal-500 to-green-600 opacity-0 group-hover:opacity-100 transition-all duration-500"></div>
            <div class="relative flex items-center w-full">
                <div class="w-10 h-10 rounded-xl bg-gradient-to-br from-teal-100 to-teal-200 dark:from-teal-900/30 dark:to-teal-800/30 group-hover:from-white/20 group-hover:to-white/10 flex items-center justify-center mr-4 transition-all duration-500 group-hover:scale-110 shadow-lg">
                    <svg class="w-5 h-5 text-teal-600 dark:text-teal-400 group-hover:text-white transition-colors duration-500" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" d="M4 16l4.586-4.586a2 2 0 012.828 0L16 16m-2-2l1.586-1.586a2 2 0 012.828 0L20 14m-6-6h.01M6 20h12a2 2 0 002-2V6a2 2 0 00-2-2H6a2 2 0 00-2 2v12a2 2 0 002 2z"></path>
                    </svg>
                </div>
                <span class="flex-1 font-semibold transition-colors duration-300"><?= d__('system', 'Photo Albums') ?></span>
                <?php if ($album_counters['new'] > 0): ?>
                    <span class="inline-flex items-center px-3 py-1.5 rounded-full text-xs font-bold bg-gradient-to-r from-red-500 to-pink-500 text-white shadow-lg transform group-hover:scale-110 transition-transform duration-300 animate-pulse-slow">
                        + <?= $tools->formatNumber($album_counters['new']) ?>
                    </span>
                <?php endif ?>
            </div>
        </a>

        <!-- Information, FAQ -->
        <a href="/help/" class="group flex items-center px-4 py-4 text-sm font-semibold rounded-2xl text-gray-700 dark:text-gray-200 hover:text-white transition-all duration-500 transform hover:scale-[1.02] hover:shadow-2xl relative overflow-hidden bg-white/70 dark:bg-gray-800/70 backdrop-blur-lg hover:bg-gradient-to-r hover:from-gray-500 hover:to-gray-700 border border-white/30 dark:border-gray-700/30 hover:border-transparent animate-fade-in-up" style="animation-delay: 0.9s">
            <div class="absolute inset-0 bg-gradient-to-r from-gray-500 to-gray-700 opacity-0 group-hover:opacity-100 transition-all duration-500"></div>
            <div class="relative flex items-center w-full">
                <div class="w-10 h-10 rounded-xl bg-gradient-to-br from-gray-100 to-gray-200 dark:from-gray-900/30 dark:to-gray-800/30 group-hover:from-white/20 group-hover:to-white/10 flex items-center justify-center mr-4 transition-all duration-500 group-hover:scale-110 shadow-lg">
                    <svg class="w-5 h-5 text-gray-600 dark:text-gray-400 group-hover:text-white transition-colors duration-500" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" d="M13 16h-1v-4h-1m1-4h.01M21 12a9 9 0 11-18 0 9 9 0 0118 0z"></path>
                    </svg>
                </div>
                <span class="flex-1 font-semibold transition-colors duration-300"><?= d__('system', 'Information, FAQ') ?></span>
            </div>
        </a>

        <!-- Admin Section -->
        <?php if ($user->rights >= 1): ?>
            <!-- Separator -->
            <div class="relative my-8 animate-fade-in-up" style="animation-delay: 1.0s">
                <div class="absolute inset-0 flex items-center" aria-hidden="true">
                    <div class="w-full border-t border-gradient-to-r from-purple-300/50 to-pink-300/50"></div>
                </div>
                <div class="relative flex justify-center">
                    <span class="px-4 py-2 bg-gradient-to-r from-purple-500/10 to-pink-500/10 backdrop-blur-lg text-sm font-bold text-purple-700 dark:text-purple-300 rounded-2xl border border-purple-200/50 dark:border-purple-700/50 shadow-lg">
                        <i class="fas fa-shield-alt mr-2"></i><?= d__('system', 'Administration') ?>
                    </span>
                </div>
            </div>

            <!-- Admin Panel -->
            <?php if ($user->rights >= 7): ?>
                <a href="/admin/" class="group flex items-center px-4 py-4 text-sm font-semibold rounded-2xl text-white transition-all duration-500 transform hover:scale-[1.02] hover:shadow-2xl relative overflow-hidden bg-gradient-to-r from-red-500 to-orange-500 border border-red-400/50 shadow-lg animate-fade-in-up hover:from-red-600 hover:to-orange-600" style="animation-delay: 1.1s">
                    <div class="absolute inset-0 bg-gradient-to-r from-red-600 to-orange-600 opacity-0 group-hover:opacity-100 transition-all duration-500"></div>
                    <div class="relative flex items-center w-full">
                        <div class="w-10 h-10 rounded-xl bg-white/20 backdrop-blur-sm flex items-center justify-center mr-4 transition-all duration-500 group-hover:scale-110 group-hover:rotate-12 shadow-lg">
                            <svg class="w-5 h-5 text-white" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" 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>
                                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" d="M15 12a3 3 0 11-6 0 3 3 0 016 0z"></path>
                            </svg>
                        </div>
                        <span class="flex-1 font-bold"><?= d__('system', 'Admin Panel') ?></span>
                        <div class="w-8 h-8 rounded-full bg-white/20 backdrop-blur-sm flex items-center justify-center transition-all duration-500 group-hover:scale-110 group-hover:bg-white/30">
                            <svg class="w-4 h-4 text-white transform group-hover:translate-x-1 transition-transform duration-300" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 5l7 7-7 7"></path>
                            </svg>
                        </div>
                    </div>
                </a>
            <?php endif ?>

            <!-- Admin Chat -->
            <a href="/guestbook/ga?do=set" class="group flex items-center px-4 py-4 text-sm font-semibold rounded-2xl text-white transition-all duration-500 transform hover:scale-[1.02] hover:shadow-2xl relative overflow-hidden bg-gradient-to-r from-amber-500 to-yellow-500 border border-amber-400/50 shadow-lg animate-fade-in-up hover:from-amber-600 hover:to-yellow-600" style="animation-delay: 1.2s">
                <div class="absolute inset-0 bg-gradient-to-r from-amber-600 to-yellow-600 opacity-0 group-hover:opacity-100 transition-all duration-500"></div>
                <div class="relative flex items-center w-full">
                    <div class="w-10 h-10 rounded-xl bg-white/20 backdrop-blur-sm flex items-center justify-center mr-4 transition-all duration-500 group-hover:scale-110 group-hover:rotate-12 shadow-lg">
                        <svg class="w-5 h-5 text-white" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" d="M8 10h.01M12 10h.01M16 10h.01M9 16H5a2 2 0 01-2-2V6a2 2 0 012-2h14a2 2 0 012 2v8a2 2 0 01-2 2h-5l-5 5v-5z"></path>
                        </svg>
                    </div>
                    <span class="flex-1 font-bold"><?= d__('system', 'Admin Chat') ?></span>
                    <?php if ($guestbook_counters['admin_club'] > 0): ?>
                        <span class="inline-flex items-center px-3 py-1.5 rounded-full text-xs font-bold bg-white/30 backdrop-blur-sm text-amber-900 shadow-lg transform group-hover:scale-110 transition-transform duration-300 animate-pulse-slow">
                            <?= $tools->formatNumber($guestbook_counters['admin_club']) ?>
                        </span>
                    <?php endif ?>
                </div>
            </a>
        <?php endif ?>
    </nav>
</div>

<!-- Footer Section -->
<div class="border-t border-gradient-to-r from-purple-300/30 to-pink-300/30 pt-6 px-4 space-y-6">
    <!-- Ads After Menu -->
    <?php if (! empty($ads_array['after_menu'])): ?>
        <div class="space-y-3 animate-fade-in-up" style="animation-delay: 1.3s">
            <?php foreach ($ads_array['after_menu'] as $item): ?>
                <div class="bg-gradient-to-r from-amber-500/10 to-yellow-500/10 backdrop-blur-lg p-4 rounded-2xl border border-amber-200/50 shadow-lg hover:shadow-xl transition-all duration-500 hover:scale-[1.02] group relative overflow-hidden">
                    <div class="absolute inset-0 bg-gradient-to-r from-amber-500/5 to-yellow-500/5 opacity-0 group-hover:opacity-100 transition-opacity duration-500"></div>
                    <div class="relative">
                        <?= $item ?>
                    </div>
                </div>
            <?php endforeach; ?>
        </div>
    <?php endif; ?>

    <!-- Online Counter -->
    <div class="animate-fade-in-up" style="animation-delay: 1.4s">
        <a href="/online/" class="group flex items-center text-sm font-semibold text-gray-700 dark:text-gray-200 hover:text-blue-600 dark:hover:text-blue-400 transition-all duration-500 transform hover:scale-105 hover-lift">
            <div class="relative mr-3">
                <div class="w-4 h-4 bg-green-500 rounded-full animate-ping absolute -top-1 -right-1"></div>
                <div class="w-4 h-4 bg-gradient-to-r from-green-500 to-emerald-500 rounded-full relative shadow-lg"></div>
            </div>
            <span class="font-bold bg-gradient-to-r from-gray-700 to-gray-900 dark:from-gray-200 dark:to-gray-400 bg-clip-text text-transparent group-hover:from-blue-600 group-hover:to-purple-600 transition-all duration-500">
                <?= $container->get('counters')->online() ?> <?= d__('system', 'online') ?>
            </span>
            <svg class="w-4 h-4 ml-2 text-gray-400 group-hover:text-blue-500 transform group-hover:translate-x-1 transition-all duration-300" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 5l7 7-7 7"></path>
            </svg>
        </a>
    </div>

    <!-- Language Selector -->
    <?php if (count($config['lng_list']) > 1): ?>
        <div class="animate-fade-in-up" style="animation-delay: 1.5s">
            <button class="group flex items-center text-sm font-semibold text-gray-700 dark:text-gray-200 hover:text-purple-600 dark:hover:text-purple-400 transition-all duration-500 transform hover:scale-105" data-url="/language/" data-toggle="modal" data-target=".ajax_modal">
                <div class="w-8 h-6 rounded-lg border-2 border-gray-300 dark:border-gray-600 overflow-hidden shadow-lg mr-3 transition-all duration-500 group-hover:border-purple-500 group-hover:scale-110">
                    <img class="w-full h-full object-cover" src="<?= $this->asset('images/flags/' . strtolower($locale) . '.svg') ?>" alt="<?= $locale ?>">
                </div>
                <span class="font-bold bg-gradient-to-r from-gray-700 to-gray-900 dark:from-gray-200 dark:to-gray-400 bg-clip-text text-transparent group-hover:from-purple-600 group-hover:to-pink-600 transition-all duration-500">
                    <?= $config['lng_list'][$locale]['name'] ?>
                </span>
                <svg class="w-4 h-4 ml-2 text-gray-400 group-hover:text-purple-500 transform transition-transform duration-300 group-hover:rotate-180" 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"></path>
                </svg>
            </button>
        </div>
    <?php endif ?>
</div>

<style>
@keyframes fadeInUp {
    from {
        opacity: 0;
        transform: translateY(20px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

@keyframes pulse-slow {
    0%, 100% {
        opacity: 1;
        transform: scale(1);
    }
    50% {
        opacity: 0.8;
        transform: scale(1.05);
    }
}

.animate-fade-in-up {
    animation: fadeInUp 0.6s ease-out forwards;
    opacity: 0;
}

.animate-pulse-slow {
    animation: pulse-slow 2s ease-in-out infinite;
}

.hover-lift {
    transition: all 0.3s ease;
}

.hover-lift:hover {
    transform: translateY(-2px);
}

/* Спеціальні стилі для скроллбару */
nav::-webkit-scrollbar {
    width: 6px;
}

nav::-webkit-scrollbar-track {
    background: rgba(255, 255, 255, 0.1);
    border-radius: 3px;
}

nav::-webkit-scrollbar-thumb {
    background: linear-gradient(to bottom, #8b5cf6, #ec4899);
    border-radius: 3px;
}

nav::-webkit-scrollbar-thumb:hover {
    background: linear-gradient(to bottom, #7c3aed, #db2777);
}

/* Анімація для градієнтів */
.gradient-shift {
    background-size: 200% 200%;
    animation: gradientShift 3s ease infinite;
}

@keyframes gradientShift {
    0% { background-position: 0% 50%; }
    50% { background-position: 100% 50%; }
    100% { background-position: 0% 50%; }
}

/* Ефекти для темної теми */
@media (prefers-color-scheme: dark) {
    .backdrop-blur-lg {
        backdrop-filter: blur(16px);
    }
}

/* Адаптивність */
@media (max-width: 768px) {
    .animate-fade-in-up {
        animation-duration: 0.4s;
    }
}
</style>