<!--lg="8" md="10" sm="10" xs="10" -->

<template>

  <body style="background-color: #f4f4f4;">
    <v-container style="background-color: #f4f4f4;">
      <div style="background-color: #f4f4f4; min-height: 10vh; display: flex; flex-direction: column;"
        class="footer-align">
        <v-container style="background-color: #f4f4f4">
          <v-row justify="center" style="margin-top: 30px;">
            <v-col cols="5" lg="5" md="5" sm="12" xs="7">
              <v-row>
                <v-img src="../../../images/hutopy.png" class="hutopy-footer-picture"></v-img>
              </v-row>
            </v-col>
          </v-row>
        </v-container>

        <v-container>
          <v-row justify="center">
            <v-col cols="auto">
              <a href="https://www.facebook.com/profile.php?id=61556819217561">
                <img class="icons" src="../../images/facebookiconblackpink.png" alt="Description image 2">
              </a>
            </v-col>
            <v-col cols="auto">
              <a href="https://www.instagram.com/hutopy.inc/">
                <img src="../../images/instagramblackpink.png" alt="Description image 3" class="icons">
              </a>
            </v-col>
            <v-col cols="auto">
              <router-link :to="{ name: 'home' }">
                <img src="../../images/xblackpink.png" alt="Description image 1" class="icons">
              </router-link>
            </v-col>
          </v-row>
        </v-container>

        <v-container class="text-center" style="flex-grow: 1;">
          <v-btn v-for="link in links" :key="link" class="mx-2" color="black" rounded="xl" variant="text">
            {{ link }}
          </v-btn>
        </v-container>

        <v-container class="text-black text-center ">
          {{ new Date().getFullYear() }} — <strong>Hutopy v.01</strong>
        </v-container>




      </div>
    </v-container>
  </body>
</template>



<script>
export default {
  data: () => ({
    links: [
      'Aide & Contact',
      'Conditions générales',
      'Politique des contenus',
      'Programme Ambassadeurs',
      'conditions utilisation',
      'anti-exploitation',
    ],
  }),
}
</script>

<style>
.icons {
  width: 50px;
  height: auto;
}

.hutopy-footer-picture {
  height: 70px;
  margin-bottom: 3%;
  min-height: 70px;
  min-width: auto;
}

.custom-footer {

  padding: 10px;
  /* Ajoute un rembourrage intérieur de 10px autour du contenu du footer *  107, 0, 101, 1/
  margin: 0;
  /* Réinitialise les marges à zéro */
}

.no-margin {
  margin: 0 !important;
  /* Annule la marge de v-app */
}

footer {
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: column;
  /* Pour aligner le contenu verticalement */
  background-color: rgba(107, 0, 101, 1);
}

footer a:not(:last-child) {
  margin-right: 20px;
  /* Ajoute de l'espace entre les images et les liens */
}

.footertextcolor {
  margin-top: 5px;
  margin-bottom: 40px;
  color: azure;
}

.socialiconspacer {
  margin-top: 25px;
}

.custom-color-button {
  background-color: rgb(255, 0, 0);
  /* Your custom color */
  color: white;
  /* Text color */
  font-size: 1.5rem;
  margin-top: 40px;
  margin-bottom: 40px;
}

.background {
  background-color: rgba(107, 0, 101, 1);
}


@media (min-width: 150px) and (max-width: 598px) {

  .hutopy-footer-picture {


    min-width: 200px;
  }
}

@media (min-width: 599px) and (max-width: 999px) {}

@media (min-width: 1000px) and (max-width: 1279px) {}

@media (min-width: 1280px) and (max-width: 1600px) {}

@media (min-width: 1600px) and (max-width: 1919px) {}

@media (min-width: 1920px) and (max-width: 2559px) {}

@media (min-width: 2559px) {}
</style>