<script setup>
  import CloseIcon from '../assets/close.svg'
</script>

<template>
  <div id="contactContainer" class="windowStyle">
    <div class="windowTitle">
      <p>Contacts:</p>
      <button type="button" class="closeBtn" @click="$emit('close')">
        <CloseIcon name="close" class="icon"/>
      </button>
    </div>
    <div class="windowContent" id="contactContent">
      <div id="contactCardContainer">
        <a href="mailto:drags-nerds@epickiwi.fr" target="_blank" class="contactLink">
          <div class="contactCard" id="contactAtelier">
            <div id="contactName">Ateliers meet-up</div>
            <div id="contactField">Envoie nous 1 mail!</div>
          </div>
        </a>
        <a href="mailto:urazoriapro@gmail.com" target="_blank" class="contactLink">
          <div class="contactCard">
            <div id="contactName">Urazoria</div>
            <div id="contactField">Perf Drag</div>
          </div>
        </a>
        <a href="https://signal.me/#eu/jPBmn2MoCUWsKN0eJbWl_3w-HuPNu2SndVwaWZX3iC9HBnQEi4FPSZefIkfS86T8" target="_blank" class="contactLink">
          <div class="contactCard">
            <div id="contactName">Vega</div>
            <div id="contactField">Scéno</div>
          </div>
        </a>
      </div>
    </div>
  </div>
</template>

<style scoped>

  #contactCardContainer{
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: center;
    width:95%;
    height:91%;
    margin-top: 1%;
  }

  .contactCard{
    width:100%;
    height:100%;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: left;
    color: var(--dark-color);
    font-weight: bold;
    font-family: 'velvelyne';
    font-size: 16.1px;
    border-style: solid;
    border-color: var(--dark-color);
    border-width: thin;
    border-radius: 13.12px;
  }

  .contactCard:hover{
    animation: none;
    background-color: var(--dark-color);
    color: var(--light-color);
  }

  .contactLink{
    position:relative;
    width: 100%;
    height:100%;
    display:flex;
    flex-direction: row;
    align-items: center;
    justify-content: space-around;
  }

  #contactContainer{
    width: 95%;
    height: 22.2%;
    position: fixed;
    top: 68.8%;
    left: 2.5%;
    z-index: 66;
  }

  #contactField{
    text-align: center;
    font-family: 'lineal';
    font-size: 20px;
  }

  #contactContent{
    position:relative;
    height:100%;
  }

  #contactAtelier{
    animation: blinkBack 5s infinite;
  }
  #contactAtelier:hover{
    animation: none;
    background-color: var(--dark-color);
  }

  /*=======================Format PC*/
  @media(min-width: 1000px){
    #contactContainer{
      width: 20%;
      height: 55%;
      top: 40%;
      left: 79%;
    }

    #contactCardContainer{
      flex-direction: column;
      margin-top: 3.33%;
    }

    .contactCard{
      width: 93%;
    }
    .contactLink{
      margin-bottom: 5%;
    }
  }
</style>

<script>
  export default {
    name : 'ContactPannel',
    emits:['close'],
    mounted(){
      console.log("Contact pannel is loaded!");
    }
  };
</script>
