<template>
    <header class="top-bar">
        <div class="laser-container"></div>
        
        <a href="#" class="logo-container">
            <img src="https://picsum.photos/40/40?random=1" alt="星梦杯Logo" class="logo">
            <span class="logo-text">星梦·祝未来</span>
        </a>
        
        <div class="nav-container">
            <a href="#welcome-block" class="nav-link active" title="首页">
                <i class="fas fa-home"></i>
                <span>首页</span>
            </a>
            
            <div class="social-links">
                <a href="https://bilibili.com" target="_blank" class="social-link bilibili" title="B站">
                    <i class="fab fa-bilibili"></i>
                    <span>B站</span>
                </a>
                <a href="https://mcmod.cn" target="_blank" class="social-link mcmod" title="MCMod">
                    <i class="fas fa-cube"></i>
                    <span>MCMod</span>
                </a>
            </div>
            
            <a href="#faq-section" class="faq-link" title="常见问题">
                <i class="fas fa-question-circle"></i>
                <span>常见问题</span>
            </a>
        </div>
    </header>
</template>

<script>
export default {
    name: 'Header'
}
</script>

<style scoped src="../styles/components/Header.css"></style>