@php
    $leaders = [
        [
            'name' => 'Secretary, Srimanta Sankaradeva Kalakshetra Society',
            'designation' => 'Institutional Message',
            'message' => 'Kalakshetra continues to serve as a living cultural space where research, performance, museums and public learning come together for the people of Assam and visitors from across the world.',
            'image' => asset('images/Kalakshetra-Profile-1/Kalakshetra Gate/IMG_1156-400kb.jpg'),
            'url' => url('/about/organisation'),
        ],
        [
            'name' => 'Director, Cultural Programmes',
            'designation' => 'Programme Message',
            'message' => 'Our focus is to present the creative energy of Srimanta Sankaradeva and the many cultural communities of Assam through exhibitions, festivals, publications and campus experiences.',
            'image' => asset('images/Kalakshetra-Profile-1/Dr BK Kakoti Auditorium/DSC_8681-500kb.jpg'),
            'url' => url('/about/organisation'),
        ],
    ];
@endphp

<section class="content-container my-space-xl py-space-md" id="leadership-message">
    @include('frontend.partials.section-heading', [
        'eyebrow' => 'Leadership Messages',
        'title' => 'Guiding Kalakshetra Forward',
        'summary' => 'Guidance from the people shaping Kalakshetra as a living cultural institution.',
    ])

    <div class="grid grid-cols-1 md:grid-cols-2 gap-space-lg">
        @foreach ($leaders as $leader)
            <article class="bg-surface-container-lowest rounded-xl border border-surface-container shadow-md overflow-hidden h-full">
                <div class="leadership-card-layout h-full">
                    <div class="leadership-card-media">
                        <img class="w-full h-full object-cover" src="{{ $leader['image'] }}" alt="{{ $leader['name'] }}">
                    </div>
                    <div class="leadership-card-copy p-space-md flex flex-col">
                        <span class="font-label-sm text-label-sm text-primary uppercase tracking-widest mb-space-xs">{{ $leader['designation'] }}</span>
                        <h3 class="font-headline-sm text-headline-sm text-on-surface font-bold">{{ $leader['name'] }}</h3>
                        <p class="font-body-sm text-body-sm text-on-surface-variant leading-relaxed mt-space-sm flex-1">{{ $leader['message'] }}</p>
                        <a class="inline-flex items-center gap-2 px-space-md py-2 bg-primary-container text-on-primary font-title-md text-title-md rounded hover:bg-primary transition-colors align-self-start mt-space-md"
                            href="{{ $leader['url'] }}">
                            <span>Read More</span>
                            <span class="material-symbols-outlined text-sm">east</span>
                        </a>
                    </div>
                </div>
            </article>
        @endforeach
    </div>
</section>