
import React, { useState, useEffect } from "react";
import { Helmet } from "react-helmet";
import './contact_automatic_files.css';
import ContactForm from './ContactForm';
import ContactInfo from './ContactInfo';

const Contact_Layout = () => {

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


  return (
    <div style={{ width: '100%', minHeight: '100vh', display: 'flex', flexDirection: 'column' }} id="debut">
      <Helmet>
        <meta name="description" content="Éditeur Français de logiciels pour organisme de formation. Avec solutions de E-Learning, gestion administrative et gestion relation client nous accompagnons les organismes de formation à réaliser l’audit QUALIOPI en toute sérénité. Nous sommes les moins cher du marché. Nous vous accompagnons automatiser vos process : inscription, évaluation, émargement (qr-code), Check-list QUALIOPI, Personnalisation et édition documents, Gestion formateurs, Catalogue formations personnalisé. Nous sommes les moins cher du marché. Nous automatisons vos process : inscription, évaluation, émargement (qr-code),  QUALIOPI, Personnalisation des documents, Gestion formateurs, Catalogue personnalisé, bilan pédagogique et financier (PBF).  Nos options comme la signature électronique sont inclus dans le tarif de base." />
        <meta name="robots" content="index,follow" />
        <meta name="title" content="MySy Training, contactez-nous" />
        <link rel="canonical" href={window.location.href} />
      </Helmet>


      <div style={{ flexGrow: 1, display: 'flex', flexDirection: 'column', alignItems: 'center', background: 'url(/img/contact_img_backgrou.png)', backgroundSize: 'cover', padding: '90px 0' }}>
        <h1 style={{ fontFamily: 'DM Sans', fontSize: '36px', fontWeight: 700, color: '#16274F', textAlign: 'center', marginBottom: '20px' }}>Un besoin, une question ?<br />Nous sommes à votre disposition.</h1>
        <p style={{ fontFamily: 'Inter', fontSize: '16px', color: '#4B5162', textAlign: 'center', maxWidth: '600px', marginBottom: '0px' }}>
          C'est à vous. Dites-nous tout &nbsp;  &nbsp; <span style={{ 'fontSize': '30px' }}>&#9997;</span>
        </p>
        <ContactForm style={{ flexGrow: 0, width: '80%', maxWidth: '1116px', margin: '20px 0' }} />

        <div style={{ flexGrow: 0, width: '80%', maxWidth: '1116px', margin: '20px 0' }}>

          <h1 style={{
            fontFamily: 'DM Sans', fontSize: '30px', fontWeight: 700, color: '#16274F', textAlign: 'left',
            marginBottom: '20px'
          }}>
            Mysy Training Technology,<br />
            Votre satisfaction est notre priorité.
          </h1>


        </div>
        <div style={{ flexGrow: 0, width: '80%', maxWidth: '1116px', margin: '20px 0' }} >
          <ContactInfo style={{ flexGrow: 0, width: '100%', margin: '20px 0' }} />
        </div>
      </div>

    </div>
  );
};

export default Contact_Layout;
