<!-- 导航栏组件 -->
<nav class="navbar" role="navigation" aria-label="主导航">
    <div class="container">
        <!-- 品牌标识 -->
        <div class="navbar-brand">
            <a href="/" class="brand-link" data-page="home">
                <div class="brand-logo">
                    <img src="/images/logo.svg" alt="FutureOSS Logo" class="logo-img">
                </div>
                <div class="brand-text">
                    <span class="brand-name">FutureOSS</span>
                    <span class="brand-tagline">一切皆为插件</span>
                </div>
            </a>
            <button class="navbar-toggle" aria-label="切换导航菜单" aria-expanded="false">
                <span class="toggle-icon"></span>
                <span class="toggle-icon"></span>
                <span class="toggle-icon"></span>
            </button>
        </div>

        <!-- 导航菜单 -->
        <div class="navbar-menu">
            <ul class="nav-list">
                <li class="nav-item">
                    <a href="/" class="nav-link <%= page === 'home' ? 'active' : '' %>" data-page="home">
                        <i class="fas fa-home nav-icon"></i>
                        <span class="nav-text">首页</span>
                    </a>
                </li>
                <li class="nav-item">
                    <a href="/features" class="nav-link <%= page === 'features' ? 'active' : '' %>" data-page="features">
                        <i class="fas fa-star nav-icon"></i>
                        <span class="nav-text">特性</span>
                    </a>
                </li>
                <li class="nav-item">
                    <a href="/architecture" class="nav-link <%= page === 'architecture' ? 'active' : '' %>" data-page="architecture">
                        <i class="fas fa-sitemap nav-icon"></i>
                        <span class="nav-text">架构</span>
                    </a>
                </li>
                <li class="nav-item">
                    <a href="/plugins" class="nav-link <%= page === 'plugins' ? 'active' : '' %>" data-page="plugins">
                        <i class="fas fa-puzzle-piece nav-icon"></i>
                        <span class="nav-text">插件</span>
                    </a>
                </li>
            </ul>

            <!-- 外部链接 -->
            <div class="nav-external">
                <a href="https://gitee.com/starlight-apk/future-oss" class="external-link gitee-link" target="_blank" rel="noopener noreferrer">
                    <i class="fab fa-gitee"></i>
                    <span>Gitee</span>
                </a>
                <a href="https://gitee.com/starlight-apk/future-oss/wikis" class="external-link docs-link" target="_blank" rel="noopener noreferrer">
                    <i class="fas fa-book"></i>
                    <span>文档</span>
                </a>
            </div>
        </div>

        <!-- 移动端菜单 -->
        <div class="navbar-mobile">
            <div class="mobile-menu">
                <ul class="mobile-nav-list">
                    <li class="mobile-nav-item">
                        <a href="/" class="mobile-nav-link <%= page === 'home' ? 'active' : '' %>" data-page="home">
                            <i class="fas fa-home"></i>
                            <span>首页</span>
                        </a>
                    </li>
                    <li class="mobile-nav-item">
                        <a href="/features" class="mobile-nav-link <%= page === 'features' ? 'active' : '' %>" data-page="features">
                            <i class="fas fa-star"></i>
                            <span>特性</span>
                        </a>
                    </li>
                    <li class="mobile-nav-item">
                        <a href="/architecture" class="mobile-nav-link <%= page === 'architecture' ? 'active' : '' %>" data-page="architecture">
                            <i class="fas fa-sitemap"></i>
                            <span>架构</span>
                        </a>
                    </li>
                    <li class="mobile-nav-item">
                        <a href="/plugins" class="mobile-nav-link <%= page === 'plugins' ? 'active' : '' %>" data-page="plugins">
                            <i class="fas fa-puzzle-piece"></i>
                            <span>插件</span>
                        </a>
                    </li>
                    <li class="mobile-nav-item">
                        <a href="https://gitee.com/starlight-apk/future-oss" class="mobile-nav-link" target="_blank" rel="noopener noreferrer">
                            <i class="fab fa-gitee"></i>
                            <span>Gitee</span>
                        </a>
                    </li>
                    <li class="mobile-nav-item">
                        <a href="https://gitee.com/starlight-apk/future-oss/wikis" class="mobile-nav-link" target="_blank" rel="noopener noreferrer">
                            <i class="fas fa-book"></i>
                            <span>文档</span>
                        </a>
                    </li>
                </ul>
            </div>
        </div>
    </div>
</nav>