<template>
  <div class="info">
    <div class="background">
      <div class="title">TYPE OF DATA:</div>
      <ul class="list">
        <li v-for="point in points" :key="point" class="point">{{ point }}</li>
      </ul>
    </div>
    <div class="description">
      Our researchers use 20+ tools and 100+ niche-specific sources to deliver
      leads with the following data points
    </div>
  </div>
</template>

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

export default defineComponent({
  props: {
    points: {
      type: Array as PropType<string[]>,
      required: true,
    },
  },
});
</script>

<style lang="scss" scoped>
.info {
  flex: 1;
  align-self: flex-start;
  max-width: 625px;
  margin-top: 16px;
}

.background {
  padding: 48px;

  background: rgba(255, 255, 255, 0.8);
  border-radius: 16px;
  box-shadow: 0px 40px 40px rgba(4, 4, 4, 0.02);
  backdrop-filter: blur(20px);

}

.title {
  margin-bottom: 32px;

  color: #e9eaeb;
  font-weight: 900;
  font-size: 32px;
  line-height: 100%;
  text-transform: uppercase;
}

.list {
  //display: grid;
  //grid-template-columns: 1fr 1fr;
  //column-gap: 32px;

  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
}

.point {
  position: relative;

  flex-basis: 50%;
  max-width: 250px;
  margin-bottom: 12px;
  padding-left: 33px;

  color: #3c3d3e;
  font-size: 16px;
  line-height: 180%;

  &:before {
    position: absolute;
    top: 5px;
    left: 0;

    display: inline-block;
    width: 18px;
    height: 18px;

    background: url('@/assets/img/static-icons/check-3.svg') no-repeat;
    background-size: contain;

    content: '';
  }
}

.description {
  max-width: 432px;
  margin: 24px auto 0 auto;

  color: #7d7f82;
  font-size: 14px;
  line-height: 192%;
  text-align: center;
}
</style>
