@inherits LayoutComponentBase
@inject IStringLocalizer<MainLayout> L

<MudThemeProvider @bind-IsDarkMode="@_isDarkMode" Theme="_theme" />
<MudPopoverProvider />
<MudDialogProvider />
<MudSnackbarProvider />

<MudLayout>
    <MudAppBar Elevation="0" Fixed="true" Color="Color.Transparent">
        <!-- EN: App Header — Logo + Nav Links + Order Now CTA -->
        <!-- VI: Header — Logo + Liên kết + Nút Order Now -->
        <div class="header-logo">
            <img src="/images/Logo-Eggymon-Kitchen.png" alt="EggyMon Kitchen" />
            <span class="header-logo-text">EggyMon Kitchen</span>
        </div>
        
        <MudSpacer />
        
        <!-- EN: Navigation Links / VI: Liên kết điều hướng -->
        <nav class="header-nav">
            <a href="#menu">@L["Nav_Menu"]</a>
            <a href="#about">@L["Nav_About"]</a>
            <a href="#locations">@L["Nav_Locations"]</a>
            <a href="#contact">@L["Nav_Contact"]</a>
        </nav>
        
        <MudSpacer />
        
        <!-- EN: CTA Area / VI: Khu vực CTA -->
        <div class="header-cta">
            <LanguageSwitcher />
            <a href="#menu" class="btn-order-now">@L["Nav_OrderNow"]</a>
        </div>
    </MudAppBar>

    <MudMainContent>
        @Body
    </MudMainContent>
</MudLayout>

@code {
    [Inject] private IJSRuntime JSRuntime { get; set; } = default!;
    
    private bool _isDarkMode = false;

    private MudTheme _theme = new()
    {
        PaletteLight = new PaletteLight()
        {
            Primary = "#6B4423",
            PrimaryContrastText = "#ffffff",
            AppbarBackground = "#FFFFFF",
            AppbarText = "#2C2C2C",
            Background = "#FAF8F4",
            Surface = "#ffffff",
            TextPrimary = "#2C2C2C",
            ActionDefault = "#2C2C2C",
            LinesDefault = "#eeeeee"
        },
    };
}
