<template>
  <Container>
    <div class="grid grid-cols-12 gap-32 grid-flow-row">
      <div class="col-start-1 col-end-7 mb-96 pr-24 text-gray-1100 font-bold text-48 text-left laptop:pr-0 tablet:col-end-8 mobile:text-36 mobile:mb-64">
        We compile sales lists tailored to your needs
      </div>
      <template
        v-for="step in steps"
        :key="step.number"
      >
        <Step :step="step" class="col-start-1 col-end-13" />
        <SectionCta
          v-if="step.number === ctaVisibleIndex"
          @button-click="formIsOpened = true"
          class="flex flex-col justify-center mb-160 col-start-1 col-end-13"
          title-width="unset"
          justify="center"
        >
          <template #title>
            Leads that deliver sales
          </template>
          <template #description>
            Our services are about finding, validating, and nurturing leads until they are ripe for closing.
          </template>
          <template #button-text>
            That's what i need!
          </template>
        </SectionCta>
      </template>
    </div>
<!--    <VPopup :is-opened="formIsOpened" @close="formIsOpened = false">-->
<!--      <PopupForm-->
<!--        form-id="formId"-->
<!--        :fields="['firstname', 'lastname', 'email', 'website']"-->
<!--        @close="formIsOpened = false">-->
<!--        <template #title> Talk to Belkins experts </template>-->
<!--      </PopupForm>-->
<!--    </VPopup>-->
  </Container>
</template>

<script lang="ts">
import { defineComponent } from 'vue';
import { steps } from '@/components/pages/lead-research/content';
// import PopupForm from '@/components/blocks/PopupForm/PopupForm.vue';
import Step from './Step.vue';
import { IApi } from '@/api/api.types';
import Container from '@/components/ui/Container.vue';
// import VPopup from '@/components/ui/common/VPopup.vue';
import SectionCta from '@/components/sections/SectionCta/SectionCta.vue';

export default defineComponent({
  components: {  Container, Step, SectionCta },
  props: {
    justify: {

    }
  },
  data: () => ({
    steps,
    formIsOpened: false,
    formId: IApi.FormID.PopupForm3,
    ctaVisibleIndex: 2
  }),
});
</script>
