<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>
    <h2>{{ $t('products_page.title1') }}</h2>
    <p>{{ $t('products_page.subtitle1') }}</p>
    <p hidden class="centered"><img src="@images/v-elemento.png" /></p>
    <ProductCarouselVue :products="products" />
    <h3 hidden>{{ $t('products_page.title2') }}</h3>
    <div hidden class="card">
			<img src="@images/kettles.png" alt="">
      <div class="card-content">
        <h3>Wasserkocher mit Filter</h3>
		</div>
		</div>
    <Certifications />
    <h6 class="text-centered">{{ $t('products_page.download')}}</h6>
    <div class="buttons text-centered">
      <button class="mt-2" @click.prevent.stop="download">{{ $t('common.download') }}</button>
    </div>
  </section>
</template>

<style lang="scss" scoped>
.product-section.content {
  h6 {
      margin-top: 64px;
      font-weight: 200;
      font-size: 36px;
      text-align: left;
      line-height: 60px;
  }

  h2{  background: linear-gradient(to bottom, #cfc09f 22%,#634f2c 24%, #cfc09f 26%, #cfc09f 27%,#ffecb3 40%,#3a2c0f 78%); -webkit-background-clip: text;-webkit-text-fill-color: transparent;
       color: #fff;
	     font-size: 36px;
	     margin:0 auto;
	     font-weight: 700;
       line-height: 8px;
       padding: 24px;
       text-align: center;
       letter-spacing: 3px;
       line-height: 4px;
}
  h3 {
      margin-top: 64px;
      font-weight: 200;
      font-size: 24px;
      text-align: left;
      line-height: 60px;
  }

  button {
    width: 154px;
    height: 40px;
    border-radius: 12px;
  }
  

.card {
  width: 200px;
  height: 210px;
  border-radius: 8px;
  overflow: hidden;
  position: relative;
  box-shadow: 0 10px 30px 5px rgba(0, 0, 0, 0.2);
 
 
 
  img {
    position: absolute;
    object-fit: cover;
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
    opacity: 0.9;
   
  }

  h3 {
    position: absolute;
    inset: auto auto 30px 30px;
    margin-top: 0px;
    font-weight: 500;
    color: #603809;
    font-size: 16px;
    text-align: center;
  } 
} 

}

</style>