@php($data = $section['data'] ?? [])
@php($items = ['farmer-support', 'agricultural-training', 'sustainable-farming', 'crop-management', 'harvesting', 'quality-assurance', 'community-development'])
@php($icons = ['farmer-support' => 'Users', 'agricultural-training' => 'GraduationCap', 'sustainable-farming' => 'Leaf', 'crop-management' => 'Sprout', 'harvesting' => 'Scissors', 'quality-assurance' => 'ShieldCheck', 'community-development' => 'Tractor'])
<section class="relative overflow-hidden pb-20 md:pb-28"><div class="container-page"><p class="eyebrow">{{ $data['eyebrow'] ?? '' }}</p><h2 class="display-xl mt-4 max-w-2xl">{{ $data['title'] ?? '' }}</h2><div class="mt-10 grid gap-5 sm:grid-cols-2 lg:grid-cols-3">@foreach ($items as $item)<article class="group relative rounded-2xl border border-cedar/15 bg-background p-7 transition-all duration-500 hover:-translate-y-1 hover:border-cedar/30 hover:bg-gradient-to-br hover:from-background hover:to-cream/60 hover:shadow-xl"><div class="flex h-14 w-14 items-center justify-center rounded-xl bg-cedar/10 text-cedar transition-all duration-500 group-hover:scale-110 group-hover:bg-cedar group-hover:text-cream"><x-empowerment-icon :name="$icons[$item]" class="h-6 w-6"/></div><h3 class="mt-5 text-xl font-medium">{{ $data[$item.'_title'] ?? '' }}</h3><p class="mt-3 text-sm leading-relaxed text-foreground/70">{{ $data[$item.'_body'] ?? '' }}</p><div class="absolute inset-x-7 bottom-0 h-px scale-x-0 bg-gradient-to-r from-transparent via-cedar/40 to-transparent transition-transform duration-500 group-hover:scale-x-100"></div></article>@endforeach</div></div>@can('update', $page)<livewire:about-section-inline-editor :page="$page" :locale="$locale" section-key="empowerment.contributions" :key="'empowerment-'.$locale.'-contributions'"/>@endcan</section>