{# Top Bar Component - Full Width with Container Content #}
<div class="asocut-topbar-wrapper">
	<div class="container">
		<div class="asocut-topbar-container">
			<div class="asocut-topbar-slogan">
				<i class="bi bi-shield-check"></i>
				Premium Construction Tools - Trusted by Professionals Worldwide
			</div>

			{# Desktop: Actions (Right side) #}
			<div
				class="asocut-topbar-actions asocut-topbar-desktop">
				{# Register Link #}
				<a href="{{ path('frontend.account.register.page') }}" class="asocut-topbar-link">
					<i class="bi bi-person-plus"></i>
					{{ 'account.registerTitle'|trans }}
				</a>

				<span class="asocut-topbar-divider"></span>

				{# Language Switcher #}
				{% block layout_header_top_bar_language %}
					{% sw_include '@Storefront/storefront/layout/header/actions/language-widget.html.twig' %}
				{% endblock %}
			</div>

			{# Mobile: Actions (Language, Search, Menu) #}
			<div
				class="asocut-topbar-actions asocut-topbar-mobile">
				{# Language Switcher #}
				{% block layout_header_top_bar_language_mobile %}
					{% sw_include '@Storefront/storefront/layout/header/actions/language-widget.html.twig' %}
				{% endblock %}

				{# Search Toggle #}
				<button class="asocut-topbar-icon-btn" type="button" data-offcanvas-search-button="true" aria-label="{{ 'Search'|trans }}">
					<i class="bi bi-search"></i>
				</button>

				{# Menu Toggle #}
				<button class="asocut-topbar-icon-btn" type="button" data-offcanvas-menu-button="true" aria-label="{{ 'Menu'|trans }}">
					<i class="bi bi-list"></i>
				</button>
			</div>
		</div>
	</div>
</div>