<template>
    <div class="customer-services">
        <h2>{{ $t("customer-services") }}</h2>
        <ul>
            <li v-for="(service, i) in services" :key="i">
                <a :href="service.url">
                    <span>{{ $t(service.title) }}</span>
                </a>
            </li>
        </ul>
    </div>
</template>

<script setup>
const services = reactive([
    { url: "/contact-us", title: "contactUs" },
    { url: "/about-us", title: "aboutUs" },
    { url: "/search", title: "shop" },
    { url: "/blog", title: "media" },
]);
</script>

<style lang="scss">
footer .customer-services {
    @apply flex flex-col gap-4 w-max font-vazir items-center sm:items-start;

    h2 {
        @apply text-zinc-800 text-xl font-bold leading-[1.9rem];
    }

    ul {
        @apply flex gap-4 sm:flex-col justify-between sm:gap-2;

        li {
            a {
                span {
                    @apply text-stone-500 text-[0.9em] leading-[1.9rem] hover:text-primary-600;
                }
            }
        }
    }
}
</style>
