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

    // Get module configuration for title
    $moduleConfig = get_module_page_header_config('menu');
    $menuTitle = $moduleConfig['title'] ?? config('cd-system.modules.menu.name', 'Menu');
    $menuLabel = mb_strtoupper($menuTitle);

    // Determine current context and set content
    if (isset($category) && $category) {
        // Category view
        $pageTitle = $category->name ?? 'Category';
        $breadcrumbItems = [
            ['url' => route('front.welcome'), 'label' => __('Inicio')],
            ['url' => route('front.menu.index'), 'label' => $menuLabel],
            ['url' => null, 'label' => mb_strtoupper($category->name ?? 'Category')]
        ];
    } elseif (isset($menu) && $menu) {
        // Menu detail view
        $pageTitle = $menu->name ?? 'Menu';
        $breadcrumbItems = [
            ['url' => route('front.welcome'), 'label' => __('Inicio')],
            ['url' => route('front.menu.index'), 'label' => $menuLabel],
            ['url' => null, 'label' => mb_strtoupper($menu->name ?? 'Menu')]
        ];
    } else {
        // Index view
        $pageTitle = $menuTitle;
        $breadcrumbItems = [
            ['url' => route('front.welcome'), 'label' => __('Inicio')],
            ['url' => null, 'label' => $menuLabel]
        ];
        $pageSubtitle = $moduleConfig['subtitle'] ?? null;
    }

    // Get background image from config or use default (null para digital-agency-2)
    $backgroundImage = ($activeDemo === 'demo-digital-agency-2') ? null : config('site.assets.menu_header_background', asset('cd-project/img/demos/restaurant/backgrounds/background-menu.jpg'));
@endphp

@if($activeDemo === 'demo-restaurant')
    {{-- Restaurant Menu: usa el partial compartido envuelto con parallax + shape divider --}}
    <section class="section section-with-shape-divider section-height-3 overlay overlay-show border-0 m-0"
        data-plugin-parallax data-plugin-options="{'speed': 1.5, 'parallaxHeight': '120%', 'fadeIn': true}"
        data-image-src="{{ $backgroundImage }}">
        <div class="container pt-3 pb-5 mb-5">
            <div class="row mb-3">
                <div class="col text-center">
                    <ul class="breadcrumb d-block text-center custom-font-secondary text-6 font-weight-medium positive-ls-3">
                        @foreach($breadcrumbItems as $index => $item)
                            @if($index === count($breadcrumbItems) - 1)
                                <li class="active text-color-primary">{{ $item['label'] }}</li>
                            @else
                                <li><a href="{{ $item['url'] }}" class="text-decoration-none opacity-hover-8">{{ $item['label'] }}</a></li>
                            @endif
                        @endforeach
                    </ul>
                    <h1 class="d-block text-color-light font-weight-bold text-center text-12 positive-ls-1 line-height-2 mb-0">{{ $pageTitle }}</h1>
                </div>
            </div>
        </div>
        <a href="#menu" data-hash data-hash-offset="0" data-hash-offset-lg="100" data-hash-force="true" class="text-decoration-none text-color-dark text-color-hover-primary text-5-5 position-absolute transform3dx-n50 left-50pct bottom-5 mb-4 z-index-2">
            <i class="icons icon-arrow-down font-weight-bold"></i>
        </a>
        <div class="shape-divider shape-divider-bottom shape-divider-reverse-y" style="height: 116px;">
            <svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" viewBox="0 0 1920 116" preserveAspectRatio="xMinYMin">
                <path fill="#FFF" d="M453,92c11.7-4.87,28.46-11.43,49-18c42.29-13.52,76.36-19.33,115-25c51.58-7.57,100.28-14.72,171-20
                    c24.87-1.86,82.88-5.76,158-6c69.99-0.23,122.54,2.82,159,5c51.18,3.06,95.17,5.69,155,14c71.5,9.94,115.42,21.02,127,24
                    c33.7,8.68,61.62,17.79,82,25C1130.33,91.33,791.67,91.67,453,92z"/>
                <rect y="90" fill="#FFF" width="1920" height="26"/>
            </svg>
        </div>
    </section>
@elseif($activeDemo === 'demo-law-firm-2')
    @include('layout.front.partials.page-header-law-firm-2', [
        'pageTitle' => $pageTitle,
        'pageBreadcrumb' => $breadcrumbItems,
        'pageSubtitle' => $pageSubtitle ?? null,
        'backgroundImage' => $backgroundImage,
    ])
@elseif($activeDemo === 'demo-digital-agency-2')
    @include('layout.front.partials.page-header-digital-agency-2', [
        'pageTitle' => $pageTitle,
        'pageLabel' => 'CARTA',
        '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,
        'backgroundImage' => $backgroundImage,
    ])
@elseif($activeDemo === 'demo-architecture-2')
    @include('layout.front.partials.page-header-architecture-2', [
        '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,
        'backgroundImage' => $backgroundImage,
    ])
@elseif($activeDemo === 'demo-accounting-1')
    @include('layout.front.partials.page-header-accounting-1', [
        'pageTitle' => $pageTitle,
        'pageLabel' => 'CARTA',
        'pageBreadcrumb' => $breadcrumbItems,
        'pageSubtitle' => $pageSubtitle ?? null,
    ])
@elseif($activeDemo === 'demo-accounting-2')
    @include('layout.front.partials.page-header-accounting-2', [
        'pageTitle' => $pageTitle,
        'pageLabel' => $menuLabel,
        'pageBreadcrumb' => $breadcrumbItems,
        'pageSubtitle' => $pageSubtitle ?? null,
    ])
@elseif($activeDemo === 'demo-photography-3')
    @include('layout.front.partials.page-header-photography-3', [
        '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-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,
        'backgroundImage' => $backgroundImage,
    ])
@elseif($activeDemo === 'demo-creative-agency-2')
    @include('layout.front.partials.page-header-creative-agency-2', [
        'pageTitle' => $pageTitle,
        'pageLabel' => 'CARTA',
        'pageBreadcrumb' => $breadcrumbItems,
        'pageSubtitle' => $pageSubtitle ?? null,
    ])
@elseif($activeDemo === 'demo-marketing-1')
    @include('layout.front.partials.page-header-marketing-1', [
        'pageTitle' => $pageTitle,
        'pageLabel' => 'CARTA',
        '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/Modern Style Header --}}
    @if(should_use_modern_page_header('menu'))
        {{-- Use modern page header component --}}
        <x-page-header
            :title="$pageTitle"
            :subtitle="$pageSubtitle ?? null"
            :breadcrumbs="$breadcrumbItems"
        />
    @else
        {{-- Default Classic Header --}}
        <section class="page-header page-header-modern page-header-lg overlay overlay-show overlay-op-9 m-0" style="background-image: url({{ $backgroundImage }}); 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>
                        @if(!empty($pageSubtitle))
                            <p class="text-color-light opacity-7 mt-2">{{ $pageSubtitle }}</p>
                        @endif
                    </div>
                </div>
            </div>
        </section>
    @endif
@endif