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

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

// state

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

<template>
    <section class="w-full border-t-[0.5px] border-slate-200">
        <div class="w-full flex-center py-[5rem] gap-[1.25rem] container">
            <template v-for="(highlight, index) in highlights" :key="index">
                <div class="flex flex-col-center gap-[.75rem] w-1/4 px-5">

                    <img :src="highlight.icon" class="size-[90px]" alt="" />

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

                <div
                    class="w-[1px] h-[5rem] bg-slate-200"
                    v-if="index + 1 != highlights.length"
                />
            </template>
        </div>
    </section>
</template>

<style scoped></style>
