﻿<script setup>
import XIcon from '@/assets/icons/x.svg'
import FacebookIcon from '@/assets/icons/facebook.svg'
import InstagramIcon from '@/assets/icons/instagram.svg'
</script>

<template>

  <footer class="py-8 flex flex-col gap-8">
    
    <div class="flex justify-center">
      <router-link to="/">
        <img src="/images/hutopymedia/banners/hutopy.png" alt="hutopy"
             width="300px"
             height="64px">
      </router-link>
    </div>

    <div class="flex flex-row justify-center gap-10">
      <a href="https://www.facebook.com/profile.php?id=61556819217561">
        <facebook-icon class="icon"></facebook-icon>
      </a>

      <a href="https://www.instagram.com/hutopy.inc/">
        <instagram-icon class="icon"></instagram-icon>
      </a>

      <a href="https://x.com/Hutopyinc/">
        <x-icon class="icon"></x-icon>
      </a>
    </div>

    <div class="flex flex-row flex-wrap justify-center gap-4">
      <router-link to="/helpandcontact">
        Aide & Contact
      </router-link>
      <router-link to="/faq">
        FAQ
      </router-link>
      <router-link to="/guideforcreators">
        Guide pour les créateurs
      </router-link>
      <router-link to="/termsandconditions">
        Termes et Conditions
      </router-link>
      <router-link to="/contentpolicy">
        Politique de Contenu
      </router-link>
      <router-link to="/about">
        À Propos
      </router-link>
      <router-link to="/pricing">
        Frais
      </router-link>
    </div>

    <div class="flex justify-center base-text">
      Hutopy &copy;{{ new Date().getFullYear() }} - {{ $t('footer.allRightsReserved') }}
    </div>

  </footer>

</template>

<style scoped>

.icon {
  width: 36px;
  height: 36px;
  fill: #6a0065;
}

.base-text {
  @apply text-gray-600 tracking-widest font-sans text-sm uppercase
}

a {
  @apply base-text
}

a:hover {
  @apply text-gray-400
}

</style>