{{-- Dynamic Header Component for Services --}}
@php
    // Get active demo
    $activeDemo = get_active_demo();
    $isLawFirm2 = ($activeDemo === 'demo-law-firm-2');
    $isDigitalAgency2 = ($activeDemo === 'demo-digital-agency-2');
    $isTransportationLogistic = ($activeDemo === 'demo-transportation-logistic');
    $isArchitecture2 = ($activeDemo === 'demo-architecture-2');
    $isAccounting2 = ($activeDemo === 'demo-accounting-2');

    // Get module configuration for title
    $moduleConfig = get_module_page_header_config('services');
    $servicesTitle = $moduleConfig['title'] ?? config('cd-system.modules.services.name', 'Áreas de Actuación');
    $servicesLabel = strtoupper($servicesTitle);

    // Determine current context and set content
    if (isset($service) && $service) {
        // Service detail view
        $pageTitle = $service->title ?? 'Servicio';
        $breadcrumbItems = [
            ['url' => route('home'), 'label' => 'Inicio'],
            ['url' => route('frontend.services.index'), 'label' => $servicesLabel],
            ['url' => null, 'label' => strtoupper(\Illuminate\Support\Str::limit($service->title ?? 'Servicio', 30))]
        ];
        $pageSubtitle = null;
    } elseif (isset($selectedCategory) && $selectedCategory) {
        // Category view
        $pageTitle = $selectedCategory->name ?? 'Categoría';
        $breadcrumbItems = [
            ['url' => route('home'), 'label' => 'Inicio'],
            ['url' => route('frontend.services.index'), 'label' => $servicesLabel],
            ['url' => null, 'label' => strtoupper($selectedCategory->name ?? 'Categoría')]
        ];

    } elseif (isset($serviceConfig) && is_array($serviceConfig)) {
        // Static service page based on config
        $pageTitle = $serviceConfig['title'] ?? 'Servicio';
        $pageSubtitle = $serviceConfig['subtitle'] ?? null;
        $breadcrumbItems = [
            ['url' => route('home'), 'label' => 'Inicio'],
            ['url' => route('frontend.services.index'), 'label' => $servicesLabel],
            ['url' => null, 'label' => strtoupper($serviceConfig['title'] ?? 'Servicio')]
        ];
    } else {
        // Index view
        $pageTitle = $servicesTitle;
        $breadcrumbItems = [
            ['url' => route('home'), 'label' => 'Inicio'],
            ['url' => null, 'label' => $servicesLabel]
        ];
        $pageSubtitle = $moduleConfig['subtitle'] ?? null;
    }
@endphp

@if($isLawFirm2)
    {{-- Law Firm 2 Style Header --}}
    <section class="page-header page-header-modern page-header-lg overlay overlay-show overlay-op-9 m-0" style="background-image: url({{ asset('cd-project/img/demos/law-firm-2/backgrounds/background-4.jpg') }}); background-size: cover; background-position: center;">
        <div class="container py-4">
            <div class="row">
                <div class="col text-center">
                    <ul class="breadcrumb d-flex justify-content-center text-4-5 font-weight-medium mb-2">
                        @foreach($breadcrumbItems as $index => $item)
                            @if($index === count($breadcrumbItems) - 1)
                                <li class="text-color-primary active">{{ $item['label'] }}</li>
                            @else
                                <li>
                                    <a href="{{ $item['url'] }}" class="text-color-primary text-decoration-none">{{ $item['label'] }}</a>
                                </li>
                            @endif
                        @endforeach
                    </ul>
                    <h1 class="text-color-light font-weight-bold text-10">{{ $pageTitle }}</h1>
                </div>
            </div>
        </div>
    </section>
@elseif($isDigitalAgency2)
    {{-- Digital Agency 2 Style Header --}}
    <section class="page-header page-header-modern page-header-background bg-color-dark p-relative z-index-1" style="background-image: url({{ asset('cd-project/img/demos/digital-agency-2/bg/page-header-bg.jpg') }}); background-size: cover; background-position: center;">
        <span class="custom-circle custom-circle-1 bg-color-light custom-circle-blur appear-animation" data-appear-animation="fadeInLeftShorter" data-appear-animation-delay="400"></span>
        <span class="custom-circle custom-circle-2 bg-color-primary appear-animation" data-appear-animation="zoomIn" data-appear-animation-delay="500"></span>
        <span class="custom-circle custom-circle-3 bg-color-primary appear-animation" data-appear-animation="zoomIn" data-appear-animation-delay="600"></span>
        <div class="container">
            <div class="row mt-5">
                <div class="col">
                    <ul class="breadcrumb breadcrumb-light custom-title-with-icon-primary d-block">
                        @foreach($breadcrumbItems as $index => $item)
                            @if($index === count($breadcrumbItems) - 1)
                                <li class="active">{{ $item['label'] }}</li>
                            @else
                                <li>
                                    <a href="{{ $item['url'] }}" class="text-decoration-none">{{ $item['label'] }}</a>
                                </li>
                            @endif
                        @endforeach
                    </ul>
                    <h1 class="custom-text-10 font-weight-bold text-color-light">{{ $pageTitle }}</h1>
                    @if(!empty($pageSubtitle))
                        <p class="text-color-light opacity-7 mt-2">{{ $pageSubtitle }}</p>
                    @endif
                </div>
            </div>
        </div>
    </section>
@elseif($isTransportationLogistic)
    {{-- Transportation Logistic Style Header --}}
    <div class="custom-page-header border-bottom-light">
        <section class="page-header page-header-modern page-header-lg overlay overlay-light overlay-show overlay-op-9 m-0" style="background-image: url({{ asset('cd-project/img/demos/transportation-logistic/backgrounds/background-1.jpg') }}); background-size: cover; background-position: center;">
            <div class="container container-xl-custom py-4">
                <div class="row">
                    <div class="col">
                        <ul class="breadcrumb text-4 font-weight-semi-bold mb-2">
                            @foreach($breadcrumbItems as $index => $item)
                                @if($index === count($breadcrumbItems) - 1)
                                    <li class="text-color-primary active text-capitalize">{{ $item['label'] }}</li>
                                @else
                                    <li>
                                        <a href="{{ $item['url'] }}" class="text-color-primary text-decoration-none text-capitalize">{{ $item['label'] }}</a>
                                    </li>
                                @endif
                            @endforeach
                        </ul>
                        <h1 class="text-color-tertiary font-weight-semi-bold text-9">{{ $pageTitle }}</h1>
                        @if(!empty($pageSubtitle))
                            <p class="text-color-tertiary opacity-7 mt-2">{{ $pageSubtitle }}</p>
                        @endif
                    </div>
                </div>
            </div>
        </section>
    </div>
@elseif($isArchitecture2)
    {{-- Architecture 2 Style Header --}}
    <section class="custom-page-header-1 page-header page-header-modern page-header-lg bg-primary border-0 z-index-1 my-0">
        <div class="custom-page-header-1-wrapper overflow-hidden">
            <div class="py-5 appear-animation" data-appear-animation="maskUp" data-appear-animation-delay="800" style="background-color: #847266 !important;">
                <div class="container py-3 my-3">
                    <div class="row">
                        <div class="col-md-12 align-self-center p-static text-center">
                            <div class="overflow-hidden mb-2">
                                <h1 class="font-weight-black text-12 mb-0 appear-animation" data-appear-animation="maskUp" data-appear-animation-delay="1200">{{ $pageTitle }}</h1>
                            </div>
                        </div>
                        <div class="col-md-12 align-self-center">
                            <div class="overflow-hidden">
                                <ul class="custom-breadcrumb-style-1 breadcrumb breadcrumb-light custom-font-secondary d-block text-center custom-ls-1 text-5 appear-animation" data-appear-animation="maskUp" data-appear-animation-delay="1450">
                                    @foreach($breadcrumbItems as $index => $item)
                                        @if($index === count($breadcrumbItems) - 1)
                                            <li class="text-transform-none active">{{ $item['label'] }}</li>
                                        @else
                                            <li class="text-transform-none">
                                                <a href="{{ $item['url'] }}" class="text-decoration-none">{{ $item['label'] }}</a>
                                            </li>
                                        @endif
                                    @endforeach
                                </ul>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </section>
@elseif($isAccounting2)
    {{-- Accounting 2 Style Header --}}
    <div class="container pb-lg-5">
        <div class="row align-items-center py-5">
            <div class="col-lg-6 text-center text-lg-start">
                <span class="badge bg-light text-dark border border-all-light box-shadow-9 rounded-pill text-uppercase font-weight-semibold px-3 py-2 px-2"><span class="d-inline-flex py-1 px-2">{{ $servicesLabel }}</span></span>
                <div class="appear-animation" data-appear-animation="fadeIn" data-appear-animation-delay="200">
                    <h2 class="text-9 text-lg-12 font-weight-semibold line-height-1 mb-3 mt-3">{{ $pageSubtitle ?? config('site.services.subtitle', 'Trusted expertise tailored to your needs.') }}</h2>
                </div>
            </div>
            <div class="col-lg-6 text-center text-lg-start">
                <div class="appear-animation" data-appear-animation="fadeInUpShorter" data-appear-animation-delay="300">
                    <div class="d-flex justify-content-center justify-content-lg-end align-items-center">
                        <div class="d-flex">
                            <img src="{{ asset('template/img/icons/phone-2.svg') }}" width="24" height="24" alt="" data-icon data-plugin-options="{'onlySVG': true, 'extraClass': 'svg-fill-color-primary pe-1'}" />
                            <a href="tel:{{ config('site.contact.phone_number') }}" class="text-decoration-none font-secondary text-4 font-weight-semibold text-color-dark text-color-hover-primary transition-2ms negative-ls-05 ws-nowrap">{{ config('site.contact.phone') }}</a>
                        </div>
                        <a href="{{ route('front.contact') }}" class="btn btn-rounded btn-primary box-shadow-7 font-weight-medium px-4 py-3 text-2-5 btn-swap-1 ms-3 d-flex" data-clone-element="1">
                            <span>{{ __('Get Free Quote') }}</span>
                        </a>
                    </div>
                </div>
            </div>
        </div>
    </div>
@else
    {{-- Default/Other Demo Style Header --}}
    <section class="section border-0 m-0">
        <div class="container position-relative pt-5 pb-5-5 mt-5 mb-5">
            <div class="row justify-content-end pt-1 mt-lg-5">
                <div class="col-7 col-md-5 position-relative">
                    {{-- Dynamic Breadcrumbs --}}
                    <ul class="breadcrumb d-block ps-2 appear-animation" data-appear-animation="fadeInLeftShorterPlus" data-appear-animation-delay="200">
                        @foreach($breadcrumbItems as $index => $item)
                            @if($index === count($breadcrumbItems) - 1)
                                <li class="active">{{ $item['label'] }}</li>
                            @else
                                <li>
                                    <a href="{{ $item['url'] }}" class="text-decoration-none">
                                        {{ $item['label'] }}
                                    </a>
                                </li>
                            @endif
                        @endforeach
                    </ul>

                    {{-- Dynamic Title --}}
                    <h1 class="position-absolute top-100 left-0 text-color-light font-weight-bold text-6 line-height-3 text-end mt-5-5">
                        <span class="d-block position-relative z-index-1 pb-5 ps-lg-3 appear-animation" data-appear-animation="fadeInLeftShorterPlus" data-appear-animation-delay="800">{{ $pageTitle }}</span>
                        <span class="custom-svg-position-1 custom-svg-position-1-variation">
                            <svg class="svg-fill-color-dark mt-1 appear-animation" data-appear-animation="fadeInLeftShorterPlus" data-appear-animation-delay="400" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" viewBox="0 0 859.45 88.44" xml:space="preserve" preserveAspectRatio="none">
                                <polyline points="7.27,84.78 855.17,84.78 855.17,4.79 84.74,4.79 "/>
                            </svg>
                        </span>
                    </h1>
                    @if(!empty($pageSubtitle))
                        <p class="text-color-light opacity-7 text-end mt-2 pe-lg-4 appear-animation" data-appear-animation="fadeInLeftShorterPlus" data-appear-animation-delay="900">
                            {{ $pageSubtitle }}
                        </p>
                    @endif
                </div>
            </div>
        </div>
    </section>
@endif