{{-- Problem / Solution compare block. Extracted from sections.blade.php so the
     Landing Studio can reorder it; `id` makes it click-to-select, `data-lp`
     nodes let the Studio patch text live. All INERT to visitors. --}}
<section id="compare" class="lp-section">
    <div class="lp-wrap lp-grid lp-grid-2" data-reveal>
        <div class="lp-cmp lp-cmp-bad">
            <h3 data-lp="compare.problem_title">{{ data_get($c, 'compare.problem_title') }}</h3>
            <ul>
                @foreach ((array) data_get($c, 'compare.problem', []) as $i => $item)
                    <li><span class="lp-mark lp-mark-bad">✕</span><span data-lp="compare.problem.{{ $i }}">{{ $item }}</span></li>
                @endforeach
            </ul>
        </div>
        <div class="lp-cmp lp-cmp-good">
            <h3 data-lp="compare.solution_title">{{ data_get($c, 'compare.solution_title') }}</h3>
            <p style="opacity:.72;margin:0 0 18px;font-size:14.5px;" data-lp="compare.solution_subtitle">{{ data_get($c, 'compare.solution_subtitle') }}</p>
            <ul>
                @foreach ((array) data_get($c, 'compare.solution', []) as $i => $item)
                    <li><span class="lp-mark lp-mark-good">@include('frontend.partials.icon', ['name' => 'check', 'size' => 12, 'sw' => 3])</span><span data-lp="compare.solution.{{ $i }}">{{ $item }}</span></li>
                @endforeach
            </ul>
        </div>
    </div>
</section>