import React from 'react';
import Page from 'trc-client-core/src/components/Page';
import ProductPathway from 'trc-client-core/src/learningPlan/ProductPathway';
import UserStore from 'trc-client-core/src/user/UserStore';
import {staticUrl} from 'trc-client-core/src/constants/url';

import ModalManager from 'trc-client-core/src/Modal/ModalManager';
import ProductPathwayModal from './ProductPathwayModal';

var ToyotaEdge = React.createClass({
    displayName: 'ToyotaEdge',
    onWatch() {
        ModalManager.showModal(ProductPathwayModal, {
            pathway: {
                courseCode: "SPK22040"
            },
            participantId: UserStore.get('participantId'),
            courseType: 'trainingVideo'
        });
    },
    render() {
        return <Page title="The Toyota Edge">
            <div className="">
                <div className="l-content-hug TheToyotaEdge" style={{ height: 430, marginBottom: -430}}/>
                <h1 className="omega t-center t-uppercase headingBold t-white">The Toyota Edge</h1>

                <div className="w80 l-center">

                        <a className="relative" onClick={this.onWatch}>
                            <img className="Boxshadow l-ratio--16-9" src={staticUrl('img/content/product/the_toyota_edge/edgeVideoStill.jpg')} alt=""/>
                        </a>

                    <div className="row4">
                        <p className="gamma">
                            In order to help you understand how Toyota offers more than a single model SUV solution for people who may be considering Jeep Grand Cherokee, we recently took Prado, Kluger and Grand Cherokee to the Anglesea Complex for a comparative evaluation.
                        </p>
                    </div>

                </div>

                <div className="content-flush row4">
                    <div className="grid grid-flush t-center white">
                        <div className="col-- BackgroundImage BackgroundImage-kluger relative l-height--homeWidget">
                            <a href="/#/product/vehicle/Kluger" className="FloodText">
                                <div className="alpha">Kluger</div>
                                <p>Vehicle Page</p>
                            </a>
                        </div>
                        <div className="col-- BackgroundImage BackgroundImage-prado relative l-height--homeWidget">
                            <a href="/#/product/vehicle/Prado" className="FloodText">
                                <div className="alpha">Prado</div>
                                <p>Vehicle Page</p>
                            </a>
                        </div>
                        <div className="col-- BackgroundImage BackgroundImage-jeep relative l-height--homeWidget">
                            <div className="FloodText">
                                <div className="alpha">Grand Cherokee</div>
                                <a href="http://www.jeep.com.au/grand-cherokee">Vehicle Website</a>
                                |
                                <a href="http://www.jeep.com.au/compare-models-grand-cherokee">Specifications</a>
                            </div>
                        </div>
                    </div>
                </div>

                <div className="w80 l-center row4">
                    <p className="gamma">
                        What we learned is that neither Kluger or Prado are humbled by Grand Cherokee and in fact, both Toyota models offer much by way of performance aligned to task that the Jeep could not match.
                    </p>
                    <p className="gamma">
                        This video program will help you understand how Toyota Kluger and Prado offer intelligent and  competitive solutions to a wide range of driving needs and lifestyles.
                    </p>
                </div>
                <div className="w80 l-center row4" >
                    <ProductPathway singleId="Kluger, Prado & Jeep Grand Cherokee Compared" learningPlan={this.props.learningPlan}/>
                </div>
                <div className="TheToyotaEdgeMapScale content-flush row4">
                    <div className="TheToyotaEdgeMapScale_block"></div>
                    <iframe src="https://www.google.com/maps/embed?pb=!1m10!1m8!1m3!1d25032.077750476597!2d144.092727!3d-38.3487571!3m2!1i1024!2i768!4f13.1!5e0!3m2!1sen!2sau!4v1456206414806" width="100%" height="320" />
                </div>
            </div>
        </Page>
    }

});


module.exports = ToyotaEdge;