{{--
    Page Header compartido para demo-restaurant
    Estilo: Parallax + shape divider + scroll arrow (mismo que menu/about/contact)

    Variables esperadas:
    - $pageTitle (string)
    - $pageLabel (string, opcional)
    - $pageBreadcrumb (array, opcional)
    - $pageSubtitle (string, opcional)
    - $backgroundImage (string, opcional)
--}}

@php
    $pageTitle = $pageTitle ?? 'Página';
    $pageLabel = $pageLabel ?? null;
    $pageBreadcrumb = $pageBreadcrumb ?? $breadcrumbItems ?? [
        ['label' => __('Home'), 'url' => front_homepage_url()],
        ['label' => $pageTitle, 'url' => null],
    ];
    $pageSubtitle = $pageSubtitle ?? null;
    $backgroundImage = $backgroundImage ?? site_asset_url('page_header_background', 'cd-project/img/demos/restaurant/backgrounds/background-3.jpg');

    // Anchor: use module-based id that matches the content section
    $anchorId = $anchorId ?? (isset($pageBreadcrumb[1]) ? Str::slug($pageBreadcrumb[1]['label']) . '-content' : 'content');
@endphp

<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">
                <ul class="breadcrumb d-block text-center custom-font-secondary text-6 font-weight-medium positive-ls-3">
                    @foreach($pageBreadcrumb as $index => $item)
                        @if($index === count($pageBreadcrumb) - 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>
                @if(!empty($pageSubtitle))
                    <h2 class="d-block text-center mb-0">{{ $pageSubtitle }}</h2>
                @endif
            </div>
        </div>
    </div>
    <a href="#{{ $anchorId }}" 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>