@props([
    'title',
    'subtitle' => null,
    'compact' => false,
    'light' => false,
    'image' => null,
])

@php
    $hasImage = $image && file_exists(public_path($image));
@endphp

<section @class([
    'relative border-b-4 border-firm-red-500 overflow-hidden',
    'bg-firm-ink text-white' => ! $light && ! $hasImage,
    'bg-firm-surface text-firm-ink border-slate-200' => $light,
    $compact ? 'py-12 sm:py-14' : 'py-16 sm:py-20 md:py-24',
])>
    @if($hasImage)
        <img src="{{ asset($image) }}" alt="" class="absolute inset-0 w-full h-full object-cover" aria-hidden="true">
        <div class="absolute inset-0 bg-firm-ink/80"></div>
    @endif

    <div class="relative max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
        <div class="max-w-3xl">
            {{ $slot ?? '' }}
            <h1 @class([
                'font-serif font-bold leading-tight',
                $compact ? 'text-3xl sm:text-4xl' : 'text-4xl sm:text-5xl md:text-6xl',
                'text-white' => ! $light,
                'text-firm-ink' => $light,
            ])>{{ $title }}</h1>
            @if($subtitle)
                <p @class([
                    'mt-4 text-lg sm:text-xl leading-relaxed max-w-2xl',
                    'text-white/90' => ! $light,
                    'text-slate-600' => $light,
                ])>{{ $subtitle }}</p>
            @endif
        </div>
    </div>
</section>