<script lang="ts">
  import semrush from '../../../assets/images/marketing-guide/optimization/semrush.svg';
  import ahrefs from '../../../assets/images/marketing-guide/optimization/ahrefs.svg';
  import moz from '../../../assets/images/marketing-guide/optimization/moz.svg';
  import majestic from '../../../assets/images/marketing-guide/optimization/majestic.svg';
  import similar from '../../../assets/images/marketing-guide/similar-web.svg';

  export let className = '';
</script>

<div class="block-releases {className}">
  <h2>Press Releases</h2>
  <p>
    Posting press releases about your company can boost trust and positively affect SEO by providing brand mentions and
    backlinks to your website, thereby improving its search engine optimization.
  </p>

  <div class="{className}Wrap">
    <h3>How to find media for press releases?</h3>
    <p>You need to find popular media outlets with active users. To analyze traffic, use these tools:</p>
    <div class="block-releases__logos">
      <div class="block-releases__logosItem">
        <img src={semrush} alt="" loading="lazy" />
      </div>
      <div class="block-releases__logosItem">
        <img src={ahrefs} alt="" loading="lazy" />
      </div>
      <div class="block-releases__logosItem">
        <img src={similar} alt="" loading="lazy" />
      </div>
      <div class="block-releases__logosItem">
        <img src={moz} alt="" loading="lazy" />
      </div>
      <div class="block-releases__logosItem">
        <img src={majestic} alt="" loading="lazy" />
      </div>
    </div>
  </div>

  <div class="{className}Wrap">
    <h3>Key metrics to check before choosing media</h3>
    <ul>
      <li>Traffic</li>
      <li>Keywords</li>
      <li>Domain rank</li>
      <li>URL rank</li>
      <li>Backlinks</li>
      <li>Referring domains</li>
    </ul>
  </div>
</div>

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

  .block-releases {
    &__logos {
      display: flex;
      gap: 20px;

      @include breakpoint-down('deskS') {
        flex-wrap: wrap;
      }
    }

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

      @include breakpoint-down('deskS') {
        width: calc((100% - 20px * 2) / 3);
        padding: 0;
      }

      @include breakpoint-down('tabM') {
        width: calc((100% - 20px) / 2);
      }

      img {
        width: auto;

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