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

<section class="relative bg-primary overflow-hidden">
    @if ($image)
        <x-media-image :src="$image" alt="" eager class="absolute inset-0 w-full h-full"
            img-class="w-full h-full object-cover opacity-25" />
        <div class="absolute inset-0 bg-gradient-to-r from-primary/90 to-primary/60"></div>
    @endif
    <div class="absolute inset-0 bg-pattern opacity-10"></div>

    <div
        class="relative z-10 max-w-container-max mx-auto px-margin-mobile md:px-margin-desktop py-16 md:py-24 text-surface-container-lowest">
        <h1 class="font-display-lg text-display-lg-mobile md:text-display-lg leading-tight">{{ $title }}</h1>

        @if ($subtitle)
            <p class="font-body-lg text-body-lg mt-4 max-w-2xl opacity-90 leading-relaxed">{{ $subtitle }}</p>
        @endif
    </div>
</section>