import React from 'react';
import { History, Link } from 'react-router';
import reactMixin from 'react-mixin';
import { connect } from 'react-redux';
import classnames from 'classnames';
import Footer from './Footer';
import Navbar from './Navbar';
import LaunchButton from './LaunchButton';

class Index extends React.Component {
  constructor() {
    super();
    this.state = {
      navbarScrolled: false,
      showArrow: true,
    };

    this.handleScroll = this.handleScroll.bind(this);
  }

  componentDidMount() {
    window.addEventListener('scroll', this.handleScroll, false);
  }
  shouldComponentUpdate(nextProps, nextState) {
    return this.state.navbarScrolled !== nextState.navbarScrolled ||
      this.state.showArrow !== nextState.showArrow;
  }

  componentWillUnmount() {
    window.removeEventListener('scroll', this.handleScroll);
  }

  handleScroll(e) {
    const scrollPos = window.scrollY || document.documentElement.scrollTop;
    const navbarScrolled = scrollPos >= 100;
    const showArrow = scrollPos < 50;

    this.setState({navbarScrolled, showArrow});
    this.forceUpdate();

    return;
  }

  render() {
    let arrow = <span />;

    if (this.state.showArrow) {
      arrow = <div className="hero-arrow"></div>;
    }

    return (<div id="home" className="with-navbar-transparent">
      <Navbar scrolled={this.state.navbarScrolled} page="index" />
      <header className="hero">
        <section className="responsive">
          <h1>Profit with <strong>faster news</strong> &amp; <strong>research</strong></h1>
          <h2>A streaming platform with all the information you need to invest better today.</h2>
          <div className="hero-form">
            <LaunchButton />
          </div>
        </section>
        {arrow}
      </header>
      <div className="featured-in">
        <section className="responsive">
          <h1>Benzinga Pro has been featured in:</h1>
          <img src={require('../../assets/images/bzpro-home-featured.png')} alt="featured placeholder" />
        </section>
      </div>
      <main role="main">
        <div className="content">
          <section className="responsive">
            <div className="content-row">
              <div className="content-block content-block-image">
                <img src={require('../../assets/images/bzpro-home-devices.png')} alt="Benzinga Pro supports multiple devices" />
              </div>
              <div className="content-block content-block-text">
                <h2>Faster News</h2>
                <p>
                  Benzinga Professional provides you with real-time headlines and analysis covering everything from micro- to macro-cap companies across all sectors. Coverage includes earnings reports, M&amp;A, IPOs, rumors and much more. The Pro desk filters out the noise to deliver only important coverage that is moving the markets.
                </p>
                <Link to="/pricing/">Start Your Free Trial Today</Link>
              </div>
            </div>
            <div className="content-row content-row-reverse">
              <div className="content-block content-block-image">
                <img src={require('../../assets/images/calendars.png')} alt="" />
              </div>
              <div className="content-block content-block-text">
                <h2>Accurate Data</h2>
                <p>
                  Benzinga Professional offers you the most reliable data on Wall Street. With access to this data that's powering major financial brokerages, you can build models without concern that one-time adjustments will distort projections.
                </p>
                <Link to="/live-trading-calendar/">See Our Calendars</Link>
              </div>
            </div>
          </section>
        </div>
        <div className="trial-banner">
          <section className="responsive">
            <h1>Ready to start investing better?</h1>
            <LaunchButton />
          </section>
        </div>
        <div className="content">
          <section className="responsive">
            <div className="content-row">
              <div className="content-block content-block-image">
                <img src={require('../../assets/images/squawk/audio-wave.png')} alt="" />
              </div>
              <div className="content-block content-block-text">
                <h2>Real-time Audio Alerts</h2>
                <p>
                  While setting up and executing trades, it can be hard to stay on top of the market's breaking developments. Benzinga's audio stream will alert you to breaking news, rumors and unusual options activities so you're primed to profit.
                </p>
                <Link to="/realtime-trading-squawk/">Hear the Squawk in Action</Link>
              </div>
            </div>
            <div className="content-row content-row-reverse">
              <div className="content-block content-block-image">
                <img src={require('../../assets/images/research.png')} alt="" />
              </div>
              <div className="content-block content-block-text">
                <h2>Investigative Research</h2>
                <p>
                  Take advantage of Benzinga's network of Wall Street Analysts, Instituational Managers, and company Executives to get the first look at unusual activity and market rumors. Ask questions and get exclusive analysis with Benzinga Professional's 1-on-1 chat access.
                </p>
                <Link to="/pricing/">Start Your Free Trial Today</Link>
              </div>
            </div>
          </section>
        </div>
      </main>

      <div className="reviews">
        <section className="responsive">
          <h1>See what our customers have to say about Benzinga Pro</h1>
          <div className="reviews-review">
            <blockquote>
              Benzinga provides critical data sets which allow the Estimize community to make informed judgements and formulate their own views. The Benzinga team has constantly pushed to achieve the highest degree of accuracy and timeliness possible and has been a great partner in helping to grow the Estimize data set.
            </blockquote>
            <div className="reviews-author">
              Leigh Drogen
            </div>
            <div className="reviews-author-title">
              Founder of Estimize
            </div>
          </div>
          <div className="reviews-review">
            <blockquote>
              Since I started using Benzinga Pro in August &#8217;13, my P/L has increased by 50%. The Pro Advantage has allowed me to trade earnings, analysts rating, economic data, M&amp;A and a vast array of multiple other channels ahead of the &ldquo;experts&rdquo;.
            </blockquote>
            <div className="reviews-author">
              A satisfied Pro customer
            </div>
          </div>
          <div className="reviews-review">
            <blockquote>
              I wasn't interested at first in this website. They were smart enough to give me two weeks free. Trial hooked me all the way,  signed up for the year as fast as I could. They help you as much as they can. If you can't make $$$$$ money with the alerts, give up. You shouldn't trade. Just follow the money, if someone is buying options by the thousands, wake up check the chart as fast as you can. This site made me enough to pay for it for the rest of my life . Once again Matt thanks for all your help. Hooked for ever. I'm a former pro trader sign up I sincerely think it will help you an awful lot.
            </blockquote>
            <div className="reviews-author">
              Bobby L.
            </div>
          </div>
        </section>
      </div>

      <div className="trial-banner">
        <section className="responsive">
          <h1>
            Ready to start investing better?
          </h1>
          <LaunchButton />
        </section>
      </div>

      <Footer />
    </div>);
  }
}

reactMixin.onClass(Index, History);
export default connect()(Index);