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

            <div class="products__grid">
                @foreach($products['items'] as $product)
                    <article class="product-card {{ $loop->first ? 'product-card--featured' : '' }} reveal">
                        <div class="product-card__head">
                            <span class="product-card__badge" data-edit="products.items.{{ $loop->index }}.badge">{{ $product['badge'] ?? '' }}</span>
                            <span class="product-card__glyph" aria-hidden="true">{{ $loop->first ? '●' : '↗' }}</span>
                        </div>
                        <h3 class="product-card__name"><x-editable path="products.items.{{ $loop->index }}.name">{{ $product['name'] ?? '' }}</x-editable></h3>
                        <p class="product-card__tagline"><x-editable path="products.items.{{ $loop->index }}.tagline">{{ $product['tagline'] ?? '' }}</x-editable></p>
                        <p class="product-card__desc"><x-editable path="products.items.{{ $loop->index }}.description">{{ $product['description'] ?? '' }}</x-editable></p>
                        @if(!empty($product['features']))
                            <ul class="product-card__features">
                                @foreach($product['features'] as $feature)
                                    <li><x-editable path="products.items.{{ $loop->parent->index }}.features.{{ $loop->index }}">{{ $feature }}</x-editable></li>
                                @endforeach
                            </ul>
                        @endif
                        <div class="product-card__foot">
                            <span class="product-card__price" data-edit="products.items.{{ $loop->index }}.price">{{ $product['price'] ?? '' }}</span>
                            <a class="product-card__cta" href="{{ ($product['ctaHref'] ?? '') ?: '#contact' }}" data-edit-href="products.items.{{ $loop->index }}.ctaHref">
                                <x-editable path="products.items.{{ $loop->index }}.cta">{{ $product['cta'] ?? 'Learn more' }}</x-editable>
                                <span aria-hidden="true">&rarr;</span>
                            </a>
                        </div>
                    </article>
                @endforeach
            </div>
        </div>
    </section>
@endif