@props(['section'])

@php
    $settings = $section->settings ?? [];
@endphp

<section id="cerita-kami" class="relative isolate overflow-hidden bg-[#2d2118] px-5 py-20 text-white sm:py-24 lg:px-8 lg:py-28">
    <div class="absolute left-1/4 top-0 -z-10 h-96 w-96 rounded-full bg-[#d95d24]/15 blur-3xl"></div>
    <div class="absolute bottom-0 right-0 -z-10 h-96 w-96 rounded-full bg-[#78924b]/15 blur-3xl"></div>
    <div class="mx-auto max-w-7xl">
        <div class="grid gap-12 lg:grid-cols-[0.82fr_1.18fr] lg:items-start">
            <div>
                <p class="text-xs font-black tracking-[0.18em] text-[#f0a57f] uppercase">{{ $section->eyebrow }}</p>
                <h2 class="mt-4 max-w-xl text-4xl font-black leading-[1.02] tracking-[-0.045em] sm:text-5xl">{{ $section->heading }}</h2>
            </div>
            <div class="grid gap-6 text-base leading-8 text-[#d7c9b7]">
                <p>{{ $section->body }}</p>
                <p>{{ $section->subheading }}</p>
                <p class="border-l-2 border-[#e2692e] pl-6 text-xl font-black leading-8 text-white">{{ $settings['statement'] ?? '' }}</p>
            </div>
        </div>
        <div class="mt-16 grid gap-px overflow-hidden rounded-3xl border border-white/10 bg-white/10 lg:grid-cols-3">
            @foreach (($section->items ?? []) as $item)
                <article class="bg-[#33261d] p-7 sm:p-8">
                    <span class="grid h-11 w-11 place-items-center rounded-2xl bg-[#e2692e] text-white" aria-hidden="true">{{ str_pad((string) $loop->iteration, 2, '0', STR_PAD_LEFT) }}</span>
                    <p class="mt-7 text-xs font-black tracking-[0.14em] text-[#f0a57f] uppercase">{{ $item['label'] ?? '' }}</p>
                    <h3 class="mt-3 text-2xl font-black">{{ $item['title'] ?? '' }}</h3>
                    <p class="mt-4 text-sm leading-7 text-[#bcae9e]">{{ $item['description'] ?? '' }}</p>
                </article>
            @endforeach
        </div>
    </div>
</section>