{{--
    Page Header compartido para demo-creative-agency-2
    Estilo: dark (bg-quaternary) + SVG animated gradient + centered layout
    Derivado del Porto HTML (about-us, contact-us, services)

    Variables esperadas:
    - $pageTitle (string)
    - $pageLabel (string, opcional) — badge sobre el breadcrumb
    - $pageBreadcrumb (array, opcional)
    - $pageSubtitle (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;
@endphp

<section class="page-header p-relative border-0 bg-quaternary overflow-hidden m-0 p-0">
    <div class="custom-hero-bg loaded">
        <svg viewBox="0 0 100 100" preserveAspectRatio="xMidYMid slice">
            <defs>
                <radialGradient id="Gradient1-ph" cx="50%" cy="50%" fx="0.441602%" fy="50%" r=".5">
                    <animate attributeName="fx" dur="34s" values="0%;3%;0%" repeatCount="indefinite"></animate>
                    <stop offset="0%" class="custom-stop-color-1"></stop>
                    <stop offset="100%" class="custom-stop-color-1" stop-opacity="0"></stop>
                </radialGradient>
            </defs>
            <rect x="13.744%" y="1.18473%" width="100%" height="100%" fill="url(#Gradient1-ph)" transform="rotate(334.41 50 50)">
                <animate attributeName="x" dur="20s" values="25%;0%;25%" repeatCount="indefinite"></animate>
                <animate attributeName="y" dur="21s" values="0%;25%;0%" repeatCount="indefinite"></animate>
                <animateTransform attributeName="transform" type="rotate" from="0 50 50" to="360 50 50" dur="7s" repeatCount="indefinite"></animateTransform>
            </rect>
        </svg>
    </div>
    <div class="container">
        <div class="row align-items-center my-5 pt-5 pb-4">
            <div class="col text-center my-5 pb-5">
                <div class="py-4">
                    @if($pageLabel)
                    <div class="appear-animation mb-2" data-appear-animation="fadeInDownShorter" data-appear-animation-delay="0">
                        <span class="badge rounded-pill text-uppercase font-weight-semibold text-2-5 px-3 py-2" style="color: var(--primary); border: 1px solid var(--primary); background: transparent;">
                            {{ $pageLabel }}
                        </span>
                    </div>
                    @endif
                    <ul class="breadcrumb d-flex justify-content-center text-4-5 font-weight-medium mb-2">
                        @foreach($pageBreadcrumb as $index => $item)
                            @if($index === count($pageBreadcrumb) - 1)
                                <li class="text-color-primary active">{{ strtoupper($item['label']) }}</li>
                            @else
                                <li>
                                    <a href="{{ $item['url'] }}" class="text-color-primary text-decoration-none">{{ strtoupper($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 text-4 mt-2 mb-0">{{ $pageSubtitle }}</p>
                    @endif
                </div>
            </div>
        </div>
    </div>
    <div class="p-absolute custom-el-1 custom-el-pos-5">
        <div class="appear-animation" data-appear-animation="fadeInUpShorter" data-appear-animation-delay="0">
            <img src="{{ asset('cd-project/img/demos/creative-agency-2/svg/arrow-up-light.svg') }}" width="140" alt="">
        </div>
        <div class="appear-animation" data-appear-animation="fadeInUpShorter" data-appear-animation-delay="100">
            <img src="{{ asset('cd-project/img/demos/creative-agency-2/svg/arrow-up-light.svg') }}" width="140" alt="">
        </div>
        <div class="appear-animation" data-appear-animation="fadeInUpShorter" data-appear-animation-delay="200">
            <img src="{{ asset('cd-project/img/demos/creative-agency-2/svg/arrow-up-light.svg') }}" width="140" alt="">
        </div>
    </div>
</section>