import React, { useRef, useState, useEffect } from "react";
import moment from "moment";
import "./new_homepage.css";
import { Helmet } from "react-helmet";
import WhyUsLayout from './WhyUsLayout.js';
import LogoCloud from './LogoCloud.js';
import Features from './Features.js';
import AboutUsSection from './block_stat/AboutUsSection.js';
import FrenchSolution from './FrenchSolution.js'; 
import CommentMarche from './CommentMarche.js';
import New_C_Tatif_Section from "../tarif_section_automatic_files/PricingSection"

const New_C_A_Propos_2025 = (props) => {

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

    }, []);

    return (

        <div className="new_homepage_2025">
            <Helmet>
                <title>Logiciel OF pas cher : E-learning, CRM, Qualiopi automatisé – tout inclus</title>
                <meta name="description" content="MySy Training, le logiciel tout-en-un pour gérer votre organisme de formation. Toutes les fonctionnalités sont incluses, sans frais cachés. Essayez-le et voyez la différence !" />
                <meta name="robots" content="index,follow" />
                <meta name="title" content="Logiciel OF pas cher : E-learning, CRM, Qualiopi automatisé – tout inclus" />
                <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">
                            L'Offre Tout-en-Un pour gérer votre  <br /> Organisme de formation
                        </div>

                        <div className="title_and_cat_title_text2">
                            Toutes les fonctionnalités dont vous avez besoin, au meilleur prix &nbsp;  <img src="/img/fr_flag.png" alt="France" style={{height:'15px',
                                width:'24px', borderRadius:'1px' }}/>
                        </div>
                    </div>

                    <div className="FrenchSolution_block">
                        <FrenchSolution />
                    </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(
                                "/contact/",
                                '_self'
                            );
                        }}>
                            <nav className="title_and_cat_title_cat_bton_tarif_txt"> Nous contacter </nav>
                        </div>
                    </div>
                </div>

            </div>

           {/* <div className="fonctionnalite_Background_bannier_event">
                <div style={{ width: '100%' }}>
                    <div className="bannier_event">
                        <nav className="LogoCloud_h2" style={{ width: '100%' }}
                            onClick={(e) => {
                                e.preventDefault();
                                window.open(
                                    "https://event.go-entrepreneurs.com/2025",
                                    '_blank'
                                );

                            }} > Nous serons présents au prochain salon <u> Go Entrepreneur à Paris les 9 & 10 Avril 2025 </u></nav>


                        <div className="banniere_block_img">

                            <img src={Banniere_mysy_goent_mobile} className="banniere_img_gauche" />
                            <img src={Banniere_mysy_goent_mobile2} className="banniere_img_droite" />

                        </div>

                    </div>

                    <div className="bannier_event_mobile" onClick={(e) => {
                        e.preventDefault();
                        window.open(
                            "https://event.go-entrepreneurs.com/2025",
                            '_blank'
                        );

                    }}>
                        <nav className="LogoCloud_h2" style={{ width: '100%' }}
                            onClick={(e) => {
                                e.preventDefault();
                                window.open(
                                    "https://event.go-entrepreneurs.com/2025",
                                    '_blank'
                                );

                            }} > Nous serons présents au prochain salon <u>Go Entrepreneur à Paris les 9 & 10 Avril 2025 </u></nav>

                        <img src={Banniere_mysy_goent_mobile} style={{ width: "90%", borderRadius: '10px', marginTop: '1rem', marginBottom: "1rem" }} />
                        <img src={Banniere_mysy_goent_mobile2} style={{ width: "90%", marginTop: '1rem', borderRadius: '10px', marginBottom: '1rem' }} />
                    </div>

                </div>
            </div>*/}


            <div className="fonctionnalite_Background_home_page_img_saas">
                <div>
                    <img src='/img/home_page_img_saas.png' className="home_page_img_saas" />
                </div>
            </div>

            <LogoCloud />

            <WhyUsLayout />

            <CommentMarche />

            <AboutUsSection />

            <Features />

            <New_C_Tatif_Section />

        </div>
    )

}


export default New_C_A_Propos_2025;