@props([
    'eyebrow' => null,
    'title',
    'subtitle' => null,
    'breadcrumbs' => [],
])

<section class="relative overflow-hidden bg-brand-dark">
    <div class="map-grid pointer-events-none absolute inset-0 opacity-60"></div>
    <div class="pointer-events-none absolute -right-24 -top-24 h-72 w-72 rounded-full bg-brand-primary/20 blur-3xl"></div>

    <div class="relative mx-auto flex max-w-6xl flex-col gap-5 px-6 py-16 sm:py-20">
        <x-breadcrumb :items="$breadcrumbs" />

        @if ($eyebrow)
            <span class="text-xs font-semibold uppercase tracking-[0.16em] text-brand-light">
                {{ $eyebrow }}
            </span>
        @endif

        <h1 class="max-w-2xl text-3xl font-bold text-brand-white sm:text-4xl">
            {{ $title }}
        </h1>

        @if ($subtitle)
            <p class="max-w-2xl text-base leading-relaxed text-brand-white/80 sm:text-lg">
                {{ $subtitle }}
            </p>
        @endif

        {{ $slot ?? '' }}
    </div>
</section>
