import React from 'react';
import Box from '@mui/material/Box';
import {Typography} from "@mui/material";
import { styled } from '@mui/material/styles';

const Root = styled('section')(({ theme }) => ({
    [theme.breakpoints.down('md')]: {
        height: 'auto',
    },
}));

export default function Counter() {
    return(
        <Root
            sx={{

                width: '100%',
                fontFamily: 'Rubik',
                display: 'flex',
                justifyContent: 'center',
                alignItems: 'center',
                height: 0,
            }}
        >
            <Box
                sx={{
                    maxWidth: '1160px',
                    height: '190px',
                    display: 'flex',
                    justifyContent: 'space-between',
                    alignItems: 'center',
                    flexWrap: 'wrap',
                    backgroundColor: '#7E2AEA',
                    color: '#ffffff',
                    borderRadius: '8px',
                    boxSizing: "border-box",
                    padding: '30px 60px 30px 20px',
                    width: '100%',
                    marginTop: "106px"
                }}
            >
                <Box
                    sx={{
                        width: '203px',
                    }}
                >
                    <Typography variant='h3' fontSize={'50px'} fontWeight={'500'}>14 дней</Typography>
                    <Typography> бесплатно, полный функционал</Typography>
                </Box>
                <Box>
                    <Typography variant='h3' fontSize={'50px'} fontWeight={'500'}>10 мин</Typography>
                    <Box
                        sx={{
                            width: '131px',
                        }}
                    >
                        <Typography >для создания квиза</Typography>
                    </Box>
                </Box>
                <Box>
                    <Typography variant='h3' fontSize={'50px'} fontWeight={'500'}>482 800</Typography>
                    <Box
                        sx={{
                            width: '200px',
                        }}
                    >
                        <Typography >квизов создано клиентами</Typography>
                    </Box>
                </Box>
                <Box
                    sx={{
                        width: '177px',
                    }}
                >
                    <Typography variant='h3' fontWeight={'500'}>76</Typography>
                    <Typography>готовых шаблонов для разных ниш</Typography>
                </Box>
            </Box>
        </Root>
    )
}