@inherits LayoutComponentBase
@inject IStringLocalizer<MainLayout> L

@* EN: Theme providers moved to App.razor (FRONT-W-06) — DefaultDark is the ThemeStateService default. *@
@* VI: Theme providers đã chuyển về App.razor (FRONT-W-06) — DefaultDark là mặc định của ThemeStateService. *@

<!-- aPOS Navigation Bar -->
<nav class="tpos-navbar">
    <div class="tpos-navbar-inner">
        <!-- Logo -->
        <a href="/" class="tpos-logo">@L["AppName"]</a>

        <!-- Desktop nav links -->
        <div class="tpos-nav-links">
            <a href="#features" class="tpos-nav-link">@L["Nav_Features"]</a>
            <a href="#pricing" class="tpos-nav-link">@L["Nav_Pricing"]</a>
            <a href="/home#contact" class="tpos-nav-link">@L["Nav_Contact"]</a>

            <!-- Language Switcher -->
            <LanguageSwitcher />

            <a href="/login" class="tpos-nav-link">@L["Nav_Login"]</a>
            <a href="/register" class="btn-accent">@L["Nav_FreeTrial"]</a>
        </div>

        <!-- Mobile hamburger button -->
        <button class="tpos-hamburger @(_mobileMenuOpen ? "active" : "")"
                @onclick="ToggleMobileMenu"
                aria-label="Toggle menu">
            <span></span>
            <span></span>
            <span></span>
        </button>
    </div>
</nav>

<!-- Mobile nav overlay -->
@if (_mobileMenuOpen)
{
    <div class="tpos-mobile-overlay" @onclick="CloseMobileMenu"></div>
    <div class="tpos-mobile-drawer">
        <a href="#features" class="tpos-mobile-link" @onclick="CloseMobileMenu">@L["Nav_Features"]</a>
        <a href="#pricing" class="tpos-mobile-link" @onclick="CloseMobileMenu">@L["Nav_Pricing"]</a>
        <a href="/home#contact" class="tpos-mobile-link" @onclick="CloseMobileMenu">@L["Nav_Contact"]</a>
        <a href="/login" class="tpos-mobile-link" @onclick="CloseMobileMenu">@L["Nav_Login"]</a>
        <div class="tpos-mobile-actions">
            <LanguageSwitcher />
            <a href="/register" class="btn-accent btn-accent-lg" style="width:100%; text-align:center;">@L["Nav_FreeTrial"]</a>
        </div>
    </div>
}

<!-- Main Content -->
<MudLayout>
    <MudMainContent Style="padding-top: 0;">
        @Body
    </MudMainContent>
</MudLayout>

@code {
    private bool _mobileMenuOpen = false;

    private void ToggleMobileMenu() => _mobileMenuOpen = !_mobileMenuOpen;
    private void CloseMobileMenu() => _mobileMenuOpen = false;
}
