@extends('layouts.public')

@section('title', $lang === 'en' ? 'Leadership - NowJoan' : 'নেতৃত্ব - নওজোয়ান')

@section('content')
@php
    $label = fn ($bn, $en) => $lang === 'en' ? $en : $bn;
    $groups = $leaders->groupBy('category');
@endphp
<section class="py-20 px-4 sm:px-6 lg:px-8 bg-white">
    <div class="max-w-7xl mx-auto">
        <div class="mb-12">
            <a href="{{ route('home', $lang === 'en' ? ['lang' => 'en'] : []) }}" class="text-[var(--primary-green)] hover:text-[var(--primary-red)] smooth-transition">{{ $label('← ফিরে যান', '← Back') }}</a>
        </div>
        <div class="text-center mb-16">
            <h1 class="text-[var(--primary-green)] mb-4">{{ $label('আমাদের নেতৃত্ব', 'Our Leadership') }}</h1>
            <p class="text-xl text-[var(--light-text)] max-w-3xl mx-auto">{{ $label('কেন্দ্র থেকে জেলা পর্যন্ত আমাদের সংগঠক ও নেতৃত্ব।', 'Our organizers and leaders from central to district level.') }}</p>
        </div>
        @foreach(['central' => $label('কেন্দ্রীয় নেতৃত্ব', 'Central Leadership'), 'divisional' => $label('বিভাগীয় নেতৃত্ব', 'Divisional Leadership'), 'district' => $label('জেলা নেতৃত্ব', 'District Leadership')] as $category => $heading)
            <div class="mb-16">
                <h2 class="text-[var(--primary-green)] mb-8">{{ $heading }}</h2>
                <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-8">
                    @forelse($groups->get($category, collect()) as $leader)
                        @php $leaderImage = $leader->image ?: asset('assets/vercel-images/leader-portrait-1.jpg'); @endphp
                        <article class="bg-[var(--cream)] rounded-3xl p-6 text-center shadow-md">
                            <img src="{{ $leaderImage }}" alt="{{ $lang === 'en' ? $leader->name_en : $leader->name }}" class="w-40 h-40 object-cover rounded-3xl mx-auto mb-5 shadow-lg">
                            <h4 class="text-[var(--primary-green)]">{{ $lang === 'en' ? $leader->name_en : $leader->name }}</h4>
                            <p class="text-sm text-[var(--gold)] mb-3">{{ $lang === 'en' ? $leader->position_en : $leader->position }}</p>
                            @if($leader->location)<p class="text-sm text-[var(--light-text)]">{{ $leader->location }}</p>@endif
                        </article>
                    @empty
                        <p class="text-[var(--light-text)]">{{ $label('এই বিভাগে তথ্য শীঘ্রই যুক্ত হবে।', 'Information will be added soon.') }}</p>
                    @endforelse
                </div>
            </div>
        @endforeach
    </div>
</section>
@endsection