<section class="w-full py-24" style="background-color: {{ trim($d['bg_color'] ?? '') ?: '#f8fafc' }}">
    <div class="max-w-5xl mx-auto px-6">
        @if(!empty($d['title']))
            <h2 class="text-2xl md:text-3xl font-bold text-slate-900 mb-12 text-center">{{ $d['title'] }}</h2>
        @endif
        <div class="grid md:grid-cols-2 lg:grid-cols-3 gap-8">
            @foreach($d['items'] ?? [] as $item)
                @if(!empty($item['name']))
                    @php $highlighted = !empty($item['highlighted']); @endphp
                    <div class="relative rounded-2xl border-2 p-8 {{ $highlighted ? 'border-slate-900 bg-white shadow-xl scale-105 z-10' : 'border-slate-200 bg-white' }}">
                        @if($highlighted)<span class="absolute -top-3 left-1/2 -translate-x-1/2 px-3 py-1 bg-slate-900 text-white text-xs font-semibold rounded-full">Populaire</span>@endif
                        <h3 class="text-xl font-bold text-slate-900 mb-2">{{ $item['name'] }}</h3>
                        <div class="mb-6">
                            <span class="text-4xl font-bold text-slate-900">{{ $item['price'] ?? '—' }}</span>
                            <span class="text-slate-600">{{ $item['period'] ?? '/mois' }}</span>
                        </div>
                        @if(!empty($item['features']))
                            <ul class="space-y-3 mb-8">
                                @foreach(is_array($item['features']) ? $item['features'] : explode("\n", $item['features']) as $f)
                                    @if(trim($f))
                                        <li class="flex items-start gap-2 text-slate-600"><svg class="w-5 h-5 text-emerald-500 shrink-0 mt-0.5" fill="currentColor" viewBox="0 0 20 20"><path fill-rule="evenodd" d="M16.707 5.293a1 1 0 010 1.414l-8 8a1 1 0 01-1.414 0l-4-4a1 1 0 011.414-1.414L8 12.586l7.293-7.293a1 1 0 011.414 0z" clip-rule="evenodd"/></svg><span class="min-w-0 prose prose-slate prose-sm max-w-none">{!! \App\Support\SafeHtml::richText(trim($f)) !!}</span></li>
                                    @endif
                                @endforeach
                            </ul>
                        @endif
                        @if(!empty($item['button_text']))
                            <a href="{{ $item['button_url'] ?? '#' }}" class="block w-full py-3 rounded-xl font-semibold text-center transition {{ $highlighted ? 'bg-slate-900 text-white hover:bg-slate-800' : 'bg-slate-100 text-slate-900 hover:bg-slate-200' }}">{{ $item['button_text'] }}</a>
                        @endif
                    </div>
                @endif
            @endforeach
        </div>
    </div>
</section>
