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

class Squawk extends React.Component {
  render() {
    return (
      <div id="home" className="with-navbar not-front page-squawk no-sidebars">
        <Navbar scrolled={false} page="squawk" />
        <header className="hero">
          <section className="responsive">
            <h1>Audio <strong>Squawk</strong></h1>
            <h2>The Squawk is a live broadcast of breaking news. It complements the Benzinga Pro
        platform with an audio broadcast of the most important breaking headlines that may
        be moving stocks and the markets.</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/squawk/audio-wave.png')} alt=""></img>
                </div>
                <div className="content-block content-block-text">
                  <h2>Filtering the Noise</h2>
                  <p>Unlike other audio squawks, only critical market moving breaking news is broadcast, so no worries about having to filter out noise.</p>
                  <p>The Benzinga Pro Audio Squawk brings you only the most crucial information for better trading.</p>
                </div>
              </div>
              <div className="content-row content-row-reverse">
                <div className="content-block content-block-image">
                  <h3>Listen to a sample</h3>
                  <audio className="squawksample" preload="true" controls>
                    <source src={require('../../assets/audio/sounds/squawk-preview.mp3')} type="audio/mpeg"></source>
                    <source src={require('../../assets/audio/sounds/squawk-preview.ogg')} type="audio/ogg"></source>
                  </audio>
                </div>
                <div className="content-block content-block-text">
                  <h2>Don't Miss Another Headline</h2>
                  <p>Having an audio broadcast means you can look away from your feed without worrying about missing a key piece of news.</p>
                  <p>The realtime audio squawks lead the feed, so you will receive our already blazingly fast headlines that much faster.</p>
                </div>
              </div>
              <div className="content-row">
                <div className="content-block content-block-image">
                  <img src={require('../../assets/images/squawk/squawk-laptop.png')} alt=""></img>
                </div>
                <div className="content-block content-block-text">
                  <h2>Audio Squawk Coverage Includes:</h2>
                  <ul>
                    <li>Conference calls</li>
                    <li>Economic data releases</li>
                    <li>Earnings and guidance</li>
                    <li>Security management</li>
                    <li>Wall Street analysis</li>
                    <li>Critical breaking news</li>
                    <li>Market rumors and chatter</li>
                    <li>Press conferences</li>
                    <li>Key comments from interviews</li>
                  </ul>
                </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()(Squawk);