<script lang="ts">
  import image from '../../../assets/images/marketing-guide/hero.webp';
  import pdf from '../../../assets/images/marketing-guide/pdf.svg';
  import { loadEvent } from '../../../store';
  import loadObserver from '$utils/loadObserver';

  export let className = '';

  loadEvent.set(false);

  const onload = loadObserver(() => {
    loadEvent.set(true);
  });
</script>

<div class="block-hero {className}">
  <div class="container">
    <img use:onload src={image} alt="" class="block-hero__image" />
    <h1 class="block-hero__title">Marketing Guide</h1>
    <p class="block-hero__text">
      Starting your own brokerage is a big step, and we're here to provide the technical setup. But success isn't just
      about the technical side. You can get your brokerage running in just a few weeks, but to make it truly successful
      and profitable, you need to concentrate on marketing.
      <br />
      <br />
      In this guide, we'll share easy-to-follow marketing practices to boost your brokerage. Whether you're new or experienced,
      these tips will help you attract and keep clients, driving your business towards success.
      <br />
      <br />
      <strong>Let's dive in and learn how to market your brokerage for maximum impact!</strong>
    </p>
    <a href="./marketing-guide/Marketing_Guide.pdf" download class="block-hero__button">
      Download PDF
      <img src={pdf} alt="" loading="lazy" />
    </a>
    <p class="block-hero__update">Last update: 10.03.2024</p>
  </div>
</div>

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

  .block-hero {
    &__image {
      width: 100%;
      height: 350px;
      object-fit: cover;
      border-radius: 8px;
      margin-bottom: 49px;

      @include breakpoint-down('deskL') {
        height: 280px;
        margin-bottom: 61px;
      }

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

      @include breakpoint-down('tabM') {
        margin-left: -20px;
        height: 105px;
        width: calc(100% + 40px);
        margin-bottom: 40px;
      }
    }

    &__title {
      @include titleXL;

      text-align: center;
      margin-bottom: 24px;

      @include breakpoint-down('deskL') {
        margin-bottom: 16px;
      }

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

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

    &__text {
      width: 100%;
      max-width: 920px;
      margin-inline: auto;
      text-align: center;
      margin-bottom: 64px;

      @include breakpoint-down('deskL') {
        max-width: 736px;
        margin-bottom: 40px;
      }

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

    &__button {
      @include baseCTA;

      width: max-content;
      margin-inline: auto;
      background: $techBlue2;
      color: $linkPrimary;
      display: flex;
      align-items: center;
      gap: 24px;
      padding: 16px 40px;
      border-radius: 8px;
      cursor: pointer;
      margin-bottom: 8px;

      img {
        width: 27px;
      }
    }

    &__update {
      @include xSmallDefault;

      color: $techBlueSecondary;
      width: max-content;
      margin-inline: auto;
    }
  }
</style>