<template>
  <Container>
    <div class="grid grid-cols-12 gap-32 grid-flow-col">
      <div class="py-64 col-start-1 col-end-6 pr-24 tablet:pr-0 laptop:col-end-7 tablet:py-0 tablet:col-end-8">
        <h1 class="mb-24 font-bold text-60 max-w-fit mobile:text-36">
          Research and Lead Generation
        </h1>
        <div class="mb-48 text-gray-1100 text-18 mobile:text-16">
          Create a B2B lead database and supercharge it with detailed lead
          research to boost your bottom-funnel conversions.
        </div>
        <VButton
          size="big"
          class="subscribe-button justify-between w-256 p-16"
          @click="formIsOpened = true"
        >
          <span class="text-white">Start your free trial</span>
          <img
            :src="arrowIcon"
            width="6"
            height="12"
            alt="icon"
          />
        </VButton>
      </div>
      <div class="col-start-7 col-end-12 justify-self-end tablet:col-start-8 laptop:col-end-13 mobile:hidden">
        <img
          :src="illustrationWelcome"
          width="480"
          height="480"
          alt="illustration"
        />
      </div>
    </div>
  </Container>
<!--    <VPopup :is-opened="formIsOpened" @close="formIsOpened = false">-->
<!--      <PopupForm-->
<!--        :form-id="formId"-->
<!--        :fields="['firstname', 'lastname', 'email']"-->
<!--        @close="formIsOpened = false">-->
<!--        <template #title>Get 20 test leads for free</template>-->
<!--        <template #successMessage>-->
<!--          Our team will be in touch soon. <br />-->
<!--          Check your email box.-->
<!--        </template>-->
<!--      </PopupForm>-->
<!--    </VPopup>-->
</template>

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

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

  data: () => ({
    illustrationWelcome,
    arrowIcon,
    formIsOpened: false,
    formId: IApi.FormID.Form20Leads,
  }),
});
</script>

<style>
.kek {
  display: grid;
  grid-template-columns: repeat(12, minmax());
}
</style>

