/* eslint-disable jsx-a11y/anchor-is-valid */

import React from 'react';
import PropTypes from 'prop-types';
import Button from '@material-ui/core/Button';
import Typography from '@material-ui/core/Typography';
import { withStyles } from '@material-ui/core/styles';
import Layout from "../components/templates/Layout"
import Footer from '../components/organisms/Footer';
import Link from 'next/link';
import Head from 'next/head';
import VideoVimeo from './../components/atoms/VideoVimeo';

const styles = theme => ({
  root: {
    display: 'flex',
    flexDirection: 'column',
    alignItems: 'center',
    justifyContent: 'center',
    padding: theme.spacing(2),
    [theme.breakpoints.up('sm')]: {
      margin: 'auto',
      padding: '0 20vw',
      paddingBottom: theme.spacing(5),
    },
  },
  title: {
    fontFamily: 'Dosis',
    fontSize: '1.5em',
    fontWeight: '600',
    padding: theme.spacing(3, 0),
    [theme.breakpoints.up('sm')]: {
      paddingTop: theme.spacing(6),
    },
  },
  subTitle: {
    fontSize: '1.1em',
    fontWeight: '500',
    padding: theme.spacing(2, 0),
  },
  text: {
    fontSize: '0.9em',
    fontWeight: '300',
  },
  teamworkingImg: {
    padding: theme.spacing(2, 0),
    width: '100%',
    [theme.breakpoints.up('sm')]: {
      width: 'inherit',
    },
  },
  captureImg: {
    padding: theme.spacing(2),
    width: '100%',
    objectFit: 'contain',
  },
  button: {
    textTransform: 'inherit',
    margin: theme.spacing(4,8),
    padding: theme.spacing(1.2, 2),
    borderRadius: '3px',
  },
  primary: {
    color: theme.palette.primary.main,
  },
  bold: {
    fontWeight: '500',
  },
  video: {
    display: 'flex',
        flexDirection: 'column',
        position: 'relative',
        paddingBottom: '55%', /* 16:9  58%*/
        '& iframe': {
            position: 'absolute',
            top: 0,
            left: 'calc(50% - 50vw)',
            width: '100vw',
            height: '100%',
        },
        [theme.breakpoints.up('md')]: {
            display: 'flex',
            flexDirection: 'column',
            position: 'relative',
            paddingBottom: '55%', /* 16:9 */
            '& iframe': {
                position: 'absolute',
                top: 0,
                left: 'calc(50% - 27vw)',
                width: '54vw',
                height: '100%',
            },
        },
  },

});

function Help(props) {
  const { classes } = props;

  return (
    <Layout>
    <Head>
      <title key="title">Recrutement vidéo : fonctionnement – Talents Tube</title>
      <meta key="robots" name="robots" content="noindex, nofollow"></meta>
    </Head>
      <section className={classes.root}>
        <Typography gutterBottom component="h1"
          className={classes.title}>
          Comment ça marche <span className={classes.primary}>?</span>
        </Typography>
        <Typography gutterBottom component="h2"
          className={classes.subTitle}>
          Découvrez les offres d'emploi en vidéo
        </Typography>
        <Typography
          className={classes.text}
          gutterBottom>
          Talents Tube, est la première <span className={classes.bold}>plateforme de recrutement 100% vidéo.</span> La vidéo d’offre d’emploi et la vidéo marque employeur permettent de mieux vous projeter dans l’entreprise en découvrant vos collègues, l’ambiance de travail, les missions du poste, le cadre de travail,...
        </Typography>
        <img alt="talents-tube" src='/static/images/help/image-aide-web-app.svg' className={classes.teamworkingImg} />
        <Typography gutterBottom component="h2"
          className={classes.subTitle}>
          Comment postuler à une offre d’emploi en vidéo
        </Typography>
        <VideoVimeo videoId='356411947' classesOverride={classes.video} autoplay='0'/>
        <Typography
          className={classes.text}
          gutterBottom>
          Suivez nos conseils pour postuler simplement aux offres d’emploi. La vidéo de motivation vous permet de dévoiler votre personnalité, vos compétences, votre parcours, vos valeurs, vos soft-skills, votre ambition,…. et bien plus encore.
        </Typography>
        <Typography gutterBottom component="h2"
          className={classes.subTitle}>
           Comment réussir votre CV vidéo
        </Typography>
        <Typography
          className={classes.text}
          gutterBottom>
          Suivez ce <a href="https://blog.talentstube.com/faire-cv-video" target="_blank" >lien</a>
        </Typography>

        <Typography gutterBottom component="h2"
          className={classes.subTitle}>
           Accompagnement à la création d'un CV vidéo professionnel
        </Typography>
        <Typography
          className={classes.text}
          gutterBottom>
          Suivez ce <a href="https://blog.talentstube.com/accompagnement-cv-video" target="_blank" >lien</a>
        </Typography>

        <Typography gutterBottom component="h2"
          className={classes.subTitle}>
          Pourquoi faire un CV vidéo ?
        </Typography>
        <Typography
          className={classes.text}
          gutterBottom>
          Suivez ce <a href="https://blog.talentstube.com/cv-video" target="_blank" >lien</a>
        </Typography>
       
        
      </section>
      <Footer />
    </Layout>
  );
}

Help.propTypes = {
  classes: PropTypes.object.isRequired,
};

export default withStyles(styles)(Help);
