<script>
  import 'vue3-carousel/dist/carousel.css'
  import ProductFlipCard from "../../components/ProductFlipCard.vue";
  import Certifications from "../../components/Certifications.vue";
  import ProductCarouselVue from "../../components/ProductCarousel.vue";
  import BigCarousel from '../../components/BigCarousel.vue';
  import { products, slides } from '../../data.js';
  export default {
    data() {
      return {
        products,
        slides: slides.products
      };
    },
    components: {
      ProductFlipCard,
      Certifications,
      ProductCarouselVue,
      BigCarousel
    },
    methods: {
      download() {
        const fileURL =  new URL(`/src/assets/resources/Porfolio_V elemento_${this.$i18n.locale.toUpperCase()}.pdf`, import.meta.url).href;
        window.open(fileURL);
      }
    }
  }
</script>

<template>
  <big-carousel :images="slides"></big-carousel>
  <section class="product-section content">
    <h2>{{ $t('products_page.title') }}</h2>
    <p>{{ $t('products_page.subtitle1') }}</p>
    <p hidden class="centered"><img src="@images/v-elemento.png" /></p>
    <ProductCarouselVue :products="products" />
    <Certifications />

    <h6 class="text-centered">{{ $t('products_page.download')}}</h6>
    <div class="buttons text-centered">
      <button class="mt-5" @click.prevent.stop="download">{{ $t('common.download') }}</button>
    </div>
  </section>
</template>

<style lang="scss" scoped>
.product-section.content {
  h6 {
      font-weight: 200;
      font-size: 52px;
      text-align: left;
      line-height: 60px;
  }
  button {
    width: 154px;
    height: 40px;
    border-radius: 12px;
  }
  .cards {
    display: grid;
    grid-template-columns: 50% 50%;
  }

  .card {
    margin: 8px;
  }
}
</style>