{{--
    Reusable page hero/cover section with background image and overlay text.
    Use on About, Products, Contact, Careers, Blog, etc.

    @param string $title           Main heading text (e.g. "About")
    @param string|null $titleHighlight Optional word to highlight in primary color (e.g. "TSIC")
    @param string $subtitle        Description line below the title
    @param string|null $image      Background image: full URL via asset(), or filename only (e.g. "cover-image-02.jpg"). Default: cover-image-01.jpg
    @param string|null $imageAlt   Alt text for the background image (optional)
    @param string $imagePosition   object-position class: object-center (default), object-top, object-bottom, object-left, object-right
--}}
@php
    $imageAlt = $imageAlt ?? '';
    $imagePosition = $imagePosition ?? 'object-center';
@endphp
<section class="relative min-h-[320px] md:min-h-[380px] flex items-center py-20 overflow-hidden">
    @if (!empty($image))
        <img class="absolute inset-0 w-full h-full object-cover {{ $imagePosition }}" src="{{ $image }}" alt="{{ $imageAlt }}" width="1920" height="1080" fetchpriority="high" />
    @endif
    {{-- Dark overlay for text readability --}}
    {{-- Gradient: from (oklch) → via (oklch) → to (oklch), same format throughout --}}
    <div class="absolute inset-0 bg-gradient-to-br from-[oklch(0.38_0.19_267_/_0.27)] via-[oklch(0.97_0_0_/_0.42)] to-[oklch(0.9_0.04_161.81_/_0.76)]" aria-hidden="true"></div>
    <div class="container relative z-10 mx-auto px-4 lg:px-8">
        <div class="max-w-3xl mx-auto text-center">
            <h1 class="text-4xl md:text-5xl lg:text-6xl font-bold mb-6 text-balance">
                {{ $title ?? '' }}
                @if (!empty($titleHighlight))
                    <span class="text-[var(--primary)]">{{ $titleHighlight }}</span>
                @endif
            </h1>
            @if (!empty($subtitle))
                <p class="text-2xl text-[var(--muted-foreground)] leading-relaxed text-pretty">
                    {{ $subtitle }}
                </p>
            @endif
        </div>
    </div>
</section>