<template>
  <LayoutContainer id="Notre Histoire">
    <v-container>
      <v-row class="mb-6 mt-6">
        <v-col cols="6">
          <LayoutUISubTitle
            :title-color="'#fff'"
            :titleText="'découvrez toute notre histoire'"
            class="mb-12"
          />
        </v-col>

        <v-col cols="6">
          <div class="d-flex align-center">
            <div class="carousel-button" @click="previousAction">
              <i class="fas fa-chevron-left"></i>
            </div>
            <div class="carousel-button" @click="nextAction">
              <i class="fas fa-chevron-right"></i>
            </div>
          </div>
        </v-col>
      </v-row>
    </v-container>
    <v-row class="mb-12">
      <v-col cols="12">
        <Carousel ref="functionCarousel" :items-to-show="2" :items-to-scroll="1">
          <v-row> </v-row>
          <Slide
            v-for="(slide, index) in slides"
            :key="slide.id"
            :class="{
              'active-slide': index === activeSlide,
              'inactive-slide': index !== activeSlide,
            }"
            @click="setActiveSlide(index)"
          >
            <v-row justify="center" class="carousel-row">
              <v-col cols="4" class="carousel-col">
                <div
                  class="carousel__item"
                  :style="{ backgroundImage: 'url(' + slide.imageUrl + ')' }"
                ></div>
              </v-col>

              <v-col cols="4" class="carousel-col">
                <div class="description-container">
                  <h3 class="year">{{ slide.year }}</h3>
                  <h4 class="title-slide">{{ slide.title }}</h4>
                  <p class="description mb-6">{{ slide.description }}</p>
                </div>
              </v-col>
              <div  class="timeline-container">
                <div v-if="slide.year" class="timeline">
                  <div
                    class="timeline-point"
                    :style="{
                      left: calculateTimelinePosition(slide.year) + '%',
                    }"
                  >
                    <p
                      class="timeline-year"
                      style="color: white; font-weight: bold"
                    >
                      {{ slide.year }}
                    </p>
                  </div>
                </div>
              </div>
            </v-row>
          </Slide>
        </Carousel>
      </v-col>
    </v-row>
  </LayoutContainer>
</template>

<script setup>
import { Carousel, Navigation, Slide } from "vue3-carousel";
import "vue3-carousel/dist/carousel.css";
const functionCarousel = ref(null);
const activeSlide = ref(0);

const setActiveSlide = (index) => {
  activeSlide.value = index;
};
const nextAction = () => {
  functionCarousel.value.next();
  activeSlide.value = activeSlide.value + 1;

};

const previousAction = () => {
  functionCarousel.value.prev();
  activeSlide.value = activeSlide.value - 1;
};



const calculateTimelinePosition = (year) => {
  if(!year) {
    return 0;
  }
  const startYear = 2005;
  const endYear = 2024;
  const position = ((year - startYear) / (endYear - startYear)) * 100;
  return position;

};

const slides = [
  {
    id: 1,
    year: "2005",
    title: "L'origine d'Opentalent",
    description:
      "Sous une pleine lune inspirante, Guillaume alors imagine un outil collaboratif en ligne révolutionnaire pour le secteur culturel...",
    imageUrl: "/images/about/idee.png",
  },
  {
    id: 2,
    year: "2006",
    title: "Développement et partenariat stratégique",
    description:
      "Michel, passionné par l'innovation technologique, rejoint Guillaume. Ensemble, ils développent Opentalent avec le soutien de la Fédération de Haute-Savoie. Leur travail acharné bénévole durant 2 ans donne naissance à un logiciel SAS avant-gardiste, une première dans l'univers des structures culturelle",
    imageUrl: "/images/about/idee.png",
  },
  {
    id: 3,
    year: "2008",
    title: "Naissance de l'entreprise 2iOpenservice",
    description:
      "La Fédération de Haute-Savoie, séduite par le projet, invite à collaborer avec la CMF, élargissant l'impact d'Opentalent. 2IOpenservice est alors officiellement créée, marquant une nouvelle ère dans la gestion culturelle digitale.  ",
    imageUrl: "/images/about/idee.png",
  },
  {
    id: 4,
    year: "2009",
    title: "MusAssos - la réponse aux besoins pour les petites structures",
    description:
      "Pour répondre aux besoins spécifiques des écoles affiliées à la CMF, 2iopenservice lance MusAssos, une solution adapté aux petites et moyennes structures, facilitant la gestion et la promotion culturelle.",
    imageUrl: "/images/about/idee.png",
  },
  {
    id: 5,
    year: "2010",
    title: "CMF Réseau, l'innovation communautaire",
    description:
      "La CMF adopte AdminFédé pour connecter ses adhérents, et AdminAsso devient accessible à tous, démocratisant l'accès aux outils de gestion artistique.",
    imageUrl: "/images/about/idee.png",
  },
  {
    id: 6,
    year: "2014",
    title: "Vers une Culture Multidisciplinaire avec FFEC",
    description:
      "Le logiciel d'Opentalent s'étend au-delà de l'enseignement artistique, embrassant l'art, la musique, le théâtre, la danse et le cirque. En partenariat avec la FFEC, Reso Cirque voit le jour, intégrant notre solution au cœur de la pratique circassienne.",
    imageUrl: "/images/about/idee.png",
  },
  {
    id: 7,
    year: "2015",
    title: "Refonte Technologique",
    description:
      "Nous modernisons notre gamme de logiciels pour la rendre plus sécurisée et compatible avec divers supports, marquant une étape clé dans notre évolution technologique.",
    imageUrl: "/images/about/idee.png",
  },
  {
    id: 8,
    year: "2019",
    title: "Nouvelle Génération Opentalent",
    description:
      "Avec des fonctionnalités améliorées et une interface utilisateur intuitive, la nouvelle génération d'Opentalent se démarque, prouvant notre engagement envers l'excellence et l'accessibilité.",
    imageUrl: "/images/about/idee.png",
  },
  {
    id: 9,
    year: "2024",
    title: "Relooking du site Opentalent",
    description:
      "Le site Opentalent se réinvente, reflétant notre évolution et notre capacité à nous adapter aux tendances actuelles, tout en conservant notre essence originelle.",
    imageUrl: "/images/about/idee.png",
  },
  {
    id: 10,
    title: "Le Futur avec Vous...",
    description:
      "Opentalent, plus qu'une gamme de logiciels ou un agenda culturel, c'est une aventure collective. Ensemble, poursuivons cette quête d'innovation et de partage culturel. Rejoignez-nous dans cette aventure passionnante et façonnons l'avenir de la cultur",
    imageUrl: "/images/about/idee.png",
  },
];
</script>

<style scoped>

.active-slide {
  opacity: 1;
  transform: scale(1.1);
  transition: transform 0.3s ease-in-out, opacity 0.3s ease-in-out;
}

.inactive-slide {
  opacity: 0.5;
  transition: opacity 0.3s ease-in-out;
}
.timeline-year {
  position: relative;
  top: 1rem;
  left: -1rem;
  font-size: 1.2rem;
  color: white;
  font-weight: bold;
}
.timeline-container {
  width: 90%;
  padding: 10px 0;
}

.timeline {
  top: 1rem;
  height: 1px;
  background-color: #ddd;
  position: relative;
}


.timeline-point {
  position: relative;
  top: 15px;
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background-color: white;
}
.carousel-button {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 60px;
  height: 60px;
  background-color: transparent;
  border: 2px solid #fff;
  cursor: pointer;
  margin-right: 1rem;
}

.carousel-button i {
  color: #fff;
}
.container {
  background-color: #0e2d32;
}
.carousel-row {
  height: 32rem;
}

.carousel-col {
  display: flex;
  flex-direction: column;
  justify-content: center;
}

.carousel__item,
.description-container {
  height: 300px;
  width: 300px;
}

.carousel__item {
  width: 100%;
  background-image: url("/images/about/idee.png");
  background-size: cover;
}

.v-col {
  padding: 0;
}

.description {
  align-items: center;
  padding: 1rem;
  font-size: 0.8rem;
  color: #95dee9;
}

.title-slide {
  justify-content: flex-end;
  align-items: center;
  font-size: 1rem;
}

.year {
  font-size: 1.8rem;
}

.description-container {
  padding: 1rem;
  text-align: center;
  margin-left: 1rem;
  background-color: #091d20;
  color: white;
  border-top-right-radius: 20%;
  border-bottom-right-radius: 20%;
}
.carousel__item {
  height: 300px;
  width: 300px;
  background-image: url("/images/about/idee.png");
  border-top-left-radius: 20%;
  border-bottom-left-radius: 20%;
}

</style>
