<template>
  <v-app style="background-color: #F4F4F4;">


    <div style="background-color: #F4F4F4;">

      <!--PC -->
      <div class="md:flex hidden items-center justify-between flex-col" style=" margin-top: 3%;">

        <!--Logo & bouttons -->
        <v-container class="d-flex justify-center align-center">
          <div style="margin-left: 20%;">
            <v-row>

              <img style=" max-width: 60vh; max-height: 11vh;" src="../../../images/hutopy.png">
              <RouterLink :to="{ name: 'login' }">
                <v-btn size="large"
                  style="margin-left: 20%; margin-top: 50%; background-color: #F4F4F4; min-width: 100px; max-width: 100;"
                  light elevation="0">
                  Connexion
                </v-btn>
              </RouterLink>
              <RouterLink :to="{ name: 'contact' }">
                <v-btn size="large"
                  style="margin-left: 50%; margin-top: 48%; min-width: 150px; max-width: 200px; border-radius: 40px;"
                  color="rgb(107, 0, 101)" outlined elevation="0">
                  Inscription
                </v-btn>
              </RouterLink>

            </v-row>


          </div>
        </v-container>

        <div>
          <v-container style="margin: 0; padding: 0;">
            <v-row style="justify-content: center;">
              <img src="../../../images/homepage/bannierehomepage.png"
                style="max-width: 100%; height: auto; max-height: 50vh; min-width: 1000px; min-height: 450px; object-fit: cover; border-radius: 20px; margin: auto;">
            </v-row>
          </v-container>
        </div>


        <!-- Colonnes Créer Partager Inspirer-->
        <v-container>
          <v-row>
            <!-- vide de gauche -->
            <v-col cols="1" class="ml-4 ml-sm-0">
            </v-col>
            <!-- Colonne Centre -->
            <v-col cols="9" style="margin-left: 4%;">

              <!-- Créer Profiter Inspirer  -->

              <div class="d-flex justify-center align-center">
                <div>
                  <div style="margin-top: 40px;">
                    <v-container class="d-flex justify-center align-center" style="width: 128vh;">
                      <v-hover v-slot="{ isHovering, props }">
                        <v-card style="border-radius: 20px; min-width: 325px;" class="mx-auto" :max-width="600"
                          v-bind="props">
                          <v-img src="../../../images/homepage/creer.png"
                            style="min-width: 325px; border-radius: 20px; width: 80vw;"></v-img>
                          <v-overlay :model-value="isHovering" class="align-center justify-center" scrim="#6b0065"
                            contained>
                            <v-container>
                              <v-card class="mx-auto" :max-width="600" v-bind="props" color="#a30e79">
                                <h3 class="white--text" style="text-align: center; margin-top: 10%; font-size: 1.5em;">
                                  CRÉER</h3>
                                <p class="text-justify pa-4" style="font-size: 1.2em;">Libérez votre créativité sur
                                  Hutopy, où chaque idée trouve sa place et chaque créateur détient la clé d'un monde
                                  rempli de possibilités infinies. Rejoignez-nous et transformez votre passion en
                                  réalité.
                                </p>
                              </v-card>
                            </v-container>
                          </v-overlay>
                        </v-card>


                      </v-hover>

                      <div style="margin-left: 5vw;"></div>

                      <v-hover v-slot="{ isHovering, props }">
                        <v-card style="min-width: 325px; border-radius: 20px;" class="mx-auto" :max-width="600"
                          v-bind="props">
                          <v-img src="../../../images/homepage/partager.png"
                            style="min-width: 325px; border-radius: 20px; width: 80vw;"></v-img>
                          <v-overlay :model-value="isHovering" class="align-center justify-center" scrim="#6b0065"
                            contained>
                            <v-container>
                              <v-card class="mx-auto" :max-width="600" v-bind="props" color="#a30e79">
                                <h3 class="white--text"
                                  style="text-align: center; margin-top: 10%; font-size: 1.5em; @media screen and (min-width: 768px) { font-size: 2vw; }">
                                  PROFITER</h3>
                                <p class="text-justify pa-4" style="font-size: 1.2em;">
                                  Plongez dans l'univers Hutopy et
                                  découvrez un espace où profiter rime avec s'enrichir. Savourez des contenus uniques,
                                  des
                                  interactions authentiques et une expérience personnalisée conçue pour éveiller vos
                                  sens
                                  et enrichir votre quotidien.</p>
                              </v-card>
                            </v-container>
                          </v-overlay>
                        </v-card>
                      </v-hover>

                      <div style="margin-left: 5vw;"></div>

                      <v-hover v-slot="{ isHovering, props }">
                        <v-card style="min-width: 325px; border-radius: 20px;" class="mx-auto" :max-width="600"
                          v-bind="props">
                          <v-img src="../../../images/homepage/inspirer.png"
                            style="border-radius: 20px; width: 80vw;"></v-img>
                          <v-overlay :model-value="isHovering" class="align-center justify-center" scrim="#6b0065"
                            contained>
                            <v-container>
                              <v-card class="mx-auto" :max-width="600" v-bind="props" color="#a30e79">
                                <h3 class="white--text"
                                  style="text-align: center; margin-top: 10%; font-size: 1.5em; @media screen and (min-width: 768px) { font-size: 2vw; }">
                                  INSPIRER</h3>
                                <p class="text-justify pa-4" style="font-size: 1.2em;">
                                  Devenez une source d'inspiration
                                  sur Hutopy, en partageant votre vision, votre talent et vos histoires. Influencez
                                  positivement la communauté, éveillez la curiosité et inspirez les autres à poursuivre
                                  leurs rêves dans un cercle vertueux de créativité et d'inspiration.</p>
                              </v-card>
                            </v-container>
                          </v-overlay>
                        </v-card>
                      </v-hover>
                    </v-container>
                  </div>
                </div>
              </div>







            </v-col>
            <!-- vide de droite -->
            <v-col cols="2" class="mr-4 mr-sm-0">
            </v-col>
          </v-row>
        </v-container>

        <!-- Description D'hutopy -->

        <v-container style="max-width: 65%; min-width: 1150px;" class="custom-width">
          <v-row class="justify-center">
            <v-col cols="6">
              <v-col cols="11" class="d-flex justify-center align-center">
                <v-img style="margin-top: -5%; min-width: 350px;"
                  src="../../../images/homepage/votrehutopy.png"></v-img>
              </v-col>
              <v-col cols="auto" md="10">
                <p class="text-center text-justify votre_hutopy_fontsize"
                  style="margin-top: 3%; margin-bottom: 5%; max-width: 900px; ">
                  Bienvenue sur Hutopy, votre nouvelle frontière de création, de connexion et d'innovation. Au
                  cœur de notre mission réside une ambition audacieuse : transformer l'espace numérique en un
                  écosystème où chaque créateur, chaque rêveur, chaque professionnel, peut non seulement imaginer
                  mais concrétiser son utopie personnelle. Hutopy est plus qu'une simple plateforme c'est une
                  communauté vibrante qui défie les conventions de l’éducation, encourage l'originalité et célèbre
                  la créativité.
                </p>
                <p class="text-center text-justify votre_hutopy_fontsize"
                  style="margin-top: 3%; margin-bottom: 5%; max-width: 900px;">
                  Chez Hutopy, nous croyons en la puissance de la créativité sans limites. Notre environnement est
                  conçu pour inspirer, soutenir et propulser chaque membre vers de nouveaux sommets de
                  réalisation. Qu'il s'agisse de vidéo, d'art, de musique, d'écriture, de formation ou de toute
                  autre forme d'expression, Hutopy offre les outils nécessaires pour que chaque vision puisse
                  prendre vie.
                </p>
                <v-col cols="auto" class="d-flex justify-center align-center">
                  <RouterLink style="width: 450px;" :to="{ name: 'contact' }">
                    <v-btn size="x-large" style="width: 400px; border-radius: 40px;" color="rgb(107, 0, 101)" outlined
                      elevation="0">
                      Inscription
                    </v-btn>
                  </RouterLink>
                </v-col>
              </v-col>
            </v-col>

            <!-- Colonne de droite -->
            <v-col cols="3">
              <v-img src="../../../images/homepage/grinding.png"
                style="margin-bottom: 4%; border-radius: 30px; width: 80 vw;"></v-img>
              <v-img src="../../../images/homepage/girlarmy.png" style="border-radius: 30px; min-width: 250px;"></v-img>
            </v-col>
            <v-col cols="3" style>
              <v-img src="../../../images/homepage/microphone.png"
                style="margin-bottom: 4%; border-radius: 30px; min-width: 250px; max-height: auto; height: auto;"></v-img>
              <v-img src="../../../images/homepage/girlvr.png"
                style="border-radius: 30px; min-width: 250pxpx; max-height: 350;"></v-img>
            </v-col>
          </v-row>
        </v-container>

        <!-- ILS SONT SUR HUTOPY -->
        <v-container style="max-width: 1500px;">
          <v-card-text>
            <h1 style="text-align: center;  margin-bottom: 2%; font-size: 4rem; font-weight: bold; color: #24393c">
              Ils sont sur Hutopy.</h1>


            <v-container style="margin-top: 25px; margin-bottom: -6%; max-width:  1200px;">


              <v-row justify="center" class="profile-images">

                <v-col>
                  <router-link :to="{ name: 'creatorfolio' }">
                    <img src="../../../images/guillaume.jpg" alt="Profile Image" class="profile-image  ">

                  </router-link>
                  <RouterLink :to="{ name: 'creatorfolio' }">
                    <v-btn size="large" style="margin-left: 29%; margin-top: -20%; border-radius: 40px;"
                      color="rgb(107, 0, 101)" outlined elevation="10">
                      Inscription
                    </v-btn>
                  </RouterLink>


                </v-col>

                <v-col>
                  <router-link :to="{ name: 'creatorfolio' }">
                    <img src="../../../images/guillaume.jpg" alt="Profile Image" class="profile-image">

                  </router-link>
                  <RouterLink :to="{ name: 'creatorfolio' }">
                    <v-btn size="large" style="margin-left: 29%; margin-top: -20%; border-radius: 40px;"
                      color="rgb(107, 0, 101)" outlined elevation="10">
                      Inscription
                    </v-btn>
                  </RouterLink>


                </v-col>


                <v-col>
                  <router-link :to="{ name: 'creatorfolio' }">
                    <img src="../../../images/guillaume.jpg" alt="Profile Image" class="profile-image">

                  </router-link>
                  <RouterLink :to="{ name: 'creatorfolio' }">
                    <v-btn size="large" style="margin-left: 29%; margin-top: -20%; border-radius: 40px;"
                      color="rgb(107, 0, 101)" outlined elevation="10">
                      Inscription
                    </v-btn>
                  </RouterLink>


                </v-col>


              </v-row>


            </v-container>
          </v-card-text>
        </v-container>


        <!-- Fin Description D'hutopy -->

      </div>

      <!-- Mobile -->
      <div class="md:hidden flex flex-col items-center justify-center">
        <div>

          <DefaultLayout></DefaultLayout>

          <img src="../../../images/bannieremobile.png" class="banner-image" alt="Bannière" style="margin-top: -100px;">

          <div>
            <v-card-text>
              <div>
                <h2 style="text-align: center;">C'EST QUOI HUTOPY</h2>
                <p class="textjustify pa-4">Découvrez Hutopy, une plateforme révolutionnaire conçue pour célébrer
                  la créativité, l'authenticité et l'inspiration. Ici, chaque créateur trouve un espace pour
                  exprimer sa passion et partager ses œuvres avec une communauté engagée. Hutopy se distingue
                  par son engagement envers une expérience numérique enrichissante, offrant une interface
                  intuitive où profiter, créer et inspirer deviennent un quotidien enrichi et significatif.
                  Hutopy n'est pas seulement une plateforme, c'est un mouvement vers une interaction plus
                  humaine et créative dans l'espace numérique. Avec un modèle économique équitable et une
                  variété de contenus, nous offrons un lieu où les inspirations se rencontrent et où les idées
                  prennent vie. Rejoindre Hutopy, c'est faire partie d'une communauté qui valorise
                  l'expression authentique et construit un avenir où la technologie enrichit véritablement nos
                  vies. Nous vous invitons à explorer Hutopy, à contribuer à sa vision et à faire partie de
                  notre communauté mondiale. Ensemble, façonnons l'avenir de la création et du partage de
                  contenu. Bienvenue sur Hutopy, où vous pouvez créer votre propre univers.</p>
              </div>

              <v-img src="../../../images/world.png" class="v-card-imagecontainerpos" alt="Image"></v-img>
              <router-link :to="{ name: 'contact' }">
                <v-btn style="background-color: rgb(163, 14, 121); color: white; font-weight: bold;" class="mt-4" block>
                  CONNECTEZ-VOUS
                </v-btn>
              </router-link>

            </v-card-text>
          </div>

          <v-container style="margin-top: 25px;" class="layer1-backgroundmobile">
            <v-img src="../../../images/creermobile.png" width="400" height="300"></v-img>
            <p class="text-justify pa-4" style="font-size: 1em;">Libérez votre créativité sur Hutopy,
              où chaque idée trouve sa place et chaque créateur détient la clé d'un monde rempli de
              possibilités infinies. Rejoignez-nous et transformez votre passion en réalité.</p>

          </v-container>

          <v-container style="margin-top: 25px;" class="layer2-backgroundmobile">
            <v-img src="../../../images/profitezmobile.png" width="400" height="300"></v-img>
            <p class="text-justify pa-4" style="font-size: 1em;">Plongez dans l'univers Hutopy et découvrez un
              espace où profiter rime avec s'enrichir. Savourez des contenus uniques, des interactions authentiques et
              une
              expérience
              personnalisée conçue pour éveiller vos sens et enrichir votre quotidien.</p>

          </v-container>


          <v-container style="margin-top: 25px;" class="layer1-backgroundmobile">
            <v-img src="../../../images/inspirermobile.png" width="400" height="300"></v-img>
            <p class="text-justify pa-4" style="font-size: 1em;">Devenez une source d'inspiration sur Hutopy, en
              partageant votre vision,
              votre talent et vos histoires. Influencez positivement la communauté, éveillez la curiosité et inspirez
              les
              autres à poursuivre leurs rêves dans un cercle vertueux de créativité et
              d'inspiration.</p>

          </v-container>

          <v-container>
            <v-card-text>
              <div style="background-color: rgba(163, 14, 121, 1); height: 2px; width: 100%; margin-top: -50px;">
              </div>
              <h1 style="text-align: center; color: #24393c; font-size: 2.2em; margin-bottom: 10%;">ILS SONT SUR HUTOPY
              </h1>
              <div style="background-color: rgba(163, 14, 121, 1); height: 2px; width: 100%; margin-top: -40px;">
              </div>

              <div class="d-flex justify-content-center"
                style="margin-left: -10px; margin-right: 10px; margin-top: 50px;">
                <router-link :to="{ name: 'creatorfolio' }">
                  <img src="../../../images/guillaume.png" alt="Profile Image" class="profile-image"
                    style="border-radius: 50%; margin-right: 20px; width: 120px; height: auto;" />

                </router-link>

                <router-link :to="{ name: 'creatorfolio' }">
                  <img src="../../../images/guillaume.png" alt="Profile Image" class="profile-image"
                    style="border-radius: 50%; margin: 0 20px; width: 120px; height: auto;" />
                </router-link>

                <router-link :to="{ name: 'creatorfolio' }">
                  <img src="../../../images/guillaume.png" alt="Profile Image" class="profile-image"
                    style="border-radius: 50%; margin-left: 20px; width: 120px; height: auto;" />
                </router-link>
              </div>


            </v-card-text>
          </v-container>

        </div>
      </div>

      <v-btn variant="outlined" @click="callBackend()">
        Get items
      </v-btn>



      <v-snackbar v-model="errorNoAccessSnackBar">
        Vous n'etes pas connecter !
        <template v-slot:actions>
          <v-btn color="red" variant="text" @click="errorNoAccessSnackBar = false">
            Fermer
          </v-btn>
          <v-btn color="green" variant="text" @click="goToLoginPage()">
            Se connecter
          </v-btn>
        </template>
      </v-snackbar>

      <v-list style="background-color: #F4F4F4;" lines="one">
        <v-list-item v-for=" item  in  itemList " :key="item" :title="item.id" :subtitle="item.title"></v-list-item>
      </v-list>
      <FooterLayout></FooterLayout>
    </div>

  </v-app>
</template>

<script async setup>
import DefaultLayout from '@/layouts/DefaultLayout.vue';
import FooterLayout from '@/layouts/FooterLayout.vue';
import { useClient } from '@/plugins/clientPlugin';
import { ref } from 'vue';
import { useRouter } from 'vue-router';


const router = useRouter()
const client = useClient();

let itemList = ref([]);
let errorNoAccessSnackBar = ref(false);

async function callBackend() {
  try {
    const response = await client.get('/api/TodoItems?ListId=1&PageNumber=1&PageSize=10');
    const responseItems = response.data.items;
    const orderedResponseItems = responseItems.sort((a, b) => a.id - b.id);
    itemList.value = orderedResponseItems

  } catch (error) {
    errorNoAccessSnackBar.value = true;
  }
}

const goToLoginPage = () => {
  router.push('/login');
}


</script>

<style src="../../cssstyle/index.css"></style>

<style src="../../cssstyle/homeView.css"></style>

<style scoped>
.phototexte {
  margin-left: 10px;
  margin-right: 10px;

}

.layer1-background {
  background-color: rgba(163, 14, 121, 0.03);
  border-radius: 20px;
  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.2);

}

.layer1-backgroundmobile {
  background-color: rgba(163, 14, 121, 0.1);
  border-radius: 20px;
  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.3);

}

.layer2-backgroundmobile {

  border-radius: 20px;
  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.3);

}



.layer2-background {
  background-color: rgba(107, 0, 101, 0.02);
  border-radius: 20px;
}

.v-container {
  margin-bottom: 50px;
  /* Augmente l'espace entre les v-containers */
}

.h2ilssontsurutopy {
  font-weight: bold;
  font-size: 2rem;
  margin-bottom: 100px;
  /* Ajoute de l'espace en bas du titre */
  margin-top: 25px;
}

.h2ilssontsurutopytitle {
  color: rgba(107, 0, 101, 0.85);
}

.profile-images {
  gap: 90px;
  /* Espace entre les images */
  margin-top: 50px;
  /* Ajoute de l'espace en haut des images */



}

.profile-image {
  width: auto;
  /* Largeur des images */

  /* Hauteur des images */
  border-radius: 35px;
  /* Coins arrondis */
  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.4);
}

.image-wrapper {
  display: flex;
  justify-content: center;
  margin-top: 30px;
  margin-bottom: 30px;
}

.image-container {
  position: relative;
  width: 23vw;
  /* Utilisation de 20% de la largeur de la vue */
  margin: 5px 8px;
}

.image {
  width: 100%;
  height: auto;
  border-radius: 8px;

}

.v-card-text h2 {
  margin-bottom: 20px;
  /* Ajoute de l'espace en bas du titre h2 */
  font-size: 2rem;
  /* Taille du texte */
  font-weight: bold;
  /* Texte en gras */
  color: rgba(163, 14, 121, 0.85);
  /* Couleur du texte (utilisez la couleur souhaitée) */
}

.v-card-text p {
  font-size: 1rem;
  /* Taille du texte */
}

.textjustify {
  text-align: justify;
}

.overlay {
  position: absolute;
  border-radius: 8px;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(163, 14, 121, 0.80);
  /* Voile noir avec une opacité de 0.5 */
  display: flex;
  text-align: left;
  font-size: 1.5rem;


  align-items: center;
  opacity: 0;
  transition: opacity 0.3s ease-in-out;
}

.banner-image {

  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.4);
  /* Ombre douce */
}

.image-container:hover .overlay {
  opacity: 1;
}

.overlay p {
  color: white;
  font-size: 1.5rem;
  text-align: center;
}

.custom-container {
  position: relative;
  max-width: 100vw;
  /* Limiter la largeur de la v-container à la largeur de l'écran */


}

.v-card {
  max-width: calc(100% - 20px);
  /* Limiter la largeur de la v-card à la largeur des trois photos avec un espacement de 10px de chaque côté */
}

.v-card-imagecontainerpos {
  margin-top: 55px;
  /* Déplace l'image vers le bas de 10 pixels */
  border-radius: 8px;
}

.overlay p.image-text {
  display: none;
}

.overlay:hover p.image-text {
  display: block;
}

body {
  background-color: #F4F4F4;
}

.votre_hutopy_fontsize {
  font-size: .2em;
}

@media (max-width: 475px) {
  .votre_hutopy_fontsize {
    font-size: 0.55em;
  }
}

@media (min-width: 476px) and (max-width: 640px) {
  .votre_hutopy_fontsize {
    font-size: 0.9em;
  }
}

@media (min-width: 641px) and (max-width: 768px) {
  .votre_hutopy_fontsize {
    font-size: 0.9em;
  }
}

@media (min-width: 769px) and (max-width: 1024px) {
  .votre_hutopy_fontsize {
    font-size: 0.9em;
  }
}

@media (min-width: 1025px) and (max-width: 1536px) {
  .votre_hutopy_fontsize {
    font-size: 0.9em;
  }


}

@media (min-width: 1537px) and (max-width: 1920px) {
  .votre_hutopy_fontsize {
    font-size: 1.1em;
  }
}

@media (min-width: 1921px) {
  .votre_hutopy_fontsize {
    font-size: 1.5em;
  }
}
</style>
