<template>
    <div class="about-us">
        <div>
            <img src="/images/anahitaLogo.webp" alt="logo" />
            <p>{{ $t("aboutUsDesc") }}</p>
        </div>
        <ul>
            <li v-for="item in items" :key="item">
                <i :class="`isax isax-${item.icon}`" />
                <span>{{ $t(item.title) }}</span>
            </li>
        </ul>
    </div>
</template>

<script setup>
const items = reactive([
    { icon: "call", title: "aboutUsPhone" },
    { icon: "location", title: "aboutUsAddress" },
]);
</script>

<style lang="scss">
footer .about-us {
    @apply flex flex-col gap-6 p-8 font-vazir;
    @apply w-full h-auto bg-zinc-100 rounded-2xl border-2 border-neutral-200;
    @apply sm:w-[32.7rem] sm:h-[31.3rem];
    @apply lg:flex-row lg:w-[57.7rem] lg:h-auto;
    @apply xl:flex-col xl:w-[32.7rem] xl:h-[31.3rem];

    &>div {
        @apply flex flex-col gap-6;

        img {
            @apply w-[209px] h-16;
        }

        p {
            @apply w-auto sm:w-[28.1rem] text-zinc-800 text-lg leading-[1.9rem];
        }
    }

    ul {
        @apply flex flex-col gap-4 mt-4;

        li {
            @apply flex gap-3 h-max;

            i {
                @apply text-2xl h-[1.9rem];
            }

            span {
                @apply text-zinc-800 text-base font-medium leading-[1.9rem];
            }
        }
    }
}
</style>
