@props([
    'title',
    'subtitle' => null,
    'image' => 'https://images.unsplash.com/photo-1576602976047-174e57a47881?q=80&w=1469&auto=format&fit=crop&ixlib=rb-4.1.0&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D',
    'height' => 'h-[150px] md:h-[225px]',
    'marginTop' => null
])

<header class="relative w-full {{ $height }} overflow-hidden {{ $marginTop ?? '' }}">
    <div class="absolute inset-0">
        <img src="{{ $image }}" 
             alt="{{ $title }} Cover" 
             class="w-full h-full object-cover">
        <div class="absolute inset-0 bg-med-primary/80 mix-blend-multiply"></div>
    </div>

    <div class="relative z-10 container mx-auto px-4 h-full flex flex-col justify-center items-center text-center text-med-white">
        <h1 class="text-3xl md:text-4xl font-bold mb-2 drop-shadow-lg">{{ $title }}</h1>
        @if($subtitle)
        <p class="text-base md:text-lg font-light opacity-90 max-w-2xl">
            {{ $subtitle }}
        </p>
        @endif
    </div>
</header>