<script setup>
import { useI18n } from "vue-i18n";
import "animate.css";
import Footer from "../components/Footer.vue";

const { t } = useI18n();
</script>

<template>
  <div class="content">
    <ul class="step-list">
      <li>
        <img class="num" src="../assets/img/step-1.png" alt="" />
        <p>{{ t("postcard.step2.text_1") }}</p>
        <img class="arrow" src="../assets/img/arrow_b.png" alt="" />
      </li>

      <li>
        <div class="img-box">
          <img class="cover" src="../assets/img/step/1.png" alt="" />
          <img class="arrow" src="../assets/img/arrow_b.png" alt="" />
        </div>
        <div class="step">
          <img class="num" src="../assets/img/step-2.png" alt="" />
          <p>{{ t("postcard.step2.text_2") }}</p>
          <small>{{ t("postcard.step2.text_3") }}</small>
        </div>
      </li>

      <li>
        <div class="img-box">
          <img class="cover" src="../assets/img/step/2.png" alt="" />
          <img class="arrow" src="../assets/img/arrow_b.png" alt="" />
        </div>
        <div class="step">
          <img class="num" src="../assets/img/step-3.png" alt="" />
          <p>{{ t("postcard.step2.text_4") }}</p>
          <!-- <small>人臉對準綠色框框</small> -->
        </div>
      </li>

      <li>
        <div class="img-box">
          <img class="cover" src="../assets/img/step/3.png" alt="" />
        </div>
        <div class="step">
          <img class="num" src="../assets/img/step-4.png" alt="" />
          <p>{{ t("postcard.step2.text_5") }}</p>
          <small>{{ t("postcard.step2.text_6") }}</small>
        </div>
      </li>
    </ul>

    <router-link to="/step3" class="main-btn">
      {{ t("next_step") }}
    </router-link>

    <Footer url="/step1" />
  </div>
</template>

<style lang="scss" scoped>
p {
  font-size: 1.125rem;

  @media (max-width: 600px) {
    font-size: 1rem;
  }
}

span {
  font-size: 1rem;

  @media (max-width: 600px) {
    font-size: 0.75rem;
  }
}

.step-list {
  padding: 0;
  margin-top: 4rem;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  list-style: none;

  .num {
    width: 2rem;
    margin-bottom: 1rem;
  }

  .arrow {
    width: 3rem;
    margin-top: 1rem;
  }

  li {
    max-width: 500px;
    display: flex;
    justify-content: space-between;
    margin-bottom: 1.2rem;

    &:first-child {
      align-items: center;
      flex-direction: column;
    }

    .step {
      width: 15rem;
      padding-top: 1.5rem;
      display: flex;
      flex-direction: column;
      align-items: center;

      @media (max-width: 600px) {
        max-width: 10.5rem;
        padding-top: 0;
      }
    }

    small {
      margin-top: 0.3rem;
      color: white;
      letter-spacing: 2px;
    }

    .img-box {
      display: flex;
      flex-direction: column;
      align-items: center;
      margin-right: 1.5rem;

      .cover {
        max-width: 15rem;

        @media (max-width: 600px) {
          max-width: 9rem;
        }
      }
    }
  }
}

.content {
  p {
    &:first-child {
      margin-bottom: 1.625rem;
    }
  }

  .main-btn {
    margin: 3rem auto 0;
  }

  .hashtag {
    display: flex;
    justify-content: center;

    span {
      color: white;
      &:last-child {
        margin-left: 20px;
      }
    }
  }
}
</style>
