@props(['data'])

<section class="tx-protocol" id="how-it-works" data-tx-section>
    <div class="tx-protocol__header">
        <span class="tx-eyebrow">{{ $data['eyebrow'] ?? 'How It Works' }}</span>
        <h2 class="tx-protocol__headline">{!! nl2br(e($data['headline'] ?? '')) !!}</h2>
    </div>
    <div class="tx-protocol__steps">
        @foreach($data['steps'] ?? [] as $i => $step)
        <div class="tx-step tx-reveal-card">
            <div class="tx-step__num">{{ str_pad($i + 1, 2, '0', STR_PAD_LEFT) }}</div>
            <div class="tx-step__icon">{{ $step['icon'] ?? '📝' }}</div>
            <h3 class="tx-step__title">{{ $step['title'] ?? '' }}</h3>
            <p class="tx-step__desc">{{ $step['description'] ?? '' }}</p>
        </div>
        @endforeach
    </div>
</section>