import Header from "../Header";
import styles from './style.module.scss';
import clock from '../../img/MeetPage/Clock.png';
import globe from '../../img/MeetPage/Globe.png';
import avatar from '../../img/MeetPage/avatar.png';

import Card from "../Card";
import Grid from '@mui/material/Grid';
import Box from '@mui/material/Box';


import vk from '../../img/MeetPage/Vk.png';
import tg from '../../img/MeetPage/Telegram.png';
import book from '../../img/MeetPage/Book.png';
const MeetPage = () => {

    return (
        <>
            <Header></Header>

            <section className={styles.meets}>
                <div className={styles.meets__mainInfo_container}>
                    <span className={styles.meets__mainInfo_descr}>Интерактивная лекция «Управление инжиниринговыми проектами на базе вуза»</span>
                    <span className={styles.meets__mainInfo_type}>Психология</span>
                    <div className={styles.meets__mainInfo_status}><img className={styles.meets__mainInfo_status_img} src={clock} alt="clock"></img> <span>Онлайн</span> </div>
                    <div className={styles.meets__mainInfo_time}><img className={styles.meets__mainInfo_status_img} src={globe} alt="globe"></img> <span>22 декабря, с 10:00 до 22:00 по Московскому времени</span> </div>
                </div>
                <div className={styles.meets__img}></div>
               
            </section>
            <div className={styles.container}>
              
                <div className={styles.meets__otziv_container}>
                    <div className={styles.newMeeting__container}>
                        <button className={styles.newMeeting__button}>ЗАПИСАТЬСЯ НА МЕРОПРИЯТИЕ</button>
                        <a href="#" className={styles.newMeeting__link}>Ссылка на мероприятие</a>
                        <a href="#" className={styles.newMeeting__ling_video}>СКАЧАТЬ ВИДЕО</a>
                    </div>
                    <div className={styles.meets__otziv}>
                        <span className={styles.meets__otziv_title}>Отзывы</span>
                        Оставьте первый отзыв
                    </div>
                    
                </div>
            </div>
           
            <section className={styles.aboutMeet}>
                <div className={styles.aboutMeet__title}>О мероприятии</div>
                <div className={styles.aboutMeet__descr}>Известным спикером будут продемонстрированы основные механизмы психологического воздействия в политике, а также особенности восприятия общественно-политической информации. Слушатели смогут узнать, как следует противостоять манипулятивному воздействию, фейковой информации, а также порассуждать о том, возможно ли существование мира без обмана.</div>
            </section>
            <section className={styles.expert}>
                <div className={styles.expert__title}>Специалист</div>
                <div className={styles.newContainer}>
                    <div className={styles.expert__container}>
                        <div className={styles.expert__img_container}><img className={styles.expert__img} src={avatar} alt="avatar"></img></div>

                        <div className={styles.expert__descr_container}>
                            <div className={styles.expert__descr_fullname}>Иванов Иван Иванович</div>
                            <div className={styles.expert__descr_speciality}>Психолог, таролог</div>
                            <div className={styles.expert__descr_phone}>+7 (888) 888 - 88 - 88</div>
                            <a href="#" className={styles.expert__descr_email}>exampl@ya.ru</a>
                        </div>

                    </div>     
                    <div className={styles.container__links}>
                        <div className={styles.links__title}>Ссылки на материалы специалиста</div>
                        <div className={styles.links__img_container}>
                            <a href="#"><img src={vk} className={styles.links__img}></img></a>
                            <a href="#"><img src={tg} className={styles.links__img}></img></a>
                            <a href="#"><img src={book} className={styles.links__img}></img></a>
                        </div>

                    </div>
                </div>
                
            </section>
            <section className={styles.someMeetings}>
            <div className={styles.someMeetings__title}>Еще мероприятия</div>
            <Box sx={{ flexGrow: 1 }}>
                <Grid container spacing={1}>
                <Grid item xs={6}  md={4} lg={3} >
                    <Card></Card>
                </Grid>
                <Grid item xs={6}  md={4} lg={3} >
                    <Card></Card>
                </Grid>
                <Grid item xs={6} md={4} lg={3} >
                    <Card></Card>
                </Grid>
                <Grid item xs={6}  md={4} lg={3} >
                    <Card></Card>
                </Grid>
                
                </Grid>
            </Box>
            </section>
        </>
        
    )


}
export default MeetPage;