import React, { PropTypes } from 'react';
import { Divider } from 'components';
import {
  ServicesSectionTwo,
  ServicesSectionOne,
  VideoSeries,
  Team,
  MainServices
} from 'containers';
import {
  Column,
  Row,
  Button
} from 'react-foundation';
import './ServicesPage.scss';
import { connect } from 'react-redux';

const ServicesPage = props => (
  <div className="services-page-wrapper">
    <h1 className="section-header">Services</h1>
    <Divider />
    <Row>
      <Column
        large={8}
        medium={10}
        small={12}
        isColumn
        centerOnSmall
        className="services--intro-wrapper"
      >
      <div className="services-intro">
        <p>Included on this page are some of the services that I offer as an independant consultant.</p>
      </div>
      </Column>
      <MainServices services={props.services} />
      <Column
        large={8}
        medium={10}
        small={12}
        isColumn
        centerOnSmall
        className="services__button-wrapper"
      >
        <Button size={'large'} className="button__contact">
          <a href="mailto:admin@ryancollins.io">Contact Me</a>
        </Button>
      </Column>
    </Row>
    <hr />
    <ServicesSectionOne {...props} />
    <hr />
    <ServicesSectionTwo {...props} />
    <Team {...props} />
    <VideoSeries {...props} />
  </div>
);

ServicesPage.propTypes = {
  services: PropTypes.array.isRequired
};

const mapStateToProps = (state) => ({
  services: state.services
});

export default connect(mapStateToProps)(ServicesPage);

@@ -163,16 +163,26 @@
 Services
+,%0A  Footer
 %0A%7D from 
@@ -1344,16 +1344,31 @@
 ops%7D /%3E%0A
+    %3CFooter /%3E%0A
   %3C/div%3E

add footer to services page