<script lang="ts">
  import chart1 from '../../../assets/images/marketing-guide/affiliate-chart-1.svg';
  import chart2 from '../../../assets/images/marketing-guide/affiliate-chart-2.svg';
  import { isMobile } from '../../../store';
  export let className = '';

  let mobile = false;

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

<div class="block-affiliate {className}">
  <h2>Affiliate marketing</h2>
  <p>
    Affiliate marketing is a powerhouse for brokers. Just look at Etoro—they spent over $50 million on affiliates in
    2023 alone. This channel is a big player and definitely worth exploring. Let’s find out how it works.
  </p>
  <p>
    Affiliate marketing is similar to outsourcing your entire marketing operation and paying solely for the results
    achieved. In contrast, partnering with marketing agencies involves more direct involvement in the marketing process
    and payment for their services, regardless of the results.
  </p>
  <div class="block-affiliate__grid">
    <div class="block-affiliate__gridItem">
      <div class="block-affiliate__gridItemIcon">
        <img src={chart1} alt="" loading="lazy" />
      </div>
      <p class="block-affiliate__gridItemText">The portion of brands offering affiliate programs is 81%</p>
    </div>
    <div class="block-affiliate__gridItem">
      <div class="block-affiliate__gridItemIcon">
        <img src={chart2} alt="" loading="lazy" />
      </div>
      <p class="block-affiliate__gridItemText">Affiliates are the top marketing method for 40% of US based merchants</p>
    </div>
  </div>
  <div class="{className}Extra">
    <p><strong>0.5% to 1%</strong> is the average affiliate marketing conversion rate</p>
  </div>
  <p>
    Forex brokers partner with affiliates who promote their services, earning commissions for each new trader they bring
    in.
  </p>
  <p>
    If you're launching your brokerage with us you have an option to get access to a pre-integrated affiliate module
    that supports the following payment models:
  </p>
  {#if mobile}
    <div class="{className}MobileTable">
      <div>
        <p>CPA</p>
        <p>
          Affiliates earn a fixed commission for each trader they refer who takes a specific action, like opening an
          account or making a deposit.
        </p>
      </div>
      <div>
        <p>Revenue Share</p>
        <p>
          Affiliates receive a percentage of the broker's revenue generated by the traders they refer, based on their
          trading activity.
        </p>
      </div>
      <div>
        <p>Spread Share</p>
        <p>Affiliates earn a portion of the spread or commission generated by the trades of their referred traders.</p>
      </div>
    </div>
  {:else}
    <div class="{className}Table">
      <table>
        <tbody>
          <tr>
            <td>CPA</td>
            <td>Revenue Share</td>
            <td>Spread Share</td>
          </tr>
          <tr>
            <td
              >Affiliates earn a fixed commission for each trader they refer who takes a specific action, like opening
              an account or making a deposit.</td
            >
            <td
              >Affiliates receive a percentage of the broker's revenue generated by the traders they refer, based on
              their trading activity.</td
            >
            <td
              >Affiliates earn a portion of the spread or commission generated by the trades of their referred traders.</td
            >
          </tr>
        </tbody>
      </table>
    </div>
  {/if}

  <div class="{className}Wrap">
    <h3>How to get started with affiliate marketing?</h3>
    <div class="{className}Grid">
      <div>
        <p>1</p>
        <span>Create an affiliate agreement</span>
      </div>
      <div>
        <p>2</p>
        <span>Create promo materials</span>
      </div>
      <div>
        <p>3</p>
        <span>Decide on payment models</span>
      </div>
      <div>
        <p>4</p>
        <span>Set up affiliate support</span>
      </div>
      <div>
        <p>5</p>
        <span>Track performance</span>
      </div>
    </div>
  </div>

  <div class="{className}Wrap">
    <h3>How much to spend on affiliates?</h3>
    <p>
      There isn't a fixed answer to this question, as it varies based on performance. However, brokers usually spend
      between 10% to 40% of their marketing budget on affiliates.
    </p>
  </div>
</div>

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

  .block-affiliate {
    &__grid {
      display: flex;
      gap: 24px;
      width: 100%;
      max-width: 664px;
      margin-inline: auto;
      padding: 40px 0;
      margin-bottom: 24px;

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

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

    &__gridItem {
      width: calc((100% - 24px) / 2);

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

    &__gridItemIcon {
      width: 140px;
      margin-inline: auto;
      margin-bottom: 40px;

      @include breakpoint-down('deskS') {
        width: 110px;
      }
    }

    &__gridItemText {
      @include breakpoint-down('tabM') {
        text-align: center;
      }
    }
  }
</style>