<script lang="ts">
  import Under_Construction from '../assets/images/Under_Construction.png';
  import { t } from '$lib/translations';
</script>

<div class="under-construction">
  <div class="under-construction__row">
    <div class="under-construction__animation">
      <canvas class="under-construction__canvas" width="375" height="375" />
      <div class="under-construction__overlay" />
    </div>
    <div class="under-construction__preloader">
      <img src={Under_Construction} alt="Under_Construction.png" />
    </div>
  </div>
  <div class="under-construction__row">
    <h1 class="under-construction__title titleL">
      {$t('under-construction.Something interesting')} <br />
      {$t('under-construction.is about to be here')}
    </h1>
  </div>
  <div class="under-construction__row">
    <p class="under-construction__desc defaultM">{$t('under-construction.Please get back soon.')}</p>
  </div>
</div>

<style lang="scss">
  @import 'src/scss/variables';
  @import 'src/scss/media';
  @import 'src/scss/mixins';

  .under-construction {
    min-height: 95vh;
    max-width: 780px;
    width: 100%;
    margin: auto;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;

    &__row {
      position: relative;
    }

    &__title {
      @include titleL;

      text-align: center;
      margin-bottom: 40px;
    }

    &__desc {
      @include defaultM;

      text-align: center;
    }

    &__animation {
      margin: 0 auto;
      background-color: rgba(255, 255, 255, 1);
      width: 375px;
      height: 375px;
    }

    &__canvas {
      position: absolute;
      display: none;
      background-color: rgba(255, 255, 255, 1);
    }

    &__preloader {
      position: absolute;
      top: 0;
      left: 50%;
      transform: translateX(-50%);
      height: 375px;
      width: 375px;
    }

    &__overlay {
      pointer-events: none;
      overflow: hidden;
      width: 375px;
      height: 375px;
      position: absolute;
      left: 0;
      top: 0;
      display: none;
    }
  }
</style>