import React from 'react';
import RoundedLink from '../../common/RoundedLink';
import Help from '../../icons/Help';
import Play from '../../icons/Play';
import PointsDesktop from './PointsDesktop';
import PointsMobile from './PointsMobile';

const HelpPage: React.FC = () => {
  return (
    <section className="help">
      <div className="pageMobileTitle">
        <Help size="medium" /> <h2>Ayuda</h2>
      </div>
      <div className="imageWrapper">
        <img alt="Ayuda" className="desktop" src="/img/help.png" />
        <img alt="Ayuda" className="mobile" src="/img/help-mobile.png" />
      </div>
      <div className="contentWrapper">
        <h2>Objetivos</h2>
        <span className="divider" />
        <p>
          Haz clic en cada anillo para acceder a las pruebas que deberás
          superar. Al completar todas las pruebas obtendrás tus puntos. Para
          conocer tu puntuación y la de tu equipo entra en la ventana
          puntuación. Por último, te mostramos la clasificación de los equipos
          en el apartado ranking.
        </p>
        <RoundedLink
          route="/infoVideo"
          title="Ver vídeo"
          rightIcon={<Play />}
        />
        <PointsDesktop />
        <PointsMobile />
      </div>
    </section>
  );
};

export default HelpPage;