<template>
    <!-- 导航栏 -->
    <header class="bg-white shadow-md sticky top-0 z-50">
        <div class="max-w-6xl mx-auto px-4 py-3 flex justify-between items-center">
            <div>
                <img class="inline w-16" src="/Logo.svg" alt="YPHS Alumni">
                <h1 class="inline text-xl font-bold text-gray-900">
                    <a href="/" class="ml-4 hover:text-secondary">永平中学校友会</a>
                </h1>
            </div>
            <nav class="space-x-6 hidden md:flex items-center">
                <a href="#news" class="hover:text-secondary">新闻</a>
                <a href="#events" class="hover:text-secondary">活动</a>
                <a href="#donate" class="hover:text-secondary">捐赠</a>
                <a href="#about" class="hover:text-secondary">关于</a>
                <a href="/join-us"
                    class="inline-flex items-center gap-2 bg-secondary text-white px-4 py-2 rounded-xl shadow hover:opacity-90">
                    加入
                    <Icon name="mdi:account-plus" class="w-5 h-5" />
                </a>

            </nav>
        </div>
    </header>
</template>