import React, { useState, useEffect } from "react";
import { useForm } from "react-hook-form";
import { useHistory } from "react-router-dom";
import { Button, FormGroup, Label, Input } from "reactstrap";
import { FacebookLoginButton, GoogleLoginButton } from "react-social-login-buttons";
//import { getCookie, setCookie, removeCookie  } from 'react-use-cookie';
import { Helmet } from "react-helmet";
import { useCookies } from "react-cookie";
import { confirmAlert } from 'react-confirm-alert'; // Import
import 'react-confirm-alert/src/react-confirm-alert.css'; // Import css
import tick_ok from "../mysy_img/tick_OK.png";
import tick_ko from "../mysy_img/tick_KO.png";
import Popup from 'reactjs-popup';
import 'reactjs-popup/dist/index.css';
import axios from "axios";
import { useParams } from 'react-router-dom'
import logowhite from "../mysy_img/MYSY-LOGO-WHITE.png";
import Footer from "./Fotter";
import MenuItem from "@material-ui/core/MenuItem";
import Menu from "@material-ui/core/Menu";
import Header from "./Header";
import SendIcon from '@mui/icons-material/Send';

function ProduitsServices() {
    const history = useHistory();
    const [check, setCheck] = useState(false);
    const [periode, setperiode] = useState("Mensuel");

    function handleChange(checked) {
        //this.setState({ checked });
        setCheck(checked);
        if (String(periode) === String("Mensuel")) {
            setperiode("Annuel");
        }
        else if (String(periode) === String("Annuel")) {
            setperiode("Mensuel");
        }
    }


    function Clik_bton_mensuel(e) {
        document.getElementsByName("bton_mensuel")[0].style.backgroundColor = "#81BC3A";
        document.getElementsByName("bton_mensuel")[0].style.opacity = "100%";

        document.getElementsByName("bton_annuel")[0].style.backgroundColor = "#F8F9F9";
        document.getElementsByName("bton_annuel")[0].style.opacity = "80%";

        document.getElementsByName("bton_mensuel2")[0].style.backgroundColor = "#81BC3A";
        document.getElementsByName("bton_mensuel2")[0].style.opacity = "100%";

        document.getElementsByName("bton_annuel2")[0].style.backgroundColor = "#F8F9F9";
        document.getElementsByName("bton_annuel2")[0].style.opacity = "80%";



        setperiode("Mensuel");
    }

    function Clik_bton_annuel(e) {
        document.getElementsByName("bton_annuel")[0].style.backgroundColor = "#81BC3A";
        document.getElementsByName("bton_annuel")[0].style.opacity = "100%";

        document.getElementsByName("bton_mensuel")[0].style.backgroundColor = "#F8F9F9";
        document.getElementsByName("bton_mensuel")[0].style.opacity = "80%";


        document.getElementsByName("bton_annuel2")[0].style.backgroundColor = "#81BC3A";
        document.getElementsByName("bton_annuel2")[0].style.opacity = "100%";

        document.getElementsByName("bton_mensuel2")[0].style.backgroundColor = "#F8F9F9";
        document.getElementsByName("bton_mensuel2")[0].style.opacity = "80%";



        setperiode("Annuel");
    }
    const [PartnerMenu, setPartnerMenu] = React.useState(null);
    const [AccountMenu, setAccountMenu] = React.useState(null);

    const PartnerMenu_Close = () => {
        setPartnerMenu(null);
    };

    const AccountMenu_Close = () => {
        setAccountMenu(null);
    };

    const handlePartnerMenu = (event) => {
        setPartnerMenu(event.currentTarget);
    };

    const handleAccountMenu = (event) => {
        setAccountMenu(event.currentTarget);
    };

    const handleClose_Account = () => {
        alert(" my account");
        setAccountMenu(null);
    };

    const handleAccountConnexion = () => {
        setAccountMenu(null);
        history.push("/Connexion")
    };

    const handleAccountCreation = () => {
        setAccountMenu(null);
        history.push("/create_account")
    };

    const handlePartnerConnexion = () => {
        setAccountMenu(null);
        history.push("/PartnerLogin")
    };


    function sendEmail(){
        window.location = "mailto:contact@mysy-training.com";
    }

    return (
        <div className="produitsservices">
            <Helmet>
                <title>Produits & Services</title>
                <meta name="description" content="Produits et Services" />
                <meta name="robots" content="index,follow" />
                <meta name="title" content="Produits et Services" />
                <link rel="canonical" href={`${process.env.REACT_APP_BASE_URL}` + "/mysy-training-login/0/0"} />

            </Helmet>

            <Header />

            <div className="div_mobile">
                <div className="critere">

                    <div className="critere_gauche">

                        <div className="input-group input-group-sm mb-3">
                            <span className="input-group-text" id="inputGroup-sizing-sm3">Devise  </span>
                            <select className="form-select form-select-sm limite_input" onChange={"ChangeDevise"} aria-label=".form-select-sm example"
                                id={"devise"} name={"devise"}  >
                                <option selected value="euro">€</option>
                                {/*<option value="dollard">$ US</option>*/}

                            </select>
                        </div>
                    </div>
                    <div className="critere_droite">
                        <span className="span1"> Periodicité &nbsp; </span>
                        <button
                            onClick={Clik_bton_mensuel}
                            className="bton_radius_gauche"
                            id="bton_mensuel" name="bton_mensuel">Mensuelle
                        </button>


                        <button
                            onClick={Clik_bton_annuel}
                            className="bton_radius_droite"
                            id="bton_annuel" name="bton_annuel">Annuelle
                        </button>


                    </div>

                </div>


                <div className="div_row">
                    <div className="div_row_description">
                        <div className="div_basique_header">  &nbsp;
                        </div>
                        <div style={{ "marginBottom": "1rem", "background": "#E9ECEF" }}>
                            Produits & Services
                        </div>
                        <div className="produits_service_label height_publication">
                            <b> Publication des
                                formations </b>

                            <ul>
                                <li>Mise en ligne de votre formation
                                    (Description, Objectif,
                                    Programme, etc).</li>
                                <li>Mise en forme des textes selon
                                    votre souhait. </li>
                                <li>Définition du pays et la région
                                    de
                                    publication</li>
                                <li>Import/Export Excel</li>
                            </ul>
                        </div>


                        <div className="produits_service_label height_Reporting">
                            <b> Reporting standard
                                automatique </b>

                            <ul>
                                <li>Nombre de fois que vos
                                    formations ont été vues
                                </li>
                                <li>Les régions où elles ont été
                                    vues</li>
                                <li>Top 5 des formations avec le
                                    détail du nombre de vu</li>

                            </ul>
                        </div>

                        <div className="produits_service_label height_support">
                            <b> Support téléphonique </b>
                        </div>

                        <div className="produits_service_label height_leads">
                            <b>3 Mots clés
                                supplémentaires </b>

                            <ul>
                                <li>Ajout de 3 mots clés
                                    supplémentaires associés à la
                                    formation.</li>
                                <li>Ces mots seront utilisés dans
                                    la barre de recherche.</li>

                            </ul>
                        </div>
                        <div className="produits_service_label height_publication">
                            <b>Personnalisation de
                                l'affichage
                                d'une formation</b>

                            <ul>
                                <li>Ajout de vos propres images pour
                                    communiquer sur votre structure
                                    et votre marque.</li>
                                <li>Affichage de votre logo à côté
                                    de la
                                    formation. </li>
                                <li>Affichage votre bannière en
                                    grand
                                    sur la page détaillée.</li>

                            </ul>
                        </div>
                        <div className="produits_service_label">
                            <b>Gestion administrative
                                des
                                stagiaires (pré-inscriptions,
                                émargement, présence, etc)</b>

                            <ul>
                                <li>Date ouverture et fermeture des
                                    inscriptions en ligne</li>
                                <li>Gestion du nombre de
                                    participants</li>


                                <li> Gestion des pré-inscriptions / Inscriptions des stagiaires</li>

                                <li> Les listes d’émargement / Fiche de présence</li>

                            </ul>
                        </div>
                        <div className="produits_service_label height_leads">
                            <b>Génération automatique de
                                leads</b>

                            <ul>
                                <li>L’intérêt des stagiaires génère
                                    des leads qui vous sont envoyé
                                    automatiquement.</li>
                               
                            </ul>
                        </div>
                        <div className="produits_service_label">
                            <b>Envoi de 1000 emails
                                markéting / mois pour votre
                                formation</b>

                            <ul>
                                <li>MySy crée un visuel de
                                    communication sous forme d’email
                                    markéting.</li>
                                <li>Avec votre validation, ce visuel
                                    est envoyé 1000 contacts de
                                    notre base de données (ou la
                                    vôtre) </li>
                                <li>Un rapport vous ai envoyé avec
                                    la liste des personnes ayant
                                    manifesté un intérêt pour
                                    votre formation.</li>

                            </ul>

                        </div>


                      


                    </div>

                    <div className="div_row_basique">
                        <div className="div_basique_header">  Découverte </div>
                        <hr style={{ "margin": "0.2rem" }} />
                        <div style={{ "marginBottom": "0.8rem" , "fontSize":"small"}}>
                        Pour chaque Formation
                        </div>

                        <div className="produits_service_tick height_publication">
                            
                            <img src={tick_ok} alt="OK" className="tick_ok_ko" />
                        </div>

                        <div className="produits_service_tick height_Reporting">
                            <img src={tick_ok} alt="OK" className="tick_ok_ko" />
                        </div>
                        <div className="produits_service_tick height_support">
                             <img src={tick_ko} alt="KO" className="tick_ok_ko" />
                        </div>

                        <div className="produits_service_tick height_leads">
                            <img src={tick_ko} alt="KO" className="tick_ok_ko" />
                        </div>
                        <div className="produits_service_tick height_publication">
                            <img src={tick_ko} alt="KO" className="tick_ok_ko" />
                        </div>
                        <div className="produits_service_tick ">
                            <img src={tick_ko} alt="KO" className="tick_ok_ko" />
                        </div>
                        <div className="produits_service_tick height_leads">
                            <img src={tick_ko} alt="KO" className="tick_ok_ko" />
                        </div>
                        <div className="produits_service_tick">
                            <img src={tick_ko} alt="KO" className="tick_ok_ko" />
                        </div>
                        

                        <div className="div_row_basique_price">
                            Gratuit 15 jours
                        </div>
                        <div className="div_row_basique_price">
                            &nbsp;
                        </div>

                        <div className="abonnement">
                            <Button variant="contained"
                                color="success"
                                className="btn_abonnement"
                                onClick={(e) => {
                                    e.preventDefault();
                                    window.location.href = "/Partner";
                                }}
                            > Je m'abonne  </Button>
                        </div>

                    </div>

                    <div className="div_row_standard">
                        <div className="div_standard_header"> Standard </div>
                        <hr style={{ "margin": "0.2rem" }} />
                        <div style={{ "marginBottom": "0.8rem" , "fontSize":"small"}}>
                        Pour chaque Formation
                        </div>

                        <div className="produits_service_tick height_publication">
                        <img src={tick_ok} alt="OK" className="tick_ok_ko" />
                        </div>

                        <div className="produits_service_tick height_Reporting">
                            <img src={tick_ok} alt="OK" className="tick_ok_ko" />
                        </div>
                        <div className="produits_service_tick height_support">
                            <img src={tick_ok} alt="OK" className="tick_ok_ko" />
                        </div>

                        <div className="produits_service_tick height_leads">
                            <img src={tick_ok} alt="OK" className="tick_ok_ko" />
                        </div>
                        <div className="produits_service_tick height_publication">
                            <img src={tick_ok} alt="OK" className="tick_ok_ko" />
                        </div>
                        <div className="produits_service_tick">
                            <img src={tick_ko} alt="KO" className="tick_ok_ko" />
                        </div>
                        <div className="produits_service_tick height_leads">
                            <img src={tick_ko} alt="KO" className="tick_ok_ko" />
                        </div>
                        <div className="produits_service_tick">
                            <img src={tick_ko} alt="KO" className="tick_ok_ko" />
                        </div>
                       

                        <div className="div_row_standard_price">
                             50 HT €/mois

                        </div>

                        <div className="div_row_standard_price">
                            &nbsp;
                        </div>

                        <div className="abonnement">
                            <Button variant="contained"
                                color="success"
                                className="btn_abonnement"
                                onClick={(e) => {
                                    e.preventDefault();
                                    window.location.href = "/Partner";
                                }}> Je m'abonne  </Button>
                        </div>


                    </div>

                    <div className="div_row_gold">
                        <div className="div_gold_header">   Gold </div>
                        <hr style={{ "margin": "0.2rem" }} />
                        <div style={{ "marginBottom": "0.8rem" , "fontSize":"small"}}>
                        Pour chaque Formation
                        </div>

                        <div className="produits_service_tick height_publication">
                        <img src={tick_ok} alt="OK" className="tick_ok_ko" /> 
                        </div>

                        <div className="produits_service_tick height_Reporting">
                            <img src={tick_ok} alt="OK" className="tick_ok_ko" />
                        </div>
                        <div className="produits_service_tick height_support">
                            <img src={tick_ok} alt="OK" className="tick_ok_ko " />
                        </div>

                        <div className="produits_service_tick height_leads">
                            <img src={tick_ok} alt="OK" className="tick_ok_ko" />
                        </div>
                        <div className="produits_service_tick height_publication">
                            <img src={tick_ok} alt="OK" className="tick_ok_ko" />
                        </div>
                        <div className="produits_service_tick">
                            <img src={tick_ok} alt="OK" className="tick_ok_ko" />
                        </div>
                        <div className="produits_service_tick height_leads">
                            <img src={tick_ok} alt="OK" className="tick_ok_ko" />
                        </div>
                        <div className="produits_service_tick">
                            <img src={tick_ok} alt="OK" className="tick_ok_ko" />
                        </div>
                       

                        <div className="div_row_gold_price">
                            90 € HT /mois
                          
                        </div>

                        <div className="div_row_gold_price">
                            &nbsp;
                        </div>

                        <div className="abonnement">
                            <Button variant="contained"
                                color="success"
                                className="btn_abonnement"
                                onClick={(e) => {
                                    e.preventDefault();
                                    window.location.href = "/Partner";
                                }}
                            > Je m'abonne  </Button>
                        </div>


                    </div>


                    {<div style={{ "width": "1%" }}> &nbsp;</div>}
                </div>
               
                <div className="div_row">
                   

                    <div style={{"float":"right", "width":"65%" , "textAlign":"center"}}> 
                 

                        <Button variant="contained"  className="bton_envoyer"
                                    onClick={sendEmail}
                                    startIcon={<SendIcon />}>Vous souhaitez avoir des précisions, contactez nous. &nbsp; &nbsp;  {<SendIcon />}</Button>

                        
                        </div>
                        
                    </div>
                {/*  <div className="div_row">
                    <div className="div_row_description" >
                        {String(periode) === String("Mensuel") && <div style={{ "background": "#E9ECEF", "minHeight": "3.5rem", "paddingTop": "1rem" }}>
                            Prix par Mois

                        </div>}

                        {String(periode) === String("Annuel") && <div style={{ "background": "#E9ECEF", "minHeight": "3.5rem", "paddingTop": "1rem" }}>
                            Prix par An

                        </div>}

                    </div>
                    <div className="div_row_basique_price">
                        Gratuit
                    </div>
                    <div className="div_row_standard_price">
                        {String(periode) === String("Mensuel") && "350 €/mois"}
                        {String(periode) === String("Annuel") && "1 500 €/an - (2 mois offerts)"}
                    </div>
                    <div className="div_row_gold_price">
                        {String(periode) === String("Mensuel") && "550 €/mois"}
                        {String(periode) === String("Annuel") && "4 950 €/an - (3 mois offerts)"}

                    </div>
                    <div className="div_row_sur_mesure_price">
                        CONTACTEZ-NOUS
                    </div>
                    </div> ---*/}

                <div className="pieddepage">
                    <Footer />
                </div>
            </div>

        </div>

    );


}

export default ProduitsServices;