context = window

@HomePage = React.createClass({

  celery: () ->
    script = document.createElement("script");
    script.src = "https://www.trycelery.com/js/celery.js";
    script.async = true;
    document.body.appendChild(script);

  componentDidMount: () ->
    @root =$(@getDOMNode())
    @celery()

    window.modernNavInit();

  render: () ->

    items = []

    for item in gon.news
      items.push(`<div dangerouslySetInnerHTML={{__html: "<strong>" + item.title + "</strong>" +  item.body}} key={item.position}></div>`)

    news = `<div><h5 className="widget-title">WHAT'S NEW</h5>
      {items}</div>`



    `<div>
      <div id="header-top">
        <div className="container">
          <div className="row">
            <div className="span6" id="header-top-widget-area-1">
              <div className="widget ewf_widget_contact_info">
              </div>
            </div>
            <div className="span6" id="header-top-widget-area-2">
              <div className="widget ewf_widget_social_media">
                <div className="fixed">
                  <a href="https://www.facebook.com/JamKazam" className="facebook-icon social-icon">
                    <i className="fa fa-facebook"></i>
                  </a>
                  <a href="https://www.twitter.com/jamkazam" className="twitter-icon social-icon">
                    <i className="fa fa-twitter"></i>
                  </a>
                  <a href="https://plus.google.com/+Jamkazam" className="googleplus-icon social-icon">
                    <i className="fa fa-google-plus"></i>
                  </a>
                  <a href="https://www.youtube.com/channel/UC38nc9MMZgExJAd7ca3rkUA" className="youtube-icon social-icon">
                    <i className="fa fa-youtube"></i>
                  </a>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>

      <div id="header">
        <div className="container">
          <div className="row">
            <div className="span3">
              <div id="logo">
                <a href="#top"><img src="/assets/modern/logo.png" alt="website logo"/></a>
              </div>
            </div>
            <div className="span9">

              <a className="mobile-menu-closed" href="#" id="mobile-menu-trigger">
                <i className="fa fa-bars" style={{color:"white"}}></i>
              </a>

              <nav>
                <ul className="sf-menu fixed" id="menu">
                  <li>
                    <a href="#" title="jamkazam">JamKazam</a>
                  </li>
                  <li>
                    <a href="#" title="jamblaster">JamBlaster</a>
                  </li>
                  <li>
                    <a href="#" title="jamtracks">JamTracks</a>
                  </li>
                  <li>
                    <a href="#" title="jamclass" className="last jamclass" id="jamclass-link">JamClass</a>
                  </li>
                </ul>
              </nav>

            </div>
          </div>
        </div>
      </div>
      <ul className="fixed" id="mobile-menu">
        <li>
          <a href="#" title="jamkazam">JamKazam</a>
        </li>
        <li>
          <a href="#" title="jamblaster">JamBlaster</a>
        </li>
        <li>
          <a href="#" title="jamtracks">JamTracks</a>
        </li>
        <li>
          <a href="" title="jamclass" className="last">JamClass</a>
        </li>
      </ul>
      <div id="content">
        <div className="fullwidthbanner main">
          <div className="container">
            <div className="row">
              <div className="span12">
                <div className="main-message">
                  Revolutionizing the way musicians connect, play, learn and earn. Across a city or across a nation.
                  <br/>
                  <br/>
                  <a className="button join-today" href="/signup">JOIN TODAY, PLAY FREE!</a>

                  <div className="text-center"><a href="/signin" className="sign-in">Already a member? Sign in.</a></div>
                </div>
              </div>
            </div>
          </div>
        </div>
        <div className="fullwidth-section orange" id="jamkazam">

          <div className="fullwidth-section-content">

            <div className="container">
              <div className="center"><h1>JAMKAZAM</h1></div>
              <br/>

              <div className="row">
                <div className="span1">&nbsp;</div>
                <div className="span5"><img src="/assets/modern/jk-image.png" alt=""/></div>

                <div className="span5">
                  <h2>Play music live and in sync with others from different locations</h2>
                  <ul>
                    <li>Rehearse without travel or space</li>
                    <li>Co-write and produce music live</li>
                    <li>Join open sessions to jam with others</li>
                    <li>Record and live broadcast sessions</li>
                    <li>Connect with other musicians and bands</li>
                  </ul>


                </div>
                <div className="span1">&nbsp;</div>
              </div>
              <br/>

              <div className="row">
                <div className="span1">&nbsp;</div>
                <div className="span10 text-center"><a href="/products/platform" className="cta-button">LEARN MORE</a><a href="/signup"
                                                                                                        className="cta-button">SIGN
                  UP NOW, IT'S FREE!</a></div>
                <div className="span1">&nbsp;</div>
              </div>
            </div>
          </div>
        </div>
        <div className="fullwidth-section white" id="jamblaster">

          <div className="fullwidth-section-content">

            <div className="container">
              <div className="center"><h1>JAMBLASTER</h1></div>
              <br/>

              <div className="row">
                <div className="span1">&nbsp;</div>
                <div className="span5">
                  <h2>The ultimate smartphone accessory for any musician</h2>
                  <ul>
                    <li>Play online with the lowest possible latency</li>
                    <li>Make pro quality audio recordings</li>
                    <li>Live broadcast yourself or your band thru YouTube</li>
                    <li>Play along with 4,000+ of your favorite songs</li>
                    <li>Teach or take online music lessons</li>
                    <li>No computer required, plug-and-play ease of use</li>
                  </ul>
                </div>
                <div className="span5"><img src="/assets/modern/jamblaster.png" alt=""/></div>

                <div className="span1">&nbsp;</div>
              </div>
              <br/>

              <div className="row">
                <div className="span1">&nbsp;</div>
                <div className="span10 text-center"><a href="/products/jamblaster" className="cta-button">LEARN MORE</a><a
                  data-celery="5675ffb8004f6711002918b6" data-celery-version="v2" className="cta-button">ORDER
                  NOW</a></div>
                <div className="span1">&nbsp;</div>
              </div>
            </div>
          </div>
        </div>
        <div className="fullwidth-section teal" id="jamtracks">

          <div className="fullwidth-section-content">

            <div className="container">
              <div className="center"><h1>JAMTRACKS</h1></div>
              <br/>

              <div className="row">
                <div className="span1">&nbsp;</div>
                <div className="span5">
                  <img src="/assets/modern/jamtracks.png" alt=""/>
                </div>

                <div className="span5">
                  <h2>The best way to learn and play with your favorite songs</h2>
                  <ul>
                    <li>Choose your favorites from 4,000+ songs</li>
                    <li>Complete multitracks, solo or mute any part(s)</li>
                    <li>Slow down playback to practice</li>
                    <li>Change pitch up or down</li>
                    <li>Save custom mixes to use anywhere</li>
                    <li>Make and share audio and/or video recordings</li>
                  </ul>
                </div>
                <div className="span1">&nbsp;</div>
              </div>

              <div className="row">
                <div className="span1">&nbsp;</div>
                <div className="span10 text-center"><a href="/products/jamtracks" className="cta-button cta-smaller">LEARN MORE</a><a
                  href="/client#/jamtrack/search" className="cta-button cta-smaller">GET FIRST JAMTRACK FREE!</a>
                  <a href="/downloads" className="cta-button cta-smaller">GET DESKTOP APP</a>
                  <a href="https://itunes.apple.com/us/app/jamtracks/id1060927816?ls=1&mt=8" className="cta-button cta-smaller">GET IOS APP</a>
                </div>
                <div className="span1">&nbsp;</div>
              </div>
            </div>
          </div>
        </div>
        <div className="fullwidth-section gray" id="jamclass">

          <div className="fullwidth-section-content">

            <div className="container">
              <div className="center"><h1>JAMCLASS</h1></div>
              <br/>

              <div className="row">
                <div className="span1">&nbsp;</div>

                <div className="span3">
                  <h2>For Students</h2>
                  <ul>
                    <li>Take online lessons from the best teacher, not the closest</li>
                    <li>Avoid the wasted time and cost of travel</li>
                    <li>Refer back to recorded portions of lessons</li>
                    <li>Use TestDrive to find a great teacher</li>
                  </ul>
                </div>
                <div className="span4"><img src="/assets/modern/jamclass.png" alt=""/></div>

                <div className="span3"><h2>For Teachers</h2>
                  <ul>
                    <li>Give lessons to students anywhere to earn more</li>
                    <li>Avoid the wasted time and cost of travel</li>
                    <li>Teach during normal "off hours"</li>
                    <li>Let JamKazam bring you new students from marketplace</li>
                  </ul>
                </div>
                <div className="span1">&nbsp;</div>
              </div>
              <br/>

              <div className="row">
                <div className="span1">&nbsp;</div>
                <div className="span5 text-left">
                  <a href="#" className="cta-button cta-smaller students-cta" target="_blank" href="https://jamkazam.desk.com/customer/en/portal/topics/926073-jamclass-online-music-lessons---for-students/articles">LEARN MORE</a>
                </div>
                <div className="span5 text-right">
                  <a href="#" className="cta-button cta-smaller teachers-cta" target="_blank" href="https://jamkazam.desk.com/customer/en/portal/topics/926076-jamclass-online-music-lessons---for-teachers/articles">LEARN MORE</a>
                </div>
                <div className="span1">&nbsp;</div>
              </div>
            </div>
          </div>
        </div>
        <div id="footer">
          <div className="container">
            <div className="row">
              <div className="span4" id="footer-widget-area-1">

                <div className="widget widget_text">

                  <h5 className="widget-title">ABOUT JAMKAZAM</h5>

                  <div className="textwidget">

                    <p>The JamKazam team loves music, and in particular live music.
                      We've combined our passion for live music
                      and technology to make it far easier for musicians to play live
                      with each other.</p>

                    <p>Using JamKazam, you can now play music with other musicians from
                      your homes across the Internet as if
                      you were sitting in the same room. You can record your
                      performances at the track level, share your
                      recordings, and even broadcast your live sessions to family,
                      friends, and fans.</p>

                    <p>We hope you enjoy using the service, making more musician
                      friends, and making more live music!</p>

                    <p><a href="/corp/about" className="sign-in">Visit our corporate site for more
                      about us</a></p>
                    <br/>


                  </div>
                </div>
              </div>

              <div className="span1"></div>
              <div className="span7" id="footer-widget-area-3">

                <div className="widget ewf_widget_contact_info">

                  {news}

                </div>
              </div>
            </div>

            <div className="row">
              <img className="bottom-row-item" src="/assets/modern/logo-2.png" alt=""/>

              <div className="bottom-row-item widget ewf_widget_social_media">
                <div className="fixed">
                  <a href="https://www.facebook.com/JamKazam" className="facebook-icon social-icon">
                    <i className="fa fa-facebook"></i>
                  </a>

                  <a href="https://www.twitter.com/jamkazam" className="twitter-icon social-icon">
                    <i className="fa fa-twitter"></i>
                  </a>

                  <a href="https://plus.google.com/+Jamkazam" className="googleplus-icon social-icon">
                    <i className="fa fa-google-plus"></i>
                  </a>

                  <a href="https://www.youtube.com/channel/UC38nc9MMZgExJAd7ca3rkUA" className="youtube-icon social-icon">
                    <i className="fa fa-youtube"></i>
                  </a>
                </div>
              </div>
            </div>
          </div>
        </div>
        <div id="footer-bottom">
          <div className="container">

            <div className="row">
              <div className="span6">
                <div className="text-left">© 2016 JamKazam. All Rights Reserved</div>
              </div>
              <div className="span6">
                <div id="footer-links" className="text-right">
                  <a href="/corp/about" rel="external">about</a>&nbsp;&nbsp;|&nbsp;&nbsp;<a
                  href="/corp/news"
                  rel="external">news</a>&nbsp;&nbsp;|&nbsp;&nbsp;<a
                  href="/corp/media_center"
                  rel="external">media</a>&nbsp;&nbsp;|&nbsp;&nbsp;<a
                  href="/corp/contact"
                  rel="external">contact</a>&nbsp;&nbsp;|&nbsp;&nbsp;<a
                  href="/corp/privacy"
                  rel="external">privacy</a>&nbsp;&nbsp;|&nbsp;&nbsp;<a
                  href="/corp/terms" rel="external">terms of
                  service</a>&nbsp;&nbsp;|&nbsp;&nbsp;<a
                  href="/corp/help" rel="external">help</a>
                </div>
              </div>
            </div>


          </div>
        </div>
      </div>
      <a className="gone" id="back-to-top" href="#">
        <i className="ifc-up4"></i>
      </a>
    </div>
    `

})