@props([
    'processTitle' => null,
    'processSteps' => [],
    'processHighlight' => null,
    'ctaTitle' => null,
    'ctaBody' => null,
    'ctaHighlight' => null,
    'ctaEyebrow' => 'Ready when you are',
])
@php
    use App\Support\Highlight;

    $processIcons = ['brand-review', 'strategy-design', 'launch-grow'];
@endphp
@if($processTitle)
    <section class="nova-section nova-section--muted nova-process" id="our-process" aria-labelledby="nova-process-title">
        <div class="nova-wrap">
            <header class="nova-section-head">
                <span class="nova-tag">Process</span>
                <h2 id="nova-process-title" class="nova-section-head__title">
                    {!! Highlight::word($processTitle, $processHighlight) !!}
                </h2>
                <p class="nova-section-head__lede">Three clear steps from brand review to launch — no jargon, no runaround.</p>
            </header>

            <ol class="nova-process__steps">
                @foreach($processSteps as $step)
                    <li class="nova-process__step">
                        <span class="nova-process__icon" aria-hidden="true">
                            <x-icons.nova :name="$processIcons[$loop->index] ?? 'brand-review'" class="nova-glyph--process" />
                        </span>
                        <span class="nova-process__num">{{ $step['number'] ?? str_pad((string) $loop->iteration, 2, '0', STR_PAD_LEFT) }}</span>
                        <h3 class="nova-process__title">{{ $step['title'] }}</h3>
                        <p class="nova-process__body">{{ $step['body'] }}</p>
                    </li>
                @endforeach
            </ol>
        </div>
    </section>
@endif

@if($ctaTitle)
    <x-nova.cta
        :title="$ctaTitle"
        :body="$ctaBody"
        :highlight="$ctaHighlight"
        :eyebrow="$ctaEyebrow"
    />
@endif