<template>
  <router-link
    class="pricing relative h-full overflow-hidden bg-gray-200 rounded-32"
    target="_blank"
    to="/pricing"
    @mouseleave="isHovered = false"
    @mouseover="isHovered = true">
    <ImageWebpWrapper
      :image-default="bgImage.png"
      :image-webp="bgImage.webp"
      class="bg-image absolute right-0 top-0 left-0 bottom-0 mobile:hidden"
      :lazy-load-enable="false" />
    <div
      class="content relative flex flex-col h-full p-48 mobile:p-32">
      <h2
        class="title max-w-md mb-16 text-orange-600 font-bold text-48 tablet:text-36 mobile:text-24">
        Close deals that fuel your growth
      </h2>
      <div
        class="description max-w-lg mb-24 text-gray-1100 font-regular text-16 laptop:max-w-md mobile:mb-24 mobile:text-14">
        There is no place for a cookie cutter approach in the world of effective
        prospecting. We custom-tailor strategies, glean exclusive B2B data, and
        craft bespoke email templates for your cold outreach campaigns to enrich
        your sales funnel with hot leads.
      </div>
      <Points />
      <ArrowButton
        :hovered="isHovered"
        class="button mt-auto mobile:w-48 mobile:h-48">
        Learn more
      </ArrowButton>
    </div>
  </router-link>
</template>

<script lang="ts">
import { defineComponent } from 'vue';

import Points from '@/components/pages/index/Grid/Tiles/Pricing/Points.vue';
import ArrowButton from '@/components/pages/index/ArrowButton.vue';
import ImageWebpWrapper from '@/components/ui/ImageWebpWrapper.vue';

import bgImagePng from '@/assets/img/pages/index/pricing-calculator.png';
import bgImageWebp from '@/assets/img/pages/index/pricing-calculator.webp';

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

  data: () => ({
    bgImage: {
      png: bgImagePng,
      webp: bgImageWebp,
    },
    isHovered: false,
  }),
});
</script>
