@props(['section'])

<section class="bg-[#fffaf2] px-5 py-20 sm:py-24 lg:px-8 lg:py-28">
    <div class="mx-auto max-w-7xl">
        <div class="max-w-3xl">
            <p class="text-xs font-black tracking-[0.18em] text-[#b65324] uppercase">{{ $section->eyebrow }}</p>
            <h1 class="mt-4 text-5xl font-black leading-[1.02] tracking-[-0.045em] text-[#2d2118] sm:text-6xl">{{ $section->heading }}</h1>
            <p class="mt-6 text-lg leading-8 text-[#6b6258]">{{ $section->body }}</p>
        </div>

        <div class="mt-12 grid gap-5 md:grid-cols-2">
            @foreach (($section->items ?? []) as $item)
                <article class="rounded-3xl border border-[#e2d2bc] p-7 sm:p-8 {{ $loop->index >= 2 ? 'bg-[#eef3e6]' : 'bg-[#fffdf8]' }}">
                    <p class="text-xs font-bold tracking-[0.15em] text-[#b65324] uppercase">{{ $item['label'] ?? '' }}</p>
                    @if (filled($item['url'] ?? null))
                        <a href="{{ $section->url($item['url']) }}" @if (\Illuminate\Support\Str::startsWith($item['url'], ['http://', 'https://'])) target="_blank" rel="noopener noreferrer" @endif class="mt-4 block break-words text-2xl font-black text-[#2d2118] transition hover:text-[#b65324]">{{ $item['title'] ?? '' }}</a>
                    @else
                        <p class="mt-4 text-xl font-black leading-8 text-[#2d2118]">{{ $item['title'] ?? '' }}</p>
                    @endif
                    @if (filled($item['description'] ?? null))
                        <p class="mt-4 text-sm font-bold text-[#a4421d]">{{ $item['description'] }}</p>
                    @endif
                </article>
            @endforeach
        </div>
    </div>
</section>