import React from 'react';
import Box from '@mui/material/Box';
import {Typography} from "@mui/material";
import SectionStyled from './SectionStyled';
import {styled} from "@mui/material/styles";
import YoutobeIcon from "../../assets/LandingPict/youtobeIcon";
import OneIconBorder from "@icons/OneIconBorder";
import CalendarIcon from "../../assets/LandingPict/calendarIcon";


function OnSite() {
    return(
        <Box
            sx={{
                display: 'flex',
                width: '126px',
                justifyContent: 'space-between',
                alignItems: 'center',
                padding: '0',
                flexWrap: 'wrap',
            }}
        >
            <CalendarIcon/>
            <Typography fontSize='18px'> на сайте</Typography>
        </Box>
    )
}

export default function HowItWorks () {
    return(
        <SectionStyled tag={'section'} bg={'#333647'} sxsect={{minHeight: '2375px'}} mwidth={'1160px'}
                       sxcont={{
                           padding: '232px 10px 0 10px',
                       }}
        >
            <Box color='#ffffff'
                 sx={{
                     display: 'flex',
                     justifyContent: 'space-between',
                     flexWrap: 'wrap',
                     marginBottom: '65px',
                 }}
            >
                <Box
                    sx={{
                    }}
                >
                    <Typography variant='h6' fontSize='36px' >Как это работает</Typography>
                    <Typography fontSize='18px'>Квиз как диалог</Typography>
                </Box>
                <Box
                    sx={{
                        display: "flex",
                        justifyContent: 'space-between',
                        alignItems: 'center',
                        flexWrap: 'wrap',
                    }}
                >
                    <Box width='140px' marginRight='17px'>
                        <Typography fontSize='18px'>Видео о квизах 2 мин</Typography>
                    </Box>
                    <YoutobeIcon />
                </Box>
            </Box>
            <Box
                sx={{
                    minHeight: '400px',
                    backgroundColor: '#ffffff',
                    width: '100%',
                    display: 'flex',
                    flexWrap: 'wrap',
                    alignItems: 'center',
                    borderRadius: '8px',
                    marginBottom: '107px',
                }}
            >
                <Box
                    sx={{
                        width: '50%',
                        padding: '20px',
                        minHeight: '401px',
                        display: 'flex',
                        flexDirection: 'column',
                        justifyContent: 'space-between',
                        boxSizing: "border-box"
                    }}
                >
                    <Box
                        sx={{
                            height: "36px",
                            width: "36px",
                            justifyContent: "center",
                            alignItems: "center",
                            display: "flex",
                            borderRadius: "6px",
                            background: "#EEE4FC"
                        }}
                    >
                        <OneIconBorder color={"#7E2AEA"}/>
                    </Box>
                    <Box
                        sx={{
                            minHeight: '162px',
                            justifyContent: 'flex-start',
                            display: "flex",
                            flexDirection: 'column',
                            width: "453px",
                            gap: "20px"
                        }}
                    >
                        <Typography variant='h6' fontSize='36px'>Начало диалога</Typography>
                        <Typography  fontSize='18px'>Квиз, как любезный дворецкий, в нужный момент предлагает свою помощь и начинает диалог</Typography>
                    </Box>

                    <Box
                        sx={{
                            display: 'flex',
                            flexDirection: 'column',
                            maxWidth: '427px',
                            height: '50%',
                            justifyContent: 'end',
                        }}
                    >
                        <Typography variant='h6' fontSize='20px'>квиз можно использовать</Typography>
                        <Box
                            sx={{
                                display: 'flex',
                                flexWrap: 'wrap',
                                justifyContent: 'space-between',
                                padding: '20px 20px 0 0',
                            }}
                        >
                            <OnSite/>
                            <OnSite/>
                        </Box>
                        <Box
                            sx={{
                                display: 'flex',
                                flexWrap: 'wrap',
                                justifyContent: 'space-between',
                                padding: '20px 20px 0 0',
                            }}
                        >
                            <OnSite/>
                            <OnSite/>
                        </Box>
                    </Box>
                </Box>
                <Box
                    sx={{
                        backgroundColor: '#C8DADE',
                        width: '564px',
                        height: '360px',
                        borderRadius: '12px',

                    }}
                >

                </Box>
            </Box>
            <Box
                sx={{
                    minHeight: '400px',
                    backgroundColor: '#ffffff',
                    width: '100%',
                    display: 'flex',
                    alignItems: 'center',
                    borderRadius: '8px',
                    marginBottom: '107px',
                    flexWrap: 'wrap',
                    boxSizing: "border-box"
                }}
            >
                <Box
                    sx={{
                        width: '50%',
                        minHeight: '401px',
                        display: 'flex',
                        flexDirection: 'column',
                        justifyContent: 'space-between',
                        padding: '20px',
                        boxSizing: "border-box"

                    }}
                >
                    <Box
                        sx={{
                            height: "36px",
                            width: "36px",
                            justifyContent: "center",
                            alignItems: "center",
                            display: "flex",
                            borderRadius: "6px",
                            background: "#EEE4FC"
                        }}
                    >
                        <OneIconBorder color={"#7E2AEA"}/>
                    </Box>

                    <Box
                        sx={{
                            minHeight: '40%',
                            display: 'flex',
                            justifyContent: 'space-around',
                            flexDirection: 'column',
                            marginBottom: '90px',
                            gap: "20px"
                        }}
                    >
                        <Typography variant='h6' fontSize='calc(27px + 6 * (100vw / 1160))'>
                            Задаем вопросы
                        </Typography>
                        <Typography  fontSize='18px' maxWidth='444px'>
                            Забота заключается в том, чтобы интересоваться желаниями посетителя, задавать уточняющие вопросы и помогать делать правильный выбор
                        </Typography>
                    </Box>

                    <Box
                        sx={{
                            display: 'flex',
                            flexDirection: 'column',
                            maxWidth: '427px',
                            height: '50%',
                            justifyContent: 'end',
                        }}
                    >
                        <Typography variant='h6' fontSize='20px'>10 форматов вопроса</Typography>
                        <Box
                            sx={{
                                display: "flex",
                                flexWrap: 'wrap',
                                justifyContent: 'space-between',
                                width: '74%',
                                marginTop: '15px',
                            }}
                        >
                            <CalendarIcon/>
                            <CalendarIcon/>
                            <CalendarIcon/>
                            <CalendarIcon/>
                            <CalendarIcon/>
                            <CalendarIcon/>
                        </Box>
                    </Box>
                </Box>
                <Box
                    sx={{
                        backgroundColor: '#C8DADE',
                        width: '564px',
                        height: '360px',
                        borderRadius: '12px',
                    }}
                > </Box>
            </Box>
            <Box
                sx={{
                    minHeight: '400px',
                    backgroundColor: '#ffffff',
                    width: '100%',
                    display: 'flex',
                    alignItems: 'center',
                    borderRadius: '8px',
                    marginBottom: '107px',
                    flexWrap: 'wrap',
                    boxSizing: "border-box"
                }}
            >
                <Box
                    sx={{
                        width: '50%',
                        height: '100%',
                        padding: '20px',
                        gap: "10px",
                        display: "flex",
                        flexDirection: "column",
                        boxSizing: "border-box"
                    }}
                >
                    <Box
                        sx={{
                            height: "36px",
                            width: "36px",
                            justifyContent: "center",
                            alignItems: "center",
                            display: "flex",
                            borderRadius: "6px",
                            background: "#EEE4FC"
                        }}
                    >
                        <OneIconBorder color={"#7E2AEA"}/>
                    </Box>
                    <Box
                        sx={{
                            minHeight: '40%',
                            justifyContent: 'space-around',
                            display: "flex",
                            flexDirection: 'column',
                            maxWidth: '388px',
                            gap: "20px"
                        }}
                    >
                        <Typography variant='h6' fontSize='36px' lineHeight='normal'>Показываем рекомендацию</Typography>
                        <Typography  fontSize='18px'>На основе ответов мы подбираем наиболее подходящие товары или услуги</Typography>
                    </Box>

                    <Box
                        sx={{
                            display: 'flex',
                            flexDirection: 'column',
                            maxWidth: '427px',
                            minHeight: '50%',
                            justifyContent: 'end',
                        }}
                    >
                        <Typography variant='h6' fontSize='20px'>точный показ результатов</Typography>
                        <Box
                            sx={{
                                display: 'flex',
                                justifyContent: 'space-between',
                                padding: '20px 20px 0 0',
                            }}
                        >
                            <OnSite/>
                            <OnSite/>
                        </Box>
                        <Box
                            sx={{
                                display: 'flex',
                                justifyContent: 'space-between',
                                padding: '20px 20px 0 0',
                            }}
                        >
                            <OnSite/>
                            <OnSite/>
                        </Box>

                    </Box>
                </Box>
                <Box
                    sx={{
                        backgroundColor: '#C8DADE',
                        width: '564px',
                        height: '360px',
                        boxSizing: "border-box",
                        borderRadius: '12px',
                    }}
                > </Box>
            </Box>
            <Box
                sx={{
                    minHeight: '400px',
                    backgroundColor: '#ffffff',
                    width: '100%',
                    display: 'flex',
                    alignItems: 'center',
                    borderRadius: '8px',
                    marginBottom: '126px',
                    flexWrap: 'wrap',
                    boxSizing: "border-box"
                }}
            >
                <Box
                    sx={{
                        width: '50%',
                        height: '100%',
                        padding: '20px',
                        boxSizing: "border-box"

                    }}
                >
                    <Box
                        sx={{
                            height: "36px",
                            width: "36px",
                            justifyContent: "center",
                            alignItems: "center",
                            display: "flex",
                            borderRadius: "6px",
                            background: "#EEE4FC",
                        }}
                    >
                        <OneIconBorder color={"#7E2AEA"}/>
                    </Box>
                    <Box
                        sx={{
                            minHeight: '40%',
                            justifyContent: 'space-around',
                            display: "flex",
                            flexDirection: 'column',
                            maxWidth: '457px',
                        }}
                    >
                        <Typography variant='h6' fontSize='calc(27px + 6 * (100vw / 1160))'>Узнаем контакт</Typography>
                        <Typography fontSize='18px'>Только в конце диалога спрашиваем контакты. Здесь посетитель уже знает, что вы позаботились предложить ему то, что надо и с большей вероятностью оставит заявку</Typography>
                    </Box>

                    <Box
                        sx={{
                            display: 'flex',
                            flexDirection: 'column',
                            maxWidth: '427px',
                            height: '50%',
                            justifyContent: 'end',
                        }}
                    >
                        <Typography variant='h6' fontSize='20px'>что можно делать на последнем шаге</Typography>
                        <Box
                            sx={{
                                display: 'flex',
                                justifyContent: 'space-between',
                                padding: '20px 20px 0 0',
                            }}
                        >
                            <OnSite/>
                            <OnSite/>
                        </Box>
                        <Box
                            sx={{
                                display: 'flex',
                                justifyContent: 'space-between',
                                padding: '20px 20px 0 0',
                            }}
                        >
                            <OnSite/>
                            <OnSite/>
                        </Box>

                    </Box>
                </Box>
                <Box
                    sx={{
                        backgroundColor: '#C8DADE',
                        width: '564px',
                        height: '360px',

                        borderRadius: '12px',
                    }}
                > </Box>
            </Box>
        </SectionStyled>
    )

}