<!--
Section "Avantages" de la page du logiciel School
-->
<template>
  <AnchoredSection id="benefits">
    <CommonAvantages :benefits="benefits" />
  </AnchoredSection>
</template>

<script setup lang="ts">
import type { Ref } from 'vue'
import AnchoredSection from '~/components/Layout/AnchoredSection.vue'
import type { Benefit } from '~/types/interface'

// Exemple de données pour les cartes
const benefits: Ref<Array<Benefit>> = ref([
  {
    title: 'Un gain de temps',
    number: '01',
    description:
      'Centralisez toutes vos informations sur un seul et même outil et ne perdez plus de temps avec des fichiers sur diverses applications.',
    image: '/images/components/avantages/un_gain_de_temps.jpg',
    alt: '',
    isMemberCMF: true,
  },
  {
    title: 'Une activité structurée',
    number: '02',
    description:
      'Des espaces dédiés et des outils spécifiques à vos besoins pour une gestion optimisée et une lecture simplifiée.',
    image: '/images/components/avantages/une_activite_structuree.png',
    alt: '',
    isMemberCMF: false,
  },
  {
    title: 'Une gestion collaborative',
    number: '03',
    description:
      "Grâce à des comptes dédiés, personnalisés et autonomes, permettez à vos membres de mettre à jour leurs informations et d'interagir dans leur agenda.",
    image: '/images/components/avantages/une_gestion_collaborative.jpg',
    alt: '',
    isMemberCMF: true,
  },
])
</script>
