<script setup lang="ts">
// types

type Highlight = {
    icon: string;
    title: string;
    description: string;
};

// state

const highlights = ref<Highlight[]>([
    {
        icon: "/img/heymlz/footer-support.gif",
        title: "خدمات مشتری",
        description: "پشتیبانی استثنایی، راه‌حل‌های پایدار برای شما",
    },
    {
        icon: "/img/heymlz/footer-send.gif",
        title: "ارسال سریع و رایگان",
        description: "ارسال رایگان برای سفارش‌های بالای ۱۵۰ دلار",
    },
    {
        icon: "/img/heymlz/footer-share.gif",
        title: "معرفی به دوستان",
        description: "ما را به دوستان خود معرفی کنید",
    },
    {
        icon: "/img/heymlz/footer-security.gif",
        title: "پرداخت امن",
        description: "پرداخت شما به‌صورت امن پردازش می‌شود",
    },
]);
</script>

<template>
    <section class="w-full border-t-[0.5px] border-slate-200">
        <div class="w-full py-[3rem] lg:py-[5rem] gap-8 sm:gap-12 xl:gap-0 container grid grid-cols-2 lg:grid-cols-4">
            <template
                v-for="(highlight, index) in highlights"
                :key="index"
            >
                <div class="flex flex-col-center gap-[.75rem] px-5">
                    <div class="size-[70px] md:size-[100px] flex-center">
                        <NuxtImg
                            :src="highlight.icon"
                            loading="lazy"
                            fetch-priority="low"
                            class="w-full"
                        />
                    </div>

                    <div class="w-full flex-col-center gap-[.25rem]">
                        <span class="typo-sub-h-sm lg:typo-sub-h-md text-black text-center">
                            {{ highlight.title }}
                        </span>
                        <p class="text-slate-500 typo-p-xs lg:typo-p-sm mt-1 text-center">
                            {{ highlight.description }}
                        </p>
                    </div>
                </div>
            </template>
        </div>
    </section>
</template>

<style scoped></style>
