text: import React from "react"
  import { Container } from "@bootstrap-styled/v4"
  import { StaticQuery, graphql } from "gatsby"
  import { Element, Link as ScrollLink } from "react-scroll"
  import WOW from "react-wow"
  
  import Button from "src/components/ui/Button"
  
  import * as S from "./styled"
  
  const HomeBanner = () => {
    return (
      <StaticQuery
        query={graphql`
          query {
            bgImage: file(relativePath: { eq: "backgrounds/bg-home.png" }) {
              childImageSharp {
                fluid(maxWidth: 1400) {
                  ...GatsbyImageSharpFluid
                }
              }
            }
            content: allMarkdownRemark(
              filter: { fileAbsolutePath: { regex: "/(section_home)/" } }
            ) {
              nodes {
                frontmatter {
                  title
                  description
                  servicos {
                    title
                  }
                }
              }
            }
          }
        `}
        render={data => {
          const captionTitleTexts = data.content.nodes[0].frontmatter.servicos.map(
            i => i.title
          )
  
          return (
            <Element name="section-home">
              <S.HomeBannerWrapper>
                <S.HomeBannerContent
                  fluid={data.bgImage.childImageSharp.fluid}
                  backgroundColor={`#14073a`}
                >
                  <Container
                    style={{
                      height: "100%",
                    }}
                  >
                    <S.HomeBannerCaption>
                      <WOW animation="fadeInUp">
                        <S.HomeBannerCaptionTitle>
                          {data.content.nodes[0].frontmatter.title}
                          <S.HomeBannerCaptionTitleSub
                            text={captionTitleTexts}
                            speed={200}
                            eraseDelay={1500}
                            typingDelay={200}
                          />
                        </S.HomeBannerCaptionTitle>
                      </WOW>
                      <WOW animation="fadeInLeft" delay="0.3s">
                        <S.HomeBannerCaptionDivisor />
                      </WOW>
                      <WOW animation="fadeInUp" delay="0.5s">
                        <S.HomeBannerCaptionDesc>
                          {data.content.nodes[0].frontmatter.description}
                        </S.HomeBannerCaptionDesc>
                      </WOW>
                      <WOW animation="fadeInUp" delay="0.7s">
                        <S.HomeBannerCaptionButton>
                          <ScrollLink
                            to="caption-about"
                            smooth={true}
                            offset={-150}
                          >
                            <Button color="white" variant="outline" size="lg">
                              Conheça mais
                            </Button>
                          </ScrollLink>
                        </S.HomeBannerCaptionButton>
                      </WOW>
                    </S.HomeBannerCaption>
                  </Container>
                </S.HomeBannerContent>
              </S.HomeBannerWrapper>
            </Element>
          )
        }}
      />
    )
  }
  
  export default HomeBanner
  