{{-- Features grid. Reorderable via the Landing Studio; each card title/text is
     a data-lp node (icon is structural, so it reloads the preview). --}}
<section id="features" class="lp-section lp-section-surface">
    <div class="lp-wrap">
        <div class="lp-head" data-reveal>
            <div class="lp-eyebrow" data-lp="features_heading.eyebrow">{{ data_get($c, 'features_heading.eyebrow') }}</div>
            <h2 class="lp-h2" data-lp="features_heading.title">{{ data_get($c, 'features_heading.title') }}</h2>
            <p class="lp-lead" data-lp="features_heading.subtitle">{{ data_get($c, 'features_heading.subtitle') }}</p>
        </div>
        <div class="lp-grid lp-grid-3" data-reveal>
            @foreach ((array) data_get($c, 'features', []) as $i => $f)
                <div class="lp-card {{ $i === 0 ? 'lp-card-feat' : '' }}">
                    <span class="lp-ico">@include('frontend.partials.icon', ['name' => $f['icon'] ?? 'zap', 'size' => 22])</span>
                    <h3 data-lp="features.{{ $i }}.title">{{ $f['title'] ?? '' }}</h3>
                    <p data-lp="features.{{ $i }}.text">{{ $f['text'] ?? '' }}</p>
                </div>
            @endforeach
        </div>
    </div>
</section>