import logo from './logo.svg';
import './App.css';
import './iconfonts.css';

// body
const Body = ({ children }) =>
  <div class="wrapper">
    {children}
  </div>

// container общий
const Container = ({ children }) =>
  <div class="container">
    {children}
  </div>

// header
const Header = ({ children }) =>
  <header class="header">
    <Container>
      {children}
    </Container>
  </header>

const Logo = ({ imgurl, logourl }) =>
  <div class="logo">
    <a href={logourl}>
      <img src={imgurl} alt="logo" />
    </a>
  </div>

const NavMenu = ({ children }) =>
  <nav class="nav">
    {children}
  </nav>

const NavMenuList = ({ children }) =>
  <ul class="nav-menu">
    {children}
  </ul>

const NavItem = ({ children, url }) =>
  <li class="nav-items">
    <a href={url} title={children} class="nav-menu-link">{children}</a>
  </li>

const BurgerMenu = () =>
  <>
    <input id="burger" type="checkbox" />
    <label class="menu-btn" for="burger">
      <span></span>
    </label>
  </>

// построение main
const Main = ({ children }) =>
  <main>
    {children}
  </main>

// Banner
const SectionBanner = ({ children }) =>
  <section class="banner">
    <Container>
      {children}
    </Container>
  </section>

const BannerImg = ({ imgurl, imgalt }) =>
  <div class="banner-img">
    <div class="banner-img-container">
      <img src={imgurl} alt={imgalt} />
    </div>
  </div>

const BannerText = ({ children, title, url, anchor }) =>
  <div class="banner-text">
    <div class="description-text">
      <h1>{title}</h1>
      <p>{children}</p>
      <a href={url} class="banner-button">
        {anchor}
      </a>
    </div>
  </div>

// About me
const SectionAboutMe = ({ children, title }) =>
  <section class="about-me" id="about-me">
    <Container>
      <div class="description-text">
        <h2>{title}</h2>
        <p>{children}</p>
      </div>
    </Container>
  </section>

// Project
const SectionProject = ({ children }) =>
  <section class="project" id="project">
    <Container>
      {children}
    </Container>
  </section>

const ProjectLink = ({ title, description, url }) =>
  <a href={url} class="project-link">
    <i class="icon-project"></i>
    <div class="project-text">
      <h3>{title}</h3>
      <span>{description}</span>
    </div>
  </a>

// Skill
const SectionSkill = ({ children }) =>
  <section class="skill">
    <Container>
      {children}
    </Container>
  </section>

const SkillBox = ({ children, title }) =>
  <div class="skill-box">
    <h2>{title}</h2>
    <div class="load-scale">
      {children}
    </div>
  </div>

const SkillItem = ({ skill }) =>
  <div class="skill-item">
    <span class="skill-title">{skill}</span>
    <div class="skill-load-skale">
      <div class="skill-load-progress"></div>
    </div>
  </div>

const SkillImg = ({ imgurl, imgalt }) =>
  <div class="skill-img">
    <img src={imgurl} alt={imgalt} />
  </div>

// Work
const SectionWork = ({ children }) =>
  <section class="work" id="my-work">
    <Container>
      {children}
    </Container>
  </section>

const DescriptionText = ({ children, title }) =>
  <div class="description-text">
    <h2>{title}</h2>
    <p class="work-text-block">{children}</p>
  </div>

const WorkImg = ({ imgurl, imgalt }) =>
  <div class="work-img">
    <img class="work-video" src={imgurl} alt={imgalt} />
    <i class="icon-play-button"></i>
  </div>

// Gallery
const SectionGallery = ({ children }) =>
  <section class="gallery" id="gallery">
    <div class="gallery-block">
      {children}
    </div>
  </section>

const GalleryItem = ({ children, className, url = "#" }) =>
  <a href={url} class={`gallery-item ${className}`}>{children}</a>

const GalleryItemFirst = () =>
  <GalleryItem className="gallery-item-first">
    <span class="gallery-item-hover">
      <i class="icon-view"></i>
    </span>
  </GalleryItem>

const GalleryItemSecond = () =>
  <GalleryItem className="gallery-item-second" >
    <span class="gallery-item-hover">
      <i class="icon-view"></i>
    </span>
  </GalleryItem >

// Client
const SectionClient = ({ children }) =>
  <section class="client">
    <Container>
      {children}
    </Container>
  </section>

const ClientItem = ({ imgurl }) =>
  <a href={imgurl} target="_blank" class="client-item"></a>

// Feedback
const SectionFeedback = ({ children }) =>
  <section class="feedback" id="feedback">
    <Container>
      {children}
    </Container>
  </section>

const FeedbackForm = ({ name, email, message, title }) =>
  <form class="feedback-form" action="message_sended">
    <input class="feedback-form-name" type="text" name="user_name" id="name" placeholder={name} />
    <input class="feedback-form-name" type="text" name="user_email" id="email" placeholder={email} />
    <textarea class="feedback-form-name" name="user_massage" id="msg" placeholder={message}></textarea>
    <button type="submit" class="feedback-button">{title}</button>
  </form>

// footer
const Footer = ({ children }) =>
  <footer class="footer">
    <Container>
      {children}
    </Container>
  </footer>

const MyData = ({ title, data }) =>
  <div class="my-data">
    <h3>{title}</h3>
    <span>{data}</span>
  </div>

const SocialGroup = ({ children }) =>
  <div class="social-group">
    {children}
  </div>

const SocialItem = ({ url }) =>
  <a href={url} target="_blank" class="social">
    <i class="icon-social"></i>
  </a>


function App() {
  return (
    <Body>
      <Header>
        <Logo imgurl="img/logo.png" logourl="#" />
        <NavMenu>
          <BurgerMenu />
          <NavMenuList>
            <NavItem url="#">главная</NavItem>
            <NavItem url="#about-me">об авторе</NavItem>
            <NavItem url="#project">работы</NavItem>
            <NavItem url="#my-work">процесс</NavItem>
            <NavItem url="#feedback">контакты</NavItem>
          </NavMenuList>
        </NavMenu>
      </Header>
      <Main>
        <SectionBanner>
          <BannerImg imgurl="img/pc-top.png" imgalt="Banner" />
          <BannerText title="Дизайн и верстка" url="#feedback" anchor="написать мне">
            Lorem Ipsum - это текст-"рыба", часто используемый в печати и вэб-дизайне. Lorem Isum является стандартной "рыбой" для текстов на латинице с начала XVI века.
          </BannerText>
        </SectionBanner>
        <SectionAboutMe title="Обо мне">
          Lorem Ipsum - это текст-"рыба", часто используемый в печати и вэб-дизайне. Lorem Ipsum является стандартной "рыбой" для текстов на латинице с начала XVI века.
        </SectionAboutMe>
        <SectionProject>
          <ProjectLink title="40+" description="проектов" url="#gallery" />
          <ProjectLink title="40+" description="проектов" url="#gallery" />
          <ProjectLink title="40+" description="проектов" url="#gallery" />
          <ProjectLink title="40+" description="проектов" url="#gallery" />
          <ProjectLink title="40+" description="проектов" url="#gallery" />
          <ProjectLink title="40+" description="проектов" url="#gallery" />
        </SectionProject>
        <SectionSkill>
          <SkillBox title="Мои навыки">
            <SkillItem skill="Adobe Photoshop" />
            <SkillItem skill="Adobe Photoshop" />
            <SkillItem skill="Adobe Photoshop" />
          </SkillBox>
          <SkillImg imgurl="img/me.png" imgalt="My_photo" />
        </SectionSkill>
        <SectionWork>
          <DescriptionText title="Как я работаю">
            Lorem Ipsum - это текст-"рыба", часто используемый в печати и вэб-дизайне. Lorem Ipsum является стандартной "рыбой" для текстов на латинице с начала XVI века.
          </DescriptionText>
          <WorkImg imgurl="img/video.png" imgalt="work" />
        </SectionWork>
        <SectionGallery>
          <GalleryItemFirst />
          <GalleryItemSecond />
          <GalleryItemFirst />
          <GalleryItemSecond />
          <GalleryItemSecond />
          <GalleryItemFirst />
          <GalleryItemSecond />
          <GalleryItemFirst />
        </SectionGallery>
        <SectionClient>
          <ClientItem imgurl="https://www.microsoft.com" />
          <ClientItem imgurl="https://www.microsoft.com" />
          <ClientItem imgurl="https://www.microsoft.com" />
          <ClientItem imgurl="https://www.microsoft.com" />
        </SectionClient>
        <SectionFeedback>
          <DescriptionText title="Хотите веб-сайт?">
            Lorem Ipsum - это текст-"рыба", часто используемый в печати и вэб-дизайне. Lorem Ipsum является стандартной "рыбой" для текстов на латинице с начала XVI века.
          </DescriptionText>
          <FeedbackForm name="Ваше имя" email="Ваш e-mail" message="Сообщение" title="отправить" />
        </SectionFeedback>
      </Main>
      <Footer>
        <MyData title="Иванов Иван" data="(c) 2018. Все права защищены." />
        <SocialGroup>
          <SocialItem url="https://vk.com" />
          <SocialItem url="https://vk.com" />
          <SocialItem url="https://vk.com" />
        </SocialGroup>
      </Footer>
    </Body>
  );
}

export default App;
