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


export default function Section5() {
    const theme = useTheme();

    return (
        <SectionWrapper
            component="section"
            maxWidth="lg"
            sx={{
                backgroundColor: theme.palette.custom.brightPurple.main,
            }}
            innerSx={{
                pt: "100px",
                pb: "100px",
                px: "20px"
            }}
        >
            <Box
                sx={{
                    display: "flex",
                    justifyContent: "space-between",
                    gap: "20px",
                }}
            >
                <Box>
                    <Typography variant="h4" sx={{ mb: "62px" }}>Остались вопросы?</Typography>
                    <Box
                        sx={{
                            display: "flex",
                            justifyContent: "space-between",
                            gap: "24px",
                        }}
                    >
                        {/** extract buttons as components */}
                        <CustomButton
                            fullWidth
                            variant="outlined"
                        >Подробнее</CustomButton>
                        <CustomButton
                            fullWidth
                            variant="contained"
                        >Подробнее</CustomButton>
                    </Box>
                </Box>
                <Box
                    sx={{
                        maxWidth: "460px",
                    }}
                >
                    <Typography>Сервисы  помогают предпринимателям, маркетологам и агентствам
                        сделать интернет-маркетинг прозрачным и эффективным. С нами не придется
                        тратить рекламный бюджет впустую и терять клиентов на сайте.</Typography>
                </Box>
            </Box>
        </SectionWrapper>
    );
}