{{-- Header demo-medical — adaptado de Porto medical (Okler) con componentes BewPro.
     Top-bar: dirección + WhatsApp + email
     Main row: logo + nav + CTA "Pedir turno" --}}
<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">

		{{-- ── 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', 'Pedir turno') }}</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 "Pedir turno" — 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>