import React from "react";
import Box from "@mui/material/Box";
import Typography from "@mui/material/Typography";
import Button from "@mui/material/Button";
import SectionStyled from "./SectionStyled";
import { styled } from "@mui/material/styles";
import { useMediaQuery, useTheme } from "@mui/material";

// const BoxSpan = styled('div')(({ theme }) => ({
//     [theme.breakpoints.down('lg')]: {
//         alignItems: 'center',
//         justifyContent: 'center',
//         textAlign: 'center',
//         paddingTop: '20px',
//         width: '100%',
//     },
// }));

const BoxButtons = styled("div")(({ theme }) => ({
  [theme.breakpoints.down("xs")]: {
    justifyContent: "center",
  },
}));

export default function Component() {
  const theme = useTheme();
  const isMobile = useMediaQuery(theme.breakpoints.down(600));
  const isTablet = useMediaQuery(theme.breakpoints.down(1000));
  return (
    <SectionStyled
      tag={"section"}
      bg={"#7E2AEA"}
      mwidth={"1160px"}
      sxsect={{
        minHeight: "350px",
      }}
      sxcont={{
        display: "flex",
        flexWrap: "wrap",
        justifyContent: "space-between",
        alignItems: "center",
        padding: isMobile ? "85px 16px 50px 16px" : isTablet ? "0 40px" : 0,
      }}
    >
      <Box
        sx={{
          display: "flex",
          flexDirection: "column",
        }}
      >
        <Typography
          variant="h1"
          color={"#FFFFFF"}
          sx={{
            fontSize: isMobile ? "24px" : "36px",
            fontWeight: "500",
            lineHeight: "43px",
          }}
        >
          Остались вопросы?
        </Typography>
        {isMobile && (
          <Typography color={"#FFFFFF"} fontSize={"18px"} marginTop={"20px"}>
            Сервисы помогают предпринимателям, маркетологам и агентствам сделать
            интернет-маркетинг прозрачным и эффективным. С нами не придется
            тратить рекламный бюджет впустую и терять клиентов на сайте.
          </Typography>
        )}
        <BoxButtons
          sx={{
            display: "flex",
            flexWrap: "wrap",
            paddingTop: "25px",
          }}
        >
          <Button
            variant="outlined"
            sx={{
              width: "180px",
              marginTop: isMobile ? "25px" : "40px",
              border: "1px solid #ffffff",
              color: "#ffffff",
              backgroundColor: "transparent",
              textTransform: "none",
              fontWeight: "400",
              fontSize: "18px",
              lineHeight: "24px",
              padding: "10px 40px",
              borderRadius: "8px",
            }}
          >
            Подробнее
          </Button>
          <Button
            variant="contained"
            sx={{
              width: "180px",
              marginTop: isMobile ? "20px" : "40px",
              marginLeft: isMobile ? 0 : "22px",
              backgroundColor: "#FFFFFF",
              color: "#252734",
              textTransform: "none",
              fontWeight: "400",
              fontSize: "18px",
              lineHeight: "24px",
              padding: "10px 40px",
              borderRadius: "8px",
            }}
          >
            Подробнее
          </Button>
        </BoxButtons>
      </Box>
      <Box
        sx={{
          display: "flex",
          justifyContent: "end",
        }}
      >
        <Box
          sx={{
            display: isMobile ? "none" : "flex",
            minHeight: "139px",
            maxWidth: "460px",
          }}
        >
          <Typography color={"#FFFFFF"} fontSize={"18px"}>
            Сервисы помогают предпринимателям, маркетологам и агентствам сделать
            интернет-маркетинг прозрачным и эффективным. С нами не придется
            тратить рекламный бюджет впустую и терять клиентов на сайте.
          </Typography>
        </Box>
      </Box>
    </SectionStyled>
  );
}