import Info from '/view/block/info/Info.jsx';
import Button from '/view/cmp/button/Button.jsx';
import Arr from '/svg/arr.svg';
import './welcomePage.scss';

const WelcomePage = D.declare('view.page.WelcomePage', () =>
    <div class="welcome-page">
        <div class="welcome-page__wrapper">
            <Info
                img={
                    <picture>
                        <source srcset="/uploads/images/assistant-welcome-mob.svg" media={"(max-width: 767px)"}/>
                        <img src="/uploads/images/assistant-welcome.svg" width="450" height="360" alt={"Изображение помощника"}/>
                    </picture>
                    }
                buttons={
                    <Button class={"button button--primary welcome-page__button"} type={"button"}>
                        <span>Продолжить</span><Arr width="17" height="11"/>
                    </Button>
                }>
                <div className="welcome-page__message">
                    <h1 className="welcome-page__title">Добро пожаловать!</h1>
                    <div className="welcome-page__text">
                        <p>Текст про портал и&nbsp;приветственное сообщение.</p>
                        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do&nbsp;eiusmod tempor incididunt ut&nbsp;labore et&nbsp;dolore magna aliqua. Ut&nbsp;enim ad&nbsp;minim veniam, quis nostrud exercitation ullamco laboris nisi ut&nbsp;aliquip ex&nbsp;ea&nbsp;commodo consequat. Duis aute irure dolor in&nbsp;reprehenderit in&nbsp;voluptate velit esse cillum dolore eu&nbsp;fugiat nulla pariatur.</p>
                    </div>
                </div>
            </Info>
            <Info
                img={
                    <picture>
                        <source srcset="/uploads/images/assistant-final-mob.svg" media={"(max-width: 767px)"}/>
                        <img src="/uploads/images/assistant-final.svg" width="450" height="360" alt={"Изображение помощника"}/>
                    </picture>
                }
                buttons={[
                    <Button class={"button button--bordered welcome-page__button"} type={"button"}>
                        <span>Сначала потренироваться</span>
                    </Button>,
                    <Button class={"button button--primary welcome-page__button"} type={"button"}>
                        <span>Начать тестирование</span><Arr width="17" height="11"/>
                    </Button>
                ]}>
                <div className="welcome-page__message">
                    <h1 className="welcome-page__title">Добро пожаловать в&nbsp;итоговое тестирование!</h1>
                    <div className="welcome-page__text">
                        <p>Текст про тестирование и&nbsp;его правила. Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do&nbsp;eiusmod tempor incididunt ut&nbsp;labore et&nbsp;dolore magna aliqua.</p>
                        <p class="welcome-page__date">Тестирование проходит в&nbsp;период: <time>25.08-30.08</time></p>
                    </div>
                </div>
            </Info>
            <Info
                img={
                    <picture>
                        <source srcset="/uploads/images/assistant-top-mob.svg" media={"(max-width: 767px)"}/>
                        <img src="/uploads/images/assistant-top.svg" width="450" height="360" alt={"Изображение помощника"}/>
                    </picture>
                }
                buttons={[
                    <Button class={"button button--bordered welcome-page__button"} type={"button"}>
                        <span>Посмотреть мои ответы</span>
                    </Button>,
                    <Button class={"button button--primary welcome-page__button"} type={"button"}>
                        <span>Завершить тестирование</span><Arr width="17" height="11"/>
                    </Button>
                ]}>
                <div className="welcome-page__message welcome-page__message--result welcome-page__message--top">
                    <h1 className="welcome-page__title"><em>Поздравляем!</em> <br></br>Вы вошли в ТОП лучших ответов!</h1>
                    <div className="welcome-page__text">
                        <p>Ваш результат: <span class="welcome-page__result">98<sup>%</sup></span></p>
                        <p>Вы верно ответили на <em>19</em> вопросов из 20.</p>
                        <p><b>ТОП лучших ответов означает, что в&nbsp;следующем тестировании вам нужно будет ответить на&nbsp;меньшее количество вопросов. Отличная работа! Мы&nbsp;гордимся вами!</b></p>
                    </div>
                </div>
            </Info>
            <Info
                img={
                    <picture>
                        <source srcset="/uploads/images/assistant-fail-mob.svg" media={"(max-width: 767px)"}/>
                        <img src="/uploads/images/assistant-fail.svg" width="450" height="360" alt={"Изображение помощника"}/>
                    </picture>
                }
                buttons={[
                    <Button class={"button button--bordered welcome-page__button"} type={"button"}>
                        <span>Посмотреть мои ответы</span>
                    </Button>,
                    <Button class={"button button--primary welcome-page__button"} type={"button"}>
                        <span>Завершить тестирование</span><Arr width="17" height="11"/>
                    </Button>
                ]}>
                <div className="welcome-page__message welcome-page__message--result welcome-page__message--fail">
                    <h1 className="welcome-page__title">Тестирование завершено</h1>
                    <div className="welcome-page__text">
                        <p>Ваш результат: <span class="welcome-page__result">55<sup>%</sup></span></p>
                        <p>Вы верно ответили на <em>9</em> вопросов из 20.</p>
                        <p><b>К&nbsp;сожалению, это очень низкий результат. Мы&nbsp;верим, что вы&nbsp;можете лучше! При подготовке к&nbsp;следующему тестированию, попробуйте потренироваться на&nbsp;пробном тесте или почитать нашу базу знаний.</b></p>
                    </div>
                </div>
            </Info>
            <Info
                img={
                    <picture>
                        <source srcset="/uploads/images/assistant-success-mob.svg" media={"(max-width: 767px)"}/>
                        <img src="/uploads/images/assistant-success.svg" width="450" height="360" alt={"Изображение помощника"}/>
                    </picture>
                }
                buttons={[
                    <Button class={"button button--bordered welcome-page__button"} type={"button"}>
                        <span>Посмотреть мои ответы</span>
                    </Button>,
                    <Button class={"button button--primary welcome-page__button"} type={"button"}>
                        <span>Завершить тестирование</span><Arr width="17" height="11"/>
                    </Button>
                ]}>
                <div className="welcome-page__message welcome-page__message--result welcome-page__message--success">
                    <h1 className="welcome-page__title"><em>Поздравляем!</em> <br></br>Вы завершили тестирование!</h1>
                    <div className="welcome-page__text">
                        <p>Ваш результат: <span class="welcome-page__result">80<sup>%</sup></span></p>
                        <p>Вы верно ответили на <em>16</em> вопросов из 20.</p>
                    </div>
                </div>
            </Info>
            <Info
                img={
                    <picture>
                        <source srcset="/uploads/images/assistant-warning-mob.svg" media={"(max-width: 767px)"}/>
                        <img src="/uploads/images/assistant-warning.svg" width="450" height="360" alt={"Изображение помощника"}/>
                    </picture>
                }
                buttons={[
                    <Button class={"button button--primary welcome-page__button welcome-page__button--wide"} type={"button"}>
                        <span>Я готов! Начать</span><Arr width="17" height="11"/>
                    </Button>
                ]}>
                <div className="welcome-page__message welcome-page__message--warning">
                    <h1 className="welcome-page__title"><em>Внимание!</em> Тестирование  невозможно прервать</h1>
                    <div className="welcome-page__text">
                        <p>Это последнее предупреждение. Вы&nbsp;уверены, что&nbsp;готовы начать?</p>
                    </div>
                </div>
            </Info>
            <Info
                img={
                    <picture>
                        <source srcset="/uploads/images/assistant-activate-mob.svg" media={"(max-width: 767px)"}/>
                        <img src="/uploads/images/assistant-activate.svg" width="450" height="360" alt={"Изображение помощника"}/>
                    </picture>
                }
                buttons={
                    <Button class={"button button--primary welcome-page__button  welcome-page__button--wide"} type={"button"}>
                        <span>Продолжить</span><Arr width="17" height="11"/>
                    </Button>
                }>
                <div className="welcome-page__message welcome-page__message--warning">
                    <h1 className="welcome-page__title"><em>Внимание!</em> Тестирование не&nbsp;активировано</h1>
                    <div className="welcome-page__text">
                        <p>Текст про&nbsp;то, что тестирование еще не&nbsp;активировано. СТА&nbsp;&mdash; потренироваться на&nbsp;пробном тестировании. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi lacinia augue quam, in&nbsp;dapibus nulla ullamcorper nec. Mauris ac&nbsp;magna est.</p>
                    </div>
                </div>
            </Info>
            <Info
                img={
                    <picture>
                        <source srcset="/uploads/images/assistant-finished-mob.svg" media={"(max-width: 767px)"}/>
                        <img src="/uploads/images/assistant-finished.svg" width="450" height="360" alt={"Изображение помощника"}/>
                    </picture>
                }
                buttons={
                    <Button class={"button button--primary welcome-page__button  welcome-page__button--wide"} type={"button"}>
                        <span>Готово</span>
                    </Button>
                }>
                <div className="welcome-page__message">
                    <h1 className="welcome-page__title">Тестирование<br/>завершено</h1>
                    <div className="welcome-page__text">
                        <p>Спасибо за&nbsp;участие в&nbsp;тестировании! <br/>Увидимся через месяц!</p>
                    </div>
                </div>
            </Info>
            <Info
                img={
                    <picture>
                        <source srcset="/uploads/images/assistant-break-mob.svg" media={"(max-width: 767px)"}/>
                        <img src="/uploads/images/assistant-break.svg" width="450" height="360" alt={"Изображение помощника"}/>
                    </picture>
                }
                buttons={
                    <Button class={"button button--primary welcome-page__button  welcome-page__button--wide"} type={"button"}>
                        <span>Начать заново</span>
                    </Button>
                }>
                <div className="welcome-page__message">
                    <h1 className="welcome-page__title">Тестирование было прервано</h1>
                    <div className="welcome-page__text">
                        <p>Вам придется начать его заново.</p>
                        <p>Это могло произойти из-за проблем в&nbsp;соединении с&nbsp;интернетом либо из-за нажатия кнопки &laquo;назад&raquo;. Пожалуйста, убедитесь, что&nbsp;Вы находитесь в&nbsp;зоне хорошего приема и&nbsp;начните тестирование снова.</p>
                    </div>
                </div>
            </Info>
        </div>
    </div>
);
WelcomePage.route = new Route('/welcome');
export default WelcomePage;
export {WelcomePage};

