<template>
  <div class="footer">
    <div class="container">
      <br><br><br><br>

      <div class="info">
        <div class="row">
          <div id="personal" class="col-lg-4">
            <p class="wow fadeInUp">
              <code>println!("{}", Volatile.copyright);<br></code>
            </p>
            <h4 class="wow fadeInUp" data-wow-delay="0.2s">
              <a id="info-item-1" href="/">Volatile 2020</a>
            </h4>
            <br><br>
          </div>

          <div id="media" class="col-lg-4">
            <p class="wow fadeInUp" data-wow-delay="0s">
              <code>$ ls -a links/<br></code>
            </p>

            <ul>
              <li id="tw" class="wow fadeInUp" data-wow-delay="0.8s">
                <a id="media-item-1" :href="'https://twitter.com/' + socials.twitter">twitter</a>
              </li>
              <li id="gh" class="wow fadeInUp" data-wow-delay="1s">
                <a id="media-item-2" :href="'https://github.com/' + socials.github">github</a>
              </li>
              <li id="dc" class="wow fadeInUp" data-wow-delay="1s">
                <a id="media-item-3" :href="socials.discord">discord</a>
              </li>
              <li id="ap" class="wow fadeInUp" data-wow-delay="1s">
                <a id="media-item-4" :href="socials.apply">apply</a>
              </li>
              <li id="st" class="wow fadeInUp" data-wow-delay="1s">
                <a id="media-item-5" :href="'https://steamcommunity.com/groups/' + socials.steam">steam</a>
              </li>
              <li id="yt" class="wow fadeInUp" data-wow-delay="1s">
                <a id="media-item-6" :href="'https://www.youtube.com/channel/' + socials.youtube">youtube</a>
              </li>
              <li id="pp" class="wow fadeInUp" data-wow-delay="1s">
                <a id="media-item-7" :href="'https://drive.google.com/drive/folders/' + socials.press_pack">press</a>
              </li>
              <li id="em" class="wow fadeInUp" data-wow-delay="1s">
                <a id="media-item-8" :href="'mailto:' + socials.email">email</a>
              </li>
            </ul>
            <br><br>
          </div>

          <div id="address" class="col-lg-4">
            <p class="wow fadeInUp" data-wow-delay="0s">
              <code>$ echo $APPLY<br></code>
            </p>
            <h4 class="wow fadeInUp" data-wow-delay="0.2s">
              <a href="https://fuwn.link/apply2volatile">
                <img
                  src="../../assets/images/apply.gif"
                  alt=""
                >
              </a>
            </h4>
            <br><br>
          </div>
        </div>
        <div>
          <small>The grind never stops.</small>
          <br><br>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import socials from '../../assets/json/socials.json'

export default {
  name: 'Footer',
  data: () => {
    return {
      socials
    }
  }
}
</script>
