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

<section class="relative overflow-hidden bg-paper-200 border-b border-slate-200">
    <div class="absolute inset-0 grid-bg opacity-70"></div>
    <div class="absolute -top-px inset-x-0 h-px bg-gradient-to-r from-transparent via-brand-500/40 to-transparent"></div>

    <div class="relative shell pt-14 pb-16 sm:pt-20 sm:pb-20 {{ $image ? 'grid lg:grid-cols-[1.05fr_0.95fr] gap-12 items-center' : '' }}">
        <div>
            @if (!empty($crumbs))
                <nav class="font-mono text-xs text-slate-400 mb-7 flex flex-wrap items-center gap-2" aria-label="Breadcrumb">
                    @foreach ($crumbs as $label => $url)
                        @if (!$loop->last && $url)
                            <a href="{{ $url }}" class="hover:text-brand-600 transition">{{ $label }}</a>
                            <span class="text-slate-300">/</span>
                        @else
                            <span class="text-slate-ink font-medium">{{ $label }}</span>
                        @endif
                    @endforeach
                </nav>
            @endif

            @if ($kicker)<p class="kicker mb-5">{{ $kicker }}</p>@endif
            <h1 class="text-4xl sm:text-5xl lg:text-6xl font-semibold tracking-tight max-w-4xl leading-[1.04] text-slate-ink">{{ $title }}</h1>
            @if ($subtitle)
                <p class="mt-6 text-lg sm:text-xl text-slate-500 max-w-2xl leading-relaxed">{{ $subtitle }}</p>
            @endif
            {{ $slot }}
        </div>

        @if ($image)
            <div class="relative reveal" style="--d:.15s">
                <div class="media media-ring media-zoom aspect-[5/4] shadow-2xl">
                    <img src="{{ asset($image) }}" alt="{{ $title }}" loading="eager">
                </div>
                <div class="absolute -bottom-4 -left-4 hidden sm:flex items-center gap-2 rounded-full border border-slate-200 bg-white px-4 py-2 shadow-lg">
                    <span class="w-1.5 h-1.5 rounded-full bg-brand-500"></span>
                    <span class="font-mono text-[11px] tracking-wide text-slate-500">GLOBAL · SINGLE PARTNER</span>
                </div>
            </div>
        @endif
    </div>
</section>