<script lang="ts">
  import img1 from '../../../assets/images/marketing-guide/google.svg';
  import img2 from '../../../assets/images/marketing-guide/facebook.svg';
  import img3 from '../../../assets/images/marketing-guide/inst.svg';
  import img4 from '../../../assets/images/marketing-guide/x.svg';
  import img5 from '../../../assets/images/marketing-guide/unity.svg';
  import img6 from '../../../assets/images/marketing-guide/linkedIn.svg';
  import img7 from '../../../assets/images/marketing-guide/microsoft.svg';
  import img8 from '../../../assets/images/marketing-guide/criteo.svg';
  import img9 from '../../../assets/images/marketing-guide/adroll.svg';
  import img10 from '../../../assets/images/marketing-guide/tiktok.svg';
  import banner from '../../../assets/images/marketing-guide/advertising/banner.svg';
  import table from '../../../assets/images/marketing-guide/advertising/table.svg';
  import { isMobile } from '../../../store';
  export let className = '';

  let mobile = false;

  isMobile.subscribe((value) => {
    mobile = value;
  });
</script>

<div class="block-advertising {className}">
  <h2>Paid Advertising</h2>
  <p>
    Paid advertising enables you to engage with interested audiences and gain valuable insights into your performance.
    Let's explore its effectiveness in more detail.
  </p>
  {#if mobile}
    <div class="{className}MobileTable">
      <div>
        <p>Search ads</p>
        <p>
          Search advertising is great because it targets people already looking for your services, like those searching
          "open a trading account" or "best forex brokers" helping you acquire new clients cost-effectively.
        </p>
      </div>
      <div>
        <p>Banner ads</p>
        <p>
          Banner advertising meanwhile boosts brand visibility and attracts potential customers with eye-catching ads,
          targeting specific audiences to drive website traffic and leads.
        </p>
      </div>
      <div>
        <p>Video ads</p>
        <p>
          As well as banners, Video ads grab attention and engage viewers with dynamic content, leading to higher
          retention rates and increased brand awareness, website traffic, and conversions.
        </p>
      </div>
    </div>
  {:else}
    <div class="{className}Table">
      <table>
        <tbody>
          <tr>
            <td>Search ads</td>
            <td>Banner ads</td>
            <td>Video ads</td>
          </tr>
          <tr>
            <td
              >Search advertising is great because it targets people already looking for your services, like those
              searching "open a trading account" or "best forex brokers" helping you acquire new clients
              cost-effectively.</td
            >
            <td
              >Banner advertising meanwhile boosts brand visibility and attracts potential customers with eye-catching
              ads, targeting specific audiences to drive website traffic and leads.</td
            >
            <td
              >As well as banners, Video ads grab attention and engage viewers with dynamic content, leading to higher
              retention rates and increased brand awareness, website traffic, and conversions.</td
            >
          </tr>
        </tbody>
      </table>
    </div>
  {/if}

  <div class="{className}Wrap">
    <h3>Advertising platforms</h3>
  </div>

  <div class="block-advertising__grid">
    <div class="block-advertising__gridItem">
      <img src={img1} alt="" loading="lazy" />
      <p>Google Ads</p>
    </div>
    <div class="block-advertising__gridItem">
      <img src={img2} alt="" loading="lazy" />
      <p>Facebook Ads</p>
    </div>
    <div class="block-advertising__gridItem">
      <img src={img3} alt="" loading="lazy" />
      <p>Instagram Ads</p>
    </div>
    <div class="block-advertising__gridItem">
      <img src={img4} alt="" loading="lazy" />
      <p>X Ads</p>
    </div>
    <div class="block-advertising__gridItem">
      <img src={img5} alt="" loading="lazy" />
      <p>Unity</p>
    </div>
    <div class="block-advertising__gridItem">
      <img src={img6} alt="" loading="lazy" />
      <p>LinkedIn Ads</p>
    </div>
    <div class="block-advertising__gridItem">
      <img src={img7} alt="" loading="lazy" />
      <p>Microsoft Ads</p>
    </div>
    <div class="block-advertising__gridItem">
      <img src={img8} alt="" loading="lazy" />
      <p>Criteo</p>
    </div>
    <div class="block-advertising__gridItem">
      <img src={img9} alt="" loading="lazy" />
      <p>Adroll</p>
    </div>
    <div class="block-advertising__gridItem">
      <img src={img10} alt="" loading="lazy" />
      <p>TikTok Ads</p>
    </div>
  </div>

  <div class="{className}Wrap">
    <h3>Keywords volume</h3>
    <p>
      Check out the table below to see how many people are searching for terms related to your services. You can then
      use these keywords to reach potential clients who are actively looking for what you offer.
    </p>
    <img src={table} alt="" loading="lazy" />
  </div>

  <div class="{className}Wrap">
    <h3>Banner ad formats</h3>
    <p>To streamline your research, here are some of the most popular banner formats:</p>
    <img src={banner} alt="" loading="lazy" />
  </div>

  <div class="{className}Wrap">
    <h3>Metrics to track</h3>
    <p>Plenty of marketing metrics exist to evaluate performance, and here are the most crucial ones:</p>
    <div class="block-advertising__lists">
      <div class="block-advertising__listsItem">
        <div class="block-advertising__listsRow">
          <p>CPL (Cost Per Lead)</p>
          <p>Marketing costs / Number of Leads</p>
        </div>
        <div class="block-advertising__listsRow">
          <p>FTDs (First Time Deposits)</p>
          <p>Number of deposits per channel</p>
        </div>
        <div class="block-advertising__listsRow">
          <p>ARPPU (Average Revenue Per Paying User)</p>
          <p>Total revenue / Total number of paying customers</p>
        </div>
        <div class="block-advertising__listsRow">
          <p>CAC (Customer Acquisition Cost)</p>
          <p>Marketing Costs / Number of clients</p>
        </div>
      </div>
    </div>
  </div>
</div>

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

  .block-advertising {
    &__grid {
      display: flex;
      flex-wrap: wrap;
      gap: 24px;
    }

    &__gridItem {
      padding: 12px 0;
      width: calc((100% - 24px * 4) / 5);

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

      img {
        width: 56px;
        height: 56px;
        margin-bottom: 10px;
        margin-inline: auto;
      }

      p {
        @include smallCTA;

        text-align: center;
      }
    }

    &__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') {
            min-width: 220px;
            max-width: 220px;
          }

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