@extends('layouts.frontend')

@section('content')
    @include('frontend.partials.inner-hero', [
        'title' => 'About Srimanta Sankaradeva Kalakshetra Society',
        'eyebrow' => 'About Kalakshetra',
        'summary' => 'A living cultural institution preserving the spiritual, artistic and social legacy of Assam.',
        'image' => $heroImage,
        'breadcrumbs' => ['About' => null, 'Kalakshetra Society' => null],
    ])

    <section class="content-container my-space-xl py-space-md">
        <div class="grid grid-cols-1 lg:grid-cols-12 gap-space-xl items-center">
            <div class="lg:col-span-5">
                <img class="w-full h-[450px] object-cover rounded-xl shadow-lg" src="{{ $introImage }}" alt="Kalakshetra campus">
            </div>
            <div class="lg:col-span-7">
                @include('frontend.partials.section-heading', [
                    'align' => 'text-start',
                    'eyebrow' => 'Institutional Identity',
                    'title' => 'A Cultural Home for Assam and the Northeast',
                    'summary' => 'Srimanta Sankaradeva Kalakshetra Society was envisioned as an apex cultural institution dedicated to preserving, presenting and renewing the layered heritage of Assam.',
                ])
                <p class="font-body-md text-body-md text-on-surface-variant leading-relaxed">
                    The Society brings together museums, performance venues, archives, research activity, living craft traditions and visitor experiences within a single cultural campus at Panjabari, Guwahati.
                </p>
                <p class="font-body-md text-body-md text-on-surface-variant leading-relaxed">
                    Named after Mahapurush Srimanta Sankaradeva, the institution reflects the inclusive spirit of neo-Vaishnavite humanism while celebrating the many communities that shape Assam's cultural identity.
                </p>
            </div>
        </div>
    </section>

    <section class="w-full my-space-xl py-space-xl px-gutter">
        <div class="max-w-7xl mx-auto">
            @include('frontend.partials.section-heading', [
                'eyebrow' => 'Vision and Purpose',
                'title' => 'Preserve, Promote and Propagate Living Heritage',
                'summary' => 'The Society functions as a bridge between classical traditions, community memory and contemporary cultural education.',
            ])
            <div class="grid grid-cols-1 md:grid-cols-3 gap-space-lg">
                @foreach ($purposeCards as $card)
                    @include('frontend.partials.cards', ['item' => $card])
                @endforeach
            </div>
        </div>
    </section>

    <section class="content-container my-space-xl py-space-md">
        <div class="grid grid-cols-1 md:grid-cols-2 gap-space-lg">
            @foreach ($contentBlocks as $block)
                <div class="bg-surface-container-lowest rounded-xl p-space-lg border border-surface-container shadow-sm">
                    <h3 class="font-headline-md text-headline-md text-primary-container font-bold">{{ $block['title'] }}</h3>
                    <p class="font-body-md text-body-md text-on-surface-variant leading-relaxed mb-0">{{ $block['text'] }}</p>
                </div>
            @endforeach
        </div>
    </section>
@endsection