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

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

<template>
  <div class="lartern-content">
    <section>
      <h3>{{ t("skylantern.step1.text_1") }}</h3>
      <p>
        {{ t("skylantern.step1.text_2") }}
      </p>
    </section>

    <section class="my-5">
      <h3>{{ t("skylantern.step1.text_3") }}</h3>

      <ul>
        <li>{{ t("skylantern.step1.text_4") }}</li>
        <li>{{ t("skylantern.step1.text_5") }}</li>
        <li>{{ t("skylantern.step1.text_6") }}</li>
        <li>{{ t("skylantern.step1.text_7") }}</li>
        <li>{{ t("skylantern.step1.text_8") }}</li>
        <li>{{ t("skylantern.step1.text_9") }}</li>
      </ul>
      <!-- <p>
        {{ t("skylantern.step1.text_4") }}&nbsp;&nbsp;&nbsp;
        {{ t("skylantern.step1.text_5") }}&nbsp;&nbsp;&nbsp;
        {{ t("skylantern.step1.text_6") }}
      </p>
      <p>
        {{ t("skylantern.step1.text_7") }}&nbsp;&nbsp;&nbsp;
        {{ t("skylantern.step1.text_8") }}&nbsp;&nbsp;&nbsp;
        {{ t("skylantern.step1.text_9") }}
      </p> -->
    </section>

    <section>
      <h3>{{ t("skylantern.step1.text_10") }}</h3>
      <p>
        {{ t("skylantern.step1.text_11") }} <br />
        {{ t("skylantern.step1.text_12") }} <br />
        {{ t("skylantern.step1.text_13") }}
      </p>
    </section>

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

    <Footer url="/skylantern" back="/skylanternhome" />
  </div>
</template>

<style lang="scss" scoped>
.lartern-content {
  height: 100vh;
  padding: 4rem 10vw 0;
  background-image: url("@/assets/img/background.webp");

  @media (max-width: 600px) {
    height: 100%;
    padding: 9rem 1rem 0;
  }

  h3 {
    margin-bottom: 10px;
    font-size: 24px;
    line-height: 1.5;
    text-align: center;
    color: #fff;
    text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.8);
  }

  ul {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    list-style: none;

    li {
      margin: 0 35px;
    }
  }

  .main-btn {
    margin-bottom: 100px;
  }
}
</style>
