import { Box, Button, Typography, useMediaQuery, useTheme } from "@mui/material";
import SectionWrapper from "@components/SectionWrapper";

export default function Section5() {
  const theme = useTheme();
  const upMd = useMediaQuery(theme.breakpoints.up("md"));
  const isTablet = useMediaQuery(theme.breakpoints.down(1000));

  return (
    <SectionWrapper
      component="section"
      maxWidth="lg"
      outerContainerSx={{
        backgroundColor: theme.palette.purple.main,
      }}
      sx={{
        pt: upMd ? "101px" : "80px",
        pb: upMd ? "100px" : "80px",
        px: isTablet ? (upMd ? "40px" : "18px") : "20px",
      }}
    >
      <Box
        sx={{
          display: "grid",
          gridTemplate: upMd ? "auto auto / 1fr 1fr" : "repeat(3, auto) / auto",
        }}
      >
        <Typography variant="h4" sx={{ mb: upMd ? "62px" : "30px" }}>
          Остались вопросы?
        </Typography>
        <Typography
          sx={{
            maxWidth: isTablet ? "100%" : "79.3%",
            gridRow: upMd ? "span 2" : "",
            justifySelf: upMd ? "end" : "start",
            mb: upMd ? undefined : "50px",
          }}
        >
          Сервисы помогают предпринимателям, маркетологам и агентствам {upMd ? <br /> : null}сделать интернет-маркетинг
          прозрачным и эффективным. С нами не придется тратить рекламный бюджет впустую и терять клиентов на сайте.
        </Typography>
        <Box
          sx={{
            display: "flex",
            flexDirection: upMd ? "row" : "column",
            alignItems: "start",
            gap: upMd ? "24px" : "20px",
          }}
        >
          <Button sx={{ width: "180px" }} variant="pena-outlined-dark">
            Подробнее
          </Button>
          <Button sx={{ width: "180px" }} variant="pena-contained-light">
            Подробнее
          </Button>
        </Box>
      </Box>
    </SectionWrapper>
  );
}