@php
    $steps = $section['parameters']['steps'] ?? [];
    $title = $section['parameters']['title'] ?? 'Como Participar';
    $subtitle = $section['parameters']['subtitle'] ?? '';

    $renderText = function($text) {
        if (is_string($text) && (strpos($text, '{"type"') === 0 || strpos($text, '{"content"') === 0)) {
            return app(\V2\Services\ContentRichEditor\Services\ContentRichEditorRendererService::class)->toHtml($text);
        }
        return $text;
    };
@endphp

<section class="ftco-section" style="padding-top: 48px; padding-bottom: 48px;" aria-labelledby="step-by-step-title-{{ $section['id'] }}">
    <div class="container">
        @if($title || $subtitle)
            <header class="row text-center" style="margin-bottom: 48px;">
                <div class="col-md-8 col-md-offset-2 ftco-animate">
                    @if($subtitle) <p class="subheading" style="text-transform: uppercase; letter-spacing: 2px; font-size: 13px; color: var(--tenant-primary);">{{ $subtitle }}</p> @endif
                    <h2 id="step-by-step-title-{{ $section['id'] }}" style="font-size: 36px; font-weight: bold; color: #333;">{{ $title }}</h2>
                </div>
            </header>
        @endif

        <div class="row" role="list">
            @foreach($steps as $index => $step)
                <article class="col-md-3 ftco-animate text-center position-relative" style="margin-bottom: 48px;" role="listitem">
                    <figure class="step-image" style="margin-bottom: 24px; margin-left: auto; margin-right: auto; width: 180px; height: 180px;">
                        @if(!empty($step['image_url']))
                            <img src="{{ $step['image_url'] }}" alt="{{ $step['image_alt'] ?? "Ilustração para o passo: {$step['title']}" }}" class="img-responsive img-circle" style="width: 100%; height: 100%; object-fit: cover; border: 5px solid #fff; box-shadow: 0 0.125rem 0.25rem rgba(0,0,0,0.075);">
                        @else
                            <div style="background-color: #f8f9fa; width: 100%; height: 100%; border: 5px solid #fff; box-shadow: 0 0.125rem 0.25rem rgba(0,0,0,0.075); border-radius: 50%; display: flex; align-items: center; justify-content: center;" aria-hidden="true">
                                <i class="bi bi-image fa-3x text-muted"></i>
                            </div>
                        @endif
                    </figure>
                    
                    <header style="display: flex; align-items: center; justify-content: center; margin-bottom: 8px;">
                        <span style="background-color: var(--tenant-primary); color: #fff; width: 25px; height: 25px; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-weight: bold; font-size: 14px; margin-right: 8px;" aria-hidden="true">{{ $index + 1 }}</span>
                        <h3 style="font-size: 18px; font-weight: bold; margin-bottom: 0; margin-top: 0;">{{ $step['title'] ?? '' }}</h3>
                    </header>
                    <div class="small text-muted">{!! $renderText($step['description'] ?? '') !!}</div>

                    @if(!$loop->last)
                        <div class="d-none-xs hidden-sm" style="position: absolute; top: 90px; right: -15%; z-index: 1;" aria-hidden="true">
                            <i class="fa fa-chevron-right text-danger"></i>
                        </div>
                    @endif
                </article>
            @endforeach
        </div>
    </div>
</section>