@extends('layouts.frontend')

@section('content')
    @include('frontend.partials.inner-hero', [
        'title' => 'Organisation',
        'eyebrow' => 'Kalakshetra Society',
        'summary' => 'Administrative and cultural stewardship for a public heritage institution.',
        'image' => $heroImage,
        'breadcrumbs' => ['About' => null, 'Organisation' => null],
    ])

    <section class="content-container my-space-xl py-space-md">
        @include('frontend.partials.section-heading', [
            'eyebrow' => 'Governance',
            'title' => 'A Society-Led Cultural Institution',
            'summary' => 'The Society brings together leadership, committees and operational teams for cultural stewardship.',
        ])
        <div class="grid grid-cols-1 md:grid-cols-3 gap-space-lg">
            @foreach ($leaders as $leader)
                <article class="bg-surface-container-lowest rounded-xl p-space-md border border-surface-container shadow-sm text-center">
                    <div class="w-12 h-12 rounded-full bg-primary-fixed text-primary mx-auto mb-space-sm flex items-center justify-center">
                        <span class="material-symbols-outlined">account_balance</span>
                    </div>
                    <h3 class="font-title-lg text-title-lg text-on-surface font-semibold">{{ $leader['role'] }}</h3>
                    <p class="font-body-sm text-body-sm text-on-surface-variant mb-0">{{ $leader['name'] }}</p>
                </article>
            @endforeach
        </div>
    </section>

    <section class="content-container my-space-xl py-space-md">
        <div class="bg-surface-container-lowest rounded-2xl border border-surface-container shadow-sm p-space-lg">
            <h2 class="font-headline-lg text-headline-lg text-on-surface font-bold mb-space-md">Administrative Structure</h2>
            <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-space-md">
                @foreach ($departments as $department)
                    <div class="p-space-md rounded-lg bg-surface-container-low border border-surface-container">
                        <span class="font-label-sm text-label-sm text-primary uppercase">Division</span>
                        <h3 class="font-title-md text-title-md text-on-surface font-semibold mb-1">{{ $department['title'] }}</h3>
                        <p class="font-body-sm text-body-sm text-on-surface-variant mb-0">{{ $department['text'] }}</p>
                    </div>
                @endforeach
            </div>
        </div>
    </section>
@endsection