{{--
    Page Header compartido para demo-accounting-1 (Bold Edge Dark Mode)

    Variables esperadas:
    - $pageTitle (string) — Título principal de la página
    - $pageLabel (string, opcional) — Badge/etiqueta superior (ej: "SERVICIOS", "PORTFOLIO")
    - $pageBreadcrumb (array, opcional) — Items del breadcrumb [['label' => '', 'url' => ''], ...]
    - $pageSubtitle (string, opcional) — Subtítulo debajo del título
--}}

@php
    $pageTitle = $pageTitle ?? 'Página';
    $pageLabel = $pageLabel ?? null;
    $pageBreadcrumb = $pageBreadcrumb ?? $breadcrumbItems ?? [
        ['label' => 'Inicio', 'url' => front_homepage_url()],
        ['label' => $pageTitle, 'url' => null],
    ];
    $pageSubtitle = $pageSubtitle ?? null;
@endphp

<section class="page-header page-header-modern page-header-lg border-0 m-0"
         style="padding-top: 120px; background: linear-gradient(180deg, var(--secondary) 0%, var(--dark) 100%);">
    <div class="container container-xl-custom position-relative z-index-2">
        <div class="row text-center text-md-start py-4">
            {{-- Título + Badge --}}
            <div class="col-md-8 order-2 order-md-1 align-self-center p-static">
                @if($pageLabel)
                <div class="appear-animation mb-3" data-appear-animation="fadeInDownShorter" data-appear-animation-delay="200">
                    <span class="badge rounded-pill text-uppercase font-weight-semibold text-2-5 border border-1"
                          style="color: var(--primary); border-color: var(--primary) !important; background-color: rgba(0, 240, 255, 0.08);">
                        <span class="d-inline-flex py-1 px-2">{{ $pageLabel }}</span>
                    </span>
                </div>
                @endif
                <h1 class="font-weight-bold text-10 mb-0 appear-animation"
                    style="color: var(--light);"
                    data-appear-animation="fadeInUpShorter" data-appear-animation-delay="400">
                    {{ $pageTitle }}
                </h1>
                @if($pageSubtitle)
                <p class="text-4 mt-2 mb-0 appear-animation"
                   style="color: var(--quaternary);"
                   data-appear-animation="fadeInUpShorter" data-appear-animation-delay="600">
                    {{ $pageSubtitle }}
                </p>
                @endif
            </div>

            {{-- Breadcrumb --}}
            <div class="col-md-4 order-1 order-md-2 align-self-center">
                <ul class="breadcrumb font-weight-bold d-block text-md-end text-4 mb-0">
                    @foreach($pageBreadcrumb as $index => $item)
                        @if($index === count($pageBreadcrumb) - 1)
                            <li class="text-uppercase active" style="color: var(--quaternary);">{{ $item['label'] }}</li>
                        @else
                            <li>
                                <a href="{{ $item['url'] }}" class="text-decoration-none" style="color: var(--primary);">
                                    {{ $item['label'] }}
                                </a>
                            </li>
                        @endif
                    @endforeach
                </ul>
            </div>
        </div>
    </div>

    {{-- Línea decorativa cyan sutil en la base --}}
    <div style="height: 1px; background: linear-gradient(90deg, transparent 0%, var(--primary) 50%, transparent 100%); opacity: 0.3;"></div>
</section>