{{--
    Page Header compartido para demo-insurance
    Estilo: background image con SVG decorativos animados

    Variables esperadas:
    - $pageTitle (string)
    - $pageLabel (string, opcional)
    - $pageBreadcrumb (array, opcional)
    - $pageSubtitle (string, opcional)
    - $backgroundImage (string, opcional — URL de imagen de fondo)
--}}

@php
    $pageTitle = $pageTitle ?? 'Página';
    $pageLabel = $pageLabel ?? null;
    $pageBreadcrumb = $pageBreadcrumb ?? [
        ['label' => 'Inicio', 'url' => front_homepage_url()],
        ['label' => $pageTitle, 'url' => null],
    ];
    $pageSubtitle = $pageSubtitle ?? null;
    $backgroundImage = $backgroundImage ?? asset('cd-project/img/demos/insurance/backgrounds/background-3.jpg');
@endphp

<section class="page-header page-header-modern section position-relative border-0 m-0" style="background-image: url({{ $backgroundImage }}); background-position: center; background-size: cover;">
    <div class="container container-xl-custom position-relative pb-5 mb-5">
        {{-- SVG decorativo --}}
        <div class="page-header-svg-container">
            <svg class="d-none d-lg-block custom-svg-position-5" 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 1686.88 1095.86" data-appear-animation-svg="true">
                <path class="appear-animation" data-appear-animation="customLines1anim" data-appear-animation-delay="100" data-appear-animation-duration="7s" fill="none" stroke="#d8d8d8" stroke-width="2px" stroke-miterlimit="10" d="M87.95,1.4c6.82,9.14,15.53,21.59,24.68,36.94c6.82,11.45,27.18,46.82,42.55,96.51 c22.8,73.68,21.39,136.02,20.51,156c-3.11,70.56-22.16,122.51-36,159.32c-10.88,28.95-11.68,24.38-59.74,125.62 c-43.46,91.53-49.66,109.7-52.85,119.49C6.6,758.14,2.98,804.59,2.16,829.14c-1.49,44.72,4.54,70.82,6.47,78.64 c3.54,14.35,10.42,41.25,29.79,70.47c6.64,10.01,30.84,44.6,76.77,69.11c42.9,22.9,81.52,24.6,110.47,25.87 c45.57,2.01,79.98-6.18,113.02-14.3c30.83-7.58,58.4-18.38,113.53-40c59.55-23.35,66.43-28.58,110.47-43.91 c35.63-12.41,57.67-19.98,89.36-25.7c25.68-4.64,55.3-9.77,94.3-6.3c12.43,1.11,53.97,5.59,102.13,27.74 c32.05,14.74,53.03,30.87,57.53,34.38c24.26,18.91,41.05,38.65,51.91,53.45"/>
                <path class="appear-animation" data-appear-animation="customLines1anim" data-appear-animation-delay="100" data-appear-animation-duration="7s" fill="none" stroke="#d8d8d8" stroke-width="2px" stroke-miterlimit="10" d="M179.69,101.14c6.75,9.74,13.52,20.4,20.09,32c22.79,40.27,33.1,74.23,35.4,82.04 c5.33,18.08,15.6,58.21,14.64,110.3c-0.24,12.92-1.88,65.03-24.85,127.32c-3.1,8.42-7.74,18.89-17.02,39.83 c-25.65,57.88-36.57,75.11-52.43,110.3c-18.12,40.19-31.28,69.39-39.83,110.64c-7.2,34.73-15.41,74.33-2.38,122.21 c4.55,16.73,14.43,51.38,44.94,82.04c35.67,35.85,78.11,44.69,100.43,49.02c58.53,11.37,107.23-3.46,156.26-18.38 c24.42-7.44,15.93-6.77,86.47-33.7c103.46-39.5,129.97-44.06,142.98-45.96c28.7-4.18,61.65-8.66,103.15,1.02 c7.96,1.86,47.73,11.59,90.21,42.55c30.91,22.53,50.88,47.29,62.64,64.34"/>
            </svg>
        </div>

        <div class="row text-center text-md-start py-2">
            <div class="col p-relative bottom-5">
                {{-- Breadcrumb --}}
                <ul class="breadcrumb d-block text-4 opacity-8 text-default mb-0">
                    @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 text-default">{{ $item['label'] }}</a>
                            </li>
                        @endif
                    @endforeach
                </ul>

                {{-- Titulo --}}
                <h1 class="font-weight-bold text-color-dark text-10 mt-1 mb-0 appear-animation" data-appear-animation="fadeInUpShorter" data-appear-animation-delay="200">{{ $pageTitle }}</h1>

                {{-- Subtitulo --}}
                @if($pageSubtitle)
                    <p class="text-color-dark opacity-7 mt-2 appear-animation" data-appear-animation="fadeInUpShorter" data-appear-animation-delay="400">{{ $pageSubtitle }}</p>
                @endif
            </div>
        </div>
    </div>
</section>