{{-- Header específico para demo-construction-2 - DINÁMICO CON ESTRUCTURA DEL DEMO --}}
<header id="header" class="header-effect-shrink bg-color-tertiary custom-header" data-plugin-options="{'stickyEnabled': true, 'stickyEffect': 'shrink', 'stickyEnableOnBoxed': true, 'stickyEnableOnMobile': false, 'stickyChangeLogo': true, 'stickyStartAt': 100, 'stickyHeaderContainerHeight': 83}">
	<div class="header-body border-0 box-shadow-none">
		<div class="header-top header-top-default bg-color-white border-bottom-0">
			<div class="container-fluid px-lg-4">
				<div class="header-row py-2">
					<div class="header-column justify-content-start">
						<div class="header-row">
							<nav class="header-nav-top">
								<ul class="nav nav-pills text-uppercase text-2">
									<li class="nav-item nav-item-anim-icon">
										<a class="px-0" href="mailto:{{ config('site.contact.email') }}"><i class="far fa-envelope text-4 top-1 left-0"></i> {{ config('site.contact.email') }}</a>
									</li>
									@if(config('site.contact.hours'))
									<li class="nav-item nav-item-anim-icon ps-md-4">
										<span class="d-none d-md-block">
											<i class="far fa-clock p-relative top-2 text-4"></i><span> {{ config('site.contact.hours') }}</span>
										</span>
									</li>
									@endif
								</ul>
							</nav>
						</div>
					</div>

					<div class="header-column justify-content-end">
						<div class="header-row">
							<ul class="header-social-icons social-icons d-none d-sm-block social-icons-clean">
								@foreach(config('site.social_media') as $key => $social)
									@if($social['active'])
										<li class="social-icons-{{ $key }}">
											<a href="{{ $social['url'] }}" target="_blank" title="{{ $social['title'] }}">
												<i class="{{ $social['icon'] }}"></i>
											</a>
										</li>
									@endif
								@endforeach
							</ul>
						</div>
					</div>
				</div>
			</div>
		</div>
		<div class="header-container container-fluid bg-secondary px-0">
			<div class="header-row">
				<div class="header-column bg-color-quaternary flex-grow-0 px-3 px-lg-5">
					<div class="header-row">
						<div class="header-logo">
							<a href="{{ front_homepage_url() }}">
								<img alt="{{ config('site.assets.main_logo_alt') }}" class="img-logo" width="144" src="{{ site_asset_url('main_logo') }}">
							</a>
						</div>
					</div>
				</div>
				<div class="header-column justify-content-end justify-content-lg-start px-lg-5">
					<div class="header-row pe-3">
						<div class="header-nav header-nav-links order-2 order-lg-1 header-nav-light-text flex-grow-0 justify-content-start">
							<div class="header-nav-main header-nav-main-square header-nav-main-effect-2 header-nav-main-sub-effect-1">
								<nav class="collapse">
									<ul class="nav nav-pills" id="mainNav">
										@php
											$navigation = get_dynamic_navigation('header');
										@endphp
										@foreach($navigation as $key => $item)
											@if($item['active'])
												@if(isset($item['dropdown']) && $item['dropdown'])
													<li class="dropdown {{ is_nav_item_active($item['url']) ? 'active' : '' }}">
														<a class="dropdown-item {{ is_nav_item_active($item['url']) ? 'active' : '' }}" href="{{ $item['url'] }}">
															{{ $item['title'] }}
														</a>
														<ul class="dropdown-menu">
															@php
																$hasProjectCategories = ($key === 'projects' && is_module_active('projects') && isset($projectCategories) && $projectCategories && $projectCategories->count() > 0);
																$hasHeaderServices = ($key === 'services' && is_module_active('services') && isset($headerServices) && $headerServices && $headerServices->count() > 0);
																$hasMultipleServiceCats = ($key === 'services' && isset($serviceCategories) && $serviceCategories && $serviceCategories->count() > 1);
															@endphp
															@if($hasProjectCategories)
																@foreach($projectCategories as $category)
																	<li>
																		<a class="dropdown-item" href="{{ route('frontend.projects.category', $category->slug) }}">
																			{{ $category->name }}
																		</a>
																	</li>
																@endforeach
																<li class="d-none d-md-block"><hr class="dropdown-divider"></li>
															@endif
															@if($hasHeaderServices)
																@if($hasMultipleServiceCats)
																	{{-- Múltiples categorías: agrupar servicios --}}
																	@foreach($serviceCategories as $cat)
																		@php $catServices = $headerServices->where('service_category_id', $cat->id); @endphp
																		@if($catServices->count() > 0)
																			<li><span class="dropdown-item text-uppercase text-2 font-weight-bold opacity-7 pe-none">{{ $cat->name }}</span></li>
																			@foreach($catServices as $svc)
																				<li><a class="dropdown-item" href="{{ route('frontend.services.detail', $svc->slug) }}">{{ $svc->title }}</a></li>
																			@endforeach
																		@endif
																	@endforeach
																@else
																	{{-- 0-1 categoría: listar servicios directamente --}}
																	@foreach($headerServices as $svc)
																		<li><a class="dropdown-item" href="{{ route('frontend.services.detail', $svc->slug) }}">{{ $svc->title }}</a></li>
																	@endforeach
																@endif
																<li class="d-none d-md-block"><hr class="dropdown-divider"></li>
															@endif
															<li class="d-none d-md-block"><a class="dropdown-item" href="{{ $item['url'] }}">{{ __('Ver Todos') }}</a></li>
														</ul>
													</li>
												@else
													<li class="{{ is_nav_item_active($item['url']) ? 'active' : '' }}">
														<a class="dropdown-item {{ is_nav_item_active($item['url']) ? 'active' : '' }}" href="{{ $item['url'] }}">
															{{ $item['title'] }}
														</a>
													</li>
												@endif
											@endif
										@endforeach
									</ul>
								</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>
						{{-- <div class="header-nav-features header-nav-features-light header-nav-features-no-border header-nav-features-lg-show-border order-1 order-lg-2">
							<div class="header-nav-feature header-nav-features-search d-inline-flex">
								<a href="#" class="header-nav-features-toggle text-decoration-none" data-focus="headerSearch" aria-label="Search"><i class="fas fa-search header-nav-top-icon"></i></a>
								<div class="header-nav-features-dropdown" id="headerTopSearchDropdown">
									<form role="search" action="{{ route('frontend.news.search') }}" method="get">
										<div class="simple-search input-group">
											<input class="form-control text-1" id="headerSearch" name="q" type="search" value="" placeholder="{{ __('Search...') }}">
											<button class="btn" type="submit" aria-label="Search">
												<i class="fas fa-search header-nav-top-icon"></i>
											</button>
										</div>
									</form>
								</div>
							</div>
						</div> --}}
					</div>
				</div>
			</div>
			<div class="header-row d-none d-lg-inline-flex justify-content-end">
				<div class="order-1 order-lg-2 pe-4 d-none d-xl-block">
					<div>
						<div class="feature-box feature-box-style-2 align-items-center p-relative top-8 px-2">
							<div class="feature-box-icon">
								<i class="fas fa-mobile-alt text-9 p-relative bottom-8 text-color-light"></i>
							</div>
							<div class="feature-box-info ps-0">
								<p class="text-color-light opacity-8 text-uppercase line-height-1 text-2 pb-0 mb-2">{{ config('site.header.phone_label', __('LLÁMANOS')) }}</p>
								<p class="text-uppercase text-color-light font-weight-black letter-spacing-minus-1 line-height-1 text-5 pb-0">
									<a href="tel:{{ config('site.contact.phone_number', config('site.contact.phone')) }}" class="text-color-light text-color-hover-primary text-decoration-none">{{ config('site.contact.phone') }}</a>
								</p>
							</div>
						</div>
					</div>
				</div>
			</div>
		</div>
	</div>
</header>