@props([
    'settings',
])

@php
    $steps = filled($settings->method_steps) ? $settings->method_steps : \App\Models\SiteSetting::defaultMethodSteps();
    $intro = $settings->method_intro ?: 'Clareza em cada etapa. Tranquilidade durante todo o processo.';
@endphp

<section aria-labelledby="method-heading" class="border-b border-amare-border bg-amare-bg-archive py-20" data-chapter="method">
    <div class="container-amare grid gap-10 md:grid-cols-[minmax(0,0.8fr)_minmax(0,1.2fr)] md:items-start">
        <div class="space-y-3" data-reveal>
            <p class="text-sm font-medium uppercase tracking-[0.18em] text-amare-accent">Método</p>
            <h2 id="method-heading" class="text-headline font-medium text-amare-text">Cuidado orientado por processo.</h2>
            <p class="text-amare-text-muted">{{ $intro }}</p>
        </div>

        <ol class="grid gap-5 border-t border-amare-border">
            @foreach ($steps as $index => $step)
                <li class="grid gap-2 border-b border-amare-border py-5 md:grid-cols-[4rem_minmax(0,1fr)]" data-reveal>
                    <span class="text-sm text-amare-accent">{{ str_pad((string) ($index + 1), 2, '0', STR_PAD_LEFT) }}</span>
                    <div class="space-y-2">
                        <h3 class="text-2xl font-medium text-amare-text">{{ $step['title'] ?? '' }}</h3>
                        <p class="text-amare-text-muted">{{ $step['body'] ?? '' }}</p>
                    </div>
                </li>
            @endforeach
            </ol>
    </div>
</section>