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

            <div class="pricing__grid">
                @foreach($pricing['plans'] as $plan)
                    <article class="price-card {{ !empty($plan['featured']) ? 'price-card--featured' : '' }} reveal">
                        <div class="price-card__head">
                            <h3><x-editable path="pricing.plans.{{ $loop->index }}.name">{{ $plan['name'] ?? '' }}</x-editable></h3>
                            @if(!empty($plan['featured']))
                                <span class="price-card__tag" data-edit="pricing.featuredLabel">{{ $pricing['featuredLabel'] ?? 'Most popular' }}</span>
                            @endif
                        </div>
                        <p class="price-card__desc"><x-editable path="pricing.plans.{{ $loop->index }}.description">{{ $plan['description'] ?? '' }}</x-editable></p>
                        <p class="price-card__price">
                            <span data-edit="pricing.plans.{{ $loop->index }}.price">{{ $plan['price'] ?? '' }}</span>
                            <small data-edit="pricing.plans.{{ $loop->index }}.period">{{ $plan['period'] ?? '' }}</small>
                        </p>
                        @if(!empty($plan['features']))
                            <ul class="list list--tight">
                                @foreach($plan['features'] as $feature)
                                    <li><span class="list__mark" aria-hidden="true">&#10003;</span><x-editable path="pricing.plans.{{ $loop->parent->index }}.features.{{ $loop->index }}">{{ $feature }}</x-editable></li>
                                @endforeach
                            </ul>
                        @endif
                        <a class="btn {{ !empty($plan['featured']) ? 'btn--accent' : 'btn--outline' }}" href="{{ ($plan['ctaHref'] ?? '') ?: '#contact' }}" data-edit-href="pricing.plans.{{ $loop->index }}.ctaHref">
                            <x-editable path="pricing.plans.{{ $loop->index }}.cta">{{ $plan['cta'] ?? 'Get started' }}</x-editable>
                            <span class="btn__arrow" aria-hidden="true">&rarr;</span>
                        </a>
                    </article>
                @endforeach
            </div>

            @if(!empty($pricing['note']))
                <p class="pricing__note"><x-editable path="pricing.note">{{ $pricing['note'] }}</x-editable></p>
            @endif
        </div>
    </section>
@endif