<script setup></script>

<template>
  <footer>
    <img class="logo" src="@images/logo-kreis_3.png">
    <div class="contact-info">
        <h5>{{ $t('footer.contact')}}</h5>
        <p>Si está interesado o tiene alguna pregunta, ¡contáctenos!</p>
        <p class="emails">
          <a href="mailto:info@Tayronafoods.com" class="email"><i class="email-icon"></i>info@Tayronafoods.com</a>
          <a href="mailto:info@Tayronafoods.com" class="email"><i class="email-icon"></i>info@Tayronafoods.com</a>
          <a href="mailto:info@Tayronafoods.com" class="email"><i class="email-icon"></i>info@Tayronafoods.com</a>
        </p>
        <p class="phone"><i class="phone-icon"></i>+49(0)176 321 368 59</p>
        <p class="phone"><i class="phone-icon"></i>+49(0)152 549 389 62</p>
        <p class="rss">
          <a href="#"><i class="facebook-icon"></i></a>
          <a href="#"><i class="instagram-icon"></i></a>
          <a href="#"><i class="youtube-icon"></i></a>
          <a href="#"><i class="twitter-icon"></i></a>
        </p>
        <p class="links">
          <a href="#">Impressum</a>
          <a href="#">Datenschutz</a>
          <a href="#">AGB</a>
        </p>
    </div>
  </footer>
</template>

<style lang="scss" scoped>
  footer {
    position: relative;
    color: #fff;
    height: 492px;
    background-color: #442808;
    background-image: url('@images/footer_coffee.png');
    background-blend-mode: overlay;
  }

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

  p {
    margin-bottom: 12px;

    &.links {
      margin-top: 58px;

      a {
        margin-right: 200px;
        &:last-child {
          margin-right: 0;
        }
      }
    }
  }

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

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

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

  .contact-info {
    text-align: center;;
    display: flex;
    flex-direction: column;
    font-size: 20px;
    font-weight: 500;

    .emails {
      padding: 0;
      .email {
       
        margin-right: 16px;
        &:last-child {
          margin-right: 0;
        }
        &-icon {
          @include icon('@images/email.svg');
          margin-right: 5px;
        }
      }
    }

    .phone-icon {
      @include icon('@images/phone.svg');
      margin-right: 5px;
    }

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

    .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');
    }
  }
</style>