{{-- Page header band with breadcrumb, title and intro text. Extra buttons can go in the default slot. --}}
@props(['title', 'subtitle' => null, 'eyebrow' => null, 'breadcrumbs' => []])

<section class="border-b border-slate-200 bg-brand-50">
    <div class="container-page py-5 sm:py-7">
        @if ($breadcrumbs)
            <div class="mb-4"><x-breadcrumb :items="$breadcrumbs" /></div>
        @endif

        @if ($eyebrow)
            <p class="text-sm font-semibold uppercase tracking-wide text-brand-700">{{ $eyebrow }}</p>
        @endif

        <h1 class="mt-1 max-w-3xl text-3xl font-bold tracking-tight sm:text-4xl">{{ $title }}</h1>

        @if ($subtitle)
            <p class="mt-4 max-w-3xl text-lg text-slate-600">{{ $subtitle }}</p>
        @endif

        @if (! $slot->isEmpty())
            <div class="mt-6 flex flex-wrap gap-3">{{ $slot }}</div>
        @endif
    </div>
</section>