{{--
=============================================================================
  page-header.blade.php — Porto v12 (v3 DX + DOC + UI)
  Encabezado clásico/moderno con props semánticos, colores, tamaños, animación
  y control explícito del color de breadcrumbs.
=============================================================================

USO BÁSICO
-----------------------------------------------------------------------------
<x-koneko-layout-porto::header.page-header
    title="<strong>Mapa del sitio</strong>"
    :breadcrumbs="[
        ['name' => 'Inicio', 'href' => url('/')],
        ['name' => 'Mapa del sitio', 'active' => true],
    ]"
/>

COLORES Y ANIMACIONES
-----------------------------------------------------------------------------
<x-koneko-layout-porto::header.page-header
    title="<strong>Servicios</strong>"
    color="quaternary"
    titleColor="secondary"
    crumbColor="default"
    titleAnimation="fadeInRightShorter"
    titleDelay="100"
    crumbAnimation="fadeInLeftShorter"
    crumbDelay="300"
/>

ALINEACIÓN Y TAMAÑOS
-----------------------------------------------------------------------------
<x-koneko-layout-porto::header.page-header
    title="<strong>Nosotros</strong>"
    align="left"
    size="modern"
    titileSize="lg"
    breadcrumbSize="sm"
    uppercase
/>

FULL WIDTH Y CLASES CRUDAS
-----------------------------------------------------------------------------
<x-koneko-layout-porto::header.page-header
    title="<strong>Contacto</strong>"
    fullWidth
    titleColor="text-9 text-color-secondary"
    crumbColor="dark"
/>

NOTAS
-----------------------------------------------------------------------------
- title permite HTML controlado por el autor.
- titleColor = "auto" calcula contraste según fondo (light/grey → dark; otros → light).
- crumbColor controla el color de las migas: default|dark|light.
- breadcrumb acepta href o bien route+params.
- Este componente no gestiona background-image/overlay (usa <x-porto::header-background> para eso).
--}}

@props([
    // ----------------------------------------------------------------------------
    // CONTENIDO
    // ----------------------------------------------------------------------------
    'title'       => '',
    'breadcrumbs' => [
        ['name' => 'Inicio', 'href' => '/', 'active' => true],
    ],

    // ----------------------------------------------------------------------------
    // LAYOUT
    // ----------------------------------------------------------------------------
    'align' => 'center',                  // left | center | right
    'size'  => 'default',                 // sm | md | lg | modern | default
    'color' => 'grey',                    // light | grey/gray | dark | primary | secondary | tertiary | quaternary
    'fullWidth' => false,                 // container-fluid si true

    // ----------------------------------------------------------------------------
    // TIPOGRAFÍA
    // ----------------------------------------------------------------------------
    'titileSize'     => 'md',             // sm | md | lg (compat typo)
    'breadcrumbSize' => 'md',             // sm | md | lg
    'uppercase'      => false,

    /**
     * Color de migas.
     * - default => usa utilitario de Porto "text-color-default"
     * - dark    => usa utilitario "text-color-dark"
     * - light   => usa estilo Porto "breadcrumb-light" (invertido para fondos oscuros)
     */
    'crumbColor'     => 'default',        // default | dark | light

    /**
     * Color del <h1>.
     * auto | primary | secondary | tertiary | quaternary | dark | light | <clases>
     */
    'titleColor'     => 'auto',

    // ----------------------------------------------------------------------------
    // ANIMACIONES (Porto appear-animation)
    // ----------------------------------------------------------------------------
    'titleAnimation'    => null,
    'titleDelay'        => 0,
    'titleDuration'     => null,
    'crumbAnimation'    => null,
    'crumbDelay'        => 0,
    'crumbDuration'     => null,
    'overflowTitle'     => false,
    'overflowBreadcrumb'=> false,

    // ----------------------------------------------------------------------------
    // EXTRAS / COMPAT
    // ----------------------------------------------------------------------------
    'customHeader' => false,
])

@php
    // ===== Normalizaciones =====
    $allowedColors = ['light','grey','gray','dark','primary','secondary','tertiary','quaternary'];
    if ($color === 'gray') $color = 'grey';
    $color = in_array($color, $allowedColors, true) ? $color : 'grey';

    $align = in_array($align, ['left','center','right'], true) ? $align : 'center';

    $sizeMap = [
        'sm' => 'page-header-sm',
        'md' => 'page-header-md',
        'lg' => 'page-header-lg',
        'modern' => 'page-header-modern',
        'default' => ''
    ];
    $sizeClass = $sizeMap[$size] ?? $sizeMap['md'];

    // ===== Clases base =====
    $pageHeaderClass = 'page-header page-header-modern custom-page-header';
    $bgColorClass    = 'bg-color-' . $color;

    // ===== H1 =====
    $h1SizeMap = ['sm' => 'text-6', 'md' => '', 'lg' => 'text-10'];
    $semanticMap = [
        'primary' => 'text-color-primary',
        'secondary' => 'text-color-secondary',
        'tertiary' => 'text-color-tertiary',
        'quaternary' => 'text-color-quaternary',
        'dark' => 'text-dark',
        'light' => 'text-light',
    ];

    $h1Class = 'font-weight-bold ' . ($h1SizeMap[$titileSize] ?? $h1SizeMap['md']);
    if ($titleColor === 'auto') {
        $h1Class .= in_array($color, ['light','grey']) ? ' text-dark' : ' text-light';
    } elseif (isset($semanticMap[$titleColor])) {
        $h1Class .= ' ' . $semanticMap[$titleColor];
    } elseif (is_string($titleColor) && $titleColor !== '') {
        $h1Class .= ' ' . $titleColor; // clases crudas
    }
    if ($uppercase) $h1Class .= ' text-uppercase';

    // ===== Breadcrumb =====
    $ulClasses = ['breadcrumb','d-block'];
    $ulClasses[] = match ($align) {
        'left'   => 'text-md-end',
        'right'  => 'text-md-start',
        default  => 'text-center',
    };
    $ulClasses[] = match ($breadcrumbSize) {
        'sm' => 'text-2',
        'lg' => 'text-3-5',
        default => '',
    };

    // Color explícito del breadcrumb
    if ($crumbColor === 'light') {
        $ulClasses[] = 'breadcrumb-light';
    } elseif ($crumbColor === 'dark') {
        $ulClasses[] = 'text-color-dark';
    } else { // default
        $ulClasses[] = 'text-color-default';
    }

    // ===== Grid =====
    $containerClass = $fullWidth ? 'container-fluid' : 'container';
    $rowClass       = $size === 'modern' ? 'row py-5' : 'row';

    $titleColClass = 'order-2 ';
    $crumbColClass = 'order-1 ';
    if ($align === 'center') {
        $titleColClass .= 'col-md-12 text-center';
        $crumbColClass .= 'col-md-12';
    } elseif ($align === 'right') {
        $titleColClass .= 'col-md-8 text-end';
        $crumbColClass .= 'col-md-4';
    } else { // left
        $titleColClass .= 'col-md-8 order-md-1';
        $crumbColClass .= 'col-md-4 order-md-2';
    }
    $titleColClass .= ' align-self-center p-static';
    $crumbColClass .= ' align-self-center';
@endphp

<section class="{{ $pageHeaderClass }} {{ $bgColorClass }} {{ $sizeClass }} m-0">
    <div class="{{ $containerClass }}">
        <div class="{{ $rowClass }}">
            <div class="{{ $titleColClass }}">
                @if($overflowTitle)<div class="overflow-hidden">@endif
                <h1 class="{{ $h1Class }} {{ $titleAnimation ? 'appear-animation' : '' }}"
                    @if($titleAnimation)
                        data-appear-animation="{{ $titleAnimation }}"
                        @if($titleDelay) data-appear-animation-delay="{{ $titleDelay }}" @endif
                        @if($titleDuration) data-appear-animation-duration="{{ $titleDuration }}" @endif
                    @endif
                >{!! $title !!}</h1>
                @if($overflowTitle)</div>@endif
            </div>
            <div class="{{ $crumbColClass }}">
                @if($overflowBreadcrumb)<div class="overflow-hidden">@endif
                <ul class="{{ implode(' ', $ulClasses) }} {{ $crumbAnimation ? 'appear-animation' : '' }}"
                    @if($crumbAnimation)
                        data-appear-animation="{{ $crumbAnimation }}"
                        @if($crumbDelay) data-appear-animation-delay="{{ $crumbDelay }}" @endif
                        @if($crumbDuration) data-appear-animation-duration="{{ $crumbDuration }}" @endif
                    @endif
                >
                    @foreach ($breadcrumbs as $breadcrumb)
                        @php
                            $name   = $breadcrumb['name']  ?? '';
                            $active = (bool)($breadcrumb['active'] ?? false);
                            $route  = $breadcrumb['route'] ?? null;
                            $params = $breadcrumb['params'] ?? [];
                            $href   = $breadcrumb['href']  ?? null;

                            $routeExists = $route && \Illuminate\Support\Facades\Route::has($route);
                            $url = $routeExists ? route($route, $params) : ($href ?: null);
                        @endphp

                        <li class="{{ $active ? 'active' : '' }}" @if($active) aria-current="page" @endif>
                            @if (!$active && $url)
                                <a href="{{ $url }}">{{ $name }}</a>
                            @else
                                <span>{{ $name }}</span>
                            @endif
                        </li>
                    @endforeach
                </ul>
                @if($overflowBreadcrumb)</div>@endif
            </div>
        </div>
    </div>
</section>