import React from 'react';import Footer from "./Footer";
 
export default class Download extends React.Component {

   async componentDidMount() {        document.title = "Télécharger - Teach'r";
       // try to redirect the user to the corresponding store        let os = Download.getMobileOperatingSystem();        if (os === "Android") {            window.location.href = "https://play.google.com/store/apps/details?id=fr.teachr.app";        } else if (os === "iOS") {            window.location.href = "https://apps.apple.com/fr/app/teachr/id1473591330";        }
   }
   /**     * Returns the current device system used according to the user agent of the browser     */    static getMobileOperatingSystem() {        var userAgent = navigator.userAgent || navigator.vendor || window.opera;
       // Windows Phone must come first because its UA also contains "Android"        if (/windows phone/i.test(userAgent)) {            return "Windows Phone";        }
       if (/android/i.test(userAgent)) {            return "Android";        }
       // iOS detection from: http://stackoverflow.com/a/9039885/177710        if (/iPad|iPhone|iPod/.test(userAgent) && !window.MSStream) {            return "iOS";        }
       return "unknown";
   }

       render() {
       return (            <div>                {/* PRELOADER SPINNER */}                <div id="loader-wrapper">                    <div id="loader">                        <div className="cssload-spinner" />                    </div>                </div>                {/* PAGE CONTENT */}                <div id="page" className="page">                    {/* HEADER */}                    <header id="header" className="header">                        <nav className="navbar fixed-top navbar-expand-md hover-menu navbar-dark bg-tra white-scroll">                            <div className="container">                                {/* LOGO IMAGE */}                                {/* For Retina Ready displays take a image with double the amount of pixels that your image will be displayed (e.g 240 x 60 pixels) */}                                <a href="/" className="navbar-brand logo-black"><img src="images/logo.png" width={120} alt="header-logo" /></a>                                <a href="/" className="navbar-brand logo-white"><img src="images/logo-white.png" width={120} alt="header-logo" /></a>                                {/* Responsive Menu Button */}                                <button className="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarContent" aria-controls="navbarContent" aria-expanded="false" aria-label="Toggle navigation">                                    <span className="navbar-bar-icon"><i className="fas fa-bars" /></span>                                </button>                                {/* Navigation Menu */}                                <div id="navbarContent" className="collapse navbar-collapse">                                <ul className="navbar-nav ml-auto">                                        <li className="nav-item nl-simple">                                            <a className="nav-link"href="/faq">                                                FAQ                                            </a>                                        </li>                                        <li className="nav-item nl-simple">                                            <a className="nav-link" href="/who-are-we">                                                Qui sommes-nous ?                                            </a>                                        </li>                                        <li className="nav-item nl-simple">                                             <a className="nav-link" href="/web_app">                                                  Continuer vers la version web                                             </a>                                        </li>                                    </ul>
                               </div>  {/* End Navigation Menu */}                            </div>    {/* End container */}                        </nav>     {/* End navbar */}                    </header>   {/* END HEADER */}                    {/* REVIEWS PAGE HERO */}                    <div id="page-hero" className="bg-fixed page-hero-section division" />                    {/* BREADCRUMB */}                    <div id="breadcrumb" className="division">                        <div className="container">                            <div className="row">                                {/* BREADCRUMB NAV */}                                <div className="col">                                    <nav aria-label="breadcrumb">                                        <ol className="breadcrumb">                                            <li className="breadcrumb-item"><a href="/">Accueil</a></li>                                            <li className="breadcrumb-item active" aria-current="page">Télécharger</li>                                        </ol>                                    </nav>                                </div>                            </div>   {/* End row */}                        </div>  {/* End container */}                    </div>  {/* END BREADCRUMB */}                    {/* DOWNLOAD PAGE CONTENT */}                    <div id="download-page" className="download-section division">                        <div className="container">                            <div className="row">                                <div className="col-md-10 offset-md-1">                                    <div className="download-page-txt text-center">                                        {/* Icon */}                                        <div className="download-page-icon">                                            <img className="img-fluid" src="images/color-logo.png" alt="download-icon" />                                        </div>                                        {/* Text */}                                        <h2 className="h2-lg">Télécharger l'application</h2>                                        <p className="p-lg">Tous vos cours particuliers dans une seule application</p>                                        {/* Buttons Group */}                                        <div className="btns-group">                                            {/* Buttons */}                                            <a href="https://apps.apple.com/fr/app/teachr/id1473591330" target="_blank" className="btn btn-theme orange-hover mr-10">Disponible sur l'App Store</a>                                            <a href="https://play.google.com/store/apps/details?id=fr.teachr.app" target="_blank" className="btn btn-theme orange-hover">Disponible sur le Play Store</a>                                            {/* Text */}                                            <div className="btn-notice">                                                <p>Si vous n'êtes pas redirigé vers l'App Store ni le Play Store veuillez cliquer sur un des boutons ci-dessus.</p>                                            </div>                                        </div>                                    </div>                                </div>                            </div>  {/* End row */}                        </div>   {/* End container */}                    </div>  {/* END DOWNLOAD PAGE CONTENT */}                </div>
           <Footer/>
           </div>




       );
   }
}