{{--
    Page Header compartido para demo-accounting-2 (COKE Redesign)
    Estilo: breadcrumbs en warm grey/primary, badge pill translúcido, Space Grotesk h2 y CTA dinámico.
--}}

@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 ? 'py-3' : 'pt-5 pb-4' }}">
    <div class="row align-items-center">
        <div class="col-lg-7 text-center text-lg-start mb-4 mb-lg-0">
            {{-- Breadcrumb --}}
            @if(count($pageBreadcrumb) > 1)
                <ul class="breadcrumb d-flex justify-content-center justify-content-lg-start align-items-center font-weight-medium text-2 mb-3" style="font-family: var(--font-family-primary), sans-serif; gap: 8px;">
                    @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) !important;">{{ $label }}</li>
                        @else
                            <li class="d-flex align-items-center">
                                <a href="{{ $url }}" class="text-decoration-none transition-2ms text-color-hover-primary" style="color: var(--quaternary) !important;">{{ $label }}</a>
                                <span class="mx-2 text-color-tertiary opacity-3" style="font-size: 0.8rem;">/</span>
                            </li>
                        @endif
                    @endforeach
                </ul>
            @endif

            {{-- Badge Pill --}}
            @if($pageLabel)
                <span class="badge rounded-pill text-uppercase font-weight-semibold px-3 py-2 d-inline-flex" style="background-color: var(--primary-rgba-10); border: 1px solid var(--primary-rgba-25); color: var(--primary) !important; font-size: 0.75rem; letter-spacing: 0.08em; font-family: var(--font-family-secondary), sans-serif;">
                    {{ $pageLabel }}
                </span>
            @endif

            {{-- Main Title --}}
            <div class="appear-animation" data-appear-animation="fadeIn" data-appear-animation-delay="200">
                <h1 class="font-weight-bold line-height-1 mb-3 mt-3" style="font-family: var(--font-family-secondary), sans-serif !important; font-size: clamp(2.2rem, 5vw, 3.8rem); color: var(--light) !important; letter-spacing: -0.03em;">
                    {{ $pageTitle }}
                </h1>
                @if($pageSubtitle)
                    <p class="text-4 mt-2 mb-0" style="color: var(--tertiary-rgba-80) !important; font-family: var(--font-family-primary), sans-serif; line-height: 1.6;">
                        {{ $pageSubtitle }}
                    </p>
                @endif
            </div>
        </div>

        {{-- Call To Action (CTA) --}}
        @if(config('site.page_header.show_cta', true))
        <div class="col-lg-5 text-center text-lg-end">
            <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 gap-3">
                    @if(config('site.page_header.show_phone', false) && config('site.contact.phone'))
                    <div class="d-flex align-items-center me-2">
                        <i class="fas fa-phone-alt text-color-primary me-2"></i>
                        <a href="tel:{{ config('site.contact.phone') }}" class="text-decoration-none font-weight-semibold text-color-light text-color-hover-primary transition-2ms" style="font-family: var(--font-family-primary), sans-serif;">{{ config('site.contact.phone') }}</a>
                    </div>
                    @endif
                    @php
                        $ctaTitle = config('site.page_header.cta_title', config('site.header.cta_button.title', __('Contacto')));
                        $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 font-weight-bold px-4 py-3 text-2-5" style="border-radius: 50px !important;">
                        <span>{{ $ctaTitle }}</span>
                    </a>
                </div>
            </div>
        </div>
        @endif
    </div>
    <hr class="opacity-1 mt-4 mb-0" style="background-color: var(--primary-rgba-15); height: 1px; border: none;">
</div>