<script>

import Certifications from '../../components/Certifications.vue';
import CoffeeFarmer from '../../components/CoffeeFarmer.vue';
import Different from '../../components/Different.vue';
import Menu from '../../components/Menu.vue';
import ProductCarousel from '../../components/ProductCarousel.vue';
import { products } from '../../data.js';

  export default {
    data() {
      return {
        products,
      };
    },
    components: {
      Certifications,
      Menu,
      ProductCarousel,
      CoffeeFarmer,
      Certifications,
      Different
},
    computed: {
      productsCarousel() {
        return this.products.map(p => ({
          image: p.image_product_single,
          name:  p.name,
          farm: p.farm,
          strain: p.strain,
        }));
      }
    },

  }
</script>

<template>
  <Menu type="home" />
  <section class="home-section content">
    <h2>{{ $t('origins.header') }}</h2>
    <ProductCarousel :products="productsCarousel" />
    <Different />
    <CoffeeFarmer class="mt-5" />
    <Certifications />
  </section>
</template> 