@php($data = $section['data'] ?? [])
@php($topics = ['governance', 'ethics-compliance', 'esg-approach', 'sdg-alignment', 'materiality-assessment', 'goals-commitment'])
@php($icons = ['Scale', 'ShieldCheck', 'Leaf', 'Globe2', 'ClipboardCheck', 'Target'])
<section class="relative overflow-hidden py-20 md:py-28"><div class="bg-leaf pointer-events-none absolute inset-0 opacity-[.03]"></div><div class="container-page relative"><div class="max-w-3xl"><p class="eyebrow">{{ $data['eyebrow'] ?? '' }}</p><h2 class="display-xl mt-4">{{ $data['title'] ?? '' }}</h2><p class="mt-5 leading-relaxed text-foreground/70">{{ $data['summary'] ?? '' }}</p></div><div class="mt-14 grid gap-4 sm:grid-cols-2 md:gap-5 lg:grid-cols-3" role="group">@foreach ($topics as $index => $topic)<button class="governance-topic group relative overflow-hidden rounded-2xl border p-7 text-start transition-all duration-500 hover:-translate-y-1 hover:shadow-xl {{ $index === 0 ? 'border-cedar/60 bg-gradient-to-br from-cream to-background shadow-xl' : 'border-cedar/15 bg-background hover:border-cedar/30' }}" type="button" data-governance-topic data-active="{{ $index === 0 ? 'true' : 'false' }}" aria-pressed="{{ $index === 0 ? 'true' : 'false' }}"><div class="flex items-start gap-4"><span class="governance-topic-icon flex h-12 w-12 shrink-0 items-center justify-center rounded-xl transition-all duration-500 {{ $index === 0 ? 'bg-cedar text-cream' : 'bg-cedar/10 text-cedar group-hover:bg-cedar group-hover:text-cream' }}"><x-empowerment-icon :name="$icons[$index]" class="h-5 w-5"/></span><span class="min-w-0"><span class="text-[11px] font-medium uppercase tracking-[.25em] text-cedar/60">{{ str_pad((string) ($index + 1), 2, '0', STR_PAD_LEFT) }}</span><span class="mt-1 block text-lg font-medium md:text-xl">{{ $data[$topic.'_title'] ?? '' }}</span><span class="mt-2 block text-sm leading-relaxed text-foreground/70">{{ $data[$topic.'_body'] ?? '' }}</span></span></div><span class="governance-topic-rule absolute inset-x-7 bottom-0 h-px bg-gradient-to-r from-transparent via-cedar/40 to-transparent transition-transform duration-500 {{ $index === 0 ? 'scale-x-100' : 'scale-x-0' }}"></span></button>@endforeach</div><p class="mt-10 flex items-center gap-3 text-sm text-foreground/60"><x-empowerment-icon name="Compass" class="h-4 w-4 shrink-0 text-cedar"/>{{ $data['footer'] ?? '' }}</p></div>@can('update', $page)<livewire:about-section-inline-editor :page="$page" :locale="$locale" section-key="empowerment.governance" :key="'empowerment-'.$locale.'-governance'"/>@endcan</section>
<script>document.querySelectorAll('[data-governance-topic]').forEach(function(topic){topic.addEventListener('click',function(){document.querySelectorAll('[data-governance-topic]').forEach(function(item){var active=item===topic;item.dataset.active=String(active);item.setAttribute('aria-pressed',String(active));item.classList.toggle('border-cedar/60',active);item.classList.toggle('shadow-xl',active);item.querySelector('.governance-topic-icon').classList.toggle('bg-cedar',active);item.querySelector('.governance-topic-icon').classList.toggle('text-cream',active);item.querySelector('.governance-topic-rule').classList.toggle('scale-x-100',active);item.querySelector('.governance-topic-rule').classList.toggle('scale-x-0',!active);});});});</script>