@props([
    /** Seitentitel (H1). Bereits übersetzt übergeben: :title="__('…')" */
    'title' => '',

    /** Eyebrow-Text rechts neben dem Hub-Badge, z. B. "Administration · Kategorien" */
    'eyebrow' => '',

    /** Label des Hub-Badges links oben (Standard: Admin Backend) */
    'badge' => 'Admin Backend',

    /** Optionaler Beschreibungstext unter dem Titel */
    'description' => '',

    /**
     * Titel-Größe: sm (28px) | md (Standard, 30px) | lg (Landing/Hero-Listen, 34px).
     * lg vergrößert zusätzlich die Beschreibung und den Button-Abstand.
     */
    'size' => 'md',

    /** Maximale Breite der Beschreibung: 640px (Standard) | 720px (breite Fließtexte) */
    'descriptionWidth' => '640px',
])

@php
    $size = in_array($size, ['sm', 'md', 'lg'], true) ? $size : 'md';
    $titleClass = match ($size) {
        'sm' => 'text-[28px] tracking-[-0.5px] leading-[1.15]',
        'lg' => 'text-[34px] tracking-[-0.7px] leading-[1.1]',
        default => 'text-[30px] tracking-[-0.6px] leading-[1.15]',
    };
    $descriptionClass = $size === 'lg' ? 'text-[13.5px]' : 'text-[13px]';
    $descriptionMaxWidth = $descriptionWidth === '720px' ? 'max-w-[720px]' : 'max-w-[640px]';
    $actionsGap = $size === 'lg' ? 'gap-3' : 'gap-2';
@endphp

{{--
    Einheitlicher Seitenkopf des Admin-Backends. Ersetzt den vielfach kopierten
    page-header-Block. Variable Teile über Slots:
      <x-slot:meta>    – zusätzliche Badges hinter dem Eyebrow (ID, Zähler …)
      <x-slot:actions> – Buttons rechts (Zurück, Speichern …)
--}}
<header {{ $attributes->class('page-header') }}>
    <div class="min-w-0">
        <div class="flex items-center gap-3 mb-3 flex-wrap">
            @if (filled($badge))
                <span class="badge hub dot">{{ $badge }}</span>
            @endif

            @if (filled($eyebrow))
                <span class="eyebrow muted">{{ $eyebrow }}</span>
            @endif

            {{ $meta ?? '' }}
        </div>

        <h1 class="{{ $titleClass }} font-bold m-0 text-[color:var(--color-ink)] break-words">
            {{ $title }}
        </h1>

        @if (filled($description))
            <p class="{{ $descriptionClass }} leading-[1.55] mt-2 m-0 {{ $descriptionMaxWidth }} text-[color:var(--color-ink-2)]">
                {{ $description }}
            </p>
        @endif
    </div>

    @isset($actions)
        <div class="flex items-center {{ $actionsGap }} flex-shrink-0">
            {{ $actions }}
        </div>
    @endisset
</header>