import React, { useState, useEffect } from "react";
import PriceCard from './PriceCard';
import { Helmet } from "react-helmet";
import New_C_Tarif_Section_Head from "../tarif_head_automatic_files/PricingLayout";

import '../tarif_head_automatic_files/detail.css';

const PricingSection = () => {


  const [periode, setperiode] = useState("Mensuel");
  const [abonnement_periodicite, setabonnement_periodicite] = useState("");

  const [price_basic, setprice_basic] = useState("150");
  const [price_standard, setprice_standard] = useState("299");
  const [price_gold, setprice_gold] = useState("599");


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

    if (document.getElementsByName("bton_annuel") && document.getElementsByName("bton_annuel")[0]) {
      document.getElementsByName("bton_annuel")[0].style.backgroundColor = "#F8F9F9";
      document.getElementsByName("bton_annuel")[0].style.color = "#212529";
      document.getElementsByName("bton_annuel")[0].style.opacity = "80%";
    }

    if (document.getElementsByName("bton_mensuel2") && document.getElementsByName("bton_mensuel2")[0]) {
      document.getElementsByName("bton_mensuel2")[0].style.backgroundColor = "#81BC3A";
      document.getElementsByName("bton_mensuel2")[0].style.color = "#FFF%";
      document.getElementsByName("bton_mensuel2")[0].style.opacity = "100%";
    }

    if (document.getElementsByName("bton_annuel2") && document.getElementsByName("bton_annuel2")[0]) {
      document.getElementsByName("bton_annuel2")[0].style.backgroundColor = "#F8F9F9";
      document.getElementsByName("bton_annuel2")[0].style.color = "#212529";
      document.getElementsByName("bton_annuel2")[0].style.opacity = "80%";
    }

    setperiode("Mensuel");
    setabonnement_periodicite("Mensuel");
    setprice_basic("150");
    setprice_standard("299");
    setprice_gold("599");
  }

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

    if (document.getElementsByName("bton_mensuel") && document.getElementsByName("bton_mensuel")[0]) {
      document.getElementsByName("bton_mensuel")[0].style.backgroundColor = "#F8F9F9";
      document.getElementsByName("bton_mensuel")[0].style.color = "#212529";
      document.getElementsByName("bton_mensuel")[0].style.opacity = "80%";
    }

    if (document.getElementsByName("bton_annuel2") && document.getElementsByName("bton_annuel2")[0]) {
      document.getElementsByName("bton_annuel2")[0].style.backgroundColor = "#81BC3A";
      document.getElementsByName("bton_annuel2")[0].style.color = "#FFF%";
      document.getElementsByName("bton_annuel2")[0].style.opacity = "100%";
    }

    if (document.getElementsByName("bton_mensuel2") && document.getElementsByName("bton_mensuel2")[0]) {
      document.getElementsByName("bton_mensuel2")[0].style.backgroundColor = "#F8F9F9";
      document.getElementsByName("bton_mensuel2")[0].style.color = "#212529";
      document.getElementsByName("bton_mensuel2")[0].style.opacity = "80%";
    }

    setperiode("Annuel");
    setabonnement_periodicite("Annuel");

    setprice_basic("105");
    setprice_standard("209");
    setprice_gold("419");

  }


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

  return (
    <div className='pricecard'>

      <div className="pricinglayout_classname">
        <div className='entete_pricingsection_1'>
          <h1 className='entete_pricingsection_H1'>

            Toutes les fonctionnalités <strong> <u> incluses sans frais cachés </u> </strong>.
          </h1>
          <p className='entete_pricingsection_H1_sous_text'>
            Choisissez parmi trois abonnements sans aucun coût supplémentaire caché.<br />
            MySy Training vous offre la transparence et la meilleure valeur sur le marché.
          </p>
        </div>

        <div className="div_row">
          <div className="produitsservices">
            <div className="critere" style={{ marginBottom: '40px' }}>
              <div className="critere_gauche">
                &nbsp;
              </div>
              <div className="critere_droite bloc_periodicite" >
                <span className="span1"> Periodicité  &nbsp; </span>
                <button
                  onClick={Clik_bton_mensuel}
                  className="bton_radius_gauche bloc_bton_mensuel"
                  id="bton_mensuel" name="bton_mensuel">Mensuelle
                </button>


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

                {periode && String(periode) === "Annuel" && <div style={{ marginTop: '0.5rem' }}>
                  <div className="critere_droite bloc_reduction_30">
                    30% de réduction
                  </div>
                </div>}


              </div>
            </div>


          </div>
        </div>


        <div className="pricinglayout_classname">
          <div className='block_1'>

            <div className='block_2'>
              <PriceCard
                title="BASIQUE"
                price={price_basic}
                features={[
                  { 'text': 'Sans engagement', 'hilight': '0' },
                  { 'text': 'Support', 'hilight': '0' },
                  { 'text': 'Apprenants illimités', 'hilight': '0' },
                  { 'text': "Basic Analytics", 'hilight': '0' },
                  { 'text': '2 Utilisateurs maximum', 'hilight': '1' },
                  { 'text': "Jusqu'à 25 Sessions/an", 'hilight': '1' },
                ]}
              />
            </div>

            <div className='block_2_populaire'>


              <PriceCard
                isPopular={true}
                title="STANDARD"
                price={price_standard}
                features={[
                  { 'text': 'Sans engagement', 'hilight': '0' },
                  { 'text': 'Support', 'hilight': '0' },
                  { 'text': 'Apprenants illimités', 'hilight': '0' },
                  { 'text': "Basic Analytics", 'hilight': '0' },
                  { 'text': 'Utilisateurs illimités', 'hilight': '1' },
                  { 'text': "De 26 à 200 Sessions/an", 'hilight': '1' },

                ]}
                buttonColor="#0aa690"
                buttonTextColor="#fff"
                priceColor="#0aa690"
              />
            </div>
            <div className='block_2'>
              <PriceCard
                title="GOLD"
                price={price_gold}
                features={[

                  { 'text': 'Sans engagement', 'hilight': '0' },
                  { 'text': 'Support', 'hilight': '0' },
                  { 'text': 'Apprenants illimités', 'hilight': '0' },
                  { 'text': "Basic Analytics", 'hilight': '0' },
                  { 'text': 'Utilisateurs illimités', 'hilight': '1' },
                  { 'text': "Sessions illimités", 'hilight': '1' },
                ]}
              />
            </div>
          </div>
        </div>
      </div>

      <div className="tarif_head_automatic_files">

        <New_C_Tarif_Section_Head abonnement_periodicite={abonnement_periodicite} price_basic={price_basic}
          price_standard={price_standard} price_gold={price_gold} />

      </div>

    </div>
  );
};

export default PricingSection;

