@php
    $settings = $section->settings ?? [];
    $title = $settings['title'] ?? 'Why Choose E-Commerce Digital?';
    $subtitle = $settings['subtitle'] ?? 'High-performance assets optimized for speed, scalability, and security.';
    
    $features = [
        ['icon' => 'zap', 'title' => 'Instant Deployment', 'desc' => 'Download and deploy in seconds with ready-to-use protocol packages.'],
        ['icon' => 'shield-check', 'title' => 'Elite Security', 'desc' => 'Every script and theme is meticulously vetted for vulnerabilities.'],
        ['icon' => 'code-2', 'title' => 'Clean Architecture', 'desc' => 'Developer-first code that is easy to customize and scale.'],
        ['icon' => 'headset', 'title' => 'Expert Support', 'desc' => 'Round-the-clock assistance from the architects who built it.'],
    ];
@endphp

<section class="py-24 bg-[#0a0a0f] border-t border-white/5">
    <div class="container mx-auto px-6">
        <div class="text-center max-w-3xl mx-auto mb-20 space-y-4">
            <h2 class="text-3xl md:text-5xl font-black text-white uppercase tracking-tight">{{ $title }}</h2>
            <p class="text-slate-500 font-medium leading-relaxed">{{ $subtitle }}</p>
        </div>

        <div class="grid md:grid-cols-2 lg:grid-cols-4 gap-8">
            @foreach($features as $f)
                <div class="p-10 rounded-[2rem] bg-[#111827] border border-white/5 transition-all duration-300 hover:border-brand-500/30 hover:shadow-[0_20px_50px_-15px_rgba(124,58,237,0.2)] group">
                    <div class="w-14 h-14 rounded-2xl bg-brand-500/10 flex items-center justify-center text-brand-500 mb-8 transition-transform group-hover:scale-110">
                        <i data-lucide="{{ $f['icon'] }}" class="w-7 h-7 stroke-[2.5]"></i>
                    </div>
                    <h3 class="text-xl font-black text-white mb-4 uppercase tracking-tight">{{ $f['title'] }}</h3>
                    <p class="text-slate-500 text-sm font-medium leading-relaxed">{{ $f['desc'] }}</p>
                </div>
            @endforeach
        </div>
    </div>
</section>