<template>
  <DefaultLayout></DefaultLayout>

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

    <!-- Banner + Profile-->
    <div style="margin-top: -1.6%;">
      <v-row>
        <v-col cols="12">
          <img src="../../../images/guillaimeaime3x.png" class="banner-image" alt="Bannière"
            style="width: 100vw; border-top: 5px solid rgba(107, 0, 101, 1);">


        </v-col>
      </v-row>
    </div>

    <v-card class="label-paiement-color"
      style="max-width: 75%; max-height: 350px; min-width: 340px; position: sticky; top: 0;">
    </v-card>



    <v-container class="pa-0">
      <v-row no-gutters class="justify-center">
        <!-- Left menu -->
        <v-col cols="2" class="mx-0">
          <v-container style="position: sticky; top: 0;">
            <v-img src="../../../images/hutopy.png" alt="Description de l'image" width="300"
              style="margin-bottom: 6%; margin-top: 10%; height: 150px; " class="mx-auto"></v-img>

            <RouterLink :to="{ name: 'home' }">
              <v-btn size="x-large"
                style="background-color: #f4f4f4; min-width: 370px; max-width: 370px; transform: scale(1.03);"
                elevation="0">
                <v-icon left class="icon-size" style="margin-left: -95%;">mdi-home</v-icon>
                <div style="margin-left: 10%;"> Accueil</div>

              </v-btn>
            </RouterLink>

            <RouterLink :to="{ name: 'contact' }">
              <v-btn size="x-large"
                style="background-color: #f4f4f4; min-width: 370px; max-width: 370px; transform: scale(1.03);"
                elevation="0">
                <v-icon left class="icon-size" style="margin-left: -1%;">mdi-account-plus</v-icon>
                <div style="margin-left: 10%;">Ajouter des amis</div>
              </v-btn>
            </RouterLink>

            <RouterLink :to="{ name: 'creatorfolio' }">
              <v-btn size="x-large"
                style="background-color: #f4f4f4; min-width: 370px; max-width: 370px; transform: scale(1.03);"
                elevation="0">
                <v-icon left class="icon-size" style="margin-left: -79%;">mdi-newspaper</v-icon>
                <div style="margin-left: 10%;">Contenu</div>
              </v-btn>
            </RouterLink>
          </v-container>
        </v-col>



        <!-- center menu -->

        <v-col cols="7" class="mx-0">




          <v-card class="flow-menu m-0"
            style="background-color: #f4f4f4; max-width: 1200px; min-width: 800px; width: 80%; margin: auto; margin-bottom: 5%; margin-top: 3%;">

            <div class="card-header"> <!-- Div pour l'en-tête de la carte -->
              <v-col>
                <h1 class="text-center" style=" margin-left: 15%; font-size: 2rem; display: flex; align-items: center;">
                  PODCAST #01</h1>
              </v-col>

              <v-col cols="2">
                <h1 style="margin-top: 5%; margin-left: -20%;" class="card-date text-left">
                  10-03-2024</h1>
              </v-col>

              <v-col style="margin-right: 4%;" class="text-right">
                <v-btn dense icon color="white" style="margin-right: 5px;"><v-icon
                    style="color: rgb(11, 170, 178);">mdi-pencil</v-icon></v-btn>
              </v-col>
            </div>


            <div
              style="background-color: rgba(255, 255, 255, 0.1); margin-left: -4%; margin-right: -4%; margin-bottom: -5%;">
              <v-container>

                <iframe width=100% height="650px" src="https://www.youtube.com/embed/CDlj1IUhBqg?si=ot1YPBMKbmviOXvD">
                </iframe>


                <p class="text-justify pa-10" style="margin-bottom: -3%; font-size: 1.2em">Ma mission est claire :
                  mettre en lumière le côté humain des entrepreneurs. Chaque service, chaque produit est porteur d’une
                  histoire, d’une passion, d’une vision unique. Mon objectif est de faire rayonner cette unicité, de
                  créer des connexions authentiques entre ces entrepreneurs et leurs clients potentiels. Parce que
                  derrière chaque entreprise, il y a des personnes inspirantes qui méritent d’être entendues et
                  comprises. Et toi, quel est ton objectif pour cette année?</p>

                <div
                  style="z-index: 500; margin-bottom: 2%; background-color: rgba(0, 0, 0, 1); height: 3px; width: 100%; margin-top: 20px;">
                </div>

                <v-row style="z-index: 200;">
                  <v-row class="fill-height">
                    <!-- Bouton Like -->
                    <v-col cols="3" class="text-center">
                      <v-btn size="x-large" style="background-color: #f4f4f4; width: 500; margin-left: 40%;"
                        elevation="0">
                        <v-icon left class="icon-size">mdi-thumb-up</v-icon>
                        J'aime
                      </v-btn>
                    </v-col>
                    <!-- Bouton Dislike -->
                    <v-col cols="3" class="text-center">
                      <v-btn size="x-large" style="background-color: #f4f4f4; width: 500; margin-left: 40%;"
                        elevation="0">
                        <v-icon left class="icon-size">mdi-thumb-down</v-icon>
                        Je n'aime pas
                      </v-btn>
                    </v-col>
                    <!-- Bouton Partager -->
                    <v-col cols="3" class="text-center">
                      <v-btn size="x-large" style="background-color: #f4f4f4; width: 500; margin-left: 80%;"
                        elevation="0">
                        <v-icon left class="icon-size">mdi-share-variant</v-icon>
                        Partagez
                      </v-btn>
                    </v-col>
                  </v-row>


                </v-row>



                <div style="background-color: rgba(0, 0, 0, 1); height: 3px; width: 100%; margin-top: 20px;">
                </div>

                <!-- Champ Commentaire -->

                <v-text-field style="margin-left: 2%;"
                  placeholder="Commentaire (Commentaire, Aime et Partagez sont non fonctionnel pour le moment)"></v-text-field>


              </v-container>
            </div>
          </v-card>

          <v-card class="flow-menu m-0"
            style="max-width: 1200px; min-width: 800px; width: 80%; margin: auto; margin-bottom: 5%; margin-top: 3%;">

            <div class="card-header"> <!-- Div pour l'en-tête de la carte -->
              <v-col>
                <h1 class="text-center" style=" margin-left: 15%; font-size: 2rem; display: flex; align-items: center;">
                  MA MISSION</h1>
              </v-col>

              <v-col cols="2">
                <h1 style="margin-top: 5%; margin-left: -20%;" class="card-date text-left">
                  10-03-2024</h1>
              </v-col>

              <v-col style="margin-right: 4%;" class="text-right">
                <v-btn dense icon color="white" style="margin-right: 5px;"><v-icon
                    style="color: rgb(11, 170, 178);">mdi-pencil</v-icon></v-btn>
              </v-col>
            </div>


            <div
              style="background-color: rgba(255, 255, 255, 0.1); margin-left: -4%; margin-right: -4%; margin-bottom: -5%;">
              <v-container>

                <v-img style="margin-top: -2%;" src="../../../images/guillaumepublication.jpg"></v-img>



                <p class="text-justify pa-10" style="margin-bottom: -3%; font-size: 1.2em">Ma mission est claire :
                  mettre en lumière le côté humain des entrepreneurs. Chaque service, chaque produit est porteur d’une
                  histoire, d’une passion, d’une vision unique. Mon objectif est de faire rayonner cette unicité, de
                  créer des connexions authentiques entre ces entrepreneurs et leurs clients potentiels. Parce que
                  derrière chaque entreprise, il y a des personnes inspirantes qui méritent d’être entendues et
                  comprises. Et toi, quel est ton objectif pour cette année?</p>

                <div
                  style="z-index: 500; margin-bottom: 2%; background-color: rgba(0, 0, 0, 1); height: 3px; width: 100%; margin-top: 20px;">
                </div>

                <v-row style="z-index: 200;">
                  <v-row class="fill-height">
                    <!-- Bouton Like -->
                    <v-col cols="3" class="text-center">
                      <v-btn size="x-large" style="background-color: #f4f4f4; width: 500; margin-left: 40%;"
                        elevation="0">
                        <v-icon left class="icon-size">mdi-thumb-up</v-icon>
                        J'aime
                      </v-btn>
                    </v-col>
                    <!-- Bouton Dislike -->
                    <v-col cols="3" class="text-center">
                      <v-btn size="x-large" style="background-color: #f4f4f4; width: 500; margin-left: 40%;"
                        elevation="0">
                        <v-icon left class="icon-size">mdi-thumb-down</v-icon>
                        Je n'aime pas
                      </v-btn>
                    </v-col>
                    <!-- Bouton Partager -->
                    <v-col cols="3" class="text-center">
                      <v-btn size="x-large" style="background-color: #f4f4f4; width: 500; margin-left: 80%;"
                        elevation="0">
                        <v-icon left class="icon-size">mdi-share-variant</v-icon>
                        Partagez
                      </v-btn>
                    </v-col>
                  </v-row>


                </v-row>



                <div style="background-color: rgba(0, 0, 0, 1); height: 3px; width: 100%; margin-top: 20px;">
                </div>

                <!-- Champ Commentaire -->

                <v-text-field style="margin-left: 2%;"
                  placeholder="Commentaire (Commentaire, Aime et Partagez sont non fonctionnel pour le moment)"></v-text-field>


              </v-container>
            </div>
          </v-card>




        </v-col>

        <!-- Right menu -->
        <v-col cols="2" class="mx-0">

          <!-- tips menu -->
          <v-card
            style=" background-color: #f4f4f4; margin-top: 25%; border-top-left-radius: 15px; border-top-right-radius: 15px; min-height: 280px;  position: sticky; top: 0;">

            <v-container class="text-center d-flex align-center justify-center"
              style="background-color: #cc6f91; margin-bottom: -6%; margin-top: -1%; ">
              <h1 style="font-size: 2rem; color: white; margin: 0;  text-orientation: upright;">
                Je soutiens!
              </h1>
            </v-container>

            <v-row style=" margin-top: 30px; ">
              <v-col cols="6" style="background-color: #f4f4f4">
                <v-sheet class="mx-auto" width="auto" style="background-color: #f4f4f4">
                  <v-form @submit.prevent>
                    <v-text-field label="Montant ($)"
                      style="margin-top: -2%; margin-left: 5%; color: rgb(0, 109, 119); background-color: #f4f4f4"></v-text-field>
                  </v-form>
                </v-sheet>
              </v-col>
              <v-col cols="6" class="d-flex align-center">
                <v-btn
                  style="margin-bottom: 26%; height: 70%; margin-left: -10px; background-color: rgb(11, 170, 178); color: white; font-weight: bold;"
                  class="mt-4" block>Envoyez</v-btn>
              </v-col>
            </v-row>

            <v-row>
              <v-textarea style=" margin-top: -20px; margin-left: 5%; margin-right: 5%; color: rgba(0, 109, 119)"
                label="Votre message" placeholder="Écrivez votre message ici" rows="3" auto-grow></v-textarea>
            </v-row>

          </v-card>





        </v-col>
      </v-row>
    </v-container>









  </div>



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

    <v-container style="width: 105%;">
      <v-card class="vcard-descriptions-mobile">
        <h1 class="h1profilemobile">Ma mission</h1>
        <h2 clase="card-date" style="margin-bottom: 4%; text-align: right; margin-right: 5%;">10-03-2024 </h2>

        <v-img src="../../../images/guillaumepublication.jpg"></v-img>





        <p class="text-justify pa-4" style="font-size: 1.2em">Ma mission est claire : mettre en lumière le côté humain
          des entrepreneurs. Chaque
          service,
          chaque produit est porteur d’une histoire, d’une passion, d’une vision unique. Mon objectif
          est de faire rayonner cette unicité, de créer des connexions authentiques entre ces entrepreneurs
          et leurs clients potentiels. Parce que derrière chaque entreprise, il y a des personnes inspirantes qui
          méritent d’être entendues et comprises. Et toi, quel est ton objectif pour cette année?</p>

      </v-card>

      <SimpleVideoCard> </SimpleVideoCard>



    </v-container>

    <v-container class="footer-donate footer-donate-container" style=" position: sticky; top: 0; margin-bottom: -4%;">

      <h1 class="tips-h1" style="margin-bottom: 1%;">ENCOURAGEZ-MOI</h1>



      <v-btn style=" background-color: rgb(163, 14, 121); color: white;" rounded="xl" size="small" block>Faire un
        don</v-btn>

    </v-container>





  </div>







  <FooterLayout></FooterLayout>

</template>

<script setup>
import DefaultLayout from '@/layouts/DefaultLayout.vue';
import FooterLayout from '@/layouts/FooterLayout.vue';



import SimpleVideoCard from '@/layouts/SimpleVideoCard.vue';

</script>

<script>
export default {
  data() {
    return {
      overlayMenu: false,
    };
  },
};
</script>

<style scoped>
/*Banner */
.image-container {
  width: 100%;
  overflow: hidden;
}

.image-banner {

  width: 90%;
  /* 100% de la largeur de la fenêtre visible */
  margin: 0;
  /* Enlève les marges par défaut */
  z-index: -1000;
  /* Met l'image en arrière-plan */


}

/*Profile */

.image-profile {
  border-radius: 50%;

  margin-left: 15%;
  margin-top: -7%;
  border: 10px solid white;
  z-index: 9999;

}

.description-text {
  font-size: 1.3rem;
  text-align: left;
  align-items: center;
  color: white
}


/*LeftMenu */
.icon-size {
  font-size: 30px;
  /* ou toute autre taille de votre choix */
}




.sticky-column {
  position: sticky;
  top: 0;


}

.profile-picture-position {
  margin-top: 25;
}

.label-paiement-color {
  color: rgba(163, 14, 121, 0.5);
  /* Couleur du texte (utilisez la couleur souhaitée) */
  background-color: rgba(255, 255, 255, 0.2);
  /* Couleur de fond */
  box-shadow: 0 6px 9px rgba(0, 0, 0, 0.4);
  /* Ombre */

}

.card-header {
  background-color: rgba(255, 255, 255, 0.6);
  /* Couleur de l'en-tête */
  padding: 10px;
  /* Marge intérieure */
  display: flex;
  /* Utilisation de flexbox */
  justify-content: space-between;
  /* Alignement des éléments sur l'en-tête */
  margin: 0 -24px 0;

}

.tips-h1 {
  text-align: center;
  font-weight: bold;
  color: rgba(163, 14, 121, 0.85);
  /* Couleur du texte (utilisez la couleur souhaitée) */
  font-size: 25px;
}

.test-color {
  background-color: rgba(163, 14, 121, 0.1);
}


.label-tips {
  box-shadow: 0 6px 9px rgba(0, 0, 0, 0.4);
}



.menu-creator-position {
  margin-top: -25px;
  position: relative;
}




.flow-menu {
  background-color: rgba(255, 255, 255, 0.3);
  box-shadow: 0 6px 9px rgba(0, 0, 0, 0.3);
  border-radius: 10px;
}






.smooth-picture {
  border-radius: 13px;
}

.column-container {
  display: flex;
  justify-content: center;
  margin-top: 20px;
}

.column-creatorFolio {
  flex-grow: 1.2;
  /* La colonne centrale peut agrandir de 20% */
  flex-shrink: 0;
  /* Empêche la colonne centrale de rétrécir */
  flex-basis: auto;
  /* La colonne centrale prend sa taille de base */

  text-align: center;
  width: 100%;
}

.column-creatorFolio-side {
  flex-grow: 0;
  /* Les colonnes latérales ne peuvent pas agrandir */
  flex-shrink: 0;
  /* Empêche les colonnes latérales de rétrécir */
  flex-basis: 200px;
  /* Largeur fixe pour les colonnes latérales */
  text-align: center;
}

.rgb-background {
  background-color: rgba(163, 14, 121, 0.1);
  width: 300px;
  padding: 20px;
}

.top-aligned-column {
  display: flex;
  justify-content: center;
  align-items: flex-start;
}

.center-column {
  text-align: center;
}

.column {
  flex: 1;
}
</style>
