{#
    Homepage Navigation Partial
    PRD: Feature 10 - Updated Navigation (lines 222-227)
    SDD: PRD Mapping (lines 368-374)

    Nav items: Features (#features), Team+ (/team-plus), Pricing (#pricing), Contact (#contact), Login
    Mobile hamburger menu with aria-expanded for accessibility
#}
<nav class="modern-nav" id="mainNav" role="navigation" aria-label="Main navigation">
    <div class="modern-container">
        <div class="modern-nav__inner">
            <a href="/" class="modern-nav__logo" aria-label="BuyerKiosk Home">
                <img src="/images/front/logos/logo_dark.png" alt="BuyerKiosk" width="180" height="40">
            </a>

            <button
                class="modern-nav__toggle"
                id="navToggle"
                aria-label="Toggle navigation menu"
                aria-expanded="false"
                aria-controls="navMenu"
            >
                <span></span>
                <span></span>
                <span></span>
            </button>

            <ul class="modern-nav__menu" id="navMenu" role="menubar">
                <li role="none"><a href="#features" class="modern-nav__link" role="menuitem">Features</a></li>
                <li role="none"><a href="/team-plus" class="modern-nav__link modern-nav__link--highlight" role="menuitem">Team+</a></li>
                <li role="none"><a href="#pricing" class="modern-nav__link" role="menuitem">Pricing</a></li>
                <li role="none"><a href="#contact" class="modern-nav__link" role="menuitem">Contact</a></li>
                <li role="none"><a href="/login" class="modern-nav__link modern-nav__cta" role="menuitem">Login</a></li>
            </ul>
        </div>
    </div>
</nav>

<script>
// Mobile nav toggle - vanilla JS for performance
(function() {
    const toggle = document.getElementById('navToggle');
    const menu = document.getElementById('navMenu');

    if (toggle && menu) {
        toggle.addEventListener('click', function() {
            const isExpanded = toggle.getAttribute('aria-expanded') === 'true';
            toggle.setAttribute('aria-expanded', !isExpanded);
            menu.classList.toggle('modern-nav__menu--open');
            toggle.classList.toggle('modern-nav__toggle--active');
        });

        // Close menu when clicking a link (mobile)
        menu.querySelectorAll('.modern-nav__link').forEach(function(link) {
            link.addEventListener('click', function() {
                if (window.innerWidth < 768) {
                    toggle.setAttribute('aria-expanded', 'false');
                    menu.classList.remove('modern-nav__menu--open');
                    toggle.classList.remove('modern-nav__toggle--active');
                }
            });
        });
    }
})();
</script>