<script setup></script>

<template>
  <footer>
    <div class="contact-info">
        <h5>{{ $t('footer.contact')}}</h5>
        <p>{{ $t('footer.message')}}</p>
        <div class="cols">
          <div class="col left">
            <h6>{{ $t('footer.germany_office')}}</h6>
            <p><i class="email-icon"></i><a href="mailto:info@tayronafoods.com">info@tayronafoods.com</a></p>
            <p><i class="email-icon"></i><a href="mailto:alejandro@tayronafoods.com">alejandro@tayronafoods.com</a></p>
            <p><i class="email-icon"></i><a href="mailto:jose@tayronafoods.com">jose@tayronafoods.com</a></p>
            <p><i class="whatsapp-icon"></i><a target="_blank" href="https://wa.me/49017632136859">+49(0)176 321 368 59</a></p>
            <p><i class="whatsapp-icon"></i><a target="_blank" href="https://wa.me/49015254938962">+49(0)152 549 389 62</a></p>
        </div>
        <div class="separator"></div>
        <div class="col right">
          <h6>{{ $t('footer.colombia_office')}}</h6>
          <p><a href="mailto:Colombia@Tayronafoods.com"><i class="email-icon"></i>Colombia@Tayronafoods.com</a></p>
          <p><i class="whatsapp-icon"></i><a target="_blank" href="https://wa.me/573174293266">+57 317 429 32 66</a></p>
          <p><i class="office-icon"></i>Tayrona Foods SAS Cra 80a # 25b-44</p>
        </div>
      </div>
      <p class="rss">
        <a href="https://www.facebook.com/profile.php?id=100093464946416"><i class="facebook-icon"></i></a>
        <a href="https://instagram.com/tayrona_foods?igshid=NTc4MTIwNjQ2YQ=="><i class="instagram-icon"></i></a>
      </p> 
      <p class="links">
        <router-link class="link" to="/impressum">{{ $t('footer.impressum')}}</router-link>
        <router-link class="link" to="/dataprotection">{{ $t('footer.dataprotection') }}</router-link>
        <router-link class="link" to="/agb">{{ $t('footer.agb') }}</router-link>
        <router-link class="link" to="/widerrufsrecht">{{ $t('footer.rightofwithdrawal') }}</router-link>
        <router-link class="link" to="/gewinnspielbedingungen">{{ $t('footer.competitionconditions') }}</router-link>
      </p>
    </div>
  </footer>
</template>

<style lang="scss" scoped>
  .contact-info p {
    font-weight: 200;
    letter-spacing: 0.05rem;
  }

  h6 {
    font-weight: 300;
    font-size: 15px;
    margin-bottom: 12px;
    text-align: center
  }
  .cols {
    display: grid;
    grid-template-columns: 1fr 1px 1fr;
    gap: 24px;
    margin-top: 24px;
    justify-items: center;

    .col {
      text-align: left;
    }
    .separator {
        border-right: 1px solid #fff;
        margin: 48px;
        opacity: 0.7;
    }
  }

  footer {
    position: relative;
    color: #fff;
    background-color: #442808;
    background-image: url('@images/footer_coffee.png');
    background-blend-mode: multiply;
    background-position: bottom;
    background-repeat: no-repeat;
    padding-bottom: 36px;
  }

  h5 {
    font-weight: 300;
    padding-top: 52px;
    font-size: 20px;
    margin-bottom: 24px;
  }

  p {
    margin-bottom: 12px;

    &.links {
      margin-top: 58px;

      a {
        margin-right: 84px;
        display: inline-block;

        &:last-child {
          margin-right: 0;
        }
      }
    }
  }

  a {
    text-decoration: none;
    color: #fff;

    &:hover {
      text-decoration: underline;
      opacity: 0.7;
    } 
  }

  .logo {
    position: absolute;
    top: 29px;
    left: 92px;
    width: 168px;
    height: 161px;
  }

  .contact-info {
    text-align: center;;
    flex-direction: column;
    font-size: 14px;
    font-weight: 100;

    @mixin icon($url) {
      display: inline-block;
      background-image: url($url);
      background-repeat: no-repeat;
      background-position: center;
      background-size: contain;
      width: 20px; 
      height: 20px;
      margin-right: 8px;
    }

    .email-icon {
      @include icon('@images/email.svg');
    }

    .phone-icon {
      @include icon('@images/phone.svg');
    }

    .facebook-icon {
      @include icon('@images/facebook.svg');
    }

    .youtube-icon {
      @include icon('@images/youtube.svg');
    }

    .instagram-icon {
      @include icon('@images/instagram.svg');
    }

    .twitter-icon {
      @include icon('@images/twitter.svg');
    }

    .whatsapp-icon {
      @include icon('@images/whatsapp.svg');
    }
    .office-icon {
      @include icon('@images/office.svg');
    }

    .rss a {
      margin-right: 24px;
      &:last-child {
        margin-right: 0;
      }
    }
  }

  @media only screen and (max-width: 767px) {
    .cols {
      grid-template-columns: 1fr;
      gap: 24px;
      .col {
        text-align: center;
      }
      .separator {
        display: none;
      }
    }
    h5 {
      padding-top: 16px;
    }
    .contact-info {
      .emails {
        display: grid;
        gap: 8px;
        flex-direction: column;
      }

      p.links {
      margin-top: 58px;

      a {
        margin-right: 20px;
        font-size: 80%;
        &:last-child {
          margin-right: 0;
        }
      }
    }
  }
}
</style>