@php($c = $c ?? landing_content())
<section class="section" id="how" aria-labelledby="how-title">
    <div class="container">
        <span class="section__eyebrow reveal">{{ $c['how']['eyebrow'] }}</span>
        <h2 class="section__title reveal" id="how-title" style="--delay: 80ms">{{ $c['how']['title'] }}</h2>

        <ol class="how__steps reveal" data-steps style="--delay: 160ms">
            @foreach ($c['how']['steps'] as $index => $step)
                <li class="how-step reveal" style="--delay: {{ $index * 140 }}ms">
                    <div class="how-step__badge" aria-hidden="true">{{ $step['number'] ?? $index + 1 }}</div>
                    <div class="how-step__icon">{!! $step['icon'] !!}</div>
                    <h3 class="how-step__title">{{ $step['title'] }}</h3>
                    <p class="how-step__desc">{{ $step['description'] }}</p>
                </li>
                @if (! $loop->last)
                    <li class="how-arrow reveal" aria-hidden="true" style="--delay: {{ $index * 140 + 70 }}ms">
                        <svg width="28" height="28" viewBox="0 0 24 24" fill="none" aria-hidden="true">
                            <path d="M5 12h14M13 6l6 6-6 6" stroke="currentColor" stroke-width="2.2" stroke-linecap="round" stroke-linejoin="round"/>
                        </svg>
                    </li>
                @endif
            @endforeach
        </ol>
    </div>
</section>