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

<div {{ $attributes->merge(['class' => 'mb-10 ' . ($align === 'center' ? 'text-center mx-auto max-w-2xl' : '')]) }}>
    @if($eyebrow)
        <span class="badge badge-success mb-3">{{ $eyebrow }}</span>
    @endif
    <h2 class="text-2xl md:text-3xl lg:text-4xl font-extrabold text-balance">{{ $title }}</h2>
    @if($description)
        <p class="mt-3 text-navy-500 text-base md:text-lg leading-relaxed">{{ $description }}</p>
    @endif
</div>