{{-- Header demo-supplements-shop — shop-style con trust bar superior + cart icon.
     Estructura:
       1. Trust bar (shop-trust-bar): Envío gratis + ANMAT + WhatsApp + Asesoramiento
       2. Top-bar: dirección + WhatsApp + email (heredado, con micro-ajustes)
       3. Main row: logo + nav + cart icon + CTA "Hacer pedido" --}}
<header id="header" class="header-effect-shrink @yield('header_classes')" data-plugin-options="{'stickyEnabled': true, 'stickyEffect': 'shrink', 'stickyEnableOnBoxed': true, 'stickyEnableOnMobile': false, 'stickyChangeLogo': true, 'stickyStartAt': 120, 'stickyHeaderContainerHeight': 70}">
	<div class="header-body border-top-0">

		{{-- ── 0. TRUST BAR superior (shop-style) ──
		     Marquesina con beneficios clave. Hidden en mobile (d-none d-md-block)
		     porque sería abusivo de scroll vertical. --}}
		<div class="shop-trust-bar d-none d-md-block py-2" style="background: var(--quaternary, #1A2333); color: rgba(255,255,255,0.92); font-size: 0.78rem; letter-spacing: 0.4px;">
			<div class="container">
				<div class="d-flex justify-content-center justify-content-md-between align-items-center flex-wrap gap-3">
					<span><i class="fas fa-truck me-1"></i> {{ config('site.header.trust_shipping', 'Envíos a todo el país') }}</span>
					<span><i class="fas fa-check-circle me-1"></i> {{ config('site.header.trust_certified', 'Productos certificados ANMAT') }}</span>
					@if(trim((string) config('site.contact.phone', '')) !== '')
						@php $waPhone = preg_replace('/[^0-9+]/', '', config('site.contact.phone')); @endphp
						<a href="https://wa.me/{{ ltrim($waPhone, '+') }}" target="_blank" rel="noopener" class="text-color-light text-decoration-none" style="opacity:0.92;">
							<i class="fab fa-whatsapp me-1"></i> {{ config('site.header.trust_whatsapp', 'WhatsApp ' . config('site.contact.phone')) }}
						</a>
					@endif
					<span><i class="fas fa-comments me-1"></i> {{ config('site.header.trust_advice', 'Asesoramiento personalizado') }}</span>
				</div>
			</div>
		</div>

		{{-- ── 1. Top bar: dirección + teléfono + email ─────────── --}}
		<div class="header-top header-top-default header-top-borders border-bottom-0">
			<div class="container h-100">
				<div class="header-row h-100">
					<div class="header-column justify-content-end">
						<div class="header-row">
							<nav class="header-nav-top">
								<ul class="nav nav-pills">
									@if(trim((string) config('site.contact.address', '')) !== '')
									<li class="nav-item nav-item-borders py-2 d-none d-sm-inline-flex">
										<span class="ps-0">
											<i class="far fa-dot-circle text-4 text-color-primary" style="top: 1px;"></i>
											{{ config('site.contact.address') }}
										</span>
									</li>
									@endif

									@if(trim((string) config('site.contact.phone', '')) !== '')
									<li class="nav-item nav-item-borders py-2">
										<a href="tel:{{ preg_replace('/[^0-9+]/', '', config('site.contact.phone')) }}" class="text-decoration-none">
											<i class="fab fa-whatsapp text-4 text-color-primary" style="top: 0;"></i>
											{{ config('site.contact.phone') }}
										</a>
									</li>
									@endif

									@if(trim((string) config('site.contact.email', '')) !== '')
									<li class="nav-item nav-item-borders py-2 pe-1 d-none d-md-inline-flex">
										<a href="mailto:{{ config('site.contact.email') }}" class="text-decoration-none">
											<i class="far fa-envelope text-4 text-color-primary" style="top: 1px;"></i>
											{{ config('site.contact.email') }}
										</a>
									</li>
									@endif
								</ul>
							</nav>
						</div>
					</div>
				</div>
			</div>
		</div>

		{{-- ── Main row: logo + nav + CTA ───────────────────── --}}
		<div class="header-container container">
			<div class="header-row">
				<div class="header-column">
					<div class="header-row">
						<div class="header-logo">
							<a href="{{ front_homepage_url() }}">
								<img alt="{{ config('site.assets.main_logo_alt', config('site.name')) }}" src="{{ site_asset_url('main_logo') }}">
							</a>
						</div>
					</div>
				</div>
				<div class="header-column justify-content-end">
					<div class="header-row">
						<div class="header-nav order-2 order-lg-1">
							<div class="header-nav-main header-nav-main-square header-nav-main-effect-1 header-nav-main-sub-effect-1">
								<nav class="collapse">
									<ul class="nav nav-pills" id="mainNav">
										<x-header-nav :dropdowns="true" />
									</ul>
									@if(config('site.header.cta_button.active'))
									<div class="d-block d-lg-none mt-3 pt-3 border-top border-color-grey">
										<a href="{{ config('site.header.cta_button.url', '/contact') }}"
										   target="{{ config('site.header.cta_button.target', '_self') }}"
										   class="btn btn-primary custom-button font-weight-bold w-100 d-flex align-items-center justify-content-center py-3">
											<span>{{ config('site.header.cta_button.title', 'Hacer pedido') }}</span>
										</a>
									</div>
									@endif
								</nav>
							</div>
							<button class="btn header-btn-collapse-nav" data-bs-toggle="collapse" data-bs-target=".header-nav-main nav">
								<i class="fas fa-bars"></i>
							</button>
						</div>

						{{-- Cart icon + badge (solo si módulo products activo) --}}
						@if(is_module_active('products'))
							@php
								$cartCount = app(\App\Modules\Products\Services\CartService::class)->count();
							@endphp
							<div class="d-none d-lg-inline-flex align-items-center order-lg-2 ms-lg-3">
								<a href="{{ route('front.cart.index') }}" class="position-relative text-color-dark text-color-hover-primary text-decoration-none" title="Tu carrito">
									<i class="fas fa-shopping-bag" style="font-size: 1.5rem;"></i>
									@if($cartCount > 0)
										<span class="position-absolute badge rounded-pill bg-primary"
											  style="top: -8px; right: -10px; font-size: 0.65rem; padding: 3px 6px;"
											  id="cart-badge-count">{{ $cartCount }}</span>
									@endif
								</a>
							</div>
						@endif

						{{-- CTA "Hacer pedido" — destacado a la DERECHA del nav, solo desktop.
						     header-nav tiene order-lg-1 → CTA necesita order-lg-2 para ir
						     después en el flex (sin order quedaba en el centro/izq del nav).
						     d-lg-inline-flex evita que sea display:block (full row).
						     ms-lg-3 separa del nav. --}}
						<x-header-cta classes="btn-primary custom-button font-weight-bold ws-nowrap px-4 py-2 ms-lg-3" wrapper-classes="d-none d-lg-inline-flex align-items-center order-lg-2" />
					</div>
				</div>
			</div>
		</div>
	</div>
</header>