@props([
    'title',
    'items',
    'footer' => null,
    'highlight' => null,
])
@php
    use App\Support\Highlight;
@endphp
<section class="nova-section nova-section--muted nova-problem">
    <div class="nova-wrap">
        <x-nova.panel
            :title="$title"
            :highlight="$highlight"
            lede="When your brand looks small, customers assume you are too. These are the gaps we see every day."
            badge="stack"
            class="nova-panel--problem"
            foot-href="#"
            foot-label="Book a free brand review"
            :foot-appointment="true"
        >
            <div class="nova-panel__grid nova-panel__grid--4">
                @foreach($items as $item)
                    <article class="nova-feature nova-feature--tile">
                        <span class="nova-feature__icon nova-feature__icon--glyph">
                            <x-icons.nova :name="$item['icon'] ?? 'van'" />
                        </span>
                        <p class="nova-feature__text">{{ $item['text'] ?? '' }}</p>
                    </article>
                @endforeach
            </div>

            @if($footer)
                <p class="nova-panel__footnote">{{ $footer }}</p>
            @endif
        </x-nova.panel>
    </div>
</section>