<script setup lang="ts"></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"
                        >Subscribe to our newsletter
                    </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="Enter your email"
                                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">
                            By subscribing, you agree to our responsible data
                            use
                        </span>
                    </div>
                </div>
                <span class="text-white typo-label-sm">
                    © 2024 Nova - Tech Store. Powered by Capricorn Engineering
                </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-[.75rem] text-white w-full">
                        <NuxtLink to="#" class="typo-h-5"> About </NuxtLink>
                        <NuxtLink to="#" class="typo-h-5"> Journal </NuxtLink>
                        <NuxtLink to="#" class="typo-h-5"> FAQs </NuxtLink>
                        <NuxtLink to="#" class="typo-h-5">
                            Contact us
                        </NuxtLink>
                    </div>
                    <div
                        class="flex flex-col gap-[.75rem] text-slate-400 w-full"
                    >
                        <NuxtLink to="#" class="typo-label-md">
                            Headphones
                        </NuxtLink>
                        <NuxtLink to="#" class="typo-label-md">
                            Speakers
                        </NuxtLink>
                        <NuxtLink to="#" class="typo-label-md">
                            Charging stations
                        </NuxtLink>
                        <NuxtLink to="#" class="typo-label-md">
                            Lanterns
                        </NuxtLink>
                        <NuxtLink to="#" class="typo-label-md">
                            Portable charger
                        </NuxtLink>
                    </div>
                </div>

                <div
                    class="flex items-center justify-between text-white w-full"
                >
                    <span class="typo-label-sm">Privacy Policy</span>
                    <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>
