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));
    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' : 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>
            <BoxSpan
                sx={{
                    display: 'flex',
                    justifyContent: 'end',
                }}
            >
                <Box
                    sx={{
                        display: isMobile ? "none" : "flex",
                        minHeight: '139px',
                        maxWidth: '460px',
                    }}
                >
                    <Typography color={'#FFFFFF'} fontSize={'18px'}>
                        Сервисы помогают предпринимателям, маркетологам и агентствам сделать
                        интернет-маркетинг прозрачным и эффективным. С нами не придется тратить
                        рекламный бюджет впустую и терять клиентов на сайте.
                    </Typography>
                </Box>
            </BoxSpan>
        </SectionStyled>
    )
}