{{--
    @intent Bloco `steps`: passo a passo ordenado (ex.: como solicitar um serviço).
    @description `<ol>` semântico com títulos em `<h3>`; a ordem é a do documento e funciona sem JS.
--}}
@props([
    'props' => [],
    'media' => [],
    'blockId' => null,
])

@php
    $title = is_string($props['title'] ?? null) ? $props['title'] : null;
    $items = [];

    foreach (is_array($props['items'] ?? null) ? $props['items'] : [] as $item) {
        if (! is_array($item) || ! is_string($item['title'] ?? null)) {
            continue;
        }

        $items[] = [
            'title' => $item['title'],
            'body' => is_string($item['body'] ?? null) ? $item['body'] : null,
        ];
    }

    $headingId = is_string($blockId) && $blockId !== ''
        ? preg_replace('/[^a-z0-9-]/', '', strtolower($blockId)).'-title'
        : null;
@endphp

@if ($title !== null && $items !== [])
    <section
        @if ($headingId !== null) aria-labelledby="{{ $headingId }}" @else aria-label="{{ $title }}" @endif
        class="flex flex-col gap-4"
    >
        <h2 id="{{ $headingId }}" class="text-2xl font-bold tracking-tight text-civic-ink">{{ $title }}</h2>

        <ol class="flex list-decimal flex-col gap-4 ps-6">
            @foreach ($items as $item)
                <li class="rounded-2xl border-2 border-civic-border bg-civic-surface p-5 ps-3">
                    <h3 class="text-lg font-bold text-civic-ink">{{ $item['title'] }}</h3>

                    @if ($item['body'] !== null)
                        <p class="mt-2 text-civic-outline">{{ $item['body'] }}</p>
                    @endif
                </li>
            @endforeach
        </ol>
    </section>
@endif