{{--
    Page Header para demo-bewpro
    Estilo: compact glassmorphic header con orbes sutiles de color turquesa
--}}
@php
    $pageTitle = $pageTitle ?? 'Página';
    $pageLabel = $pageLabel ?? null;
    
    // Convert array breadcrumbs if passed in different formats
    $rawBreadcrumbs = $pageBreadcrumb ?? $breadcrumbItems ?? [
        ['label' => 'Inicio', 'url' => front_homepage_url()],
        ['label' => $pageTitle, 'url' => null],
    ];
    
    $pageBreadcrumb = [];
    foreach ($rawBreadcrumbs as $item) {
        $pageBreadcrumb[] = [
            'label' => $item['label'] ?? $item['title'] ?? '',
            'url' => $item['url'] ?? null
        ];
    }
    
    $pageSubtitle = $pageSubtitle ?? null;
@endphp

<section class="page-header page-header-modern page-header-background page-header-compact bg-color-dark p-relative z-index-1 mb-0" style="background: rgba(3, 6, 40, 0.95) !important; border-bottom: 1px solid rgba(61, 194, 194, 0.15); padding: 40px 0;">
    {{-- Orbes decorativos de fondo --}}
    <span class="custom-circle custom-circle-1 bg-color-light custom-circle-blur appear-animation" data-appear-animation="fadeInLeftShorter" data-appear-animation-delay="400" style="background: var(--primary) !important; opacity: 0.12; filter: blur(60px); width: 250px; height: 250px; top: -50px; right: 10%;"></span>
    <span class="custom-circle custom-circle-2 bg-color-primary appear-animation" data-appear-animation="zoomIn" data-appear-animation-delay="500" style="background: var(--tertiary) !important; opacity: 0.08; filter: blur(50px); width: 200px; height: 200px; bottom: -50px; left: 10%;"></span>

    <div class="container container-xl-custom">
        <div class="row align-items-center">
            <div class="col">
                {{-- Breadcrumb --}}
                <ul class="breadcrumb breadcrumb-light custom-title-with-icon-primary d-block mb-2">
                    @foreach($pageBreadcrumb as $index => $item)
                        @if($index === count($pageBreadcrumb) - 1)
                            <li class="active text-color-light">{{ $item['label'] }}</li>
                        @else
                            <li>
                                <a href="{{ $item['url'] ?: '#' }}" class="text-decoration-none" style="color: var(--primary);">{{ $item['label'] }}</a>
                            </li>
                        @endif
                    @endforeach
                </ul>

                {{-- Titulo --}}
                <h1 class="page-header-title font-weight-bold text-color-light mb-0 appear-animation" data-appear-animation="fadeInUpShorter" data-appear-animation-delay="200" style="font-size: 32px; letter-spacing: -0.01em;">{{ $pageTitle }}</h1>

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