@props([
    'eyebrow' => null,
    'title',
    'subtitle' => null,
    'align' => 'left',
    'tone' => 'light',     // light | dark
    'level' => 'h2',
])

<div {{ $attributes->class([
    'max-w-3xl',
    'mx-auto text-center' => $align === 'center',
]) }} data-reveal>
    @if ($eyebrow)
        <p @class(['eyebrow mb-4', 'justify-center' => $align === 'center', 'text-white/60' => $tone === 'dark'])>
            {{ $eyebrow }}
        </p>
    @endif

    <{{ $level }} @class([
        'font-display text-headline font-bold',
        'text-white' => $tone === 'dark',
    ])>{{ $title }}</{{ $level }}>

    @if ($subtitle)
        <p @class([
            'mt-4 text-base leading-relaxed sm:text-lg',
            'text-text-secondary' => $tone === 'light',
            'text-white/70' => $tone === 'dark',
            'mx-auto' => $align === 'center',
            'prose-measure' => $align !== 'center',
        ])>{{ $subtitle }}</p>
    @endif

    {{ $slot }}
</div>