/*Copyright (C) 2019 Centro de Computacao Cientifica e Software Livre
Departamento de Informatica - Universidade Federal do Parana

This file is part of Plataforma Integrada MEC.

Plataforma Integrada MEC is free software: you can redistribute it and/or modify
it under the terms of the GNU Affero General Public License as published by
the Free Software Foundation, either version 3 of the License, or
(at your option) any later version.

Plataforma Integrada MEC is distributed in the hope that it will be useful,
but WITHOUT ANY WARRANTY; without even the implied warranty of
MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
GNU Affero General Public License for more details.

You should have received a copy of the GNU Affero General Public License
along with Plataforma Integrada MEC.  If not, see <http://www.gnu.org/licenses/>.*/


import React, { Component } from 'react';
import ReactDOM from 'react-dom';
import "react-responsive-carousel/lib/styles/carousel.min.css";
import { Carousel } from 'react-responsive-carousel';
import styled from 'styled-components';


import Img1 from '../img/carousel/Icone_Grande (1).png'
import Img2 from '../img/carousel/Icone_Grande (2).png'
import Img3 from '../img/carousel/Icone_Grande (3).png'
import Img4 from '../img/carousel/Icone_Grande (4).png'
import Img5 from '../img/carousel/Icone_Grande (5).png'

const CarouselAbout = styled(Carousel)`

  .carousel.carousel-slider .control-arrow {
    font-size: 18px !important;
    bottom: 40% !important;
  }

  .carousel .thumb{
    border-radius: 50%;
    width:62px;
    filter: grayscale(1);
  }

  .carousel .thumb.selected, .carousel .thumb:hover {
    border: 2px solid #a4a4a4 !important;
    filter:grayscale(0);
  }


  div {
    color: #666 !important;
    text-align: center !important;

    img {
      height: 52px;
      width: 52px !important;
      display: block;
      margin: auto;

    }
    span {
      font-size: 26px;
      font-weight: 400;
      margin-bottom: 10px;
    }
    p {
      font-size: 15px;
      line-height: 1.42857143;
      text-align: center;
      display: block;
      margin: auto;
      padding-inline: 235px
    }
  }
`



function AboutCarousel(props) {

  return (
    <CarouselAbout showThumbs= {true}
              showStatus= {false}
              showIndicators = {false}
              interval={8000}
              transitionTime={1000}
              autoPlay
              infiniteLoop

    >
      <div>
        <img src={Img1} alt="Slide 1"/>
        <span>Buscar e Baixar Recursos</span>
        <p>São mais de 20 mil recursos educacionais à sua disposição. São recursos de portais parceiros do MEC e de professores que, como você, atuam na Educação Básica!</p>
      </div>
      <div>
        <img src={Img2} alt="Slide 2"/>
        <span>Guardar Recursos em Coleções</span>
        <p>Guarde e organize em coleções aqueles recursos que você considera ser interessantes para elaborar a sua aula. Aproveite e indique aos colegas pelas redes sociais ou e-mail.</p>
      </div>
      <div>
      <img src={Img3} alt="Slide 3"/>

      <span>Compartilhar suas Experiências</span>
      <p>Você pode relatar suas experiências sobre o uso de recursos no seu cotidiano escolar. Aproveite esse espaço para sugerir e conhecer novos usos para um mesmo recurso.</p>

      </div>
      <div>
        <img src={Img4} alt="Slide 4"/>

        <span>Publicar o seu Recurso</span>
        <p>Colabore e ajude a fortalecer a plataforma publicando um recurso educacional desenvolvido por você ou pelo coletivo da escola do qual faz parte. Compartilhe seu conhecimento e dê visibilidade ao seu recurso, torne-o público enriquecendo o conhecimento partilhado!</p>


      </div>
      <div>
        <img src={Img5} alt="Slide 5"/>

        <span>Encontrar Materiais de Formação</span>
        <p>A plataforma disponibiliza um conjunto de materiais de formação desenvolvidos pelo Ministério da Educação com diversidade de temas e recursos educacionais.</p>


      </div>
    </CarouselAbout>

  );
}

export default AboutCarousel;