@php
    /**
     * Reusable inner-page hero banner that mirrors the home hero style.
     *
     * @var string                     $eyebrow      Script-style overline text
     * @var string                     $title        Page heading
     * @var string|null                $lead         Optional lede paragraph
     * @var string                     $image        Path under modules/frontend/images, defaults to a banner
     * @var array<int, array{label:string, url?:string}>|null $crumbs Breadcrumb trail (last item is current page)
     */
    $eyebrow = $eyebrow ?? '';
    $title = $title ?? '';
    $lead = $lead ?? null;
    $image = $image ?? 'banner/banner-02.jpg';
    $crumbs = $crumbs ?? [];
    $localeTh = app()->getLocale() === 'th';
@endphp
<section class="relative isolate w-full overflow-hidden md:flex md:min-h-[min(70svh,30rem)] md:items-center md:justify-center md:px-10 md:py-20" aria-labelledby="page-hero-heading">
    <img class="block w-full h-auto md:pointer-events-none md:absolute md:inset-0 md:z-0 md:h-full md:w-full md:object-cover" src="{{ $image }}" alt="" aria-hidden="true" width="1920" height="1280" decoding="async" fetchpriority="high" />
    <div class="absolute inset-0 z-[1] bg-gradient-to-t from-pink-950/80 via-pink-950/50 to-transparent" aria-hidden="true"></div>
    <div class="absolute inset-0 z-10 flex items-center justify-center px-6 md:relative md:inset-auto md:mx-auto md:w-full md:max-w-3xl md:px-0 md:text-center">
        <div class="mx-auto mx-auto w-full text-center md:w-full">
            <div class="">
                @if ($eyebrow)
                    <p class="scroll-reveal font-script text-[1.5rem] text-lux-blush md:text-4xl" data-scroll-reveal>
                        {{ $eyebrow }}
                    </p>
                @endif
                <h1 class="scroll-reveal mt-0 font-serif text-[2rem] font-medium leading-snug tracking-[0.06em] text-white md:text-4xl md:leading-[1.15] md:tracking-[0.08em] lg:text-[2.35rem] {{ $localeTh ? '' : 'uppercase tracking-[0.1em] md:tracking-[0.14em]' }}" id="page-hero-heading" data-scroll-reveal>
                    {{ $title }}
                </h1>
                @if ($lead)
                <p class="scroll-reveal mx-auto mt-0 max-w-xl font-sans text-sm leading-[1.85] tracking-wide text-white/85 md:mt-5 md:text-base" data-scroll-reveal>
                    {{ $lead }}
                </p>
                @endif
                @if (!empty($crumbs))
                    <nav class="scroll-reveal mt-3.5 flex justify-center md:mt-7" data-scroll-reveal aria-label="Breadcrumb">
                        <ol class="flex flex-wrap items-center justify-center gap-x-1 gap-y-1 font-sans text-[0.5rem] font-semibold uppercase tracking-[0.15em] text-white/80 md:gap-x-2 md:text-[0.65rem] md:tracking-[0.22em]">
                            @foreach ($crumbs as $i => $crumb)
                                <li class="flex items-center gap-2">
                                    @if (!empty($crumb['url']) && $i < count($crumbs) - 1)
                                        <a class="transition-colors hover:text-white" href="{{ $crumb['url'] }}">{{ $crumb['label'] }}</a>
                                    @else
                                        <span class="text-white" aria-current="page">{{ $crumb['label'] }}</span>
                                    @endif
                                    @if ($i < count($crumbs) - 1)
                                        <span class="text-white/35" aria-hidden="true">/</span>
                                    @endif
                                </li>
                            @endforeach
                        </ol>
                    </nav>
                @endif
            </div>
        </div>
    </div>
</section>