content: import React, { Component } from 'react';
  import ViewWrap from '../../ViewWrap';
  import DocumentMeta from 'react-document-meta';
  
  import ServicesContinue from '../../ServicesContinue';
  import ProjectCTA from '../../Elements/ProjectCTA';
  import servicesContent from '../../../content/services';
  import PageNotFound from '../PageNotFound';
  
  import ogImage from '../../../assets/og-image.jpg';
  
  import './ServicesSingle.css';
  
  class ServicesSingle extends Component {
  
  	constructor(props) {
  		super(props);
  		this.active = this.props.service;
  		this.servicesIndex = 0;
  
  		this.service = servicesContent.find( (el, i) => {
  			this.servicesIndex = i;
  			return el.slug === this.active;
  		});
  
  		this.prevService = servicesContent[(this.servicesIndex !== 0  ? this.servicesIndex - 1 : servicesContent.length - 1)];
  		this.nextService = servicesContent[(this.servicesIndex !== servicesContent.length - 1 ? this.servicesIndex + 1 : 0)]
  	}
  
  	shouldComponentUpdate(nextProps, nextState) {
  		return false;
  	}
  
  	render() {
  
  		if (this.service) {
  
  			let Component = this.service.component;
  
  			const meta = {
  				title: `${this.service.title} - Keen Studio`,
  				description: this.service.description,
  				meta: {
  					name: {
  						keywords: this.service.keywords,
  						'twitter:image:alt': `An image representing ${this.service.title}.`
  					},
  					property: {
  						'og:title': `Keen Studio - ${this.service.title}`,
  						'og:description': this.service.description,
  						'og:image': this.service.bg,
  						'og:url': window.location.href
  					}
  				}
  			}
  
  			return (
  				<ViewWrap view="services-single">
  					<DocumentMeta {...meta} />
  					<label data-animate="1" className={`title ${this.service.slug}`}>{this.service.title}</label>
  					<Component service={this.service} />
  					<ProjectCTA color={this.service.slug} />
  					<ServicesContinue
  					prev={this.prevService}
  					next={this.nextService} />
  				</ViewWrap>
  			);
  		} else {
  			return <PageNotFound />
  		}
  	}
  }
  
  export default ServicesSingle;
  