content: import React from 'react';
  import { defineMessages, FormattedMessage } from 'react-intl';
  import withStyles from 'isomorphic-style-loader/lib/withStyles';
  import withViewport from '../WithViewport/WithViewport.js';
  import LanguageSwitcher from '../LanguageSwitcher';
  import s from './Hero.css';
  import cx from 'classnames';
  import Header from '../Header';
  
  
  const messages = defineMessages({
    bannerTitle: {
      id: 'header.banner.title',
      defaultMessage: 'DORBUD',
      description: 'Title in page header',
    },
    bannerDesc: {
      id: 'header.banner.desc',
      defaultMessage: 'Palowanie \u00B7 Fundamenty \u00B7 Ścianki',
      description: 'Description in header',
    },
  });
  
  class Hero extends React.Component {
  
  
  
  
    getHeaderType = () => {
      let headerSection = null;
      if (this.props.headerFixed === false) {
        if (this.props.viewport.width > 520 ) {
           headerSection =  <div className={s.container} >
                              <div className={s.wrapFlex}>
                                 <div className={s.lang} >
                                   <LanguageSwitcher />
                                 </div>
                                 <div className={s.brand} >
                                   <FormattedMessage {...messages.bannerTitle} />
                                 </div>
                                 <div className={s.bannerDesc}>
                                   <FormattedMessage {...messages.bannerDesc} />
                                 </div>
                                 <div className={s.header}>
                                   <Header headerFixed={this.props.headerFixed}/>
                                 </div>
                              </div>
                            </div>
        } else {
  
          headerSection =  <div className={s.container} >
                             <div className={s.wrapFlex}>
                               {/* <div className={s.lang} >
                                 <LanguageSwitcher />
                               </div> */}
                                <div className={s.headerMobile}>
                                  <Header headerFixed={this.props.headerFixed}/>
                                </div>
                                <div className={s.brandMobile} >
                                  <FormattedMessage {...messages.bannerTitle} />
                                </div>
                                <div className={s.bannerDescMobile}>
                                  <FormattedMessage {...messages.bannerDesc} />
                                </div>
                                <div style={{minHeight:'40vh'}}>
                                  &nbsp;
                                </div>
                             </div>
                           </div>
  
        }
  
  
      }
      else {
         headerSection =
             <div className={s.container} >
               <div className={s.wrapFlex}>
                   <div className={s.brand} >
                     <FormattedMessage {...messages.bannerTitle} />
                   </div>
                   <div className={s.bannerDesc}>
                     <FormattedMessage {...messages.bannerDesc} />
                   </div>
                </div>
             </div>
          }
  
      return headerSection;
    }
  
    render() {
      return (
              <div className={s.root}>
                {this.getHeaderType() }
              </div>
              );
            }
  }
  
  export default withViewport(withStyles(s)(Hero));
  