<template>
  <div class="guide">
    <section>
      <div class="container">
        <h2 id="zelosguide">Zelos Guide</h2>
        <p>Welcome to Zelos!</p>
        <p>It could be hard going fighting through a Zelos competition by yourself. So we wrote a quick guide to help you get started!</p>
        <p>
          If you haven't already, go ahead and
          <router-link to="/download" id="downloadLink">download the app!</router-link>
        </p>
        <p>Follow these steps to start winning games:</p>
        <ol>
          <li>Download the Zelos desktop app (required)</li>
          <p>This will help us track various game stats that's critical to our competitions! The desktop app will also provide you with an in-game overlay for joining challenges and viewing your stats.</p>
          <li>Join a challenge! (Through site or app)</li>
          <p>Zelos has dozens of challenges for you to pick and choose. Join one to learn about the objective, prizing and restrictions!</p>
          <li>Compete!</li>
          <p>Now that you understand your objective, go out there and try your best! Be aware that your have limited attempts on the challenge!</p>
          <li>Check your ranking</li>
          <p>Now that you made an attempt at the challenge, check how you did compared to others and how many Zips (Zelos Points) you can win! If you're not satisfied, it's time to make another attempt!</p>
          <li>Battle Pass rewards</li>
          <p>You may have also earned EXP from competing in the challenge. This EXP levels up your battle pass which leads even more rewards!</p>
          <li>Redeem Zips for prizes</li>
          <p>
            Once you've earned enough Zips through challenges and the battle pass, it's time to redeem a game!
            <router-link to="/download">Go to the prizes page</router-link>&nbspand pick a reward that you can afford with your Zips. Be aware, some prizes are only available once your battle pass is leveled up!
          </p>
        </ol>
        <p>Here's an introduction to using the Zelos Overwolf App for CS:GO
        <iframe width="560" height="315" src="https://www.youtube.com/embed/UXCb8_d-WL4" frameborder="0" allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>
        </p>
      </div>
    </section>
    <AppFooter />
  </div>
</template>

<style lang="scss">
.guide {
  .container {
    max-width: 980px !important;
  }
  p {
    line-height: 1.8;
    color: rgba(255, 255, 255, 0.8);
    max-width: 100%;
  }
  ol {
    padding-left: 0;
    li {
      color: #fff;
      font-weight: bold;
      line-height: 1.8;
      margin-top: 24px;
    }
    p {
      padding-left: 32px;
    }
  }
  iframe {
    display: block;
    margin-top: 20px;
    max-width: 100%;
  }
}
</style>