@props([
    'villageHead' => [
        'name' => 'Mr. Lorem Ipsum',
        'picture' => 'https://upload.wikimedia.org/wikipedia/commons/9/9e/Placeholder_Person.jpg',
    ],
    'officials' => [
        [
            'name' => 'Mr. Lorem Ipsum',
            'position' => 'Sekretaris Desa',
            'picture' =>
                'https://upload.wikimedia.org/wikipedia/commons/9/9e/Placeholder_Person.jpg',
        ],
        [
            'name' => 'Mr. Lorem Ipsum',
            'position' => 'Kadus Tonrokombang',
            'picture' =>
                'https://upload.wikimedia.org/wikipedia/commons/9/9e/Placeholder_Person.jpg',
        ],
        [
            'name' => 'Mr. Lorem Ipsum',
            'position' => 'Kadus Pallantikang',
            'picture' =>
                'https://upload.wikimedia.org/wikipedia/commons/9/9e/Placeholder_Person.jpg',
        ],
    ],
    'vision' =>
        'Lorem ipsum dolor sit amet consectetur adipisicing elit. At porro quos fugit aliquam, id dolor quae voluptatibus praesentium illum cumque.',
    'mission' =>
        'Lorem ipsum dolor sit amet consectetur adipisicing elit. At porro quos fugit aliquam, id dolor quae voluptatibus praesentium illum cumque.',
])

<x-stack class="w-full gap-12">

    <x-stack class="w-full gap-6">
        <x-text class="font-bold text-xl font-poppins">
            Sambutan Kepala Desa
        </x-text>

        <x-grid class="w-full h-fit md:grid-cols-3 gap-8">

            <x-stack
                class="w-full h-fit flex-1 items-center border rounded-lg md:col-span-1 overflow-hidden"
            >
                <x-image
                    :src="$villageHead['picture']"
                    class="w-full h-[24rem] object-cover"
                />
                <x-text class="font-semibold py-1">
                    {{ $villageHead['name'] }}
                </x-text>
            </x-stack>

            <x-stack class="flex-1 md:col-span-2 h-full border rounded-lg p-3 font-poppins">
                <x-text class="font-bold text-lg text-secondary-100">
                    Visi & Misi
                </x-text>
                <x-text class="font-semibold">
                    {!! $vision !!}
                </x-text>
                <x-text class="mt-2 font-light">
                    {!! $mission !!}
                </x-text>
            </x-stack>
        </x-grid>
    </x-stack>

    <x-stack class="w-full gap-4">
        <x-text class="font-bold text-xl font-poppins">
            Aparat Desa
        </x-text>

        <x-grid class="max-w-full grid-flow-col gap-4 overflow-x-auto">
            @foreach ($officials as $official)
                <x-landing.staff-card
                    :name="$official['name']"
                    :position="$official['position']"
                    :picture="$official['picture']"
                />
            @endforeach
        </x-grid>
    </x-stack>

</x-stack>