<script lang="ts">
  import { t, locale } from '$lib/translations';
  import moment from 'moment';
  import type { IWebinar } from '$type/webinars';
  import WebinarCard from '$components/blocks/webinarCard/WebinarCard.svelte';

  import cursor from '$assets/images/brokerage-profit-calculator/cursor.png';
  import featuredWebinarImage from '$assets/images/webinars/devices.png';
  import featuredWebinarImageMobile from '$assets/images/webinars/devices-mobile.png';
  import avatar1 from '$assets/images/webinars/avatar-1.png';
  import avatar2 from '$assets/images/webinars/avatar-2.jpeg';

  export let data: { featured: IWebinar; webinars: IWebinar[] };
  const featured: IWebinar = data.featured;

  const hardcodedVideos: IWebinar[] = [
    {
      title: '',
      agenda: '',
      date: '',
      presenters: [
        {
          name: 'Daniel Chatzivarnava',
          description: '',
          position: '',
          avatar: avatar2,
          linkedin: 'https://www.linkedin.com/in/daniel-h-972a32b9/',
        },
      ],
      registrationLink: '',
      youTubeLink: 'https://www.youtube.com/watch?v=lRWiCeYqYi8',
      image: null,
      isFeatured: false,
    },
    {
      title: '',
      agenda: '',
      date: '',
      presenters: [
        {
          name: 'Ivan Bogatyrev',
          description: '',
          position: 'Business Development Manager',
          avatar: avatar1,
          linkedin: 'https://www.linkedin.com/in/ivan-bogatirev-329984313/',
        },
      ],
      registrationLink: '',
      youTubeLink: 'https://www.youtube.com/watch?v=3_dZAp2bOp0',
      image: null,
      isFeatured: false,
    },
    {
      title: '',
      agenda: '',
      date: '',
      presenters: [
        {
          name: 'Daniel Chatzivarnava',
          description: '',
          position: '',
          avatar: avatar2,
          linkedin: 'https://www.linkedin.com/in/daniel-h-972a32b9/',
        },
      ],
      registrationLink: '',
      youTubeLink: 'https://www.youtube.com/watch?v=X8BwB0aN9Jg',
      image: null,
      isFeatured: false,
    },
  ];
</script>

<section class="webinars {$locale}">
  <div class="webinars__container">
    <h2 class="title">{$t('webinars.Header')}</h2>
    <p class="webinars__subtitle">{$t('webinars.Subtitle')}</p>
    <img src={cursor} class="webinars__cursor" alt="cursor" />
    {#if data.featured}
      <div class="webinars__featured">
        <div class="webinars__featured--container">
          <div class="webinars__sides">
            <div class="webinars__side webinars__side--left">
              <div class="webinars__infoline">
                <div class="webinars__upcoming">{$t('Upcoming webinar')}</div>
                <div class="webinars__date">
                  <div class="webinars__date-icon">
                    <svg width="36" height="36" viewBox="0 0 36 36" fill="none" xmlns="http://www.w3.org/2000/svg">
                      <path
                        d="M28.5 5H7.5C5.84315 5 4.5 6.34315 4.5 8V29C4.5 30.6569 5.84315 32 7.5 32H28.5C30.1569 32 31.5 30.6569 31.5 29V8C31.5 6.34315 30.1569 5 28.5 5Z"
                        stroke="#E62334"
                        stroke-width="3"
                        stroke-linecap="round"
                        stroke-linejoin="round"
                      />
                      <path
                        d="M24 2V8"
                        stroke="#E62334"
                        stroke-width="3"
                        stroke-linecap="round"
                        stroke-linejoin="round"
                      />
                      <path
                        d="M12 2V8"
                        stroke="#E62334"
                        stroke-width="3"
                        stroke-linecap="round"
                        stroke-linejoin="round"
                      />
                      <path
                        d="M4.5 14H31.5"
                        stroke="#E62334"
                        stroke-width="3"
                        stroke-linecap="round"
                        stroke-linejoin="round"
                      />
                    </svg>
                  </div>
                  <div class="webinars__date-text">
                    {moment(featured.date).format('MMM D, HH:mm') + ' GMT+3'}
                  </div>
                </div>
              </div>
              <div class="webinars__title">{featured.title}</div>
              {#each featured.presenters as presenter}
                <div class="webinars__presenter">
                  <div class="webinars__presenter--avatar">
                    <img src={presenter.avatar} alt={presenter.name} />
                  </div>
                  <div class="webinars__presenter--info">
                    <div class="webinars__presenter--name">{presenter.name}</div>
                    <div class="webinars__presenter--position">{presenter.position}</div>
                  </div>
                  <div class="webinars__presenter--social">
                    <a href={presenter.linkedin} target="_blank">
                      <svg width="32" height="32" viewBox="0 0 32 32" fill="none" xmlns="http://www.w3.org/2000/svg">
                        <path
                          fill-rule="evenodd"
                          clip-rule="evenodd"
                          d="M30.8279 1.17209C31.578 1.92214 31.9995 2.93928 32 4V28C31.9995 29.0607 31.578 30.0779 30.8279 30.8279C30.0779 31.578 29.0607 31.9995 28 32H4C2.93928 31.9995 1.92214 31.578 1.17209 30.8279C0.42205 30.0779 0.000471118 29.0607 0 28V4C0.000471118 2.93928 0.42205 1.92214 1.17209 1.17209C1.92214 0.42205 2.93928 0.000471118 4 0H28C29.0607 0.000471118 30.0779 0.42205 30.8279 1.17209ZM7.22847 12.336H11.0873V23.943H7.22847V12.336ZM9.18384 6.73919C7.86356 6.73928 7.00103 7.60721 7.00103 8.74431C7.00103 9.858 7.83742 10.7494 9.13286 10.7494H9.15781C10.5034 10.7494 11.3408 9.85757 11.3408 8.74431C11.3159 7.60672 10.5034 6.73919 9.18384 6.73919ZM17.0802 13.9793C17.5936 13.1886 18.5094 12.0629 20.5572 12.0629C23.0955 12.0629 24.9991 13.7214 25 17.2873V23.9426H21.1421V17.7319C21.1421 16.173 20.583 15.1082 19.1877 15.1082C18.1218 15.1082 17.4866 15.8259 17.2082 16.519C17.1052 16.7669 17.0802 17.1137 17.0802 17.4608V23.9437H13.2225C13.2225 23.9437 13.2735 13.4247 13.2225 12.3368H17.0802V13.9793Z"
                          fill="white"
                        />
                      </svg>
                    </a>
                  </div>
                </div>
              {/each}
            </div>
            <img src={featuredWebinarImageMobile} class="webinars__bg--mobile" alt={featured.title} />
            <div class="webinars__side webinars__side--right">
              <div class="webinars__agenda">
                <h2>{$t('webinars.Agenda')}</h2>
                {@html featured.agenda}
              </div>
            </div>
          </div>
          <img src={featuredWebinarImage} class="webinars__bg" alt={featured.title} />
          <a href={featured.registrationLink} target="_blank" class="webinars__register">{$t('webinars.RegisterNow')}</a
          >
        </div>
      </div>
    {/if}
    <div class="webinars__previous--line">
      <h2>{$t('webinars.PreviousHeader')}</h2>
      <a href="/{$locale}/webinars" class="webinars__seeAll">{$t('webinars.SeeAll')}</a>
    </div>
    <div class="webinars__previous--cards">
      {#each hardcodedVideos as webinar}
        <WebinarCard {webinar} />
      {/each}
    </div>
  </div>
</section>

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

  .webinars {
    background: $qc-bg;
    padding-top: 31px;
    padding-bottom: 145px;
    width: 100%;

    @include breakpoint-down('tabL') {
      padding-top: 19px;
      margin: 0 20px;
      width: calc(100% - 40px);
      padding-bottom: 75px;
    }

    @include breakpoint-down('mobL') {
      padding-top: 22px;
      padding-bottom: 32px;
    }

    h2.title {
      font-family: $Suisse;
      font-weight: 500;
      font-size: 40px;
      line-height: 46px;
      vertical-align: middle;
      margin-bottom: 9px;

      @include breakpoint-down('tabL') {
        font-size: 26px;
        line-height: 32px;
      }

      @include breakpoint-down('mobL') {
        margin-top: 162px;
        margin-bottom: 4px;
      }
    }

    &__subtitle {
      font-family: $Suisse;
      font-weight: 400;
      font-size: 18px;
      line-height: 26px;
      vertical-align: middle;
      max-width: 507px;
      margin-bottom: 19px;

      @include breakpoint-down('tabL') {
        font-size: 16px;
        line-height: 24px;
        margin-bottom: 16px;
        max-width: 400px;
      }

      @include breakpoint-down('mobL') {
        margin-bottom: 14px;
      }
    }

    &__cursor {
      width: 284px;
      right: 104px;
      top: 37px;
      position: absolute;
      z-index: 5;

      @include breakpoint-down('tabL') {
        width: 213px;
        right: 80px;
        top: 30px;
      }

      @include breakpoint-down('mobL') {
        width: 237px;
        right: 50%;
        transform: translateX(50%);
        top: 35px;
        margin: 0 auto;
      }
    }

    &__container {
      background: white;
      max-width: 967px;
      width: 100%;
      column-gap: 24px;
      row-gap: 31px;
      margin: 0 auto;
      box-shadow: 1px 1px 12px 0 #00000040;
      border-radius: 24px;
      padding: $sp-xxl;
      position: relative;

      @include breakpoint-down('tabL') {
        padding: 25px 28px;
      }

      @include breakpoint-down('mobL') {
        border: 1px solid #889aa8;
        box-shadow: none;
        padding: 15px;
      }
    }

    &__featured {
      background: linear-gradient(299.83deg, #444444 -1.44%, #191919 43.83%);
      color: white;
      width: 100%;
      gap: 10px;
      border-radius: 30px;
      padding: 37px 27px;
      position: relative;
      overflow: hidden;

      @include breakpoint-down('tabL') {
        border-radius: 22.5px;
        padding: 20px 22px;
      }

      @include breakpoint-down('mobL') {
        border-radius: 15px;
        padding: 20px 12px;
        gap: 5px;
      }
    }

    &__sides {
      display: flex;
      gap: 25px;
      margin-bottom: 24px;
      position: relative;
      z-index: 2;

      @include breakpoint-down('tabL') {
        gap: 20px;
      }

      @include breakpoint-down('mobL') {
        flex-direction: column;
      }
    }

    &__side--left {
      width: 397px;

      @include breakpoint-down('tabL') {
        width: 297px;
      }

      @include breakpoint-down('mobL') {
        width: 100%;
      }
    }

    &__side--right {
      width: 265px;

      @include breakpoint-down('mobL') {
        width: 100%;
      }
    }

    &__infoline {
      display: flex;
      align-items: center;
      justify-content: flex-start;
      height: 19px;
      gap: 7px;

      @include breakpoint-down('tabL') {
        height: 27px;
      }

      @include breakpoint-down('mobL') {
        height: 18px;
      }
    }

    &__upcoming {
      font-family: $Suisse;
      font-weight: 400;
      font-size: 12px;
      margin-left: 17px;
      position: relative;
      text-wrap: nowrap;

      @include breakpoint-down('tabL') {
        line-height: 14px;
        margin-left: 14px;
      }

      &:before {
        width: 6px;
        height: 6px;
        background: #e62334;
        border-radius: 50%;
        content: ' ';
        position: absolute;
        top: 10px;
        left: -16px;

        @include breakpoint-down('tabL') {
          width: 4px;
          height: 4px;
          top: 6px;
          left: -13px;
        }

        @include breakpoint-down('mobL') {
          width: 6px;
          height: 6px;
          top: 4px;
          left: -14px;
        }
      }
    }

    &__date {
      display: flex;
    }

    &__date-icon {
      svg {
        width: 16px;
        height: 16px;
        transform: translateY(1px);

        @include breakpoint-down('tabL') {
          width: 12px;
          height: 12px;
        }
      }
    }

    &__date-text {
      font-family: $Suisse;
      font-weight: 400;
      font-size: 12px;
      margin-left: 7px;
      position: relative;

      overflow: hidden;
      text-overflow: ellipsis;
      text-wrap: nowrap;
      white-space: nowrap;
    }

    &__title {
      border-top: 1px solid white;
      border-bottom: 1px solid white;

      font-family: $Suisse;
      font-weight: 500;
      font-size: 24px;
      line-height: 32px;

      background: linear-gradient(180deg, #ffffff 8.93%, #afafaf 100%);
      -webkit-background-clip: text;
      -webkit-text-fill-color: transparent;
      background-clip: text;
      text-fill-color: transparent;
      max-width: 670px;
      margin: 15px 0;
      padding: 16px 0;

      @include breakpoint-down('tabL') {
        margin: 5px 0 15px;
        font-size: 18px;
        line-height: 20px;
        padding: 12px 0;
      }

      @include breakpoint-down('mobL') {
        margin: 11px 0 17px;
        font-size: 26px;
        line-height: 32px;
      }
    }

    &__presenter {
      display: flex;
      gap: 18px;

      @include breakpoint-down('tabL') {
        gap: 13.5px;
      }

      @include breakpoint-down('mobL') {
        gap: 18px;
      }

      &--avatar {
        img {
          background: white;
          border-radius: 50%;
          width: 42px;
          height: 42px;

          @include breakpoint-down('tabL') {
            width: 31.5px;
            height: 31.5px;
          }

          @include breakpoint-down('mobL') {
            width: 42px;
            height: 42px;
          }
        }
      }

      &--info {
        display: flex;
        flex-direction: column;
        justify-content: center;
      }

      &--name {
        font-family: $Suisse;
        font-weight: 400;
        font-size: 14px;
        line-height: 1.15;
        margin-bottom: 3px;

        @include breakpoint-down('tabL') {
          font-size: 12px;
          line-height: 14px;
        }
      }
      &--position {
        font-family: $Suisse;
        font-weight: 400;
        font-size: 10px;
        line-height: 1.2;
      }

      &--social {
        display: flex;
        align-items: center;
        justify-content: center;

        a {
          display: flex;
          align-items: center;
          justify-content: center;

          svg {
            width: 32px;
            height: 32px;

            @include breakpoint-down('tabL') {
              width: 24px;
              height: 24px;
            }

            @include breakpoint-down('mobL') {
              width: 32px;
              height: 32px;
            }
          }
        }
      }
    }
    &__agenda {
      h2 {
        font-family: $Suisse;
        font-weight: 400;
        font-size: 18px;
        line-height: 20px;
        margin-bottom: 17px;

        @include breakpoint-down('tabL') {
          font-size: 16px;
          line-height: 24px;
          margin: 8px 0 12px;
        }

        @include breakpoint-down('mobL') {
          font-size: 26px;
          line-height: 32px;
          margin: 0px 0 16px;
        }
      }

      :global(ul) {
        :global(li) {
          margin-left: 25px;
          display: block;
          margin-bottom: 8px;

          font-family: $Suisse;
          font-weight: 400;
          font-size: 12px;
          line-height: 125%;

          @include breakpoint-down('tabL') {
            margin-left: 20px;
          }

          @include breakpoint-down('mobL') {
            margin-left: 25px;
          }

          &:before {
            content: ' ';
            box-sizing: border-box;
            position: absolute;
            width: 6px;
            height: 6px;

            background: #e72c39;
            box-shadow: 0 2px 6px #e72c39, inset 0 1px 0 rgba(255, 255, 255, 0.25);
            border-radius: 100px;
            transform: matrix(1, 0, 0, -1, 0, 0) translate(-25px, -5px);

            @include breakpoint-down('tabL') {
              width: 4.5px;
              height: 4.5px;
              transform: matrix(1, 0, 0, -1, 0, 0) translate(-20px, -5px);
            }

            @include breakpoint-down('mobL') {
              width: 6px;
              height: 6px;
              transform: matrix(1, 0, 0, -1, 0, 0) translate(-25px, -5px);
            }
          }
        }
      }
    }

    &__bg {
      position: absolute;
      right: 0;
      bottom: 58px;
      z-index: 1;
      width: 60%;

      @include breakpoint-down('tabL') {
        bottom: 34px;
      }

      @include breakpoint-down('mobL') {
        display: none;
      }

      &--mobile {
        display: none;
        @include breakpoint-down('mobL') {
          display: block;
        }
      }
    }

    &__register {
      background: $qc-accent;
      display: flex;
      justify-content: center;
      align-items: center;
      width: 100%;
      height: 42px;
      border-radius: 40px;

      font-family: $Suisse;
      font-weight: 500;
      font-size: 16px;
      line-height: 140%;
      position: relative;
      z-index: 2;

      @include breakpoint-down('tabL') {
        height: 33px;
        font-size: 14px;
        line-height: 18px;
      }
    }

    &__previous--line {
      display: flex;
      height: 42px;
      justify-content: space-between;
      margin: 20px 0;

      @include breakpoint-down('tabL') {
        margin: 15px 0;
        min-height: 31.5px;
      }

      h2 {
        font-family: $Suisse;
        font-weight: 500;
        font-size: 24px;
        line-height: 42px;
        vertical-align: middle;

        @include breakpoint-down('tabL') {
          font-size: 18px;
          line-height: 31.5px;
        }

        @include breakpoint-down('mobL') {
          font-size: 18px;
          line-height: 32px;
        }
      }
    }

    &__seeAll {
      display: flex;
      align-items: center;
      justify-content: center;
      width: 116px;
      height: 42px;
      border-radius: 60px;
      border: 2px solid #889aa8;

      font-family: $Suisse;
      font-weight: 400;
      font-size: 14px;
      line-height: 18px;

      @include breakpoint-down('tabL') {
        border: 1.5px solid #889aa8;
        height: 31.5px;
        width: 98px;
      }

      @include breakpoint-down('mobL') {
        border: 1px solid #889aa8;
        height: 32px;
        width: 127px;
      }
    }

    &__previous--cards {
      display: flex;
      gap: 12px;
    }
  }
</style>