{{-- Dynamic Header Component for Services --}}
@php
    // Get active demo
    $activeDemo = get_active_demo();

    // Get module configuration for title
    $moduleConfig = get_module_page_header_config('services');
    $servicesTitle = $moduleConfig['title'] ?? config('cd-system.modules.services.name', 'Servicios');
    $servicesLabel = mb_strtoupper($servicesTitle);

    // Determine current context and set content
    if (isset($service) && $service) {
        // Service detail view
        $pageTitle = $service->title ?? 'Servicio';
        $breadcrumbItems = [
            ['url' => route('front.welcome'), 'label' => __('Inicio')],
            ['url' => route('frontend.services.index'), 'label' => $servicesLabel],
            ['url' => null, 'label' => mb_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('front.welcome'), 'label' => __('Inicio')],
            ['url' => route('frontend.services.index'), 'label' => $servicesLabel],
            ['url' => null, 'label' => mb_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('front.welcome'), 'label' => __('Inicio')],
            ['url' => route('frontend.services.index'), 'label' => $servicesLabel],
            ['url' => null, 'label' => mb_strtoupper($serviceConfig['title'] ?? 'Servicio')]
        ];
    } else {
        // Index view
        $pageTitle = $servicesTitle;
        $breadcrumbItems = [
            ['url' => route('front.welcome'), 'label' => __('Inicio')],
            ['url' => null, 'label' => $servicesLabel]
        ];
        $pageSubtitle = $moduleConfig['subtitle'] ?? null;
    }
@endphp

@if($activeDemo === 'demo-law-firm-2')
    @include('layout.front.partials.page-header-law-firm-2', [
        'pageTitle' => $pageTitle,
        'pageBreadcrumb' => $breadcrumbItems,
        'pageSubtitle' => $pageSubtitle ?? null,
    ])
@elseif($activeDemo === 'demo-digital-agency-2')
    @include('layout.front.partials.page-header-digital-agency-2', [
        'pageTitle' => $pageTitle,
        'pageLabel' => $servicesLabel,
        'pageBreadcrumb' => $breadcrumbItems,
        'pageSubtitle' => $pageSubtitle ?? null,
    ])
@elseif($activeDemo === 'demo-transportation-logistic')
    @include('layout.front.partials.page-header-transportation-logistic', [
        'pageTitle' => $pageTitle,
        'pageBreadcrumb' => $breadcrumbItems,
        'pageSubtitle' => $pageSubtitle ?? null,
    ])
@elseif($activeDemo === 'demo-architecture-2')
    @include('layout.front.partials.page-header-architecture-2', [
        'pageTitle' => $pageTitle,
        'pageBreadcrumb' => $breadcrumbItems,
        'pageSubtitle' => $pageSubtitle ?? null,
    ])
@elseif($activeDemo === 'demo-accounting-2')
    @include('layout.front.partials.page-header-accounting-2', [
        'pageTitle' => $pageTitle,
        'pageLabel' => $servicesLabel,
        'pageBreadcrumb' => $breadcrumbItems,
        'pageSubtitle' => $pageSubtitle ?? config('site.services.subtitle', 'Trusted expertise tailored to your needs.'),
    ])
@elseif($activeDemo === 'demo-photography-3')
    @include('layout.front.partials.page-header-photography-3', [
        'pageTitle' => $pageTitle,
        'pageBreadcrumb' => $breadcrumbItems,
        'pageSubtitle' => $pageSubtitle ?? null,
    ])
@elseif($activeDemo === 'demo-construction-2')
    @include('layout.front.partials.page-header-construction-2', [
        'pageTitle' => $pageTitle,
        'pageBreadcrumb' => $breadcrumbItems,
        'pageSubtitle' => $pageSubtitle ?? null,
    ])
@elseif($activeDemo === 'demo-restaurant')
    @include('layout.front.partials.page-header-restaurant', [
        'pageTitle' => $pageTitle,
        'pageBreadcrumb' => $breadcrumbItems,
        'pageSubtitle' => $pageSubtitle ?? null,
    ])
@elseif($activeDemo === 'demo-insurance')
    @include('layout.front.partials.page-header-insurance', [
        'pageTitle' => $pageTitle,
        'pageBreadcrumb' => $breadcrumbItems,
        'pageSubtitle' => $pageSubtitle ?? null,
    ])
@elseif($activeDemo === 'demo-accounting-1')
    @include('layout.front.partials.page-header-accounting-1', [
        'pageTitle' => $pageTitle,
        'pageLabel' => 'SERVICIOS',
        'pageBreadcrumb' => $breadcrumbItems,
        'pageSubtitle' => $pageSubtitle ?? null,
    ])
@elseif($activeDemo === 'demo-business-consulting')
    @include('layout.front.partials.page-header-business-consulting', [
        'pageTitle' => $pageTitle,
        'pageBreadcrumb' => $breadcrumbItems,
        'pageSubtitle' => $pageSubtitle ?? null,
    ])
@elseif($activeDemo === 'demo-construction')
    @include('layout.front.partials.page-header-construction', [
        'pageTitle' => $pageTitle,
        'pageBreadcrumb' => $breadcrumbItems,
        'pageSubtitle' => $pageSubtitle ?? null,
    ])
@elseif($activeDemo === 'demo-creative-agency-2')
    @include('layout.front.partials.page-header-creative-agency-2', [
        'pageTitle' => $pageTitle,
        'pageLabel' => 'SERVICIOS',
        'pageBreadcrumb' => $breadcrumbItems,
        'pageSubtitle' => $pageSubtitle ?? null,
    ])
@elseif($activeDemo === 'demo-marketing-1')
    @include('layout.front.partials.page-header-marketing-1', [
        'pageTitle' => $pageTitle,
        'pageLabel' => 'SERVICIOS',
        'pageBreadcrumb' => $breadcrumbItems,
        'pageSubtitle' => $pageSubtitle ?? null,
    ])
@elseif($activeDemo === 'demo-product-landing')
    @include('layout.front.partials.page-header-product-landing', [
        'pageTitle' => $pageTitle,
        'pageBreadcrumb' => $breadcrumbItems,
        'pageSubtitle' => $pageSubtitle ?? null,
    ])
@elseif($activeDemo === 'demo-sass')
    @include('layout.front.partials.page-header-sass', [
        'pageTitle' => $pageTitle,
        'pageBreadcrumb' => $breadcrumbItems,
        'pageSubtitle' => $pageSubtitle ?? null,
    ])
@elseif($activeDemo === 'demo-real-estate')
    @include('layout.front.partials.page-header-real-estate', [
        'pageTitle' => $pageTitle,
        'pageLabel' => mb_strtoupper($pageTitle),
        'pageBreadcrumb' => $breadcrumbItems,
        'pageSubtitle' => $pageSubtitle ?? null,
    ])
@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