<template>
  <!--PC -->
  <div class="hutopy-backgroud-color">
   
    <div class="flex hidden-xs flex-col items-center page-margin">

      <img class="h-20"
           src="/images/hutopymedia/banners/hutopy.png" />

      <v-container class="row-between-logo-text">
        <v-row>
          <v-spacer></v-spacer>
          <v-col xl="8" lg="11" md="12" sm="12" xs="12">
            <v-row>
              <!-- Contact image -->
              <v-col>
                <img class="contact-image" src="/images/hutopymedia/contactpage/contactpicture.png">
              </v-col>
              <!-- Form Information  -->
              <v-col class="row-joinus">
                <h1 class="h2-Participez-au-développement">PARTICIPEZ AU DÉVELOPPEMENT</h1>
                <v-text-field v-model="name" label="Nom" style="color: rgb(107, 0, 101);"></v-text-field>
                <v-text-field v-model="emailAddress" label="Courriel" style="color: rgb(107, 0, 101);"></v-text-field>
                <v-textarea v-model="reasonToJoin" style="color: rgb(107, 0, 101)"
                  label="Pourquoi voulez-vous participer au développement?" placeholder="Écrivez votre message ici"
                  rows="3" auto-grow></v-textarea>
                <v-textarea v-model="socialNetworkAccount" style="color: rgb(107, 0, 101)"
                  label="Avez-vous déjà des comptes sur les réseaux sociaux?" placeholder="Écrivez votre message ici"
                  rows="3" auto-grow></v-textarea>
                <v-btn @click="sendForm()" style="background-color: rgb(163, 14, 121); color: white; font-weight: bold;"
                  class="mt-4 send-btn" block>Envoyez
                </v-btn>
              </v-col>
            </v-row>

            <!-- Text about joining us -->
            <v-row>
              <v-container>
                <p class="h3-text paragraph">Rejoignez l'aventure
                  Hutopy : une
                  invitation à façonner l'avenir de la création.
                  Vous avez un talent, une passion, une vision ? Hutopy vous ouvre ses portes, non seulement comme
                  plateforme, mais comme une communauté vibrante où chaque créateur devient un architecte de l'utopie
                  collective. Ici, votre art, vos idées, et vos rêves trouvent un espace pour s'épanouir, se partager et
                  inspirer.

                </p>
                <p class="h3-text paragraph {">
                  Faire partie de Hutopy, c'est embrasser une opportunité unique de monétiser votre créativité,
                  d'élargir
                  votre réseau et de participer à un projet grandiose. C'est le moment de transformer votre passion en
                  profession, d'atteindre un public mondial et de contribuer à un mouvement qui valorise la créativité
                  et
                  l'innovation.
                </p>
                <p class="h3-text h3-last-text paragraph {">
                  Pour embarquer dans ce voyage vers la réalisation de vos rêves et rejoindre notre communauté de
                  créateurs
                  visionnaires, nous vous invitons à inscrire vos informations. Partagez avec nous votre courriel et
                  votre
                  numéro de téléphone, et nous vous guiderons à travers chaque étape pour établir votre présence sur
                  Hutopy.
                  Laissez-nous votre marque, et ensemble, construisons un monde où la créativité connaît aucune limite.
                  Votre aventure commence maintenant. Bienvenue dans l'univers Hutopy, où chaque créateur est une étoile
                  dans le ciel de notre utopie partagée.
                </p>
              </v-container>
            </v-row>
          </v-col>
          <!-- Offset -->
          <v-spacer></v-spacer>
        </v-row>
      </v-container>
    </div>


    <!-- Mobile low dimensions -->
    <div class="hidden-sm-and-up flex-col items-center justify-center">

      <!-- Offset -->
      <v-spacer style="margin-bottom: 25px;"></v-spacer>

      <!-- Contact image -->
      <v-img src="/images/hutopymedia/contactpage/contactpicture.png" contain aspect-ratio="16/9"
        style="clip-path: polygon(0 50%, 100% 0, 100% 80%, 0 100%);" class="Scale-80"></v-img>

      <!-- Title -->
      <v-row class="labelgroup">
        <v-col cols="12">
          <h1 class="h2-Participez-au-développement">PARTICIPEZ AU DÉVELOPPEMENT</h1>
        </v-col>
      </v-row>

      <!-- Form Information  -->
      <v-text-field v-model="name" class="labelsize" label="Nom"
        style="margin-top: 5%; color: rgb(107, 0, 101);"></v-text-field>
      <v-text-field v-model="emailAddress" class="labelsize" label="Courriel"
        style="color: rgb(107, 0, 101);"></v-text-field>
      <v-textarea v-model="reasonToJoin" class="labelsize" style="color: rgb(107, 0, 101)"
        label="Pourquoi voulez-vous participer au développement?" placeholder="Écrivez votre message ici" rows="3"
        auto-grow></v-textarea>
      <v-textarea v-model="socialNetworkAccount" class="labelsize" style="color: rgb(107, 0, 101)"
        label="Avez-vous déjà des comptes sur les réseaux sociaux?" placeholder="Écrivez votre message ici" rows="3"
        auto-grow></v-textarea>
      <v-btn @click="sendForm()"
        style="background-color: rgb(163, 14, 121); margin-bottom: 8%; color: white; font-weight: bold;"
        class="mt-4 send-btn" block>
        Envoyez
      </v-btn>


      <!-- Text about joining us -->
      <p class="h3-text paragraph">Rejoignez l'aventure
        Hutopy : une
        invitation à façonner l'avenir de la création.
        Vous avez un talent, une passion, une vision ? Hutopy vous ouvre ses portes, non seulement comme
        plateforme, mais comme une communauté vibrante où chaque créateur devient un architecte de l'utopie
        collective. Ici, votre art, vos idées, et vos rêves trouvent un espace pour s'épanouir, se partager et
        inspirer.
      </p>

      <p class="h3-text paragraph">
        Faire partie de Hutopy, c'est embrasser une opportunité unique de monétiser votre créativité,
        d'élargir
        votre réseau et de participer à un projet grandiose. C'est le moment de transformer votre passion en
        profession, d'atteindre un public mondial et de contribuer à un mouvement qui valorise la créativité
        et
        l'innovation.
      </p>

      <p class="h3-text h3-last-text paragraph">
        Pour embarquer dans ce voyage vers la réalisation de vos rêves et rejoindre notre communauté de
        créateurs
        visionnaires, nous vous invitons à inscrire vos informations. Partagez avec nous votre courriel et
        votre
        numéro de téléphone, et nous vous guiderons à travers chaque étape pour établir votre présence sur
        Hutopy.
        Laissez-nous votre marque, et ensemble, construisons un monde où la créativité connaît aucune limite.
        Votre aventure commence maintenant. Bienvenue dans l'univers Hutopy, où chaque créateur est une étoile
        dans le ciel de notre utopie partagée.
      </p>
    </div>
  </div>

  <v-dialog v-model="showModal" max-width="600">
    <v-card>
      <v-card-title class="text-center" style="margin-top: 30px; margin-bottom: 40px;">
        <p style="font-size: 2rem; font-weight: 600">INFORMATIONS REÇU</p>
      </v-card-title>
      <v-icon class="mx-auto" style="font-size: 10em; color: #a30e79;">mdi-emoticon-happy</v-icon>
      <v-card-text style="margin-top: 40px; font-size: 1.3rem; margin-bottom: 50px;" class="text-justify">
        Merci de vous intéresser à notre projet. Lorsque nous serons prêts, nous vous contacterons afin que vous
        puissiez vous inscrire en primeur sur la plateforme pour nous aider à la développer. Chaque étape du
        développement est importante, et nous voulons construire cette plateforme avec vous, pour vous.
      </v-card-text>
      <v-card-actions class="justify-end" style="margin-right: 20px;">
        <v-btn to="/" size="large" class="text-center" color="primary" text @click="showModal = false">Fermer</v-btn>
      </v-card-actions>
    </v-card>
  </v-dialog>
</template>

<script setup>
import { useClient } from "@/plugins/api.js";
import { ref } from 'vue';

const client = useClient();
const showModal = ref(false);
const name = ref("");
const emailAddress = ref("");
const reasonToJoin = ref("");
const socialNetworkAccount = ref("");

//const firstName = name.value.split(" ")[0];
//const lastName = name.value.split(" ")[1];

async function sendForm() {
  try {
    const requestBody = {
      FirstName: name.value,
      LastName: name.value,
      EmailAddress: emailAddress.value,
      PhoneNumber: "",
      SocialNetworkAccount: socialNetworkAccount.value,
      ReasonToJoin: reasonToJoin.value
    };

    await client.post('/api/JoinUs', requestBody);
    showModal.value = true;

  } catch (error) {
    console.log(error);
  }
}
</script>


<style scoped>
.hutopy-backgroud-color {
  background-color: #f4f4f4;
}

.Scale-80 {
  transform: translateY(-30%);
}

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

  .labelgroup {
    margin-top: -50%;
  }

  .contact-image {

    width: auto;
    box-shadow: 0 8px 12px rgba(0, 0, 0, 0.5);
    clip-path: polygon(0 30%, 100% 30%, 100% 80%, 0 80%);
    margin-top: -40%;
    margin-bottom: -30%;
  }

  .hutopy-header-image {

    height: 70px;
    margin-left: 5%;
    margin-top: 5%;
  }


  .h2-Participez-au-développement {
    font-size: 1.4rem;
    margin-top: 5%;
    margin-bottom: 6%;
    margin-left: 5%;
    font-weight: 600;
  }

  .home-btn {
    margin-left: 20%;
    margin-top: 16%;
    border-radius: 150px;
  }

  .paragraph {
    font-size: 1.2rem;
    text-align: justify;

    margin-bottom: 10%;
    margin-top: 3%;
    margin-left: 3%;
    margin-right: 3%;
  }

  .labelsize {
    max-width: 95%;
    margin-left: 3%;
  }



}


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

  .contact-image {
    border-radius: 25px;
    box-shadow: 0 8px 12px rgba(0, 0, 0, 0.5);
    max-width: 100%;
    margin-top: 4%;
    height: 103%;
  }

  .home-btn {
    margin-top: 20%;

    border-radius: 30px;
    width: 140px;

    min-width: 140px;
    margin-left: 55%;
  }

  .h2-Participez-au-développement {
    font-size: 1.6rem;
    margin-top: 10%;
    margin-bottom: 6%;
  }


  .paragraph {
    font-size: 1.3rem;
    text-align: justify;

    margin-bottom: 4%;
    margin-top: 3%;
  }


  .hutopy-header-image {
    margin-top: 6%;
    width: 400px;
    margin-left: 2%;
  }

}


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

  .contact-image {
    border-radius: 25px;
    box-shadow: 0 8px 12px rgba(0, 0, 0, 0.5);
    max-width: 100%;
    margin-top: 4%;
  }

  .home-btn {
    margin-top: 35%;

    border-radius: 30px;
    width: auto;
    min-width: 160px;
    max-width: 180px;
    margin-left: 40%;


  }

  .h2-Participez-au-développement {
    font-size: 2rem;
    margin-top: 10%;
    margin-bottom: 6%;
  }


  .paragraph {
    font-size: 1.3rem;
    text-align: justify;

    margin-bottom: 4%;
    margin-top: 3%;
  }

  .hutopy-header-image {
    margin-top: 6%;
    width: 500px;
    margin-left: 1%;
  }

}

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

  .hutopy-header-image {
    margin: 0 auto;
    height: 120px;
    margin-left: 1%;
  }


  .home-btn {
    margin-top: 5%;

    border-radius: 30px;
    width: 180px;
    min-width: 175px;
    margin-left: 30%;
    margin-top: 37%;


  }

  .h2-Participez-au-développement {
    font-size: 3rem;
    margin-top: 3%;
    margin-bottom: 6%;
  }



  .contact-image {
    border-radius: 25px;
    box-shadow: 0 8px 12px rgba(0, 0, 0, 0.5);

  }


  .row-joinus {
    margin-right: -4%;
    margin-left: -1%;
  }

  .paragraph {
    font-size: 1.5rem;
    text-align: justify;
    margin-right: -4%;
    margin-bottom: 4%;
    margin-top: 3%;
  }



}


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

  .hutopy-header-image {
    margin: 0 auto;
    height: 165px;
    margin-left: -2.8%;
  }

  .home-btn {
    margin-top: 5%;

    border-radius: 30px;
    width: 180px;
    min-width: 175px;
    margin-left: 53%;
    margin-top: 45%;


  }




  .row-between-logo-text {
    margin-top: 2%;

  }

  .contact-image {
    border-radius: 25px;
    box-shadow: 0 8px 12px rgba(0, 0, 0, 0.5);
    margin-top: 0%;
    margin-left: -13%
  }

  .h2-Participez-au-développement {
    font-size: 3rem;
    margin-top: 15%;
    margin-bottom: 6%;
  }

  .h3-text {
    font-size: 1.3rem;
    margin-top: 2%;
    text-align: justify;
  }

  .h3-last-text {
    margin-bottom: 5%;
  }

  .row-joinus {
    margin-right: -8%;
    margin-left: -10%;
  }

  .paragraph {
    margin-right: -6%;
    margin-left: -7%;
  }



}


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

  .hutopy-header-image {
    margin: 0 auto;
    height: 165px;
    margin-left: -3%;
  }

  .home-btn {
    margin-top: 5%;

    border-radius: 30px;
    width: 180px;
    min-width: 175px;
    margin-left: 82%;
    margin-top: 40%;


  }




  .row-between-logo-text {
    margin-top: 2%;

  }

  .contact-image {
    border-radius: 25px;
    box-shadow: 0 8px 12px rgba(0, 0, 0, 0.5);
    margin-top: 0%;
    margin-left: -13%
  }

  .h2-Participez-au-développement {
    font-size: 3rem;
    margin-top: 15%;
    margin-bottom: 6%;
  }

  .h3-text {
    font-size: 1.3rem;
    margin-top: 2%;
    text-align: justify;
  }

  .h3-last-text {
    margin-bottom: 5%;
  }

  .row-joinus {
    margin-right: -15%;
    margin-left: -13%;
  }

  .paragraph {
    margin-right: -16%;
    margin-left: -9%;
  }



}

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

  .hutopy-header-image {
    margin: 0 auto;
    height: 160px;
    margin-left: -4.6%;
  }

  .contact-image {
    border-radius: 25px;
    box-shadow: 0 8px 12px rgba(0, 0, 0, 0.5);
  }


  .home-btn {
    margin-top: 5%;
    margin-left: 53%;
    border-radius: 30px;
    width: 180px;
    min-width: 175px;
    margin-bottom: -15%;

  }

  .send-btn {
    margin-bottom: 4%;
    margin-top: -1%;
  }

  .row-between-logo-text {
    margin-top: 3%;


  }

  .home-row {
    margin-left: 20%;
  }

  .h2-Participez-au-développement {
    font-size: 3rem;
    margin-top: 15%;
    margin-bottom: 6%;
  }

  .h3-text {
    font-size: 1.3rem;
    margin-top: 2%;
    text-align: justify;
  }

  .h3-last-text {
    margin-bottom: 5%;
  }

  .row-joinus {
    margin-right: -18%;
    margin-left: -10%;
  }

  .paragraph {
    margin-right: -20%;
  }

  .page-margin {
    margin-left: -9%;
  }

}

@media (min-width: 2559px) {

  .hutopy-header-image {
    margin: 0 auto;
    height: 180px;
    margin-left: 3.5%;
  }

  .contact-image {
    border-radius: 25px;
    box-shadow: 0 8px 12px rgba(0, 0, 0, 0.5);
    margin-left: 20%;
  }


  .home-btn {
    margin-top: 5%;
    margin-left: 30%;
    border-radius: 30px;
    width: 180px;
    min-width: 175px;
    margin-bottom: -15%;

  }

  .send-btn {
    margin-bottom: 4%;
    margin-top: -1%;
  }

  .row-between-logo-text {
    margin-top: 3%;


  }

  .home-row {
    margin-left: 20%;

  }

  .h2-Participez-au-développement {
    font-size: 3rem;
    margin-top: 15%;
    margin-bottom: 6%;
  }

  .h3-text {
    font-size: 1.3rem;
    margin-top: 2%;
    text-align: justify;
  }

  .h3-last-text {
    margin-bottom: 5%;
  }

  .paragraph {
    margin-left: 10%;
  }

  .page-margin {
    margin-left: -5.5%;
  }
}
</style>
