@props(['service'])

@if(!empty($service['process']))
@php
    $steps = array_values($service['process']);
    $processEyebrow = $service['processEyebrow'] ?? __('messages.service_detail.our_process_section_label');
    $processHeading = $service['processHeading'] ?? __('messages.service_detail.our_process', ['service' => $service['name']]);
    $processDesc = $service['processDesc'] ?? __('messages.service_detail.our_process_desc');
@endphp
<section id="process" class="svc-section svc-section--white scroll-mt-24" aria-labelledby="svc-process-heading">
    <div class="site-container svc-process">
        <x-service-detail.section-intro
            class="svc-process__intro"
            :eyebrow="$processEyebrow"
            :title="$processHeading"
            :description="$processDesc"
            heading-id="svc-process-heading"
        />

        <div class="svc-process__panel svc-reveal"
             style="--process-count: {{ count($steps) }};">
            <ol class="svc-process__steps">
                @foreach($steps as $i => $step)
                <li class="svc-process__step svc-reveal svc-reveal--delay-{{ min($i + 1, 3) }}">
                    <div class="svc-process__step-card">
                        <h3 class="svc-process__step-title">{{ $step['title'] }}</h3>
                        <p class="svc-process__step-body">{{ $step['description'] }}</p>
                        @if(! empty($step['outcome']))
                        <p class="svc-process__step-outcome">{{ $step['outcome'] }}</p>
                        @endif
                    </div>
                </li>
                @endforeach
            </ol>
        </div>
    </div>
</section>
@endif