import React, {Component} from 'react';
import { Grid, Row, Col } from 'react-bootstrap';
import testimonialBg from '../../images/testimonial-bg.jpg'
import testimonial_img from '../../images/testimonial-img.png';
import Radium from 'radium';

class Testimonials extends Component {
  render() {
    const styles = {
      testimonialBg: {
        width: '100%',
        float: 'left',
        padding: '100px 0 90px',
        background: `url(${testimonialBg}) top repeat-x`,
        textAlign: 'center'
      },
      feedback: {
        padding: '45px 6%',
        borderRadius: 10,
        backgroundColor: '#fbfbfb',
        color: '#636464',
        fontFamily: 'Calibri',
        fontSize: 18,
        position: 'relative',
        border: '1px solid #fbfbfb',
        '@media screen and (min-width: 64em)': {
          display: 'none'
        }
      },
      p: {
        fontSize: 18,
        color: '#fff',
        margin: 0,
        padding: '15px 0 0',
        fontFamily: 'Calibri'
      },
      arrow: {
        top: '100%',
        left: '50%',
        border: 'solid transparent',
        content: " ",
        height: 0,
        width: 0,
        position: 'absolute',
        pointerEvents: 'none'
      }
    }
    return (
      <Row style={styles.testimonialBg}>
        <Col>
          <h2>Kind Words From Happy Campers</h2>
          <p>What other people thought about the service provided by QuirkyCoders &trade;!</p>
          <Grid>
            <Row>
              <Col md={3}>
                <div style={styles.feedback}>
                  Excellent service offering a personal touch, if I had an
                  issue they were no longer than a phone call away and were
                  always quick to respond.
                </div>
                <div className="client_info">
                  <img src={testimonial_img} alt=""/>
                  <p style={styles.p}>Spencer Finnell</p>
                </div>
              </Col>
              <Col md={3}>
                <div style={styles.feedback}>
                  Excellent service offering a personal touch, if I had an
                  issue they were no longer than a phone call away and were
                  always quick to respond.
                </div>
                <div className="client_info">
                  <img src={testimonial_img} alt=""/>
                  <p style={styles.p}>Spencer Finnell</p>
                </div>
              </Col>
              <Col md={3}>
                <div style={styles.feedback}>
                  Excellent service offering a personal touch, if I had an
                  issue they were no longer than a phone call away and were
                  always quick to respond.
                </div>
                <div className="client_info">
                  <img src={testimonial_img} alt=""/>
                  <p style={styles.p}>Spencer Finnell</p>
                </div>
              </Col>
              <Col md={3}>
                <div style={styles.feedback}>
                  <div style={styles.arrow}>
                    Excellent service offering a personal touch, if I had an
                    issue they were no longer than a phone call away and were
                    always quick to respond.
                  </div>
                </div>
                <div className="client_info">
                  <img src={testimonial_img} alt=""/>
                  <p style={styles.p}>Spencer Finnell</p>
                </div>
              </Col>
            </Row>
          </Grid>
        </Col>
      </Row>
    );
  }
}

export default Radium(Testimonials)