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

<section class="relative overflow-hidden bg-ink-950 bg-stars">
    <div class="absolute inset-0 bg-gradient-to-b from-brand-900/40 via-ink-950 to-ink-950"></div>
    <div class="relative mx-auto max-w-4xl px-6 py-20 text-center lg:px-8 lg:py-24">
        @if($eyebrow)
            <span class="inline-flex items-center gap-2 rounded-full border border-gold-500/30 bg-gold-500/10 px-4 py-1.5 text-xs font-semibold uppercase tracking-wider text-gold-400">
                {{ $eyebrow }}
            </span>
        @endif
        <h1 class="mt-6 font-display text-4xl font-semibold leading-tight text-white sm:text-5xl">{{ $title }}</h1>
        @if($description)
            <p class="mx-auto mt-5 max-w-2xl text-lg leading-relaxed text-white/70">{{ $description }}</p>
        @endif
        {{ $slot ?? '' }}
    </div>
</section>