@props([
    'processTitle' => null,
    'processSteps' => [],
    'processHighlight' => null,
    'ctaTitle' => null,
    'ctaBody' => null,
    'ctaHighlight' => null,
    'ctaEyebrow' => 'Ready when you are',
])
@php
    use App\Support\Highlight;
@endphp
<section class="atlas-close" id="our-process">
    @if($processTitle)
        <div class="atlas-pipeline-wrap">
            <header class="atlas-pipeline__head">
                <p class="atlas-kicker">The path</p>
                <h2 class="atlas-display atlas-pipeline__title">
                    {!! Highlight::word($processTitle, $processHighlight) !!}
                </h2>
            </header>

            <ol class="atlas-pipeline">
                @foreach($processSteps as $step)
                    <li class="atlas-pipeline__step">
                        <span class="atlas-pipeline__dot">{{ $step['number'] ?? str_pad((string) $loop->iteration, 2, '0', STR_PAD_LEFT) }}</span>
                        <h3>{{ $step['title'] }}</h3>
                        <p>{{ $step['body'] }}</p>
                    </li>
                @endforeach
            </ol>
        </div>
    @endif

    @if($ctaTitle)
        <div class="atlas-invite">
            <p class="atlas-kicker atlas-kicker--light">{{ $ctaEyebrow }}</p>
            <h2 class="atlas-display atlas-invite__title">
                {!! Highlight::word($ctaTitle, $ctaHighlight) !!}
            </h2>
            @if($ctaBody)
                <p class="atlas-invite__body">{{ $ctaBody }}</p>
            @endif
            <div class="atlas-invite__actions">
                <a href="#" class="atlas-btn atlas-btn--solid atlas-btn--light" data-appointment-open>Free brand review</a>
                <a href="{{ route('contact') }}" class="atlas-btn atlas-btn--ghost atlas-btn--light">Contact us</a>
            </div>
        </div>
    @endif
</section>