import React, { useRef, useState, useEffect } from "react";
import moment from "moment";
import { Helmet } from "react-helmet";
import "./new_fonctionalites_2025.css";


import FeaturesLayout from './FeaturesLayout.js';
import ContentSection from './ContentSection';
import Badge_Fonctionnalite from './Badge_Fonctionnalite';

import MySy_CRM_Section from './CRM_Layout/MySy_CRM_Section';

import ELearningSection from "./E-Learning_Layout/ELearningSection"


const New_C_Fonctionalites_2025 = (props) => {

    useEffect(() => {
        window.scrollTo({
            top: 0,
            behavior: "smooth",
        });

    }, []);


    const gestion_admin_fonctionalite = [
        {
            'title': 'Catalogue formations personnalisé', 'detail_1': 'Catalogue formations', 'detail_2': 'Nom domaine personnalisé',
            'detail_3': 'Modèle siteweb personnalisé', 'img': '/img/fonctionnalite_img/img_catalog.png'
        },

        {
            'title': 'Gestion des inscriptions', 'detail_1': 'Préinscription', 'detail_2': 'Annulation avec motif',
            'detail_3': 'Import/export (excel et API)', 'img': '/img/fonctionnalite_img/img_inscription.png'
        },

        {
            'title': 'Gestion des Émargements', 'detail_1': 'Par QR code', 'detail_2': 'A distance par email',
            'detail_3': 'Signature main levée & En présentiel', 'img': '/img/fonctionnalite_img/img_emargement.png'
        },


        {
            'title': 'Check-list QUALIOPI', 'detail_1': 'Traitement automatisé', 'detail_2': 'Affichage du reste à faire',
            'detail_3': 'Affichage ce qui a été fait', 'img': '/img/fonctionnalite_img/img_qualiopi_checklist.png'
        },


        {
            'title': 'Gestion avis participants', 'detail_1': 'Avis sur la formation', 'detail_2': 'Avis sur le formateur',
            'detail_3': 'Génération automatique des statistiques de satisfaction', 'img': '/img/fonctionnalite_img/img_catalog.png'
        },


        {
            'title': 'Gestion Evaluation', 'detail_1': 'Evaluation à chaud', 'detail_2': 'Evaluation à froid',
            'detail_3': 'Evaluation formateur', 'img': '/img/fonctionnalite_img/img_evaluation.png'
        },


        {
            'title': 'Gestion documents (GED)', 'detail_1': 'Documents clients', 'detail_2': 'Documents apprenants',
            'detail_3': 'Documents formateur', 'img': '/img/fonctionnalite_img/img_storage.png'
        },


        {
            'title': 'Personnalisation des documents', 'detail_1': 'Personnalisation de tous les documents', 'detail_2': 'Sauvegarde et restauration',
            'detail_3': '', 'img': '/img/fonctionnalite_img/img_personnalisation.png'
        },


        {
            'title': 'Gestion des Sessions de formation', 'detail_1': 'Session inter/intra', 'detail_2': 'Personnalisation des étapes',
            'detail_3': 'Affectation devis/ressources', 'img': '/img/fonctionnalite_img/img_session_formation.png'
        },


        {
            'title': 'Gestion des ressources', 'detail_1': 'Salle de classe', 'detail_2': 'Formateur & personnel administratif',
            'detail_3': 'Matériel pédagogique', 'img': '/img/fonctionnalite_img/img_ressources.png'
        },


        {
            'title': 'Gestion formateurs', 'detail_1': 'Contrat formateurs', 'detail_2': 'Edition et stockage des contrats',
            'detail_3': 'Evaluation', 'img': '/img/fonctionnalite_img/img_formateur.png'
        },


        {
            'title': 'Tableau de bord & BPF', 'detail_1': 'Suivi d’activité', 'detail_2': 'BPF',
            'detail_3': '', 'img': '/img/fonctionnalite_img/img_tableau_bord.png'
        },

    ]

    const crm_fonctionalite = [
        {
            'title': 'Signature électronique', 'detail_1': 'Un module intégrée', 'detail_2': 'Permet de signer vos documents',
            'detail_3': '', 'img': '/img/fonctionnalite_img/img_signat_electro.png'
        },

        {
            'title': 'Gestion des collaborateurs', 'detail_1': 'Affectation tâches', 'detail_2': 'Suivi avancement',
            'detail_3': 'Notification par email', 'img': '/img/fonctionnalite_img/img_collaborateur.png'
        },


        {
            'title': 'Les Devis', 'detail_1': 'Envoi par email', 'detail_2': 'Validation automatique client',
            'detail_3': 'Relance automatique', 'img': '/img/fonctionnalite_img/img_devis.png'
        },

        {
            'title': 'Gestion Clients, Financeurs', 'detail_1': 'Contacts', 'detail_2': 'Stockage documents',
            'detail_3': 'Import / Export Excel', 'img': '/img/fonctionnalite_img/img_client_financeur.png'
        },

        {
            'title': 'Paiements', 'detail_1': 'Multi paiement', 'detail_2': 'Suivi du reste à payer',
            'detail_3': 'Import / Export Excel', 'img': '/img/fonctionnalite_img/img_paiement.png'
        },

        {
            'title': 'opportunités d’affaire', 'detail_1': 'Personnalisation des étapes', 'detail_2': 'Notification équipe',
            'detail_3': 'Conversion en devis', 'img': '/img/fonctionnalite_img/img_opportunite.png'
        },

        {
            'title': 'Facturation & avoirs', 'detail_1': 'Envoi par email au client', 'detail_2': 'Fractionnement des factures',
            'detail_3': 'Transformation en avoir et Annotation', 'img': '/img/fonctionnalite_img/img_facture_avoir.png'
        },

        {
            'title': 'Tableau de bord', 'detail_1': 'Suivi clients', 'detail_2': 'Suivi facturation',
            'detail_3': 'Factures prévisionnelles', 'img': '/img/fonctionnalite_img/img_tableau_bord.png'
        },


    ]

    const lms_fonctionalite = [
        {
            'title': 'Classe virtuelle', 'detail_1': '', 'detail_2': '',
            'detail_3': '', 'img': '/img/fonctionnalite_img/img_class_virtuelle.png'
        },

        {
            'title': 'Cours – TD – TP - Examen', 'detail_1': '', 'detail_2': '',
            'detail_3': '', 'img': '/img/fonctionnalite_img/img_cours_td_tp.png'
        },


        {
            'title': 'Intranet Apprenant & Enseignant', 'detail_1': '', 'detail_2': '',
            'detail_3': '', 'img': '/img/fonctionnalite_img/img_intranet_apprenant.png'
        },


        {
            'title': 'Suivi temps de connexion apprenants', 'detail_1': '', 'detail_2': '',
            'detail_3': '', 'img': '/img/fonctionnalite_img/img_suivi_tps_connexion.png'
        },

        {
            'title': 'Echange Enseignant / Apprenant', 'detail_1': '', 'detail_2': '',
            'detail_3': '', 'img': '/img/fonctionnalite_img/img_echange_prof_apprenant.png'
        },

        {
            'title': 'Export / Import format SCORM', 'detail_1': '', 'detail_2': '',
            'detail_3': '', 'img': '/img/fonctionnalite_img/img_export_scorm.png'
        },

        {
            'title': 'Partage de fichiers', 'detail_1': '', 'detail_2': '',
            'detail_3': '', 'img': '/img/fonctionnalite_img/img_partage_fichiers.png'
        },

        {
            'title': 'Tableau de bord / Statistiques', 'detail_1': '', 'detail_2': '',
            'detail_3': '', 'img': '/img/fonctionnalite_img/img_tableau_bord.png'
        },



    ] 

    return (

        <div className="new_fonctionalites_2025">

            <Helmet>
                <title>Gérez votre OF sans stress : tout est inclus avec MySy Training</title>
                <meta name="description" content="Un seul logiciel, zéro surprise : MySy Training gère tout pour votre OF, et toutes les options sont incluses. Pas de blabla, que de l'efficacité." />
                <meta name="robots" content="index,follow" />
                <meta name="title" content="Gérez votre OF sans stress : tout est inclus avec MySy Training" />
                <link rel="canonical" href={window.location.href} />

            </Helmet>

            <div className="fonctionnalite_Background">

                <div className="title_and_cat">

                    <div className="title_and_cat_title">
                        <div className="title_and_cat_title_text1">
                            Des fonctionnalités pensées pour simplifier la gestion de vos formations.
                        </div>

                        <div className="title_and_cat_title_text2">
                            Que ce soit pour simplifier vos tâches administratives, optimiser la gestion de vos apprenants ou enrichir vos parcours e-learning, MySy Training vous accompagne.
                        </div>
                    </div>

                    <div className="title_and_cat_title_cat">

                        <div className="title_and_cat_title_cat_bton_demo" onClick={(e) => {
                            e.preventDefault();
                            var date2 = new Date();
                            const format2 = "YYYY-MM";
                            var dateTime2 = moment(date2).format(format2);
                            window.open(
                                "https://calendly.com/mysytraining/demo-mysy-training-solution?month=" + String(dateTime2),
                                '_blank'
                            );
                        }}>
                            <nav className="title_and_cat_title_cat_bton_demo_txt">  Réserver une démo </nav>
                        </div>

                        <div className="title_and_cat_title_cat_bton_tarif" onClick={(e) => {

                            window.open(
                                "/tarif/",
                                '_self'
                            );
                        }}>
                            <nav className="title_and_cat_title_cat_bton_tarif_txt"> Découvrez nos tarifs </nav>
                        </div>
                    </div>
                </div>

            </div>

            <FeaturesLayout />

            <ContentSection />

            <div className="block_badge" style={{ marginBottom: '3rem' }}>
                <div className="block_display_flex_badge" id="badge_gestion_admin">
                    {gestion_admin_fonctionalite && gestion_admin_fonctionalite.map((local_badge) => (
                        <div className="block_badge_fonctionnalite">
                            <Badge_Fonctionnalite badge={local_badge} />
                        </div>

                    ))}

                </div>
            </div>

            <MySy_CRM_Section />
            <div className="block_badge" style={{ marginBottom: '3rem' }} id="badge_crm">
                <div className="block_display_flex_badge">
                    {crm_fonctionalite && crm_fonctionalite.map((local_badge) => (
                        <div className="block_badge_fonctionnalite">
                            <Badge_Fonctionnalite badge={local_badge} />
                        </div>

                    ))}

                </div>
            </div>

            <ELearningSection />
            <div className="block_badge" style={{ marginBottom: '3rem' }} id="badge_lms">
                <div className="block_display_flex_badge">
                    {lms_fonctionalite && lms_fonctionalite.map((local_badge) => (
                        <div className="block_badge_fonctionnalite">
                            <Badge_Fonctionnalite badge={local_badge} />
                        </div>

                    ))}

                </div>
            </div>


        </div>
    )
}


export default New_C_Fonctionalites_2025;