<template>
    <div class="flex items-center gap-x-8">
        <img src="/logo.png" alt="Food Not Bombs logo" class="w-40 float-left"/>

        <p class="mt-8">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut
            labore et dolore
            magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea
            commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat
            nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit
            anim id est laborum.</p>
    </div>

    <p class="mt-8">Lorem ipsum dolor sit amet consectetur adipiscing elit. Quisque faucibus ex sapien vitae
        pellentesque sem
        placerat. In id cursus mi pretium tellus duis convallis. Tempus leo eu aenean sed diam urna tempor. Pulvinar
        vivamus fringilla lacus nec metus bibendum egestas. Iaculis massa nisl malesuada lacinia integer nunc posuere.
        Ut hendrerit semper vel class aptent taciti sociosqu. Ad litora torquent per conubia nostra inceptos
        himenaeos.<br/><br/>

        Lorem ipsum dolor sit amet consectetur adipiscing elit. Quisque faucibus ex sapien vitae pellentesque sem
        placerat. In id cursus mi pretium tellus duis convallis. Tempus leo eu aenean sed diam urna tempor. Pulvinar
        vivamus fringilla lacus nec metus bibendum egestas. Iaculis massa nisl malesuada lacinia integer nunc posuere.
        Ut hendrerit semper vel class aptent taciti sociosqu. Ad litora torquent per conubia nostra inceptos
        himenaeos.<br/><br/>
    </p>

    <!-- taken from https://www.instagram.com/p/DKSO0BvssTQ -->
    <h3 class="font-bold text-2xl">Bratislava</h3>
    <UCarousel v-slot="{ item }" :items="examplesBa" :ui="{ item: 'basis-1/3' }" arrows autoplay loop>
        <NuxtImg :src="item" width="256" class="rounded-lg" alt="Food Not Bombs food, cooking & distribution"/>
    </UCarousel>

    <!-- taken from https://www.instagram.com/p/DJrNlPvKWQR -->
    <h3 class="font-bold text-2xl mt-4">Košice</h3>
    <UCarousel v-slot="{ item }" :items="examplesKe" :ui="{ item: 'basis-1/3' }" arrows autoplay loop>
        <NuxtImg :src="item" width="256" class="rounded-lg" alt="Food Not Bombs food, cooking & distribution"/>
    </UCarousel>
</template>

<script lang="ts" setup>
const examplesBa = [
    "/images/ba-example-1.jpg",
    "/images/ba-example-2.jpg",
    "/images/ba-example-3.jpg",
    "/images/ba-example-4.jpg",
    "/images/ba-example-5.jpg",
    "/images/ba-example-6.jpg",
    "/images/ba-example-7.jpg",
];
const examplesKe = [
    "/images/ke-example-1.jpg",
    "/images/ke-example-2.jpg",
    "/images/ke-example-3.jpg",
    "/images/ke-example-4.jpg",
    "/images/ke-example-5.jpg",
    "/images/ke-example-6.jpg",
    "/images/ke-example-7.jpg",
];
</script>
