<script lang="ts">
  import img1 from '../../../assets/images/marketing-guide/influencer/influencer1.webp';
  import img2 from '../../../assets/images/marketing-guide/influencer/influencer2.webp';
  import img3 from '../../../assets/images/marketing-guide/influencer/influencer3.webp';
  import table1 from '../../../assets/images/marketing-guide/influencer/table1.svg';
  import table2 from '../../../assets/images/marketing-guide/influencer/table2.svg';
  import hypeAuditor from '../../../assets/images/marketing-guide/hypeAuditor.svg';
  import upfluence from '../../../assets/images/marketing-guide/upfluence.svg';
  import kitly from '../../../assets/images/marketing-guide/kitly.svg';

  export let className = '';
</script>

<div class="block-influencer {className}">
  <h2>Influencer Marketing</h2>
  <p>
    Influencers are an ideal choice for boosting exposure and establishing trust in your brand. With numerous YouTube,
    Instagram, and TikTok videos featuring reviews and recommendations garnering thousands of views, overlooking this
    channel would be a mistake.
  </p>
  <img src={img1} alt="" loading="lazy" />
  <img src={img2} alt="" loading="lazy" />
  <img src={img3} alt="" loading="lazy" />

  <div class="{className}Wrap">
    <h3>How to find the right influencers for your brand?</h3>
    <p>
      To get the most exposure, working with just one influencer might not be sufficient, so it's crucial to find
      several influencers. And of course you'll want to make sure these influencers have good stats. To analyze their
      performance, you can use the following tools:
    </p>

    <div class="block-influencer__logos">
      <div class="block-influencer__logosItem">
        <img src={hypeAuditor} alt="" loading="lazy" />
      </div>
      <div class="block-influencer__logosItem">
        <img src={upfluence} alt="" loading="lazy" />
      </div>
      <div class="block-influencer__logosItem">
        <img src={kitly} alt="" loading="lazy" />
      </div>
    </div>
  </div>

  <div class="{className}Wrap">
    <h3>Metrics to keep an eye on</h3>
    <p>
      To find the right influencer, you need to analyze their metrics. Here are some indicators you should keep an eye
      on during your research:
    </p>
    <div class="block-influencer__lists">
      <div class="block-influencer__listsItem">
        <div class="block-influencer__listsRow">
          <p>Average views</p>
          <p>
            A median number of views of all the videos in a given period, excluding videos posted less than 7 days ago
          </p>
        </div>
        <div class="block-influencer__listsRow">
          <p>Average engagement time</p>
          <p>
            A median number of likes and comments per video in a given period, excluding videos posted less than 7 days
            ago
          </p>
        </div>
        <div class="block-influencer__listsRow">
          <p>Average engagement rate</p>
          <p>
            Engagement Rate shows the percentage of viewers who engage with the content posted by the influencer,
            including reactions and comments in a given period. (A good engagement rate typically ranges from 1.5% to
            3.5%)
          </p>
        </div>
        <div class="block-influencer__listsRow">
          <p>Video frequency</p>
          <p>The average number of videos uploaded per week in a given period</p>
        </div>
      </div>
    </div>
  </div>

  <div class="{className}Wrap">
    <p><strong>Countries coverage</strong></p>
    <img src={table1} alt="" class="block-influencer__table1" loading="lazy" />
  </div>

  <div class="{className}Wrap">
    <p><strong>Audience demographics</strong></p>
    <img src={table2} alt="" loading="lazy" />
  </div>
</div>

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

  .block-influencer {
    img {
      margin: 40px 0;
      border-radius: 8px;

      @include breakpoint-down('deskS') {
        margin: 24px 0;
      }
    }

    &__lists {
      display: flex;
      align-items: flex-start;
      margin-top: 40px;
    }

    &__listsItem {
      width: max-content;
    }

    &__listsRow {
      display: flex;
      align-items: flex-start;
      margin-bottom: 40px;
      gap: 16px;

      @include breakpoint-down('deskS') {
        margin-bottom: 24px;
      }

      &:last-of-type {
        margin-bottom: 0;
      }

      p {
        &:first-of-type {
          @include baseTitle;

          min-width: 320px;
          max-width: 320px;

          @include breakpoint-down('deskS') {
            max-width: 220px;
            min-width: 220px;
          }

          @include breakpoint-down('tabM') {
            max-width: 159px;
            min-width: 159px;
          }
        }
      }
    }

    &__table1 {
      max-width: 590px;
    }

    &__logos {
      display: flex;
      gap: 20px;

      @include breakpoint-down('tabM') {
        flex-wrap: wrap;
        justify-content: center;
      }
    }

    &__logosItem {
      padding: 12px 0;
      display: flex;
      align-items: center;
      justify-content: center;
      width: calc((100% - 20px * 2) / 3);

      @include breakpoint-down('deskS') {
        padding: 0;
      }

      @include breakpoint-down('tabM') {
        width: 100%;
        max-width: 330px;
      }

      img {
        width: auto;
        margin: 0;

        @include breakpoint-down('deskL') {
          width: 100%;
        }
      }
    }
  }
</style>