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

import { NAV_LINKS } from "~/constants";
</script>

<template>
    <footer class="w-full bg-black flex-center">
        <div class="size-full grid grid-cols-2 items-stretch container">
            <div
                class="h-full flex flex-col items-start justify-between pe-[5rem] py-[5rem]"
            >
                <div class="flex flex-col items-start gap-[1.5rem] w-full">
                    <span class="text-white typo-sub-h-xl font-light"
                        >از آخرین اخبار، نوشته‌ها، مقالات و تخفیف‌ها با خبر شوید
                        😎
                    </span>
                    <div class="flex flex-col items-start gap-[.75rem] w-full">
                        <div
                            class="flex items-center justify-start gap-[.5rem] w-full"
                        >
                            <Input
                                placeholder="آدرس الکترونیکی شما"
                                class="bg-slate-950 border-slate-800 hover:border-slate-800 w-8/12"
                            />
                            <Button
                                class="invert rounded-100 size-[3rem] !**:stroke-black"
                                end-icon="ci:arrow-left"
                            />
                        </div>
                        <span class="text-slate-400 typo-p-sm">
                            با عضویت, شما با
                            <NuxtLink to="#" class="text-cyan-500 underline"
                                >قوانین و مقررات</NuxtLink
                            >
                            سایت موافقت می کنید.
                        </span>
                    </div>
                </div>
                <span class="text-white typo-label-sm font-light">
                    © ۲۰۲۵ - ملز; هوشمند ترین وبسایت ایران
                </span>
            </div>

            <div
                class="flex flex-col items-start ps-[5rem] py-[5rem] gap-[6.875rem]"
            >
                <div class="w-full flex items-start gap-[3rem]">
                    <div class="flex flex-col gap-[1.5rem] w-full">
                        <NuxtLink
                            v-for="(link, index) in NAV_LINKS"
                            :key="index"
                            :to="link.path"
                            class="typo-h-5 font-light text-white hover:text-white/70 transition-all"
                        >
                            {{ link.title }}
                        </NuxtLink>
                    </div>
                    <div class="flex flex-col gap-[.75rem] w-full">
                        <NuxtLink
                            to="#"
                            class="typo-label-md font-light text-slate-400 hover:text-slate-500 transition-all"
                        >
                            سوالات متدوال
                        </NuxtLink>
                        <NuxtLink
                            to="#"
                            class="typo-label-md font-light text-slate-400 hover:text-slate-500 transition-all"
                        >
                            قوانین و مقررات
                        </NuxtLink>
                        <NuxtLink
                            to="#"
                            class="typo-label-md font-light text-slate-400 hover:text-slate-500 transition-all"
                        >
                            گزارش خطا و باگ
                        </NuxtLink>
                        <NuxtLink
                            to="#"
                            class="typo-label-md font-light text-slate-400 hover:text-slate-500 transition-all"
                        >
                            حریم خصوصی
                        </NuxtLink>
                        <NuxtLink
                            to="#"
                            class="typo-label-md font-light text-slate-400 hover:text-slate-500 transition-all"
                        >
                            تماس با ما
                        </NuxtLink>
                    </div>
                </div>

                <div class="flex items-center justify-end text-white w-full">
                    <div class="flex items-center gap-[1rem]">
                        <NuxtLink to="#" class="flex-center size-[1.5rem]">
                            <Icon
                                name="ci:instagram"
                                class="**:fill-white"
                                size="24"
                            />
                        </NuxtLink>
                        <NuxtLink to="#" class="flex-center size-[1.5rem]">
                            <Icon
                                name="ci:facebook"
                                class="**:fill-white **:stroke-white"
                                size="20"
                            />
                        </NuxtLink>
                        <NuxtLink to="#" class="flex-center size-[1.5rem]">
                            <Icon
                                name="ci:tiktok"
                                class="**:fill-white **:stroke-white"
                                size="20"
                            />
                        </NuxtLink>
                        <NuxtLink to="#" class="flex-center size-[1.5rem]">
                            <Icon
                                name="ci:youtube"
                                class="**:fill-white"
                                size="24"
                            />
                        </NuxtLink>
                    </div>
                </div>
            </div>
        </div>
    </footer>
</template>

<style scoped></style>
