<template>
  <section class="cta">
    <Container>
      <div class="content-box flex flex-col" :class="[theme, `items-${justify}`]">
        <MobileImage :theme="theme" />
        <div class="title" :style="widthTitleStyle">
          <slot name="title">READY TO START GETTING CLIENTS?</slot>
        </div>
        <div class="description" :style="widthDescriptionStyle">
          <slot name="description">
            Set up a brief meeting with one of Belkins experts to facilitate
            your business growth.
          </slot>
        </div>
        <VButton
          size="big"
          type="primary"
        >
          <span class="text-white mr-32">
            <slot name="button-text">
              Book a Consultation
            </slot>
          </span>
          <img :src="arrowIcon" width="6" height="12" alt="icon" />
        </VButton>
      </div>
    </Container>
  </section>
</template>

<script lang="ts">
import { defineComponent, PropType } from 'vue';
import Container from '@/components/ui/Container.vue';
import VButton from '@/components/ui/common/VButton.vue';
import MobileImage from '@/components/sections/SectionCta/MobileImage.vue';
import { ISectionCta } from '@/components/sections/SectionCta/SectionCta.types';
import arrowIcon from '@/assets/img/static-icons/arrow.svg?url';

export default defineComponent({
  components: { MobileImage, VButton, Container },

  props: {
    justify: {
      type: String as PropType<ISectionCta.Justify>,
      default: 'justify-start'
    },
    theme: {
      type: String as PropType<ISectionCta.Theme>,
      default: 'light',
    },
    titleWidth: {
      type: String,
      default: '505px',
    },
    descriptionWidth: {
      type: String,
      default: '467px',
    },
  },
  emits: ['buttonClick'],

  data: () => ({
    arrowIcon,
  }),

  computed: {
    widthTitleStyle(): Partial<CSSStyleDeclaration> {
      return { maxWidth: this.titleWidth, textAlign: this.justify };
    },
    widthDescriptionStyle(): Partial<CSSStyleDeclaration> {
      return { maxWidth: this.descriptionWidth, textAlign: this.justify };
    },
  },
});
</script>

<style lang="scss" scoped>
.content-box {
  position: relative;

  width: 100%;
  margin: 0 auto;
  padding: 64px 0;

  background-repeat: no-repeat;
  background-position: right top;
  background-size: cover;
  border-radius: 16px;

  &.light {
    background-image: url('@/assets/img/backgrounds/section-cta-light.png');
  }

  &.dark-arrow {
    background-color: #242628;
    background-image: url('@/assets/img/backgrounds/section-cta-dark-arrow.png');
  }

  &.dark-coins {
    overflow: hidden;

    background-color: #242628;
    background-image: url('@/assets/img/backgrounds/section-cta-dark-coins.png');
    background-position: right 15px top -40px;
  }
}

.title {
  margin-bottom: 12px;

  font-weight: bold;
  font-size: 48px;

  .light & {
    color: #242628;
  }

  .dark-arrow &,
  .dark-coins & {
    color: #ffffff;
  }
}

.description {
  margin-bottom: 32px;

  font-size: 18px;
  line-height: 168%;

  .light & {
    color: #3c3d3e;
  }

  .dark-arrow &,
  .dark-coins & {
    color: #d0d1d2;
  }
}

.button {
  display: flex !important;
  width: 100%;
  max-width: 280px;
}
</style>
