@props(['section'])

<section class="relative isolate min-h-[44rem] overflow-hidden bg-[#241a13] text-white">
    <img
        src="{{ $section->imageUrl() }}"
        alt="{{ $section->image_alt }}"
        width="1536"
        height="1024"
        fetchpriority="high"
        class="absolute inset-0 -z-30 h-full w-full object-cover object-center"
    >
    <div class="absolute inset-0 -z-20 bg-linear-to-r from-[#21170f] via-[#2d2118]/90 to-[#2d2118]/25"></div>
    <div class="absolute inset-0 -z-10 bg-linear-to-t from-[#21170f]/75 via-transparent to-[#21170f]/20"></div>
    <div class="absolute -left-24 top-1/4 -z-10 h-72 w-72 rounded-full bg-[#d95d24]/20 blur-3xl"></div>

    <div class="mx-auto flex min-h-[44rem] max-w-7xl flex-col justify-center px-5 py-20 lg:px-8 lg:py-24">
        <nav aria-label="Breadcrumb" class="mb-10 flex items-center gap-3 text-xs font-bold tracking-[0.14em] text-[#d7c9b7] uppercase">
            <a href="{{ \App\Support\LocalizedUrl::route('home') }}" class="transition hover:text-white focus:outline-none focus:ring-4 focus:ring-white/20">{{ __('ui.home') }}</a>
            <span aria-hidden="true" class="h-px w-6 bg-[#9e8975]"></span>
            <span class="text-[#f0a57f]">{{ __('ui.process') }}</span>
        </nav>

        <p class="flex items-center gap-3 text-xs font-black tracking-[0.2em] text-[#f0a57f] uppercase">
            <span class="h-2 w-2 rounded-full bg-[#e2692e] shadow-[0_0_0_6px_rgba(226,105,46,0.16)]"></span>
            {{ $section->eyebrow }}
        </p>
        <h1 class="mt-6 max-w-4xl text-5xl font-black leading-[0.95] tracking-[-0.055em] sm:text-6xl lg:text-7xl">
            {{ $section->heading }}
            <span class="text-[#dce8c7]">{{ $section->subheading }}</span>
        </h1>
        <p class="mt-7 max-w-2xl text-base leading-8 text-[#ded2c4] sm:text-lg">{{ $section->body }}</p>

        <div class="mt-9 flex flex-wrap gap-3">
            <a href="{{ $section->url($section->primary_cta_url) }}" class="inline-flex min-h-12 items-center justify-center gap-3 rounded-xl bg-[#e2692e] px-6 py-3.5 text-sm font-black text-white transition hover:bg-[#f07b42] focus:outline-none focus:ring-4 focus:ring-[#f6cbb8]">
                {{ $section->primary_cta_label }}
                <svg aria-hidden="true" viewBox="0 0 20 20" fill="none" class="h-4 w-4">
                    <path d="M10 3v14M4 11l6 6 6-6" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.8"/>
                </svg>
            </a>
            <a href="{{ $section->url($section->secondary_cta_url) }}" class="inline-flex min-h-12 items-center justify-center rounded-xl border border-white/25 bg-white/10 px-6 py-3.5 text-sm font-black text-white backdrop-blur transition hover:border-white/40 hover:bg-white/15 focus:outline-none focus:ring-4 focus:ring-white/20">{{ $section->secondary_cta_label }}</a>
        </div>

        <dl class="mt-12 grid max-w-3xl gap-px overflow-hidden rounded-2xl border border-white/15 bg-white/15 backdrop-blur sm:grid-cols-3">
            @foreach (($section->items ?? []) as $item)
                <div class="bg-[#251b14]/75 p-5">
                    <dt class="text-xs font-black tracking-[0.14em] text-[#f0a57f] uppercase">{{ $item['label'] ?? '' }}</dt>
                    <dd class="mt-2 text-sm font-bold text-white">{{ $item['title'] ?? '' }}</dd>
                </div>
            @endforeach
        </dl>
    </div>
</section>