@props(['title', 'subtitle' => null, 'align' => 'center', 'dark' => false])

<div @class([
    'mb-12',
    'text-center' => $align === 'center',
    'text-left' => $align === 'left',
])>
    <p @class([
        'font-semibold text-sm uppercase tracking-widest mb-3',
        'text-firm-red-500' => ! $dark,
        'text-firm-red-400' => $dark,
    ])>Shavhani Attorneys</p>
    <h2 @class([
        'font-serif text-3xl sm:text-4xl font-bold',
        'text-firm-ink' => ! $dark,
        'text-white' => $dark,
    ])>{{ $title }}</h2>
    <div @class([
        'heading-rule mt-4',
        'heading-rule-center' => $align === 'center',
    ])></div>
    @if($subtitle)
        <p @class([
            'mt-5 text-lg leading-relaxed',
            'text-slate-600' => ! $dark,
            'text-white/75' => $dark,
            'max-w-2xl mx-auto' => $align === 'center',
            'max-w-2xl' => $align === 'left',
        ])>{{ $subtitle }}</p>
    @endif
</div>