<template>
  <div class="services relative p-48 overflow-hidden bg-gray-200 rounded-32 cursor-pointer mobile:p-32"
    @click="scrollToServices"
    @mouseleave="isHovered = false"
    @mouseover="isHovered = true"
  >
    <div class="content relative flex flex-col h-full">
      <h2
        class="title mb-16 text-orange-600 text-40 font-bold mobile:text-24">
        Equip your company for success
      </h2>
      <div class="description mb-32 text-gray-1200 font-regular text-16 mobile:text-14">
        In-depth lead generation to deliver the most accurate sales leads. High
        email deliverability to support powerful outbound marketing campaigns.
        Strategic steps to book appointments, reduce no-shows, and close more
        deals generated online.
      </div>
      <ArrowButton :hovered="isHovered" class="button mt-auto"
        >Explore our agency
      </ArrowButton>
    </div>
  </div>
</template>

<script lang="ts">
import { defineComponent } from 'vue';
import { scrollToElement } from '@/utils/scrollToElement';
import ArrowButton from '@/components/pages/index/ArrowButton.vue';

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

  data: () => ({
    isHovered: false,
  }),

  methods: {
    scrollToServices() {
      scrollToElement('services');
    },
  },
});
</script>
