<template>
  <div style="background-color: #F4F4F4;">
    <DefaultLayout></DefaultLayout>
    <!--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 container-spacer header-container">
        <v-row justify="center" align="center">
          <v-col></v-col>
          <v-col cols="5" xl="4" xxl="4">
            <v-img class="profile-banner" src="../../../images/hutopy.png"></v-img>
          </v-col>
          <v-col>
            <v-row>
              <RouterLink :to="{ name: 'login' }">
                <v-btn size="large" style="background-color: #F4F4F4;" light elevation="0">
                  Connexion
                </v-btn>
              </RouterLink>
              <RouterLink :to="{ name: 'contact' }">
                <v-btn size="large" style="border-radius: 40px;" color="rgb(107, 0, 101)" outlined elevation="0">
                  Inscription
                </v-btn>
              </RouterLink>
            </v-row>
          </v-col>
        </v-row>
      </v-container>

      <!--Header -->
      <v-container class="container-spacer">
        <v-row>
          <v-spacer></v-spacer>
          <v-col cols="7" xs="12" sm="10" md="12" lg="10" xl="7" xxl="6">
            <v-img class="profile-banner banner-homepage" src="../../../images/homepage/bannierehomepage.png"
              style="border-radius: 20px;"></v-img>
          </v-col>
          <v-spacer></v-spacer>
        </v-row>
      </v-container>

      <!-- Créer Profiter Inspirer  -->
      <v-container class="container-spacer">
        <v-row class="d-flex justify-center creer-profiter-inspirer-row">
          <v-col cols="10" xs="12" sm="10" md="12" lg="10" xl="7" xxl="6">
            <v-row justify="center" align="center" class="créer-profiter-inspirer-row">
              <v-col cols="4" sm="4" md="4">
                <v-hover v-slot="{ isHovering, props }">
                  <v-card style="border-radius: 20px; min-width: 325px;" class="mx-auto card-size" 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>
              </v-col>

              <v-col cols="4" sm="4" md="4">
                <v-hover v-slot="{ isHovering, props }">
                  <v-card style="min-width: 325px; border-radius: 20px;" class="mx-auto card-size " 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;">
                            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>
              </v-col>

              <v-col cols="4" sm="4" md="4">
                <v-hover v-slot="{ isHovering, props }">
                  <v-card style="min-width: 325px; border-radius: 20px;" class="mx-auto card-size" 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;">
                            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-col>
            </v-row>
          </v-col>
        </v-row>
      </v-container>

      <!-- Votre Hutopy  -->
      <v-container class="container-spacer">
        <v-row justify="center">
          <v-col cols="7" xs="12" sm="11" md="12" lg="10" xl="7" xxl="6">
            <v-row justify="center">
              <v-col cols="6" md="7" lg="6">

                <!-- Subtitle : Votre Hutopy -->
                <v-img cols="12" style="margin-top: -5%; min-width: 350px;"
                  src="../../../images/homepage/votrehutopy.png"></v-img>

                <!-- Your Hutopy text-->
                <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="12" class="text-center">
                  <RouterLink style="width: 450px;" :to="{ name: 'contact' }">
                    <v-btn size="x-large" style="width: 300px; border-radius: 40px;" color="rgb(107, 0, 101)" outlined
                      elevation="0">
                      Inscription
                    </v-btn>
                  </RouterLink>
                </v-col>
              </v-col>

              <!-- 4 pictures  -->
              <v-col cols="6" md="5" lg="6">
                <v-row justify="center" class="votre-hutopy-img">
                  <v-col cols="6" sm="12" md="12" lg="6">
                    <v-img style="border-radius: 30px;" src="../../../images/homepage/grinding.png"
                      class="hidden-md-and-down" hidden-and-down></v-img>
                  </v-col>
                  <v-col cols="6" sm="12" md="12" lg="6">
                    <v-img style="border-radius: 30px;" src="../../../images/homepage/microphone.png"></v-img>
                  </v-col>
                  <v-col cols="6" sm="12" md="6" lg="6">
                    <v-img style="border-radius: 30px;" src="../../../images/homepage/girlarmy.png"></v-img>
                  </v-col>
                  <v-col cols="6" sm="6" md="6" lg="6">
                    <v-img style="border-radius: 30px;" class="d-none d-md-block"
                      src="../../../images/homepage/girlvr.png"></v-img>
                  </v-col>
                </v-row>
              </v-col>
            </v-row>
          </v-col>
        </v-row>
      </v-container>


      <!-- They are on the Hutopy section -->
      <v-row style="margin-top: 40px; margin-bottom: 60px;">
        <v-spacer></v-spacer>

        <!-- Subtitle :Ils sont sur Hutopy -->
        <v-col cols="7" xs="12" sm="12" md="12" lg="10" xl="6" xxl="7">
          <h1 style=" margin-bottom: 70px; text-align: center;  font-size: 4rem; font-weight: bold; color: #24393c">
            Ils sont sur Hutopy.</h1>
          <v-spacer></v-spacer>
          <v-col>

            <!-- Account links  -->
            <v-row justify="center" class="profile-images">
              <v-col>
                <router-link :to="{ name: 'creatorfolio' }">
                  <img src="../../../public/images/anonymelarge.png" alt="Profile Image" class="profile-image  ">
                </router-link>
              </v-col>
              <v-col>
                <router-link :to="{ name: 'creatorfolio' }">
                  <img src="../../../public/images/guillaume.jpg" alt="Profile Image" class="profile-image">
                </router-link>
              </v-col>
              <v-col>
                <router-link :to="{ name: 'creatorfolio' }">
                  <img src="../../../public/images/anonymelarge.png" alt="Profile Image" class="profile-image">
                </router-link>
              </v-col>
            </v-row>
          </v-col>
          <v-spacer></v-spacer>
        </v-col>
        <v-spacer></v-spacer>
      </v-row>
    </div>

    <!-- Mobile ---------------------------------------------------------------------------------------->
    <div class="md:hidden flex flex-col items-center justify-center">
      <div>
        <!--Banner -->
        <img src="../../../public/images/homepage/bannierehomepage.png" class="banner-image" alt="Bannière">

        <!-- Créer -->
        <v-row style="margin-top: 30px;" align="center">
          <v-col cols="6">
            <v-img style="margin-left: 25px; border-radius: 20px; width: 85%;"
              src="../../../images/homepage/creer.png"></v-img>
          </v-col>
          <v-col>
            <p style="margin: 20px; text-align: justify;" class="center-vertical">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-col>
        </v-row>

        <!--  Partager   -->
        <v-row align="center">
          <v-col>
            <p style=" margin: 20px; text-align: justify;" class="center-vertical">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-col>
          <v-col cols="6">
            <v-img style="margin-right: 25px; border-radius: 20px; width: 85%;"
              src="../../../images/homepage/partager.png"></v-img>
          </v-col>
        </v-row>

        <!--   Inspirer  -->
        <v-row align="center">
          <v-col cols="6">
            <v-img style="margin-left: 25px; border-radius: 20px; width: 85%;"
              src="../../../images/homepage/inspirer.png"></v-img>
          </v-col>
          <v-col>
            <p style="margin: 20px; text-align: justify;" class="center-vertical">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-col>
        </v-row>

        <!--  Votre Hutopy : Title  -->
        <v-img style="margin-top: 50px; margin-bottom: 25px; min-width: 350px;"
          src="../../../images/homepage/votrehutopy.png"></v-img>

        <!--  Votre Hutopy : Text  -->
        <v-row align="center">
          <v-col cols="11" style="margin: 4%;">
            <p style="margin-top: 3%; margin-bottom: 5%; text-align: justify;" class="center-vertical">
              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 style="margin-top: 3%; margin-bottom: 5%; text-align: justify;" class="center-vertical">
              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>
        </v-row>

        <!--  4 pictures  -->
        <v-row style="margin-left: 15px; margin-right: 15px;">
          <v-col cols="6" style="padding-left: 15px; padding-right: 15px;">
            <v-img style="border-radius: 30px; width: 100%;" src="../../../images/homepage/microphone.png"></v-img>
          </v-col>
          <v-col cols="6" style="padding-left: 15px; padding-right: 15px;">
            <v-img style="border-radius: 30px; width: 100%;" src="../../../images/homepage/grinding.png"></v-img>
          </v-col>
        </v-row>
        <v-row style="margin-left: 15px; margin-right: 15px;">
          <v-col style="padding-left: 15px; padding-right: 15px;">
            <v-img style="border-radius: 30px; width: 100%;" src="../../../images/homepage/girlarmy.png"></v-img>
          </v-col>
          <v-col style="padding-left: 15px; padding-right: 15px;">
            <v-img style="border-radius: 30px; width: 100%;" src="../../../images/homepage/girlvr.png"></v-img>
          </v-col>
        </v-row>

        <!--  Inscription Btn  -->
        <v-container align="center">
          <RouterLink :to="{ name: 'contact' }">
            <v-btn block size="x-large" style="margin-top: 60px; border-radius: 10px;" color="rgb(107, 0, 101)" outlined
              elevation="4">
              Inscription
            </v-btn>
          </RouterLink>
        </v-container>


        <!-- They are on the Hutopy section -->
        <h1
          style="margin-top: 50px;  margin-bottom: 50px; text-align: center;  font-size: 3rem; font-weight: bold; color: #24393c">
          Ils sont sur Hutopy.</h1>

        <v-col>
          <v-row justify="center" class="profile-images">
            <v-col cols="8">
              <router-link :to="{ name: 'creatorfolio' }">
                <img src="../../../public/images/guillaume.jpg" alt="Profile Image" class="profile-image">
              </router-link>
            </v-col>
            <v-col cols="8">
              <router-link :to="{ name: 'creatorfolio' }">
                <img src="../../../public/images/anonymelarge.png" alt="Profile Image" class="profile-image  ">
              </router-link>
            </v-col>
            <v-col cols="8">
              <router-link :to="{ name: 'creatorfolio' }">
                <img src="../../../public/images/anonymelarge.png" alt="Profile Image" class="profile-image">
              </router-link>
            </v-col>
          </v-row>
        </v-col>
      </div>
    </div>


    <!-- Back-end tools -->
    <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.firstName"
        :subtitle="item.lastName"></v-list-item>
    </v-list>
    <FooterLayout></FooterLayout>
  </div>


</template>

<script async setup>
import DefaultLayout from '@/layouts/DefaultLayout.vue';
import FooterLayout from '@/layouts/FooterLayout.vue';
import { useClient } from "@/plugins/api.js";
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/JoinUs?PageNumber=1&PageSize=10');
    itemList.value = response.data.items;

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

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

</script>

<style scoped>
.center-vertical {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 100%;
}

.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);
}

.container-spacer {
  margin-bottom: 50px;
}

.profile-images {
  gap: 15px;
  transform: scale(.92);
}

.profile-image {
  width: auto;
  border-radius: 35px;
  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.4);
}

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

.overlay {
  position: absolute;
  border-radius: 8px;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(163, 14, 121, 0.80);
  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);
  margin-top: 60px;
}

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

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

.custom-container {
  position: relative;
  max-width: 100vw;
}

.v-card {
  max-width: calc(100% - 20px);
}

.v-card-imagecontainerpos {
  margin-top: 55px;
  border-radius: 8px;
}

body {
  background-color: #F4F4F4;
}



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


@media (min-width: 601px) and (max-width: 889px) {
  .votre_hutopy_fontsize {
    font-size: 1.06em;
  }

  .créer-profiter-inspirer-row {
    margin-left: -120px;
    margin-top: -120px
  }

  .card-size {
    transform: scale(.7);
  }

  .banner-homepage {
    transform: scale(1.19)
  }

  .votre-hutopy-img {
    margin-top: -30px;
  }

  .header-container {
    margin-top: 30px;
  }
}


@media (min-width: 890px) and (max-width: 960px) {

  .header-container {
    margin-top: 30px;
  }

  .votre_hutopy_fontsize {
    font-size: 1.2em;
  }

  .card-size {
    transform: scale(.75);
  }

  .créer-profiter-inspirer-row {
    margin-left: -80px;
    margin-top: -130px
  }

  .banner-homepage {
    transform: scale(1.07)
  }

  .votre-hutopy-img {
    margin-top: -40px;
  }
}


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

  .banner-homepage {
    transform: scale(1.06)
  }

  .card-size {
    transform: scale(.90);
  }

  .créer-profiter-inspirer-row {
    margin-left: -55px;
    margin-top: -90px
  }

  .in-between-image {
    margin-left: -100px;
  }

  .profile-images {
    gap: 15px;
    transform: scale(.72);
  }

  .votre-hutopy-img {
    margin-top: -30px;
  }
}


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

  .card-size {
    transform: scale(1);
  }

  .banner-homepage {
    transform: scale(1.03)
  }

  .créer-profiter-inspirer-row {
    margin-left: -25px;
    margin-top: -70px
  }

  .profile-images {
    gap: 15px;
    transform: scale(.64);
  }

  .votre-hutopy-img {
    margin-top: 65px;
  }
}

@media (min-width: 1921px) and (max-width: 2560px) {
  .votre_hutopy_fontsize {
    font-size: 1.2em;
  }

  .créer-profiter-inspirer-row {
    margin-top: -60px;
  }

  .banner-homepage {
    transform: scale(1.0)
  }

  .profile-images {
    gap: 15px;
    transform: scale(.90);
  }

  .votre-hutopy-img {
    margin-top: 65px;
  }
}

@media (min-width: 2561px) {
  .votre_hutopy_fontsize {
    font-size: 1.2em;
  }

  .créer-profiter-inspirer-row {
    margin-top: -50px;
  }

  .card-size {
    transform: scale(.98);
  }

  .banner-homepage {
    transform: scale(.98)
  }

  .profile-images {
    gap: 15px;
    transform: scale(.978);
  }

  .votre-hutopy-img {
    margin-top: -10px;
  }
}
</style>
