{{--
    Page Header compartido para demo-marketing-1
    Estilo: fondo claro (custom-bg-color-1), texto dark, mark highlight

    Variables esperadas:
    - $pageTitle (string)
    - $pageLabel (string, opcional) — se muestra como badge
    - $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 page-header-modern custom-bg-color-1 page-header-lg mb-0">
    <div class="container">
        <div class="row py-lg-5 text-center text-lg-start">
            <div class="col-lg-8 order-2 order-lg-1 align-self-center p-static">
                @if($pageLabel)
                <div class="appear-animation mb-2" data-appear-animation="fadeIn" 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
                <div data-plugin-float-element data-plugin-options="{'minWindowWidth': 992, 'startPos': 'bottom', 'speed': 0.4, 'transition': true, 'transitionDuration': 1000}">
                    <h1 class="text-color-dark font-weight-semi-bold text-lg-12 appear-animation" data-appear-animation="fadeIn" data-appear-animation-delay="100">
                        <mark class="bg-transparent d-inline-block p-0 mark mark-color mark-color-tertiary">{{ $pageTitle }}</mark>
                    </h1>
                </div>
                @if(!empty($pageSubtitle))
                    <p class="text-color-dark opacity-7 text-4 mt-2 mb-0 appear-animation" data-appear-animation="fadeIn" data-appear-animation-delay="200">{{ $pageSubtitle }}</p>
                @endif
            </div>
            <div class="col-lg-4 order-1 order-lg-2 align-self-center">
                <ul class="breadcrumb d-flex justify-content-center justify-content-lg-end text-4-5">
                    @foreach($pageBreadcrumb as $index => $item)
                        @if($index === count($pageBreadcrumb) - 1)
                            <li class="active text-color-primary text-transform-none">{{ $item['label'] }}</li>
                        @else
                            <li>
                                <a href="{{ $item['url'] }}" class="text-color-dark text-color-hover-primary text-transform-none text-decoration-none">{{ $item['label'] }}</a>
                            </li>
                        @endif
                    @endforeach
                </ul>
            </div>
        </div>
    </div>
</section>