<template>
  <Container>
    <section class="cta flex justify-between rounded-32 bg-white mobile:flex-col-reverse">
        <div class="content-box flex flex-col my-64 ml-64 mr-96 laptop:mr-80 mobile:mx-16 mobile:my-32">
          <div class="title text-48 font-bold text-gray-1200 mb-16 mobile:text-36">
            Ready to start getting clients?
          </div>
          <div class="description font-regular text-18 text-gray-1100 mb-32 mobile:text-18">
            Set up a brief meeting with one of belkins
            experts to facilitate your business growth.
          </div>
          <VButton
            size="big"
            justify="space-between"
            class="button"
            @click="$emit('buttonClick')"
          >
            <span class="text-white mr-16">Start your free trial</span>
            <img :src="arrowIcon" width="6" height="12" alt="icon" />
          </VButton>
        </div>
        <div class="flex justify-center items-center p-12 w-full mobile:h-192">
          <div class="bg-section-cta bg-no-repeat bg-center bg-cover image-box w-full h-full rounded-24" />
        </div>
    </section>
  </Container>
<!--  <div>-->
<!--    <SectionCta-->
<!--      description-width="420px"-->
<!--      class="cta"-->
<!--      @button-click="formIsOpened = true">-->
<!--      <template #title>Ready to start getting clients?</template>-->
<!--      <template #description>-->
<!--        Send us your request today and we will come back with 20 leads tailored-->
<!--        for your business.-->
<!--      </template>-->
<!--      <template #button-text>Start your free trial</template>-->
<!--    </SectionCta>-->

<!--    <VPopup :is-opened="formIsOpened" @close="formIsOpened = false">-->
<!--      <PopupForm-->
<!--        :form-id="formId"-->
<!--        :fields="['firstname', 'lastname', 'email']"-->
<!--        @close="formIsOpened = false">-->
<!--        <template #title>Get 20 free leads</template>-->
<!--        <template #successMessage>-->
<!--          Our team will be in touch soon. <br />-->
<!--          Check your email box.-->
<!--        </template>-->
<!--      </PopupForm>-->
<!--    </VPopup>-->
<!--  </div>-->
</template>

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

export default defineComponent({
  components: { VButton, SectionCta, Container },
  data: () => ({
    formIsOpened: false,
    formId: IApi.FormID.Form20Leads,
    arrowIcon,
  }),
});
</script>
