import React from 'react';
import { Link } from 'react-router';
import { connect } from 'react-redux';
import classnames from 'classnames';
import Footer from '../home/Footer';
import Navbar from '../home/Navbar';
import LaunchButton from '../home/LaunchButton';

class Calendar extends React.Component {
  render() {
    return (
      <div id="home" className="with-navbar not-front page-calendar no-sidebars">
        <Navbar scrolled={false} page="calendar" />
        <header className="hero">
          <section className="responsive">
            <h1><strong>Calendars</strong></h1>
            <h2>
              Benzinga Pro calendars are the perfect visualization of our real-time newsfeed.
              Now you can sort information based on what is most important to your trading.
            </h2>
          </section>
        </header>
        <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/calendar/coverage.png')} alt="" />
                </div>
                <div className="content-block content-block-text">
                  <h2>Real-time Calendar Coverage</h2>
                  <p>
                    Realtime updates on analyst ratings from over 100 buy and sell-side firms. Our coverage includes: Analyst ratings, international economic coverage, earnings, guidance, conference calls, IPOs, dividends, mergers and acquisitions (M&amp;A), FDA reports, offerings, market events, splits and more!
                  </p>
                </div>
              </div>
              <div className="content-row content-row-reverse">
                <div className="content-block content-block-image">
                  <img src={require('../../assets/images/calendar/filters.gif')} alt="" />
                </div>
                <div className="content-block content-block-text">
                  <h2>Trader-Friendly Interface</h2>
                  <p>
                    Benzinga's calendars are customizable and allow for easy sorting. Columns can be changed to match your trading preferences and rows can be sorted by importance indicators. Data mine years of calendar events for performance history.
                  </p>
                </div>
              </div>
              <div className="content-row">
                <div className="content-block content-block-image">
                  <img src={require('../../assets/images/calendar/newsdesk.png')} alt="" />
                </div>
                <div className="content-block content-block-text">
                  <h2>Human Newsdesk</h2>
                  <p>
                    Calendars are curated by our newsdesk analysts. All calendar data including earnings and dividends are verified and organized so you don't have to. Benzinga Pro calendars are refined to give you the best information available.
                  </p>
                </div>
              </div>
            </section>
          </div>
          <div className="trial-banner">
            <section className="responsive">
              <h1>Ready to start investing better?</h1>
              <LaunchButton />
            </section>
          </div>
        </main>
        <Footer />
      </div>
    );
  }
}

export default connect()(Calendar);