import './App.css';

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

const Header = () =>
  <header className="header">
    <div className="container">
      <a href="index.html"><img src="./images/WD.svg" alt="logo" /></a>
      <nav>
        <input id="menu-toggle" type="checkbox" />
        <label className="menu-btn" htmlFor="menu-toggle">
          <span></span>
        </label>

        <ul className="nav-menu">
          <NavItem href="main">Главная</NavItem>
          <NavItem href="about_me">Об авторе</NavItem>
          <NavItem href="works">Работы</NavItem>
          <NavItem href="process">Процесс</NavItem>
          <NavItem href="contacts">Контакты</NavItem>
        </ul>
      </nav>
    </div>
  </header>

const PText = () =>
  <p>Lorem Ipsum - это текст-"рыба", часто используемый в печати и вэб-дизайне. Lorem Ipsum является
    стандартной
    "рыбой" для текстов на латинице с начала XVI века.
  </p>

const Project = () =>
  <div className="project">
    <div className="icon"><img src="./images/project.svg" alt="project" /></div>
    <div className="item">
      <h3>40+</h3>
      <p>проектов</p>
    </div>
  </div>

const SkillItem = () =>
  <div className="skill-item">
    <span className="skill-title">Adobe Photoshop</span>
    <div className="skill-load">
      <div className="skill-progress" style={{ cssText: "width: 75%" }}></div>
    </div>
  </div>

const GalleryItem1 = () =>
  <a href="#" className="gallery-item" style={{ cssText: "background-image: url(images/Rectangle7.png)" }}>
  </a>

const GalleryItem2 = () =>
  <a href="#" className="gallery-item" style={{ cssText: "background-image: url(images/Rectangle7.7.png)" }}>
  </a>

const Company = () =>
  <div className="company">
    <a href="https://www.microsoft.com/" className="logo"
      style={{ cssText: "background-image: url(images/Rectangle9.png)" }}></a>
  </div>

const Main = () =>
  <main>
    <section className="banner">
      <div className="container columns">
        <div className="column"><img src="./images/Frame.svg" alt="computer" /></div>
        <div className="column">
          <h1>Дизайн и верстка</h1>
          <PText />
          <button className="btn">Написать мне</button>
        </div>
      </div>
    </section>

    <section className="about-me">
      <div className="container">
        <h2>Обо мне</h2>
        <PText />
      </div>
    </section>

    <section className="projects">
      <div className="container">
        <Project />
        <Project />
        <Project />
        <Project />
        <Project />
        <Project />
      </div>
    </section>

    <section className="skills">
      <div className="container columns">
        <div className="column">
          <h2>Мои навыки</h2>
          <div className="skill-list">
            <SkillItem />
            <SkillItem />
            <SkillItem />
          </div>
        </div>
        <div className="column">
          <img src="./images/Rectangle3.png" alt="man" />
        </div>
      </div>
    </section>

    <section className="my-work">
      <div className="container">
        <h2>Как я работаю</h2>
        <PText />
        <div className="video">
          <img src="./images/Rectangle5.png" alt="video" />
          <button><img src="./images/play-button.svg" alt="play-button" /></button>
        </div>
      </div>
    </section>

    <section className="gallery">
      <div className="gallery-list">
        <GalleryItem1 />
        <GalleryItem2 />
        <GalleryItem1 />
        <GalleryItem2 />
        <GalleryItem2 />
        <GalleryItem1 />
        <GalleryItem2 />
        <GalleryItem1 />
      </div>
    </section>
    <section className="companies">
      <div className="container">
        <Company />
        <Company />
        <Company />
        <Company />
      </div>
    </section>


    <section className="application-form">
      <div className="container">
        <form>
          <h2>Хотите веб-сайт?</h2>
          <PText />

          <div className="personal-info">
            <input type="text" className="input-item" placeholder="Ваше имя" />
            <input type="text" className="input-item" placeholder="Ваш email" />
          </div>
          <textarea placeholder="Сообщение"></textarea>
          <button className="button" type="submit">Отправить</button>
        </form>
      </div>
    </section>
  </main>

const IconTwiter = () =>
  <a href="https://twitter.com/" className="media"><img src="./images/twitter.svg" alt="twitter" />
  </a>

const Footer = () =>
  <footer className="footer">
    <div className="container">
      <div className="information">
        <h3>Иванов Иван</h3>
        <p>(с) 2018. Все права защищены.</p>
      </div>
      <div className="social-media">
        <IconTwiter />
        <IconTwiter />
        <IconTwiter />
      </div>
    </div>
  </footer>

function App() {
  return (
    <div className="wrapper">
      <Header />

      <Main />

      <Footer />
    </div>
  );
}

export default App;
