<template>

  <!-- "Mobile -->
  <v-row class="fluid hidden-md-and-up social-mobile-container"
         style="margin-top: -10px; position: relative; z-index: 0; " hidden-md-and-down>
    <v-col cols="12" class="pa-0" style="width: 100vw; overflow: hidden;">
      <v-img class="profile-banner" max-height="375" :src="imageSrc" cover
             style="box-shadow: 0 4px 6px rgba(0, 0, 0, 0.8);"></v-img>
    </v-col>
  </v-row>

  <!-- "PurpleLine" -->
  <v-row style="background-color: #6b0065; height: 5px; box-shadow: rgba(0, 0, 0, 0.7);">
  </v-row>

  <!-- "Mobile-Profile" -->
  <!-- "Profile picture" -->
  <v-row class="d-flex justify-center align-center d-sm-none" style="margin-top: 50px; margin-bottom: -10px">
    <v-img :src="profilePicture" class="elevation-4 mobile-profile-picture-creator"></v-img>
  </v-row>

  <!-- User Social Network Links -->
  <v-container style="margin-top: -70px; padding: 0;" class="hidden-md-and-up social-container-mobile-icons"
               hidden-md-and-down>

    <!-- Facebook -->
    <v-row no-gutters class="d-flex justify-space-between align-center" style="margin-left: 3%; margin-right: 3%;">
      <v-col cols="2" sm="2" xs="3" style="margin-top: 60px; z-index: 50;" class="d-flex justify-center align-center">
        <a href="https://www.facebook.com/chloegestionmedias">
          <v-img class="socialicons-mobile" src="/images/hutopymedia/icons/black/facebookblack.png"
                 alt="Facebook"></v-img>
        </a>
      </v-col>

      <!-- Profile picture - Small -->
      <v-col cols="4" sm="4" xs="0" class="hidden-xs">
        <v-row class="d-flex justify-center align-center">
          <v-img :src="profilePicture" class="elevation-4 mobile-profile-picture-creator"></v-img>
        </v-row>
      </v-col>

      <!-- Instagram -->
      <v-col cols="2" sm="2" xs="3" style="margin-top: 60px; z-index: 50;" class="d-flex justify-center align-center">
        <a href="https://www.instagram.com/chloe.photo_gms">
          <v-img class="socialicons-mobile" src="/images/hutopymedia/icons/black/instagramblack.png"
                 alt="Instagram"></v-img>
        </a>
      </v-col>
    </v-row>

    <!-- User informations Name title and description  -->
    <v-row class="social-container-mobile">
      <v-col cols="12" xs="12" sm="4" class="d-flex justify-center">
        <v-row class="d-flex justify-center">
          {{ name }}
        </v-row>
      </v-col>
      <v-spacer xs="12" sm="4"></v-spacer>
      <v-col cols="12" xs="12" sm="4" class="d-flex justify-center">
        <v-row class="d-flex justify-center">
          {{ title }}
        </v-row>
      </v-col>
    </v-row>
    <v-row>
      <v-container style="border-bottom-left-radius: 15px; margin-top: -12px; border-bottom-right-radius: 15px;"
                   class="social-icon-group-mobile">
        <v-expansion-panels style="min-width: 320px;">
          <v-col cols="12" offset="-1">
            <v-expansion-panel class="background-pink text-justify" style="color: white;" text="
                      
                      Axé sur l’être humain et le désir de performer, j’ai trouvé mon X avec les médias sociaux → Mon but est d’aider les entreprises à communiquer et à prospérer en renforçant leur image de marque à travers leur communauté! 
Chaque collaboration est une aventure marketing inspirante!


Je suis authentique, créative, stratégique, caféinée et à l’écoute. Et surtout, j’ai hâte de travailler avec vous!
" title="À propos de moi.">
            </v-expansion-panel>
          </v-col>
        </v-expansion-panels>
      </v-container>
    </v-row>
  </v-container>

  <!-- Bannière Pc -->
  <v-row class="fluid hidden-sm-and-down" style="margin-top: -65px; position: relative; z-index: 0; "
         hidden-sm-and-up>
    <v-col cols="12" class="pa-0" style="width: 100vw; overflow: hidden;">
      <v-img class="profile-banner" max-height="375" :src="imageSrc" cover
             style="box-shadow: 0 4px 6px rgba(0, 0, 0, 0.8);"></v-img>
    </v-col>
  </v-row>
  <v-row class="hidden-sm-and-down" style="background-color: #6b0065; height: 5px; box-shadow: rgba(0, 0, 0, 0.7);"
         hidden-sm-and-up>
  </v-row>

  <!-- "Core (Menu / Center / Donation)" -->
  <v-row>

    <!-- Profile Info Picture name title & description -->
    <v-col class="middle-col" style="z-index: 5;" cols="12" xs="12" sm="12" md="6" lg="5" xl="4" xxl="4">
      <v-container class="profile-container hidden-sm-and-down" hidden-md-and-up>
        <v-container>
          <v-img :src="profilePicture" class="elevation-4 mobile-profile-picture-creator"></v-img>
          <!-- User informations Name & title  -->
          <v-container class="background-profile-container" style="margin-top: -8%;">
            <v-row>
              <v-col style="height: 50px;" cols="7" offset="2" class="social-container">
                <h1 class="name-info">{{ name }}</h1>
              </v-col>
              <v-col></v-col>
            </v-row>
            <v-row>
              <v-col style="height: 50px;" cols="6" offset="2" class="social-container2">
                <h1 class="occupation-info">{{ title }}</h1>
              </v-col>
              <v-col></v-col>
            </v-row>

            <!-- User Social Network Links -->
            <v-row>
              <v-spacer></v-spacer>
              <v-col cols="7" style="margin-top: 1%; margin-bottom: -2%;">
                <v-row>
                  <a href="https://www.facebook.com/chloegestionmedias">
                    <img class="socialicons" src="/images/hutopymedia/icons/black/facebookblack.png"
                         alt="Description image 2">
                  </a>
                  <a href="https://www.instagram.com/chloe.photo_gms">
                    <img class="socialicons" src="/images/hutopymedia/icons/black/instagramblack.png"
                         alt="Description image 2">
                  </a>
                </v-row>
              </v-col>
              <v-col background-color="primary"></v-col>
            </v-row>

            <!-- Description  -->
            <v-row>
              <v-container
                  style="border-bottom-left-radius: 15px; border-bottom-right-radius: 15px; margin-top: 15px;">
                <v-expansion-panels style="min-width: 320px;">
                  <v-col cols="12" offset="-1">
                    <v-expansion-panel class="background-pink text-justify" style="color: white;" text="
                      
                      Axé sur l’être humain et le désir de performer, j’ai trouvé mon X avec les médias sociaux → Mon but est d’aider les entreprises à communiquer et à prospérer en renforçant leur image de marque à travers leur communauté! 
Chaque collaboration est une aventure marketing inspirante!


Je suis authentique, créative, stratégique, caféinée et à l’écoute. Et surtout, j’ai hâte de travailler avec vous!
" title="À propos de moi.">
                    </v-expansion-panel>
                  </v-col>
                </v-expansion-panels>
              </v-container>
            </v-row>
          </v-container>
        </v-container>
      </v-container>

      <!-- Card nouvelle boutique -->
      <v-container>
        <v-card class="flow-menu m-0 youtube-card">

          <div style="background-color: rgba(255, 255, 255, 0.1); margin-left: -5%; margin-right: -5%;">
            <v-container style="margin-top: -15px;">
              <v-img src="images/usersmedia/chloebeaugrand/pictures/posts/postsChloeBeaugrand01.png"
                     title="Savoir faire"></v-img>

              <!-- Date -->
              <v-row class="text-right">
                <v-col>
                  <h1 style=" margin-right: 40px; margin-top: 10px; margin-bottom: -20px" class="card-date">
                    23-04-2024
                  </h1>
                </v-col>
              </v-row>

              <p class="text-justify pa-10" style="margin-bottom: -6%; font-size: 1em">Quand on observe des gens
                réaliser un
                Rubik’s Cube ça a l’air si facile pour eux qu’on est vraiment impressionnés et peut-être même
                découragés…<br><br>

                Mais saviez-vous que pour résoudre ce casse-tête, il suffit d’une série de mouvements exécutés à
                répétitions
                dans le même ordre jusqu’à la fin?<br><br>

                La gestion de médias sociaux peut donner l’impression d’être un vrai casse-tête!

                La clé c’est de comprendre chaque élément individuellement et ensuite en faire un tout.
              </p>

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

              <!-- Comments -->
              <v-text-field style="margin-left: 2%; margin-bottom: 15px; margin-bottom: -20px" class="Comments-font"
                            placeholder="Commentaire (Arrive bientôt)"></v-text-field>
            </v-container>
          </div>
        </v-card>
      </v-container>


      <!-- Card nouvelle boutique -->
      <v-container>
        <v-card class="flow-menu m-0 youtube-card">

          <div style="background-color: rgba(255, 255, 255, 0.1); margin-left: -5%; margin-right: -5%;">
            <v-container style="margin-top: -15px;">
              <v-img src="images/usersmedia/chloebeaugrand/pictures/posts/postsChloeBeaugrand02.png"
                     title="Guillaumem"></v-img>

              <!-- Date -->
              <v-row class="text-right">
                <v-col>
                  <h1 style=" margin-right: 40px; margin-top: 10px; margin-bottom: -20px" class="card-date">
                    23-04-2024
                  </h1>
                </v-col>
              </v-row>

              <p class="text-justify pa-10" style="margin-bottom: -6%; font-size: 1em">
                Que ce soit pour un portrait créatif, la gestion totales de tes médias sociaux où pour devenir
                autonome à
                les gérer par toi-même → Je suis là pour ça!
                <br><br>

                Je te promets qu’on passera un bon moment ET que tu auras des résultats à la hauteur de tes attentes
                <v-icon icon="    mdi-emoticon"></v-icon>
              </p>


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

              <!-- Comments -->
              <v-text-field style="margin-left: 2%; margin-bottom: 15px; margin-bottom: -20px"
                            placeholder="Commentaire (Arrive bientôt)"></v-text-field>
            </v-container>
          </div>
        </v-card>
      </v-container>
    </v-col>
  </v-row>

</template>

<script setup>
let imageSrc = '/images/usersmedia/chloebeaugrand/banners/bannerChloeBeaugrand01.png';
let profilePicture = '/images/usersmedia/chloebeaugrand/profilepictures/profileChloeBeaugrand01.png';
let name = 'Chloé Beaugrand'
let title = 'Spécialiste en média'
</script>

<style scoped>

.Comments-font {
  font-size: .1rem;
}

.name-info {
  margin-top: -10px;
  margin-left: 15%;
}

.occupation-info {
  margin-left: 15%;
  font-size: large;
}

.profile-container {
  margin-top: -16%;
}

.background-profile-container {
  background-color: #ececec;
  color: white;
  border-top: 3px solid #a30e79;
  border-right: 3px solid #a30e79;
  font-weight: 700;
  font-size: 1.15rem;
  border-radius: 25px;
  box-shadow: 0 8px 20px rgba(0, 0, 0, 0.3)
}

.background-pink {
  background-color: #231f20;
  color: white;
  font-weight: 400;
}

.socialicons {
  width: 35px;
  max-width: 100px;
  margin-top: 3px;
  margin-left: 40px;
}

.socialicons-mobile {
  width: 35px;
  max-width: 100px;
  margin-top: 27px;
  margin-left: 20px;
}

.youtube-card {
  margin-left: 2%;
  margin-right: 2%;
  border-radius: 15px;
  background-color: #f4f4f4;
  box-shadow: 0 8px 20px rgba(0, 0, 0, 0.4)
}

.card-date {
  margin-left: 10px;
  margin-top: -18px;
  margin-bottom: -20px;
  font-size: .8rem;
}

.social-container {
  background-color: #8c5536;
  border-top-right-radius: 30px;
  border-bottom-right-radius: 30px;
  font-size: 1.7rem;
  font-weight: 600;
  color: white;
}

.social-container2 {
  background-color: #231f20;
  border-bottom-right-radius: 30px;
  font-size: 1.4rem;
  font-weight: 500;
  color: white;
}

.social-container-mobile {
  background-color: #8c5536;
  font-size: 1.4rem;
  font-weight: 600;
  color: white;
  z-index: 1000;
  margin: auto;
  text-align: center;
}

.social-icon-group-mobile {
  background-color: #272526;
}

.mobile-profile-picture-creator {
  border-radius: 100px;
  height: 150px;
  width: 150px;
  border-radius: 50%;
  max-width: 150px;
  border: 4px solid white;
  z-index: 1000;
}

.profile-banner {
  margin-top: 25px;
  min-height: 200px
}

</style>