﻿<script setup>
    import Instagram from '@/views/svg/Instagram.vue';
    import Facebook from '@/views/svg/Facebook.vue';
    import X from '@/views/svg/X.vue';
    import { useI18n } from 'vue-i18n';

    const { t } = useI18n();
</script>

<template>
    <footer class="flex flex-col gap-10 pt-7 pb-10">
        <div class="footer-socials">
            <a
                href="https://www.facebook.com/profile.php?id=61556819217561"
                target="_blank"
            >
                <facebook class="social-icon"></facebook>
            </a>
            <a
                href="https://www.instagram.com/hutopy.inc/"
                target="_blank"
            >
                <instagram class="social-icon"></instagram>
            </a>
            <a
                href="https://x.com/Hutopyinc/"
                target="_blank"
            >
                <x class="social-icon"></x>
            </a>
        </div>

        <div class="footer-links">
            <router-link
                class="link"
                to="/documents/helpandcontact"
            >
                {{ t('footer.helpandcontact') }}
            </router-link>
            <router-link
                class="link"
                to="/documents/faq"
            >
                {{ t('footer.faq') }}
            </router-link>
            <router-link
                class="link"
                to="/documents/guideforcreators"
            >
                {{ t('footer.creatorguide') }}
            </router-link>
            <router-link
                class="link"
                to="/documents/termsandconditions"
            >
                {{ t('footer.termsandconditions') }}
            </router-link>
            <router-link
                class="link"
                to="/documents/contentpolicy"
            >
                {{ t('footer.contentpolicy') }}
            </router-link>
            <router-link
                class="link"
                to="/documents/about"
            >
                {{ t('footer.about') }}
            </router-link>
            <router-link
                class="link"
                to="/documents/pricing"
            >
                {{ t('footer.pricing') }}
            </router-link>
        </div>

        <div class="footer-copyright">
            Hutopy &copy;{{ new Date().getFullYear() }} - {{ t('footer.allRightsReserved') }}
        </div>
    </footer>
</template>

<style scoped>
    .footer-socials {
        @apply flex flex-row justify-center;
        @apply gap-10;
    }

    .footer-links {
        @apply flex flex-row flex-wrap justify-center;
        @apply gap-4 px-4;
    }

    .footer-copyright {
        @apply flex justify-center;
        @apply text-hOnBackground tracking-widest font-sans text-sm;
    }

    .social-icon {
        @apply fill-current w-6 h-6;
        @apply text-hOnBackground;
    }

    .link {
        @apply text-hOnBackground;
        @apply tracking-widest font-sans text-sm;
        @apply hover:text-gray-400;
    }
</style>

<i18n>
{
    "en": {
        "footer": {
            "helpandcontact": "Help & Contact",
            "faq": "FAQ",
            "creatorguide": "Creator Guide",
            "termsandconditions": "Terms & Conditions",
            "contentpolicy": "Content Policy",
            "about": "About",
            "pricing": "Pricing",
            "allRightsReserved": "All Rights Reserved"
        }
    },
    "fr": {
        "footer": {
            "helpandcontact": "Aide & Contact",
            "faq": "FAQ",
            "creatorguide": "Guide du Créateur",
            "termsandconditions": "Conditions Générales",
            "contentpolicy": "Politique de Contenu",
            "about": "À Propos",
            "pricing": "Tarifs",
            "allRightsReserved": "Tous Droits Réservés"
        }
    }
}
</i18n>
