<template>
  <main class="lead-generation bg-gray-100">
    <HeadWrapper
      :route="$route.path"
      :url="SITE_URL + '/database-research'"
      description="Polish your lead generation strategy and forge B2B connections that matter. Use lead research to build a lead list and expand your customer database."
      image="https://belkins-cdn.nyc3.digitaloceanspaces.com/ce39d4f51d9dadb6012699e798062ec3.png"
      title="Advanced Lead Research - Belkins B2B Researcher: Boost Your Funnel & Sales Database"
      :jsonld="jsonld" />
    <div class="overflow-hidden">
      <Welcome class="welcome mt-160"/>
      <Partners class="mt-96" :icons="toolsIcons" />
      <Steps class="mt-160" />
      <StartGettingLeads class="mb-160" />
<!--      <AboutUsSwiper :items="ourApproachItems">-->
<!--        <template #headline>-->
<!--          Our lead research specialists connect the right prospects to your-->
<!--          business.-->
<!--        </template>-->
<!--      </AboutUsSwiper>-->
      <Team />
    </div>
<!--    <DataTypes />-->
<!--    <div class="wrapper">-->
<!--      <ServicePackages-->
<!--        :items="servicePackages"-->
<!--        button-link="/pricing/lead-research" />-->
<!--      <Team />-->
<!--      <FeedbackGrid :case-studies="caseStudies">-->
<!--        <template #title> LEADS THAT CONVERT</template>-->
<!--        <template #description>-->
<!--          <div class="grid-description">-->
<!--            We delivered 200,000 appointments and counting to our clients in 4-->
<!--            years across multiple industries-->
<!--          </div>-->
<!--        </template>-->
<!--        <template #how-to>-->
<!--          <HowTo-->
<!--            :image="tileHowTo"-->
<!--            link="/how-to-guides/lead-generation-research/how-to-find-b2-b-leads-for-small-and-medium-businesses" />-->
<!--        </template>-->
<!--      </FeedbackGrid>-->
<!--      <Faq :items="faqItems" class="faq" />-->
<!--      <FooterFormNewDesign analytic-event="lead-research-footer-form-send" />-->
<!--    </div>-->
  </main>
</template>

<script lang="ts">
import Partners from '@/components/sections/Partners/Partners.vue';
import { defineComponent } from 'vue';
import {
  servicePackages,
  faqItems,
  toolsIcons,
} from '@/components/pages/lead-research/content';
import tileHowTo from '@/assets/img/pages/lead-research/tile-howto.png';
import Faq from '@/components/blocks/Faq/Faq.vue';
import HowTo from '@/components/sections/FeedbackGrid/Tiles/Small/HowTo.vue';
import { logoLd } from '@/utils/logoJsonLd';
import ServicePackages from '@/components/sections/ServicePackages/ServicePackages.vue';
import FeedbackGrid from '@/components/sections/FeedbackGrid/FeedbackGrid.vue';
import Welcome from '@/components/pages/lead-research/Welcome.vue';
import Steps from '@/components/pages/lead-research/Steps/Steps.vue';
import StartGettingLeads from '@/components/pages/lead-research/StartGettingLeads.vue';
import DataTypes from '@/components/pages/lead-research/DataTypes/DataTypes.vue';
import Team from '@/components/pages/lead-research/Team.vue';
import { useCaseStudiesStore } from '@/store/caseStudies';
import HeadWrapper from '@/components/ui/HeadWrapper.vue';
import AboutUsSwiper from '@/components/sections/AboutUsSwiper/AboutUsSwiper.vue';
import { ourApproachItems } from '@/components/pages/lead-research/content';
import { SITE_URL } from '@/utils/constants';
import { faqJsonLd } from '@/utils/jsonLdHelper';

export default defineComponent({
  components: {
    AboutUsSwiper,
    HeadWrapper,
    Team,
    DataTypes,
    StartGettingLeads,
    Steps,
    Welcome,
    FeedbackGrid,
    ServicePackages,
    Partners,
    HowTo,
    Faq,
  },

  async setup() {
    const caseStudiesStore = useCaseStudiesStore();
    await caseStudiesStore.getPostsPreview({
      categorySlug: 'lead-generation-research',
      limit: 3,
    });
    return { caseStudies: caseStudiesStore.postsPreview };
  },

  data: () => ({
    toolsIcons,
    servicePackages,
    faqItems,
    tileHowTo,
    ourApproachItems,
    SITE_URL,
    jsonld: {
      '@context': 'https://schema.org',
      '@graph': [logoLd, faqJsonLd(faqItems)],
    },
  }),
});
</script>

<style lang="scss" scoped>
.welcome {
  @media screen and (max-width: 1100px) {
    height: auto;
    margin-top: 60px;
    margin-bottom: 110px;
  }
}

.wrapper {
  overflow: hidden;
}

.grid-description {
  max-width: 505px;
  margin: 0 auto;
}
</style>
