@props(['section'])

<section class="px-5 pb-20 sm:pb-24 lg:px-8 lg:pb-28">
    <div class="relative isolate mx-auto max-w-7xl overflow-hidden rounded-[2rem] bg-[#d95d24] px-6 py-12 text-white shadow-[0_28px_70px_rgba(121,54,22,0.2)] sm:px-10 sm:py-14 lg:px-14">
        <div class="absolute -right-16 -top-24 -z-10 h-72 w-72 rounded-full border-[3rem] border-white/10"></div>
        <div class="absolute -bottom-32 left-1/3 -z-10 h-72 w-72 rounded-full bg-[#a4421d]/40 blur-3xl"></div>

        <div class="grid gap-10 lg:grid-cols-[1fr_auto] lg:items-end">
            <div>
                <p class="text-xs font-bold tracking-[0.18em] text-[#ffe1d1] uppercase">{{ $section->eyebrow }}</p>
                <h2 class="mt-4 max-w-3xl text-4xl font-black leading-[1.02] tracking-[-0.045em] sm:text-5xl">{{ $section->heading }}</h2>
                <p class="mt-5 max-w-2xl text-base leading-7 text-[#ffe5d7]">{{ $section->body }}</p>
            </div>

            <div class="flex flex-col gap-3 sm:flex-row lg:flex-col xl:flex-row">
                <a href="{{ $section->url($section->primary_cta_url) }}" class="inline-flex min-h-12 items-center justify-center gap-3 rounded-xl bg-white px-6 py-3.5 text-sm font-black text-[#a4421d] transition hover:bg-[#fff4ed] focus:outline-none focus:ring-4 focus:ring-white/30">
                    {{ $section->primary_cta_label }}
                    <span aria-hidden="true">→</span>
                </a>
                <a href="{{ $section->url($section->secondary_cta_url) }}" class="inline-flex min-h-12 items-center justify-center rounded-xl border border-white/30 bg-white/10 px-6 py-3.5 text-sm font-bold text-white transition hover:bg-white/15 focus:outline-none focus:ring-4 focus:ring-white/20">{{ $section->secondary_cta_label }}</a>
            </div>
        </div>
    </div>
</section>