{{--
    Page Header compartido para demo-business-consulting
    Estilo: dark gradient con CSS variables, decorative star, breadcrumb uppercase

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

<section class="section border-0 m-0 p-0" style="background: linear-gradient(135deg, var(--primary) 0%, var(--primary--100) 30%, var(--primary--300) 60%, var(--secondary-rgba-20) 150%); position: relative; overflow: hidden;">
    <div class="container position-relative z-index-2 py-5">
        <div class="row align-items-center py-5 mt-3">
            <div class="col-lg-8">
                <ul class="breadcrumb breadcrumb-light mb-3" style="background: none; padding: 0; font-size: 0.82rem; font-weight: 700; letter-spacing: 0.15em; text-transform: uppercase;">
                    @foreach($pageBreadcrumb as $index => $item)
                        @if($index === count($pageBreadcrumb) - 1)
                            <li class="active" style="color: var(--secondary);">{{ $item['label'] }}</li>
                        @else
                            <li>
                                <a href="{{ $item['url'] }}" class="text-decoration-none" style="color: var(--secondary); opacity: 0.55;">{{ $item['label'] }}</a>
                            </li>
                        @endif
                    @endforeach
                </ul>
                <h1 class="font-weight-bold text-color-light mb-0 appear-animation" data-appear-animation="fadeInUpShorter" data-appear-animation-delay="200" style="font-size: clamp(1.8rem, 3vw + 1rem, 3rem); line-height: 1.1; letter-spacing: -0.02em;">
                    {{ $pageTitle }}
                </h1>
                @if(!empty($pageSubtitle))
                    <p class="text-color-light text-4 mt-3 mb-0 appear-animation" data-appear-animation="fadeIn" data-appear-animation-delay="400" style="opacity: 0.7;">{{ $pageSubtitle }}</p>
                @endif
            </div>
            <div class="col-lg-4 text-end d-none d-lg-flex align-items-center justify-content-end">
                <span style="font-size: 7rem; line-height: 1; color: var(--secondary-rgba-20); font-family: 'Playfair Display', serif;">&#10022;</span>
            </div>
        </div>
    </div>
</section>