{{--
    Page Header compartido para demo-accounting-2
    Estilo: badge pill + large title + CTA phone/button

    Variables esperadas:
    - $pageTitle (string)
    - $pageLabel (string, opcional) — Badge text (ej: "SERVICIOS", "BLOG")
    - $pageBreadcrumb (array, opcional)
    - $pageSubtitle (string, opcional) — Se usa como heading grande
--}}

@php
    $pageTitle = $pageTitle ?? 'Página';
    $pageLabel = $pageLabel ?? null;
    $pageBreadcrumb = $pageBreadcrumb ?? $breadcrumbItems ?? [
        ['label' => 'Inicio', 'url' => front_homepage_url()],
        ['label' => $pageTitle, 'url' => null],
    ];
    $pageSubtitle = $pageSubtitle ?? null;
    $pageCompact = $pageCompact ?? config('site.page_header.compact', false);
@endphp

<div class="container {{ $pageCompact ? '' : 'pb-lg-5' }}">
    <div class="row align-items-center {{ $pageCompact ? 'py-3' : 'py-5' }}">
        <div class="col-lg-6 text-center text-lg-start">
            {{-- Breadcrumb --}}
            @if(count($pageBreadcrumb) > 1)
                <ul class="breadcrumb d-flex font-weight-medium text-2 mb-2" style="color: var(--quaternary);">
                    @foreach($pageBreadcrumb as $index => $item)
                        @php
                            $label = is_array($item) ? ($item['label'] ?? $item['title'] ?? '') : $item;
                            $url = is_array($item) ? ($item['url'] ?? null) : null;
                        @endphp
                        @if($index === count($pageBreadcrumb) - 1)
                            <li class="active" style="color: var(--primary);">{{ $label }}</li>
                        @else
                            <li><a href="{{ $url }}" class="text-decoration-none" style="color: var(--quaternary);">{{ $label }}</a></li>
                        @endif
                    @endforeach
                </ul>
            @endif
            @if($pageLabel)
                <span class="badge bg-light text-dark border border-all-light box-shadow-9 rounded-pill text-uppercase font-weight-semibold px-3 py-2 px-2"><span class="d-inline-flex py-1 px-2">{{ $pageLabel }}</span></span>
            @endif
            <div class="appear-animation" data-appear-animation="fadeIn" data-appear-animation-delay="200">
                <h2 class="text-9 text-lg-12 font-weight-semibold line-height-1 mb-3 mt-3">{{ $pageTitle }}</h2>
                @if($pageSubtitle)
                    <p class="text-4 mt-2" style="color: var(--quaternary);">{{ $pageSubtitle }}</p>
                @endif
            </div>
        </div>
        @if(config('site.page_header.show_cta', true))
        <div class="col-lg-6 text-center text-lg-start">
            <div class="appear-animation" data-appear-animation="fadeInUpShorter" data-appear-animation-delay="300">
                <div class="d-flex justify-content-center justify-content-lg-end align-items-center">
                    @if(config('site.page_header.show_phone', false) && config('site.contact.phone'))
                    <div class="d-flex">
                        <img src="{{ asset('template/img/icons/phone-2.svg') }}" width="24" height="24" alt="" data-icon data-plugin-options="{'onlySVG': true, 'extraClass': 'svg-fill-color-primary pe-1'}" />
                        <a href="tel:{{ config('site.contact.phone') }}" class="text-decoration-none font-secondary text-4 font-weight-semibold text-color-dark text-color-hover-primary transition-2ms negative-ls-05 ws-nowrap">{{ config('site.contact.phone') }}</a>
                    </div>
                    @endif
                    @php
                        $ctaTitle = config('site.page_header.cta_title', config('site.header.cta_button.title', __('Blog')));
                        $ctaUrl = config('site.page_header.cta_url', config('site.header.cta_button.url', '/contact'));
                    @endphp
                    <a href="{{ url($ctaUrl) }}" class="btn btn-rounded btn-primary box-shadow-7 font-weight-medium px-4 py-3 text-2-5 btn-swap-1 d-flex" data-clone-element="1">
                        <span>{{ $ctaTitle }}</span>
                    </a>
                </div>
            </div>
        </div>
        @endif
    </div>
</div>