@if (!empty($certifications['list'][0]))
    <section class="py-20 bg-[var(--muted-30)]">
        <div class="container mx-auto px-4 lg:px-8">
            <div class="text-center mb-16">
                <h2 class="text-3xl md:text-4xl font-bold mb-4">{{ __('frontend::lang.page.about.certifications') }}</h2>
                <p class="text-[var(--muted-foreground)] max-w-2xl mx-auto text-pretty">
                    {{ __('frontend::lang.page.about.certifications_desc') }}
                </p>
            </div>

            <div class="flex flex-wrap justify-center gap-6 max-w-5xl mx-auto">
                @foreach ($certifications['list'] as $c)
                    <div class="w-64 shrink-0">
                        <div class="p-6 text-center h-full min-h-[200px] flex flex-col items-center justify-center bg-white rounded-[2rem] border-2 border-tsic-blue/25 shadow-[0_16px_36px_-24px_rgba(15,17,207,0.5)] transition-all duration-300 hover:-translate-y-1">
                            <div class="w-40 h-14 mb-3 flex items-center justify-center shrink-0">
                                <img class="object-contain w-full h-full" src="{{ $c['image'] }}" alt="{{ $c['name'] ?? '' }}" />
                            </div>
                            <h4 class="font-bold text-sm mb-1 text-tsic-blue">{{ $c['name'] ?? '' }}</h4>
                            <p class="text-xs text-[var(--muted-foreground)] text-pretty">{{ $c['desc'] ?? '' }}</p>
                        </div>
                    </div>
                @endforeach
            </div>
        </div>
    </section>
@endif