@php
    $localeTh = app()->getLocale() === 'th';
@endphp
<section class="relative isolate w-full overflow-hidden" aria-labelledby="hero-heading">
    <img class="block w-full h-auto" src="{{ $banner['image'] ?? '' }}" alt="{{ $banner['name'] ?? '' }}" aria-hidden="true" width="1920" height="1280" decoding="async" fetchpriority="high" />
    <div class="absolute inset-0 z-10 flex items-center justify-center px-6 md:px-10">
        <div class="mx-auto w-[min(43vw,15rem)] text-center md:w-full md:max-w-2xl">
            <div class="rounded-2xl border border-white/50 bg-white/80 px-4 py-5 shadow-sm backdrop-blur-lg md:px-8 md:py-10 lg:px-12 lg:py-12">
                <h1 class="scroll-reveal font-script uppercase text-[0.65rem] leading-tight text-lux-ink md:text-4xl lg:text-5xl" id="hero-heading" data-scroll-reveal>
                    {{ $banner['detail'] ?? '' }}
                </h1>
                <p class="scroll-reveal mt-2 font-serif text-[0.3125rem] font-medium leading-snug text-tsb-primary md:mt-5 md:text-2xl md:leading-[1.15] md:tracking-[0.08em] {{ $localeTh ? '' : 'uppercase tracking-[0.1em] md:tracking-[0.14em]' }}" data-scroll-reveal>
                    {{ $banner['name'] ?? '' }}
                </p>
                <p class="scroll-reveal mx-auto mt-2 max-w-[11rem] font-sans text-[0.3125rem] leading-[1.5] tracking-wide text-lux-ink-muted md:mt-5 md:max-w-md md:text-sm lg:text-base md:leading-[1.85]" data-scroll-reveal>
                    {{ $banner['desc'] ?? '' }}
                </p>
                <div class="scroll-reveal mt-3.5 flex justify-center md:mt-10 lg:mt-12" data-scroll-reveal>
                    <a class="lux-btn min-h-[1.75rem] px-3.5 py-1 text-[0.6rem] md:min-h-[3rem] md:px-8 md:py-3 md:text-base" href="{{ $link_our_service ?? '' }}">
                        {{ __('frontend::messages.nav_book') }}
                    </a>
                </div>
            </div>
        </div>
    </div>
</section>