<template>
  <Container class="container">
    <div class="bubble"></div>
    <div class="content">
      <h2 class="title">
        <slot name="title"> SEE HOW BUSINESSES GROW WITH us</slot>
      </h2>
      <div class="description">
        <slot name="description">
          Tons of emails sent, millions of appointments scheduled, and
          billion-dollar revenues earned for our clients.
        </slot>
      </div>
      <div class="grid">
        <h2 class="case-studies-header">Case studies</h2>
        <CaseStudy
          v-if="caseStudies.length && caseStudies[0]"
          :post="caseStudies[0]"
          class="case-study-1"
          results-background="orange" />
        <YoutubeReview :data="youtubeReviews[0]" class="review-1" />
        <Review :data="reviews[0]" class="youtube-review-1" />
        <Review :data="reviews[1]" class="review-2" direction="vertical" />
        <GrowthPodcast class="growth-podcast" />
        <ReviewPlatform :platform="reviewPlatforms[0]" class="g2" />
        <YoutubeReview
          :data="youtubeReviews[1]"
          class="youtube-review-2"
          color="dark" />
        <CaseStudy
          v-if="caseStudies.length && caseStudies[1]"
          :post="caseStudies[1]"
          class="case-study-2" />
        <div class="how-to">
          <slot name="how-to">
            <HowTo />
          </slot>
        </div>
        <ReviewPlatform
          :platform="reviewPlatforms[1]"
          class="clutch"
          color="navy"
          reversed />
        <Review :data="reviews[2]" class="review-3" direction="vertical" />
        <Review :data="reviews[3]" class="review-4" />
        <VButton
          class="case-studies-button"
          size="extra-big"
          to="/case-studies"
          type="white"
          >Show more
        </VButton>
      </div>
    </div>
  </Container>
</template>

<script lang="ts">
import { defineComponent, PropType } from 'vue';
import { youtubeReviews, reviews } from './content';
import type { CaseStudiesInterface } from '@/database/case-studies/caseStudies.types';
import Container from '@/components/ui/Container.vue';
import CaseStudy from '@/components/sections/FeedbackGrid/Tiles/Medium/CaseStudy/CaseStudy.vue';
import YoutubeReview from '@/components/sections/FeedbackGrid/Tiles/Large/YoutubeReview.vue';
import Review from '@/components/sections/FeedbackGrid/Tiles/Medium/Review.vue';
import GrowthPodcast from '@/components/sections/FeedbackGrid/Tiles/Small/GrowthPodcast.vue';
import ReviewPlatform from '@/components/sections/FeedbackGrid/Tiles/Small/ReviewPlatform.vue';
import HowTo from '@/components/sections/FeedbackGrid/Tiles/Small/HowTo.vue';
import VButton from '@/components/ui/common/VButton.vue';
import { useReviewPlatformsStore } from '@/store/reviewPlatforms';
import { IFeedbackGrid } from '@/components/sections/FeedbackGrid/FeedbackGrid.types';
import g2icon from '@/assets/img/static-icons/g2.svg?url';
import clutchIcon from '@/assets/img/static-icons/clutch.svg?url';

export default defineComponent({
  components: {
    VButton,
    HowTo,
    ReviewPlatform,
    GrowthPodcast,
    Review,
    YoutubeReview,
    CaseStudy,
    Container,
  },

  props: {
    caseStudies: {
      type: Array as PropType<CaseStudiesInterface.PostPreview[]>,
      required: true,
    },
  },

  async setup() {
    const reviewPlatformsStore = useReviewPlatformsStore();
    await reviewPlatformsStore.getReviewPlatforms();
    return {
      reviewPlatformsStore,
    };
  },

  data: () => ({
    youtubeReviews,
    reviews,
  }),

  computed: {
    reviewPlatforms(): IFeedbackGrid.ReviewPlatform[] {
      const { g2, clutch } = this.reviewPlatformsStore.reviewPlatforms;
      return [
        {
          ...g2,
          name: 'g2',
          logo: g2icon,
        },
        {
          ...clutch,
          name: 'clutch',
          logo: clutchIcon,
        },
      ];
    },
  },
});
</script>

<style lang="scss" scoped>
.container {
  margin-bottom: 160px;
}

.content {
  position: relative;
  z-index: 1;
}

.title {
  max-width: 833px;
  margin: 0 auto 24px auto;

  color: #242628;
  font-weight: bold;
  font-size: 60px;
  line-height: 120%;
  text-align: center;
  text-transform: uppercase;
}

.description {
  max-width: 628px;
  margin: 0 auto 80px auto;

  color: #3c3d3e;
  font-size: 18px;
  line-height: 168%;
  text-align: center;
}

.grid {
  display: grid;
  grid-auto-rows: 10px;
  grid-column-gap: 30px;
  grid-template-columns: repeat(12, 1fr);
  height: 1800px;

  & > * {
    transition: box-shadow 0.3s;

    &:hover {
      box-shadow: 0px 4px 50px rgba(255, 95, 33, 0.1),
        0px 40px 40px rgba(4, 4, 4, 0.02);
    }
  }
}

.case-studies-header {
  display: none;
}

.case-study-1 {
  grid-column: 1 / 6;

}

.review-1 {
  grid-column: 6 / -1;
}

.youtube-review-1 {
  grid-row: 52;
  grid-column: 1 / 6;

}

.review-2 {
  grid-row: 34;
  grid-column: 6 / 10;
}

.growth-podcast {
  grid-row: 34;
  grid-column: 10 / -1;
}

.g2 {
  grid-row: 63;
  grid-column: 10 / -1;
}

.youtube-review-2 {
  grid-row: 93;
  grid-column: 1 / 8;
}

.case-study-2 {
  grid-row: 93;
  grid-column: 8 / -1;
}

.how-to {
  grid-row: 126;
  grid-column: 1 / 4;
}

.clutch {
  grid-row: 155;
  grid-column: 1 / 4;
}

.review-3 {
  grid-row: 126;
  grid-column: 4 / 8;
}

.review-4 {
  grid-row: 144;
  grid-column: 8 / -1;
}

.case-studies-button {
  display: none !important;
}

.bubble {
  position: absolute;
  top: 30px;
  left: -149px;

  width: 357.72px;
  height: 357.72px;

  background: rgba(255, 255, 255, 0.7);
  border: 2px solid rgba(255, 255, 255, 0.5);
  border-radius: 50%;
  box-shadow: 0px 40px 40px rgba(4, 4, 4, 0.02);
  backdrop-filter: blur(20px);

  animation: levitation-2 35s infinite;
}
</style>
