@php
    $staffGroups = [
        ['Grade-I', '3 positions', ['Consultant Engineer (contractual)', 'Assistant engineer (elect)', 'Assistant engineer (civil) (contractual)']],
        ['Grade-III', '9 positions', ['Accountant', 'Senior Assistant', 'Cashier', 'Field Supervisor', 'Junior Assistant (Co-ordinator)', 'Junior Assistant', 'Storekeeper', 'P.A. to Secretary & Vice-Chairman (casual)', 'Assistant (casual)']],
        ['Technical Staff', '6 positions', ['Sound operator', 'Light operator (casual)', 'AC & Gen. operator (casual)', 'Electrician (casual)', 'Wireman', 'Mikeman']],
        ['Grade-IV', '7 positions', ['Peon', 'Chowkidar', 'Attendants', 'Attendants (casual)', 'Driver', 'Driver (casual)', 'Messenger (an attendant is performing duty as messenger)']],
    ];
@endphp

<section class="story-features story-features--roles" aria-labelledby="leadership-structure-heading">
    <div class="container">
        <div class="story-feature-heading" data-story-reveal>
            <span class="story-eyebrow">Governance &amp; Administration</span>
            <h2 id="leadership-structure-heading">Institutional Leadership</h2>
            <span class="story-heading-rule" aria-hidden="true"></span>
        </div>
        <div class="story-feature-grid organisation-leadership-grid">
            @foreach (['Chairman', 'Vice-Chairman', 'Secretary'] as $index => $role)
                <article class="story-feature" data-story-reveal>
                    <span class="story-feature-icon" aria-hidden="true"><i class="bi bi-person-badge"></i></span>
                    <span class="story-eyebrow">{{ str_pad($index + 1, 2, '0', STR_PAD_LEFT) }}</span>
                    <h3>{{ $role }}</h3>
                </article>
            @endforeach
        </div>

        <div class="story-feature-heading mt-5" data-story-reveal>
            <span class="story-eyebrow">Staff Structure</span>
            <h2 id="staff-structure-heading">Supporting Staff</h2>
            <span class="story-heading-rule" aria-hidden="true"></span>
        </div>
        <div class="story-feature-grid">
            @foreach ($staffGroups as $index => $group)
                <article class="story-feature" data-story-reveal>
                    <span class="story-feature-icon" aria-hidden="true"><i class="bi bi-people"></i></span>
                    <span class="story-eyebrow">{{ str_pad($index + 1, 2, '0', STR_PAD_LEFT) }} · {{ $group[1] }}</span>
                    <h3>{{ $group[0] }}</h3>
                    <ul class="organisation-staff-list">
                        @foreach ($group[2] as $role)
                            <li>{{ $role }}</li>
                        @endforeach
                    </ul>
                </article>
            @endforeach
        </div>
    </div>
</section>

<style>
    .organisation-staff-list { margin: 16px 0 0; padding-left: 18px; color: inherit; font-size: 14px; line-height: 1.7; }
    .organisation-staff-list li + li { margin-top: 5px; }
    .organisation-leadership-grid .story-feature { min-height: 0; }
</style>