@rendermode InteractiveServer

<nav class="frc-nav">
    <a href="#top" class="frc-logo">
        <img src="images/logo.svg" alt="FRC" class="frc-logo-img" />
    </a>

    <div class="frc-nav-links" aria-label="Main">
        <a href="#top">Home</a>
        <a href="#aanpak">Aanpak</a>
        <a href="#expertise">Expertise</a>
        <a href="#over-ons">Over Ons</a>
        <a href="#insights">Insights</a>
        <a href="/contact">Contact</a>
    </div>

    <a href="/contact" class="frc-outline-btn frc-nav-cta">Plan een kennismaking</a>

    <button class="frc-hamburger" aria-label="Menu" aria-expanded="@_menuOpen" @onclick="ToggleMenu">
        <span></span>
        <span></span>
        <span></span>
    </button>
</nav>

@if (_menuOpen)
{
    <div class="frc-mobile-menu">
        <a href="#top"        @onclick="CloseMenu">Home</a>
        <a href="#aanpak"     @onclick="CloseMenu">Aanpak</a>
        <a href="#expertise"  @onclick="CloseMenu">Expertise</a>
        <a href="#over-ons"   @onclick="CloseMenu">Over Ons</a>
        <a href="#insights"   @onclick="CloseMenu">Insights</a>
        <a href="/contact"    @onclick="CloseMenu">Contact</a>
        <a href="/contact" class="frc-outline-btn" @onclick="CloseMenu">Plan een kennismaking</a>
    </div>
}

@code {
    private bool _menuOpen;

    private void ToggleMenu() => _menuOpen = !_menuOpen;
    private void CloseMenu()  => _menuOpen = false;
}
