{{--
    Page Header compartido para demo-construction
    Estilo: background image con SVG decorativo, breadcrumb right-aligned

    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' => 'Inicio', 'url' => front_homepage_url()],
        ['label' => $pageTitle, 'url' => null],
    ];
    $pageSubtitle = $pageSubtitle ?? null;
    $backgroundImage = $backgroundImage ?? asset('cd-project/img/demos/construction/backgrounds/background-2.jpg');
@endphp

<section class="section section-height-3 border-0 m-0" style="background-image: url({{ $backgroundImage }}); background-size: cover; background-position: center;">
    <div class="container container-xl-custom position-relative pt-5 pb-5-5 mt-5">
        <div class="row justify-content-end pt-1 mt-lg-5">
            <div class="col-7 col-md-5 position-relative">
                <ul class="breadcrumb d-block ps-2 appear-animation" data-appear-animation="fadeInLeftShorterPlus" data-appear-animation-delay="200">
                    @foreach($pageBreadcrumb as $index => $item)
                        @if($index === count($pageBreadcrumb) - 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="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>