﻿<script setup>
import XIcon from '@/assets/icons/x.svg'
import FacebookIcon from '@/assets/icons/facebook.svg'
import InstagramIcon from '@/assets/icons/instagram.svg'
import {useBrandingStore} from "@/stores/brandingStore.js";
const brandingStore = useBrandingStore()
</script>

<template>

  <footer class="py-8 flex flex-col gap-8" :style="{color: brandingStore.colors.onBackground}">

    <div class="centered-text text-2xl font-bold flex justify-center items-center ml-28 lg:tracking-[125px] md:tracking-[50px] sm:tracking-[20px]">Hutopy</div>


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

      <a href="https://www.instagram.com/hutopy.inc/">
        <instagram-icon class="icon" :style="{ fill: brandingStore.colors.onBackground }"></instagram-icon>
      </a>

      <a href="https://x.com/Hutopyinc/">
        <x-icon class="icon" :style="{ fill: brandingStore.colors.onBackground }"></x-icon>
      </a>
    </div>

    <div class="flex flex-row flex-wrap justify-center gap-4 px-4 "  >
      <router-link to="/documents/helpandcontact"  :style="{color: brandingStore.colors.onBackground}">
        {{ $t('footer.helpandcontact') }}
      </router-link>
      <router-link to="/documents/faq"  :style="{color: brandingStore.colors.onBackground}">
        {{ $t('footer.faq') }}
      </router-link>
      <router-link to="/documents/guideforcreators"  :style="{color: brandingStore.colors.onBackground}">
        {{ $t('footer.creatorguide') }}
      </router-link>
      <router-link to="/documents/termsandconditions"  :style="{color: brandingStore.colors.onBackground}">
        {{ $t('footer.termsandconditions') }}
      </router-link>
      <router-link to="/documents/contentpolicy"  :style="{color: brandingStore.colors.onBackground}">
        {{ $t('footer.contentpolicy') }}
      </router-link>
      <router-link to="/documents/about"  :style="{color: brandingStore.colors.onBackground}">
        {{ $t('footer.about') }}
      </router-link>
      <router-link to="/documents/pricing"  :style="{color: brandingStore.colors.onBackground}">
        {{ $t('footer.pricing') }}
      </router-link>
    </div>

    <div class="flex justify-center base-text mb-13"  :style="{color: brandingStore.colors.onBackground}">
      Hutopy &copy;{{ new Date().getFullYear() }} - {{ $t('footer.allRightsReserved') }}
    </div>
 
  </footer>

</template>

<style scoped>

.icon {
  width: 30px;
  height: 30px;
}

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

a {
  @apply base-text
}

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

.centered-text {
  display: flex;
  justify-content: center;
  align-items: center;
  letter-spacing: 125px;
  font-size: 2rem;
  font-weight: bold;
  margin-left: 7rem;
}

@media (max-width: 768px) {
  .centered-text {
    letter-spacing: 60px;
    margin-left: 2rem;
  }
}

@media (max-width: 640px) {
  .centered-text {
    letter-spacing: 40px;
    margin-left: 1rem;
  }
}


</style>