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

<script setup>
const guides = reactive([
    { url: "/", title: "howToPlaceOrder" },
    { url: "/", title: "orderSendingProcedure" },
    { url: "/", title: "paymentMethods" },
]);
</script>

<style lang="scss">
footer .purchase-guide {
    @apply flex flex-col gap-4 sm:gap-[1.4rem] 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 sm:gap-2;

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