@props([
    'eyebrow' => null,
    'heading' => null,
    'align' => 'left', // left | center
    'tone' => 'dark',  // dark | light
])

<div @class(['max-w-2xl', 'mx-auto text-center' => $align === 'center'])>
    @if ($eyebrow)
        <span class="{{ $tone === 'light' ? 'chip-dark' : 'chip' }}">{{ $eyebrow }}</span>
    @endif
    @if ($heading)
        <h2 @class([
            'mt-5 font-display text-3xl font-bold sm:text-4xl',
            'text-white' => $tone === 'light',
            'text-ink' => $tone === 'dark',
        ])>{{ $heading }}</h2>
    @endif
    @if ($slot->isNotEmpty())
        <div @class(['mt-5 text-lg leading-relaxed', 'text-navy-100' => $tone === 'light', 'text-muted' => $tone === 'dark'])>{{ $slot }}</div>
    @endif
</div>