<template>
    <NuxtLayout :name="device" :config="config">
        <main class="about-us">
            <section>
                <h1>{{ $t("aboutUs") }}</h1>
                <ul>
                    <li v-for="({ title, content }, i) in items" :key="i">
                        <span />
                        <div>
                            <h2>{{ title }}</h2>
                            <div v-html="content" />
                        </div>
                    </li>
                </ul>
            </section>
        </main>
    </NuxtLayout>
</template>

<script setup>
definePageMeta({ path: '/about-us' })

const config = reactive({
    mobile: {
        header: { search: true, menu: true },
        navigation: false
    },
})
const { device } = inject('service')

const items = ref([])

const { status, data, error } = await useFetch('/api/abouts')

if (status.value == 'success')
    items.value = data.value
else throw createError(error.value)
</script>

<style lang="scss">
.about-us {
    @apply w-full flex pt-8 pb-5 lg:pt-[6.5rem] lg:pb-[9.3rem];

    section {
        @apply w-full flex flex-col gap-6 lg:gap-[4.1rem];

        h1 {
            @apply mx-auto text-zinc-800 font-black font-vazir text-lg lg:text-3xl;
        }

        ul {
            @apply flex flex-col;

            li {
                &:nth-child(odd) {
                    @apply bg-slate-100;
                }

                &:nth-child(even) {
                    @apply bg-zinc-100;
                }


                @apply w-full flex overflow-hidden;
                @apply h-[14.7rem] gap-[1.1rem] p-6;
                @apply lg:h-[17.8rem] lg:gap-[5.5rem] lg:px-[5.3rem] lg:py-[4.4rem] lg:items-center;

                span {
                    @apply max-lg:hidden w-36 h-36 bg-white shrink-0;
                }

                &>div {
                    @apply flex flex-col font-vazir gap-[1.1rem] xl:gap-6;

                    h2 {
                        @apply w-max text-primary-600 font-black border-b-2 border-current pb-2;
                        @apply text-lg lg:text-3xl lg:border-b-4 lg:pb-2.5;
                    }

                    div {
                        p {
                            @apply text-zinc-800 font-normal font-vazir;
                            @apply w-auto max-w-[53.5rem] text-sm lg:text-xl leading-6;
                        }
                    }

                }

            }
        }
    }
}
</style>
