import React from 'react';
import "./style.css"


const Project = ({imgSrc, alt, title, text}) =>
    <div className="project">
        <div className="prjct-img">
            <img src={imgSrc} alt={alt} />
        </div>
        <div className="project-txt">
            <p className="project-title">{title}</p>
            <p className="project-txt">{text}</p>
        </div>
    </div>

const Arr = [
    {
        isPartView : true,
        src: "./img/puzzle.png"
    },
    {
        isPartView : false,
        src: "./img/dark-lap.png",
        src2: "./img/view.png"
    },
    {
        isPartView : true,
        src: "./img/puzzle.png"
    },
    {
        isPartView : true,
        src: "./img/laptop.png"
    },
    {
        isPartView : true,
        src: "./img/puzzle.png"
    },
    {
        isPartView : true,
        src: "./img/laptop.png" 
    },
    {
        isPartView : true,
        src: "./img/puzzle.png"
    },
    {
        isPartView : true,
        src: "./img/laptop.png"
    },
]

const Puzzle = ({src, alt, isPartView, src2}) => isPartView ?
    <div className="part">
        <img src={src} alt={alt} />
    </div> : <div className="part view">
                    <img src={src} alt={alt} className="dark-lap" />
                    <img src={src2} className="eye" alt={alt} />
                </div>

const Micro = ({src, alt}) =>
                <img className="micr-img" src={src} alt={alt} />
           
const Vk = ({src, alt}) =>
    <div>
        <img src={src} alt={alt} />
    </div>
const App = () => {
    return (
        <>
        
        
            <div className="header-bg">
                <div className="header container">
                    <div className="left">
                        <img src="img/WD.png" alt="logo" />
                    </div>
                    <div className="right">
                        <input className="check" type="checkbox" id="burger" />
                        <label htmlFor="burger" className="burger">
                            <span></span>
                        </label>
                        <li className="nav">
                            <ul className="nav-text">главная</ul>
                            <ul className="nav-text"><a href="#about">об авторе</a> </ul>
                            <ul className="nav-text"><a href="#prjckt">работы</a> </ul>
                            <ul className="nav-text"><a href="#work">процесс</a> </ul>
                            <ul className="nav-text"><a href="#footer">контакты</a> </ul>
                        </li>
                    </div>
                </div>
                <div className="design container">
                    <div className="disp">
                        <img src="img/Frame.svg" alt="display" />
                    </div>
                    <div className="txt">
                        <p className="design-title">Дизайн и верстка</p>
                        <p className="design-txt">Lorem Ipsum - это текст-"рыба", часто используемый в печати и вэб-дизайне. Lorem Ipsum является стандартной "рыбой" для текстов на латинице с начала XVI века.</p>
                        <a href="#" className="btn">написать мне</a>
                    </div>
                </div>
            </div>
            <div className="about container">
                <p className="about-title" id="about">Обо мне</p>
                <p className="about-txt">Lorem Ipsum - это текст-"рыба", часто используемый в печати и вэб-дизайне. Lorem Ipsum является стандартной "рыбой" для текстов на латинице с начала XVI века.</p>
            </div>
            <div className="bg">
            <div className="project-list container" id="prjckt">
            {
                new Array(6).fill(0).map(item => <Project imgSrc="img/project.png" alt="project" title="40+" text="проектов"/>)
            }

        </div>
            </div>
            <main className="main">
                <section className="section-skill">
                    <div className="container">
                        <div className="skill-row">
                            <div className="skill-col skill-text">
                                <header className="section-header">
                                    <h1 className="title">
                                        Мои навыки
                                    </h1>
                                </header>
                                <div className="skills">
                                    <div className="skills-item">
                                        <span className="skill-title">Adobe Photoshop</span>
                                        <div className="skill-wrap">
                                            <div className="skill" style={{ width: '85%' }}> </div>
                                        </div>
                                    </div>
                                    <div className="skills-item">
                                        <span className="skill-title">Adobe Photoshop</span>
                                        <div className="skill-wrap">
                                            <div className="skill" style={{ width: '85%' }}> </div>
                                        </div>
                                    </div>
                                    <div className="skills-item">
                                        <span className="skill-title">Adobe Photoshop</span>
                                        <div className="skill-wrap">
                                            <div className="skill" style={{ width: '85%' }}> </div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                            <div className="skill-col">
                                <div className="skill-bg" style={{ backgroundImage: "url(img/Rectangle.png)" }}> </div>
                            </div>
                        </div>
                    </div>
                </section>
            </main>
            <div className="header-bg">
                <div className="work container" id="work">
                    <p className="design-title">Как я работаю</p>
                    <p className="design-txt center">Lorem Ipsum - то текст-"рыба", часто используемый в печати и вэб-дизайне. Lorem Ipsum является стандартной "рыбой" для текстов на латинице с начала XVI века.</p>
                    <div className="video">
                        <img src="img/video.png" className="video-bg" alt="video" />
                        <img src="img/triangle.png" className="video-triangle" alt="triangle" />
                    </div>
                </div>
            </div>
            <div className="puzzle">
            {
                Arr.map(item => <Puzzle src={item.src} alt="puzzle" src2={item.src2} isPartView={item.isPartView} />)
            }
            
        </div>
            <div className="microsoft container">
                {
                new Array(4).fill(0).map(item =><Micro src="img/microsoft.png" alt="microsoft" />)
            }
            </div>
            <div className="header-bg">
                <div className="container">
                    <div className="textar">
                        <p className="design-title">Хотите веб-сайт?</p>
                        <p className="design-txt center">Lorem Ipsum - это текст-"рыба", часто используемый в печати и вэб-дизайне. Lorem Ipsum является стандартной "рыбой" для текстов на латинице с начала XVI века.</p>
                    </div>
                    <div className="cont">
                        <div className="text-top">
                            <input type="text" name="username" className="inp" placeholder="Ваше имя" />
                            <input type="text" name="e-mail" className="inp" placeholder="Ваш e-mail" />
                        </div>
                        <div className="text-bot">
                            <input type="text" name="Message" className="inp-bot" placeholder="Сообщение" />
                        </div>
                        <a href="#" className="btn mid">отправить</a>
                    </div>
                </div>
            </div>
            <div className="bg">
                <div className="container footer" id="footer">
                    <div className="bot-left">
                        <p className="bot-title">Иванов Иван</p>
                        <p className="bot-txt">(с) 2018. Все права защищены.</p>
                    </div>
                    <div className="bot-right">
                        {
                            new Array(3).fill(0).map(item =><Vk src="./img/vk.png" alt="microsoft"/>)
                        }
                    </div>
                </div>
            </div>
            
        </>
    );
}

export default App;