---
import { navLinks } from '../../data/about/nav-links';
---
<!-- TOP NAVIGATION BAR -->
<header class="sticky top-0 z-50 bg-paper/90 backdrop-blur-md border-b border-border-light transition-all duration-300">
    <div class="max-w-7xl mx-auto px-8 h-24 flex items-center justify-between">
        <!-- Brand Logo / Name -->
        <a href="#" class="flex items-center space-x-3 group">
            <span class="font-serif text-2xl font-bold tracking-tight text-ink group-hover:text-terracotta transition-colors">NHI VÕ</span>
        </a>

        <!-- Center Navigation Links -->
        <nav class="hidden lg:flex items-center space-x-10 text-sm font-semibold tracking-wide uppercase text-ink">
            {navLinks.map((link) => (
                <a href={link.href} class="hover:text-terracotta transition-colors" data-i18n={link.i18nKey}>{link.label}</a>
            ))}
        </nav>

        <!-- Right Actions: CTAs & Language Switcher -->
        <div class="flex items-center space-x-8">
            <!-- CTAs maintained on Navigation Bar -->
            <div class="hidden sm:flex items-center space-x-6">
                <a href="/Nhi-Vo-Resume-v2.pdf" target="_blank" class="text-sm font-semibold text-ink hover:text-terracotta underline underline-offset-4 transition-colors" data-i18n="nav-resume">Tải Hồ Sơ (CV)</a>
                <a href="https://wa.me/84908372168" target="_blank" rel="noopener noreferrer" class="px-6 py-2.5 rounded-full border border-terracotta text-sm font-semibold text-terracotta hover:bg-terracotta hover:text-paper transition-all duration-300 shadow-sm" data-i18n="nav-connect">Kết Nối Ngay</a>
            </div>

            <!-- Language Toggle -->
            <div class="flex items-center border border-border-light rounded-full p-1 bg-paper-alt">
                <button id="lang-en" onclick="setLanguage('en')" class="px-3 py-1 text-xs font-bold rounded-full text-ink-secondary hover:text-ink transition-all">EN</button>
                <button id="lang-vi" onclick="setLanguage('vi')" class="px-3 py-1 text-xs font-bold rounded-full bg-terracotta text-paper transition-all">VI</button>
            </div>

            <!-- Mobile Menu Button -->
            <button id="mobile-menu-btn" class="lg:hidden p-2 text-ink hover:text-terracotta focus:outline-none" aria-label="Toggle Menu">
                <svg 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"></path></svg>
            </button>
        </div>
    </div>

    <!-- Mobile Navigation Drawer -->
    <div id="mobile-menu" class="hidden absolute top-full left-0 right-0 z-50 lg:hidden bg-paper/95 backdrop-blur-md border-b border-border-light px-8 py-6 space-y-6 shadow-xl">
        {navLinks.map((link) => (
            <a href={link.href} class="block text-sm font-semibold tracking-wide uppercase text-ink hover:text-terracotta transition-colors" data-i18n={link.i18nKey}>{link.label}</a>
        ))}
        <div class="pt-4 border-t border-border-light flex flex-col items-center space-y-4">
            <a href="/Nhi-Vo-Resume-v2.pdf" target="_blank" class="text-sm font-semibold text-ink hover:text-terracotta underline underline-offset-4 transition-colors" data-i18n="nav-resume">Tải Hồ Sơ (CV)</a>
            <a href="https://wa.me/84908372168" target="_blank" rel="noopener noreferrer" class="w-full max-w-[240px] text-center px-6 py-3 rounded-full bg-terracotta text-paper text-sm font-semibold hover:bg-ink hover:text-paper transition-all duration-300 shadow-sm" data-i18n="nav-connect">Kết Nối Ngay</a>
        </div>
    </div>
</header>