@php($brandLogo = ($homeTheme ?? 'blue') === 'red' ? 'img/mycode-logo-red.png' : 'img/mycode-logo-blue.png')

<header class="mc-topbar" role="banner" data-mc-topbar>
    <div class="mc-wrap mc-topbar__inner">
        <a class="mc-brand" href="{{ route('index') }}" aria-label="MyCode">
            <img src="{{ asset($brandLogo) }}" alt="MyCode">
        </a>

        <nav class="mc-nav-primary" aria-label="Primary">
            <a href="#about">{{ __('main_messages.nav-about') }}</a>
            <a href="#services">{{ __('main_messages.nav-service') }}</a>
            <a href="#feature">{{ __('main_messages.nav-feature') }}</a>
            <a href="#mission">{{ __('main_messages.nav-purpose') }}</a>
            <a href="#services-link">{{ __('main_messages.nav-products') }}</a>
        </nav>

        <div class="mc-nav-secondary" aria-label="Sections">
            <div class="mc-lang" aria-label="Language">
                <a href="{{ route('locale.switch', ['locale' => 'es']) }}" class="{{ app()->getLocale() === 'es' ? 'is-active' : '' }}">ES</a>
                <a href="{{ route('locale.switch', ['locale' => 'en']) }}" class="{{ app()->getLocale() === 'en' ? 'is-active' : '' }}">EN</a>
            </div>
            <button type="button" class="mc-btn mc-btn--primary" data-mc-download>
                {{ __('main_messages.fea-button') }}
            </button>
        </div>

        <button type="button" class="mc-burger" aria-label="Toggle menu" data-mc-toggle="mobile-menu" aria-expanded="false">
            <span class="material-symbols-outlined">menu</span>
        </button>
    </div>

    <div class="mc-mobile-menu" id="mc-mobile-menu" hidden>
        <a href="#about">{{ __('main_messages.nav-about') }}</a>
        <a href="#services">{{ __('main_messages.nav-service') }}</a>
        <a href="#feature">{{ __('main_messages.nav-feature') }}</a>
        <a href="#mission">{{ __('main_messages.nav-purpose') }}</a>
        <a href="#services-link">{{ __('main_messages.nav-products') }}</a>
        <div class="mc-mobile-menu__locale" aria-label="Language">
            <a href="{{ route('locale.switch', ['locale' => 'es']) }}" class="{{ app()->getLocale() === 'es' ? 'is-active' : '' }}">ES</a>
            <a href="{{ route('locale.switch', ['locale' => 'en']) }}" class="{{ app()->getLocale() === 'en' ? 'is-active' : '' }}">EN</a>
        </div>
    </div>
</header>