import React from "react"

import Box from "@mui/material/Box"
import Typography from "@mui/material/Typography"
import { makeStyles } from "@material-ui/core"

import HeroBg from "../assets/images/hero-bg.png"
import myTheme from "../assets/styles/myTheme"

import ContactButton from "./ContactButton"

const myPalette = myTheme.palette

const useStyles = makeStyles(() => ({
  container: {
    height: "80vh",
    width: "100%",
    paddingRight: "25px",
    display: "flex",
    flexDirection: "column",
    justifyContent: "center",
    alignItems: "flex-end",
    backgroundImage: `url(${HeroBg})`,
    position: "relative",
    backgroundSize: "cover",
    backgroundRepeat: "no-repeat",
    backgroundPosition: "center center"
  },
  highlighter: {
    color: myPalette.secondary.main
  }
}))

function Banner() {
  const classes = useStyles()

  return(
    <>
      <Box className={classes.container}>
        <Typography
          variant="h4"
          component="h2"
          align="right"
          sx={{
            width: "50%",
            mb: 4,
            color: "#ffffff"
          }}
        >
          Ayudamos a que las Empresas operen <span className={classes.highlighter}>digitalmente</span>, cumplan con las regulaciones, y <span className={classes.highlighter}>crezcan</span> sin aumentar personal
        </Typography>
        <ContactButton width="180px">
          Contáctanos
        </ContactButton>
      </Box>
    </>
  )
}

export default Banner
