import logo from './logo.svg';
import './App.css';
import { Children } from 'react';

const MenuLi = ({children, url}) =>
<li>
  <a href={url}>{children}</a>
</li>

 const NumbersItem = ({url, imgSrc, imgAlt="no alt", h3, subtext}) =>

 <a href={url} class="numbers_item">
      <img src={imgSrc} class="numbers_item_img"  alt={imgAlt} />
      <div class="numbers_item_text">
          <h3 class="numbers_item_value">
              {h3}
          </h3>
          <p class="numbers_item_subtext">
              {subtext}
          </p>
      </div>
  </a>

  const SkillItem = ({skillTitle, skillPercent}) =>
  <div class="skill-item">
      <span class="skill-title">{skillTitle}</span>
      <div class="skill-load">
        <div class="skill-progress" style={{width: skillPercent}}></div>
      </div>
  </div> 

const GallaryItem = ({urlImg}) =>
<>
<a href="#" class="gallary-item" style={{backgroundImage: 'url(' + urlImg + ')'}}></a>
</>

const ClientsItem = ({imgSrc, imgAlt="no alt"}) =>
<div class="clients-box">
    <div class="clients-box-img">
        <img src={imgSrc} alt={imgAlt} />
    </div>
</div>


function App() {
  return (
    <div className="App">
    <div class="body-wrapper">
    <header class="first-screen" id="header">
            <div class="header">
                <a href='#' class='logo'>
                <img src='images/logo.png' alt='logo' />
                </a>
                <nav class="nav">
                    <input id="menu__toggle" type="checkbox" />
                    <label class="menu__btn" for="menu__toggle">
                        <span></span>
                    </label>
                    <ul class="menu">
                      <MenuLi url="#header">Главная</MenuLi>
                      <MenuLi url="#about_me">Об авторе</MenuLi>
                      <MenuLi url="#numbers">Работа</MenuLi>
                      <MenuLi url="#video">Процесс</MenuLi>
                      <MenuLi url="#form">Контакты</MenuLi>
                    </ul>
                </nav>
            </div>
            <div class="first-screen-img">
                <img src="images/Frame.svg" alt="дизайн и вёрстка" />
            </div>
            <div class="first-screen-text">

                <h1>Дизайн и вёрстка</h1>
                <p class="subheader">Lorem Ipsum - это текст-"рыба", часто используемый в печати и вэб-дизайне. Lorem
                    Ipsum является стандартной "рыбой"? для текстов на латинице с начала XVI века.
                </p>
                <a href="#" class="btn">Написать мне </a>
            </div>
        </header>

        <section class="about_me" id="about_me">
            <h2>Обо мне.</h2>
            <p>Lorem Ipsum - это текст-"рыба" , часто используемый в печати и вэб-дизайне. Lorem Ipsum является
                стандартной "рыбой"? для текстов на латинице с начала XVI века.</p>

        </section>
          <section class="numbers" id="numbers">
            <div class="numbers_wrapper">
              <NumbersItem url="#" imgSrc="images/project.png" imgAlt="Project"
                h3="40+" subtext="проектов" />
              <NumbersItem url="#" imgSrc="images/project.png" imgAlt="Project"
                h3="30+" subtext="внедрений" />
              <NumbersItem url="#" imgSrc="images/project.png" imgAlt="Project"
                h3="50+" subtext="технологий" />
              <NumbersItem url="#" imgSrc="images/project.png" imgAlt="Project"
                h3="50+" subtext="идей" />
              <NumbersItem url="#" imgSrc="images/project.png" imgAlt="Project"
                h3="40+" subtext="заказчиков" />
              <NumbersItem url="#" imgSrc="images/project.png" imgAlt="Project"
                h3="40+" subtext="разработок" />
            </div>
          </section>

        <section class="skills">
            <div class="skills-wrapper">
                <div class="skill-list-wrapper">
                    <div class="skill-list">
                        <h2>Мои навыки</h2>
                          <SkillItem skillPercent="20%" skillTitle="PhotoShop"/>
                          <SkillItem skillPercent="87%" skillTitle="CorelDraw"/>
                          <SkillItem skillPercent="50%" skillTitle="Figma"/>
                    </div>
                </div>
                <div class="skills-face">
                    <img src="images/img.jpg" class="face" alt="морда" />
                </div>
            </div>
        </section> 
        <section class="video" id="video">
            <div class="video-wrapper">
                <div class="video_title">
                    <h2>Как я работаю</h2>
                    <p>Lorem Ipsum - это текст-"рыба", часто используемый в печати и вэб-дизайне. Lorem Ipsum является
                        стандартной "рыбой" для текстов на латинице с начала XVI века.</p>
                </div>
                <div class="video-frame" style={{cssText: "background-image: url('images/Rectangle_5.jpg')"}}>
                    <button class="video-btn">
                        <img src="images/play-button.svg" alt="play video" />
                    </button>
                </div>
            </div>
        </section>
        <section class="section-gallery">
            <div class="gallary-list">
                <GallaryItem urlImg="images/img-1.jpg" />
                <GallaryItem urlImg="images/img-2.jpg" />
                <GallaryItem urlImg="images/img-1.jpg" />
                <GallaryItem urlImg="images/img-2.jpg" />
                <GallaryItem urlImg="images/img-1.jpg" />
                <GallaryItem urlImg="images/img-2.jpg" />
                <GallaryItem urlImg="images/img-1.jpg" />
                <GallaryItem urlImg="images/img-2.jpg" />
            </div>
        </section>
        <section class="clients">
            <div class="clients-blockitems">
              <ClientsItem imgSrc="images/client1.png" imgAlt="microsoft"/>
              <ClientsItem imgSrc="images/makita-logo.svg" imgAlt="makita"/>
              <ClientsItem imgSrc="images/davidoff-goodlife-woman.svg" imgAlt="davidoff"/>
              <ClientsItem imgSrc="images/polski-fiat-logo.svg" imgAlt="polski fiat"/>
              <ClientsItem imgSrc="images/kenwood-logo.svg" imgAlt="kenwood"/>
              <ClientsItem imgSrc="images/opera-mini-browser.svg" imgAlt="Opera-mini"/>
            </div>
          </section>
        
        <section class="form" id="form">
            <div class="max-width-540px">
                <h2>Хотите веб-сайт?</h2>
                <p>Lorem Ipsum - это текст-"рыба", часто используемый в печати и вэб-дизайне. Lorem Ipsum является
                    стандартной "рыбой" для текстов на латинице с начала XVI века.
                </p>
                <form class="form-container" name="my-form">
                    <input type="text" placeholder="Ваше имя" name="username" required class="form-username" />
                    <input type="email" placeholder="Ваш email" name="user-email" required class="form-input" />
                    <textarea name="textarea" placeholder="Сообщение"></textarea>
                    <input type="submit" class="btn" />
                </form>
            </div>
        </section>
        <footer class="footer">
            <div class="wrapper-1150px flex">
                <div class="footer-side-left">
                    <h3>Дмитрий Панасенко</h3>
                    <p>&copy; <time datetime="2018">2018</time>. Все права защищены</p>
                </div>
                <div class="footer-side-right">
                    <a href="" class="icon icon-facebook-f"></a>
                    <a href="" class="icon icon-vk"></a>
                    <a href="" class="icon icon-twitter"></a>
                    <a href="" class="icon icon-instagram"></a>
                </div>
            </div>
        </footer>
    </div>
    </div> 
   );
}

export default App;