{# Header Business Professional #}
<header id="header" class="header-business-pro {{ config.sticky ? 'header-sticky' : '' }}">
    <div class="header-body-business">
        <div class="container">
            {% set siteName = site.internalName|param(app.request.server.get('REQUEST_URI')) %}
            <div class="header-wrapper">
                <div class="logo-business">
                    <a href="{{ path('home'|route(app.request.server.get('REQUEST_URI')), siteName) }}">
                        {% if site.logo %}
                            <img alt="{{ site.name }}" src="{{ vich_uploader_asset(site, 'logoFile') }}" height="50"/>
                        {% else %}
                            <img alt="{{ site.name }}" src="{{ asset('assets/img/logo_site_default.png') }}" height="50"/>
                        {% endif %}
                    </a>
                    {% if not site.nameInLogo %}<span class="site-name-business">{{ site.name }}</span>{% endif %}
                </div>
                <nav class="nav-business">
                    <ul>
                        {% for pageMenu in site.pages|filter(v => v.displayMenuHeader == true)|sort((a, b) => a.menuHeaderOrder <=> b.menuHeaderOrder) %}
                            {% set param = siteName|merge({'name':pageMenu.nameMenuUrl}) %}
                            <li><a href="{{ path('page'|route(app.request.server.get('REQUEST_URI')), param) }}">{{ pageMenu.nameMenu }}</a></li>
                        {% endfor %}
                    </ul>
                </nav>
            </div>
        </div>
    </div>
</header>

<style>
.header-business-pro { background: #ffffff; border-bottom: 1px solid #e5e5e5; padding: 1.25rem 0; }
.header-wrapper { display: flex; justify-content: space-between; align-items: center; }
.logo-business { display: flex; align-items: center; gap: 1rem; }
.site-name-business { font-size: 1.5rem; font-weight: 700; color: #333; }
.nav-business ul { display: flex; gap: 2.5rem; list-style: none; margin: 0; }
.nav-business a { color: #555; font-weight: 500; text-decoration: none; text-transform: uppercase; font-size: 0.875rem; letter-spacing: 0.5px; }
.nav-business a:hover { color: var(--colorTheme); }
</style>