<template>
  <div
    class="cta relative block h-full overflow-hidden bg-blue-500 rounded-32 cursor-pointer mobile:rounded-24"
    @mouseleave="isHovered = false"
    @mouseover="isHovered = true">
    <div class="content relative flex flex-col h-full p-48 tablet:p-48 mobile:p-32">
      <h3 class="title mb-16 text-white font-bold text-36 tablet:text-24">
        See what our customers
        have to say about Belkins
      </h3>
      <div class="description max-w-2xl text-blue-200 font-regular text-16">
        Pay a visit to our testimonials gallery. Meet our clients, learn their success stories and find
        out how Belkins approach helped them overcome their challenges,
        face their growing pains and complete their B2B objectives.
      </div>
      <div class="illustration absolute right-64 bottom-16 -mr-48 mobile:static">
        <ImageWebpWrapper
          :image-default="illustration.default"
          :image-webp="illustration.webp"
          :lazy-load-enable="false"
          height="173"
          width="318"
        />
      </div>
      <ArrowButton
        :hovered="isHovered"
        class="button mt-auto"
        color="white"
        @click="bookConsultation">
        Book a call
      </ArrowButton>
    </div>
  </div>
</template>

<script lang="ts">
import { defineComponent } from 'vue';
import ImageWebpWrapper from '@/components/ui/ImageWebpWrapper.vue';
import illustrationPng from '@/assets/img/pages/index/testimonials.png';
import illustrationWebp from '@/assets/img/pages/index/calendar.webp';
import ArrowButton from '@/components/pages/index/ArrowButton.vue';
import { BOOK_CALL_LINK } from '@/utils/constants';
import isCountryBanned from '@/utils/isCountryBanned';

export default defineComponent({
  components: { ArrowButton, ImageWebpWrapper },

  data: () => ({
    illustration: {
      default: illustrationPng,
      webp: illustrationWebp,
    },
    isHovered: false,
    popupIsOpened: false,
  }),
  methods: {
    bookConsultation() {
      return isCountryBanned()
        ? (this.popupIsOpened = true)
        : window.open(BOOK_CALL_LINK, '_target');
    },
  },
});
</script>
