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


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

    return (
        <SectionWrapper
            component="section"
            maxWidth="lg"
            outerContainerSx={{
                backgroundColor: theme.palette.custom.brightPurple.main,
            }}
            sx={{
                pt: upMd ? "100px" : "80px",
                pb: upMd ? "100px" : "80px",
            }}
        >
            <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: "79.3%",
                        gridRow: upMd ? "span 2" : "",
                        justifySelf: upMd ? "end" : "start",
                        mb: upMd ? undefined : "50px",
                    }}
                >
                    Сервисы  помогают предпринимателям, маркетологам и агентствам
                    сделать интернет-маркетинг прозрачным и эффективным. С нами не придется
                    тратить рекламный бюджет впустую и терять клиентов на сайте.
                </Typography>
                <Box
                    sx={{
                        display: "flex",
                        flexDirection: upMd ? "row" : "column",
                        alignItems: "start",
                        gap: upMd ? "24px" : "20px",
                    }}
                >
                    <CustomButton
                        variant="outlined"
                    >Подробнее</CustomButton>
                    <CustomButton
                        variant="contained"
                    >Подробнее</CustomButton>
                </Box>
            </Box>
        </SectionWrapper >
    );
}