@props([
    'title',
    'items',
    'footer' => null,
    'highlight' => null,
])
<section class="nx-manifest" aria-labelledby="nx-problem-title">
    <div class="nx-shell">
        <x-nx.section-head
            index="01"
            label="The problem"
            :title="$title"
            :highlight="$highlight"
            id="nx-problem-title"
        />

        <div class="nx-manifest__grid">
            @foreach($items as $item)
                <article class="nx-card nx-manifest__card">
                    <span class="nx-card__index" aria-hidden="true">{{ str_pad((string) $loop->iteration, 2, '0', STR_PAD_LEFT) }}</span>
                    <p class="nx-card__text">{{ $item['text'] ?? '' }}</p>
                </article>
            @endforeach
        </div>

        @if($footer)
            <p class="nx-footnote">{{ $footer }}</p>
        @endif
    </div>
</section>