var React = require('react');
var Carousel = require('trc-client-core/src/components/Carousel');

var ToyotaLinkCarousel = React.createClass({
    displayName: 'ToyotaLinkCarousel',
    render() {
        return (
            <Carousel modifier="hero">
                <li>
                    <img src="//static.toyotainstituteaustralia.com.au/img/content/banner/banner-tfl_static@TOYOTA.jpg" width="1024px" height="320px" />
                    <div className="Carousel_solo">
                        <div className="Carousel_solo_title">
                            <p><small>Connect Your World</small></p>
                            <p>Welcome to Toyota Link</p>
                        </div>
                    </div>
                    <div className="Caption">
                        <i>Prado Kakadu model shown</i>
                    </div>
                </li>       
                <li>
                    <img src="//static.toyotainstituteaustralia.com.au/img/content/banner/banner-toyotalink_pandora.jpg" width="1024px" height="320px" />
                    <div className="Carousel_solo">
                        <div className="Carousel_solo_title">
                            <span className="flush">How to: Connect / How to: Pandora</span>
                        </div>
                        <h3 className="hug push2"><strong>New Toyota Link video</strong></h3>
                        <a className="Button" href="#/toyotalink/videos/instructional">Watch Video</a>
                    </div>
                    <div className="Caption">
                        <i>Kluger Grande AWD model shown</i>
                    </div>
                </li>          
            </Carousel>
        );
    }
});

module.exports = ToyotaLinkCarousel;