import './App.css';
import logo from './image/WD.svg';
import frame from './image/Frame.svg';
import group from './image/Group.svg';
import video from './image/video.png';
import play from './image/Play.svg';
import paper from './image/img-03.png';
import notebook from './image/img-04.png';
import microsoft from './image/Microsoft.png';
import vk from './image/VK.svg';
import men from './image/men_photo.jpg';


const HeaderItem = ({children ='ГЛАВНАЯ', url='#'}) => 
        <li className="header-item">
        <a href={url} className="header-item">{children}</a>
        </li>

const Header = () =>
  <header className="header">
        <div className="container">
          <div className="header-wrap">
            <a href="#" className="logo">
              <img src={logo} alt="image description" />
            </a>
            <nav className="nav">
              <input type="checkbox" id="burger" className="burger-checkbox" />
              <label for="burger" className="burger">
                <span></span>
              </label>
              <ul className="header-list">
                <HeaderItem/>
                <HeaderItem>ОБ АВТОРЕ</HeaderItem>
                <HeaderItem>РАБОТЫ</HeaderItem>
                <HeaderItem>ПРОЦЕСС</HeaderItem>
                <HeaderItem>КОНТАКТЫ</HeaderItem>
              </ul>
            </nav>
          </div>
        </div>
  </header>
      
const SectionBanner = () =>
  
      <div className="section-banner">
          <div className="container">
            <div className="banner-wrap">
              <div className="col col--img">
                <img src={frame} alt="image description" />
              </div>
              <div className="col col--description">
                <header className="section-header">
                  <h1 className="title">Дизайн и верстка</h1>
                </header>
                <div className="holder">
                  <p>
                    Lorem Ipsum - это текст-"рыба", часто используемый в печати
                    и вэб-дизайне. Lorem Ipsum является стандартной "рыбой" для
                    текстов на латинице с начала XVI века.
                  </p>
                </div>
                <a href="#" className="btn">НАПИСАТЬ МНЕ</a>
              </div>
            </div>
          </div>
  </div>

const Article = ({children='Обо мне', text_p}) => 
  <div class="about-me-text">
              <header class="about-me-header">
                <h2 class="title">{children}</h2>
              </header>
              <p>
              {text_p}
            </p>
            </div>

const SectionAboutMe = () =>  
        <section className="section-about-me">
          <div className="container">
           <Article text_p={'Lorem Ipsum - это текст-"рыба", часто используемый в печати и вэб-дизайне. Lorem Ipsum является стандартной "рыбой" для текстов на латинице с начала XVI века.'}/>
            </div>
        </section>  

const ProjectCol = ({children='#', quantity='40+', project_name='проектов'}) =>
              <div className="project-col">
                  <div className="project-image">
                  <a href={children} target="_blank">
                  <img src={group} alt="image description" />
                  </a>  
                  </div>              
                <div className="project-description">
                  <p>{quantity}</p>
                  <p>{project_name}</p>
                </div>
              </div>

const SectionProjects = () =>
<section className="section-projects">
          <div className="container">
            <div className="projects-wrap">
        <ProjectCol />
        <ProjectCol />
        <ProjectCol />
        <ProjectCol />
        <ProjectCol />
        <ProjectCol />
            </div>
          </div>
  </section>

const SkillsThis = ({children='Adobe Photoshop'}) =>
          <div className="skill-this">
            <span className="skill-label">{children}</span>
            <div className="skill-loader">
              <div className="skill-load" style="width: 75%"></div>
            </div>
          </div>  

const SectionSkill = () => 
<section className="section-skill">
          <div className="container">
            <div className="skill-row">
              <div className="skill-col skill-descr">
                <header className="section-header">
                  <h2 className="title">Мои навыки</h2>
                </header>
                <div className="skill-box">
                  <SkillsThis/>
                  <SkillsThis/>
                  <SkillsThis/>
                </div>
              </div>
              <div className="skill-col skill-img"
              ></div>
            </div>
          </div>
  </section>
        
const SectionVideo = () =>
  <section className="section-video">
          <div className="container">
            <div className="video-wrap">
              <Article text_p={'Lorem Ipsum - это текст-"рыба", часто используемый в печати и вэб-дизайне. Lorem Ipsum является стандартной "рыбой" для текстов на латинице с начала XVI века.'}> Как я работаю </Article>
              <div className="video-img">
                <img src={video} alt="image desription" />
                <div className="video-play">
                  <a href="#">
                    <img src={play} alt="image description"
                  /></a>
                </div>
              </div>
            </div>
          </div>
  </section> 

const PaperImg = () =>
          <a    
    href="#"
    target="_blank"
    className="col"
    style={{ backgroundImage: `url(${paper})` }}
  ></a>
          
  const NotebookImg = () =>
          <a    
            href="#"
            target="_blank"
            className="col"
    style={{ backgroundImage: `url(${notebook})`}}
          ></a>

const SectionGallery = () =>  
<section className="section-gallery">
          <div className="row">
            <PaperImg/>
            <NotebookImg/>
            <PaperImg/>
            <NotebookImg/>
            <NotebookImg/>
            <PaperImg/>
            <NotebookImg/>
            <PaperImg/>
          </div>
  </section>  

const MicrosoftImg = () =>
        <div className="microsoft-img">
          <a href="#" target="_blank">
            <img src={microsoft} alt="image description"
          /></a>
        </div>

const SectionMicrosoft = () =>  
  <section className="section-microsoft">
    <div className="container">
      <div className="microsoft-wrap">
        <MicrosoftImg/>
        <MicrosoftImg/>
        <MicrosoftImg/>
        <MicrosoftImg/>
      </div>
    </div>
  </section>

const SectionForm = () =>
  <section className="section-form">
          <div className="container">
            <div className="form-wrap">
              <Article text_p={'Lorem Ipsum - это текст-"рыба", часто используемый в печати и вэб-дизайне. Lorem Ipsum является стандартной "рыбой" для текстов на латинице с начала XVI века.'}> Хотите вэб-сайт? </Article>
              <form action="#" className="form">
                <div className="form-contacts">
                  <input
                    type="text"
                    name=""
                    id="name"
                    placeholder="Ваше имя"
                  />
                  <input
                    type="email"
                    name=""
                    id="email"
                    placeholder="Ваш e-mail"
                  />
                </div>
                <textarea
                  className="form-message"
                  placeholder="Сообщение"
                  name=""
                  id=""
                  cols="30"
                  rows="10"
                ></textarea>
                <div className="form-btn">
                <button href="#" type="submit" className="btn">Отправить</button>
                </div>
              </form>
              
            </div>
          </div>
  </section>

const Icon = () =>
        <a href="#" target="_blank">
          <img src={vk} alt="image description" />
        </a>

const Footer = () =>  
<footer class="footer">
        <div class="container">
          <div class="footer-wrap">
            <div class="footer-contacts">
              <p>Иванов Иван</p>
              <p><sub>(с)</sub> 2018. Все права защищены.</p>
            </div>
            <div class="social-networks">
              <Icon/>
              <Icon />
              <Icon />
            </div>
          </div>
        </div>
      </footer>

function App() {
  return (
    <>
      <Header />
      <SectionBanner />
      <SectionAboutMe />
      <SectionProjects />
      {/* <SectionSkill /> */}
      <SectionVideo />
      <SectionGallery />
      <SectionMicrosoft />
      <SectionForm />
      <Footer />
    </>
  );
}

export default App;