@props(['items' => []])

@if (count($items) > 0)
    <section aria-labelledby="included-heading" class="border-b border-amare-border bg-amare-bg" data-reveal-group>
        <div class="container-amare py-16 md:py-24">
            <p class="text-center text-xs font-semibold uppercase tracking-[0.14em] text-amare-accent">Modalidade</p>
            <h2 id="included-heading" class="mt-3 text-center text-3xl font-medium md:text-4xl">O que está incluso</h2>
            <div class="mx-auto mt-4 h-px w-14 bg-amare-border" aria-hidden="true"></div>
            <div class="mt-12 grid gap-y-10 md:grid-cols-3 md:gap-x-6 md:gap-y-0">
                @foreach ($items as $item)
                    <div class="text-center md:border-l md:border-amare-border md:first:border-l-0 md:px-10" data-reveal data-reveal-from="up">
                        <x-package.icon :icon="$item['icon_key']" class="mx-auto h-10 w-10 text-amare-accent-deep" />
                        <h3 class="mt-4 text-lg font-medium uppercase tracking-[0.05em]">{{ $item['title'] }}</h3>
                        <p class="mx-auto mt-3 max-w-[310px] text-amare-text-muted">{{ $item['description'] }}</p>
                    </div>
                @endforeach
            </div>
        </div>
    </section>
@endif