<script lang="ts">
  export let className = '';
</script>

<div class="block-inbound {className}">
  <h2>Inbound Marketing</h2>
  <p>
    Content is a king. Creating useful and engaging content can help you attract new customers and boost your conversion
    rate, as well as increase customer lifetime value. Let’s explore what content types can boost your business.
  </p>

  <div class="{className}Extra">
    <p>Fast fact: <strong>Inbound leads cost 61% less on average than outbound leads</strong></p>
  </div>

  <div class="block-inbound__lists">
    <div class="block-inbound__listsItem">
      <div class="block-inbound__listsRow">
        <p>Webinars</p>
        <p>A perfect tool to educate your traders and boost conversion and ARPU</p>
      </div>
      <div class="block-inbound__listsRow">
        <p>Economic calendar</p>
        <p>Let you traders make informed trading decisions and increase their engagement</p>
      </div>
      <div class="block-inbound__listsRow">
        <p>How-to guides and educational articles</p>
        <p>Give your traders helpful tips and insights to boost their trading activity</p>
      </div>
      <div class="block-inbound__listsRow">
        <p>Video tutorials</p>
        <p>Provide an easy-to-follow visual format for learning trading concepts and strategies</p>
      </div>
      <div class="block-inbound__listsRow">
        <p>Trading courses</p>
        <p>Educate and nurture your traders from the ground up, the optimal strategy for boosting lifetime value</p>
      </div>
      <div class="block-inbound__listsRow">
        <p>Podcasts</p>
        <p>Keep your traders interested with informative content and helpful podcasts to make them stick around</p>
      </div>
    </div>
  </div>
</div>

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

  .block-inbound {
    &__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;
          }
        }
      }
    }
  }
</style>