@if(!empty($journey['tabs']))
    <section class="journey section" id="journey" aria-labelledby="journey-title" @sectionTone($journey['style'] ?? [])>
        <div class="container">
            <div class="section-head section-head--center reveal">
                <p class="eyebrow" data-edit="journey.eyebrow">{{ $journey['eyebrow'] ?? '' }}</p>
                <h2 id="journey-title"><x-editable path="journey.title">{{ $journey['title'] ?? '' }}</x-editable></h2>
                <p class="section-head__desc"><x-editable path="journey.description">{{ $journey['description'] ?? '' }}</x-editable></p>
            </div>

            <div class="journey__tabs reveal" role="tablist" aria-label="Growth journey stages">
                @foreach($journey['tabs'] as $index => $tab)
                    <button
                        class="journey__tab {{ $loop->first ? 'is-active' : '' }}"
                        type="button"
                        role="tab"
                        id="journey-tab-{{ $tab['id'] ?? $index }}"
                        aria-controls="journey-panel-{{ $tab['id'] ?? $index }}"
                        aria-selected="{{ $loop->first ? 'true' : 'false' }}"
                        data-journey-tab
                    >
                        <span class="journey__tab-icon" aria-hidden="true" data-edit="journey.tabs.{{ $index }}.icon">{{ $tab['icon'] ?? '' }}</span>
                        <span class="journey__tab-text" data-edit="journey.tabs.{{ $index }}.label">{{ $tab['label'] ?? '' }}</span>
                        <span class="journey__tab-index">{{ str_pad($index + 1, 2, '0', STR_PAD_LEFT) }}</span>
                    </button>
                @endforeach
            </div>

            <div class="journey__panels reveal">
                @foreach($journey['tabs'] as $index => $tab)
                    <div
                        class="journey__panel {{ $loop->first ? 'is-active' : '' }}"
                        id="journey-panel-{{ $tab['id'] ?? $index }}"
                        role="tabpanel"
                        aria-labelledby="journey-tab-{{ $tab['id'] ?? $index }}"
                        data-journey-panel
                        @if(!$loop->first) hidden @endif
                    >
                        <div class="journey__panel-top">
                            <p class="stage" data-edit="journey.tabs.{{ $index }}.stage">{{ $tab['stage'] ?? '' }}</p>
                            <p class="journey__watermark" aria-hidden="true">{{ str_pad($index + 1, 2, '0', STR_PAD_LEFT) }}</p>
                        </div>

                        <div class="journey__columns">
                            <div class="journey__problem">
                                <p class="col-label"><x-editable path="journey.problemLabel">{{ $journey['problemLabel'] ?? 'The problem' }}</x-editable></p>
                                <h3><x-editable path="journey.tabs.{{ $index }}.problemTitle">{{ $tab['problemTitle'] ?? '' }}</x-editable></h3>
                                <p class="journey__text"><x-editable path="journey.tabs.{{ $index }}.problemText">{{ $tab['problemText'] ?? '' }}</x-editable></p>
                                @if(!empty($tab['problemPoints']))
                                    <ul class="list list--muted">
                                        @foreach($tab['problemPoints'] as $point)
                                            <li><span class="list__mark list__mark--cross" aria-hidden="true">&times;</span><x-editable path="journey.tabs.{{ $index }}.problemPoints.{{ $loop->index }}">{{ $point }}</x-editable></li>
                                        @endforeach
                                    </ul>
                                @endif
                            </div>

                            <div class="journey__arrow" aria-hidden="true">&rarr;</div>

                            <div class="journey__solution">
                                <p class="col-label col-label--accent"><x-editable path="journey.solutionLabel">{{ $journey['solutionLabel'] ?? 'What we build' }}</x-editable></p>
                                <h3><x-editable path="journey.tabs.{{ $index }}.solutionTitle">{{ $tab['solutionTitle'] ?? '' }}</x-editable></h3>
                                <p class="journey__text"><x-editable path="journey.tabs.{{ $index }}.solutionText">{{ $tab['solutionText'] ?? '' }}</x-editable></p>
                                @if(!empty($tab['solutionPoints']))
                                    <ul class="list">
                                        @foreach($tab['solutionPoints'] as $point)
                                            <li><span class="list__mark" aria-hidden="true">&#10003;</span><x-editable path="journey.tabs.{{ $index }}.solutionPoints.{{ $loop->index }}">{{ $point }}</x-editable></li>
                                        @endforeach
                                    </ul>
                                @endif
                            </div>
                        </div>

                        <div class="journey__result">
                            <span class="journey__result-label"><x-editable path="journey.outcomeLabel">{{ $journey['outcomeLabel'] ?? 'Outcome' }}</x-editable></span>
                            <strong data-edit="journey.tabs.{{ $index }}.resultText">{{ $tab['resultText'] ?? '' }}</strong>
                        </div>

                        <div class="journey__footer">
                            @if(!empty($tab['quote']))
                                <blockquote class="journey__quote">
                                    <p>&ldquo;<x-editable path="journey.tabs.{{ $index }}.quote">{{ $tab['quote'] }}</x-editable>&rdquo;</p>
                                    <cite><x-editable path="journey.tabs.{{ $index }}.quoteAuthor">{{ $tab['quoteAuthor'] ?? '' }}</x-editable></cite>
                                </blockquote>
                            @endif
                            <div class="journey__meta">
                                <div class="journey__meta-facts">
                                    <span data-edit="journey.tabs.{{ $index }}.price">{{ $tab['price'] ?? '' }}</span>
                                    <span class="journey__dot" aria-hidden="true">&middot;</span>
                                    <span data-edit="journey.tabs.{{ $index }}.timeline">{{ $tab['timeline'] ?? '' }}</span>
                                </div>
                                <a class="link-arrow" href="{{ $journey['ctaHref'] ?? '#contact' }}" data-edit-href="journey.ctaHref"><x-editable path="journey.ctaLabel">{{ $journey['ctaLabel'] ?? 'Start here' }}</x-editable> <span aria-hidden="true">&rarr;</span></a>
                            </div>
                        </div>
                    </div>
                @endforeach
            </div>
        </div>
    </section>
@endif