<commit_before>var InterviewApp = React.createClass({
	render: function() {
		return (
			<GetStarted />
		);
	}
});


var GetStarted = React.createClass({
	render: function() {
		return (
			<div>
				<h1 className="orange mpnew">Get Started</h1>

				<section className="white minH">
					<div className="container">
						<div className="getting_started_intro">
							<div className="half half1 text_centering">
								<img src="images/get_starting_intro.png" height="250px"/>
							</div>
							<div className="half half2 mt50">
								<p className="intro_title">Ready to smash your next coding interview?</p>
								<p className="intro_text">Lets get going!</p>
							</div>
						</div>
						<OutlineTable title={"Taking Your Interview"} content={TakingInterviewOutline} />
						<OutlineTable title={"Submitting Your Interview"} content={SubmittingInterviewOutline} />
						<div className="breaker"></div>
						<h3>Ready?</h3>
						<br />
						<div className="tc">
							<div className="button">Lets Go</div>
						</div>
					</div>
				</section>
			</div>
		);
	}
});

var OutlineTable = React.createClass({
	render: function() {
		return (
			<div>
				<div className="breaker"></div>
				<h3>{this.props.title}</h3>
				<table className="get_started_table">
					{this.props.content.map(function(entry) {
						return (
							<tr>
								<td><ul><li><span>{entry.words}</span></li></ul></td>
								<td className="tc"><img src={"images/"+entry.image} /></td>
							</tr>
						);
					}, this)}
				</table>
			</div>
		);
	}
});

var TakingInterviewOutline = [
	{
		words: "Before you are asked a question on screen, a timer will appear on screen",
		image: "get_starting_intro.jpg"
	},
	{
		words: "You will have an interactive whiteboard from which to code out your answer",
		image: "get_starting_intro.jpg"
	},
	{
		words: "Make sure to have some scratch paper to plan your algorithm on!",
		image: "get_starting_intro.jpg"
	},
	{
		words: "Each question will have a maximum of 3 hints you can use at will",
		image: "get_starting_intro.jpg"
	}
];

var SubmittingInterviewOutline = [
	{
		words: "Some instructions to go here...",
		image: "get_starting_intro.jpg"<commit_msg>added states into the main app<commit_after>var InterviewApp = React.createClass({
	getInitialState: function() {
		return ({currentStage: 0});
	},

	nextStage: function() {
		console.log("next stage");
		this.setState({currentStage: this.state.currentStage+1});
	},

	render: function() {
		switch(this.state.currentStage){
			case 0: return (<GetStarted nextStage={this.nextStage}/>); break;
			case 1: return (<InterviewDetails nextStage={this.nextStage}/>); break;
			default: null;
		}
			
	}
});

var InterviewDetails = React.createClass({
	render: function() {
		return (
			<div>
				<section className="white minH">
				</section>
			</div>
		);
	}
});

var GetStarted = React.createClass({
	render: function() {
		return (
			<div>
				<h1 className="orange mpnew">Get Started</h1>

				<section className="white minH">
					<div className="container">
						<div className="getting_started_intro">
							<div className="half half1 text_centering">
								<img src="images/get_starting_intro.png" height="250px"/>
							</div>
							<div className="half half2 mt50">
								<p className="intro_title">Ready to smash your next coding interview?</p>
								<p className="intro_text">Lets get going!</p>
							</div>
						</div>
						<OutlineTable title={"Taking Your Interview"} content={TakingInterviewOutline} />
						<OutlineTable title={"Submitting Your Interview"} content={SubmittingInterviewOutline} />
						<div className="breaker"></div>
						<h3>Ready?</h3>
						<br />
						<div className="tc">
							<div onClick={this.props.nextStage} className="button">Lets Go</div>
						</div>
					</div>
				</section>
			</div>
		);
	}
});

var OutlineTable = React.createClass({
	render: function() {
		return (
			<div>
				<div className="breaker"></div>
				<h3>{this.props.title}</h3>
				<table className="get_started_table">
					<tbody>
						{this.props.content.map(function(entry) {
							return (
								<tr>
									<td><ul><li><span>{entry.words}</span></li></ul></td>
									<td className="tc"><img src={"images/"+entry.image} /></td>
								</tr>
							);
						}, this)}
					</tbody>
				</table>
			</div>
		);
	}
});

var TakingInterviewOutline = [
	{
		words: "Before you are asked a question on screen, a timer will appear on screen",
		image: "get_starting_intro.jpg"
	},
	{
		words: "You will have an interactive whiteboard from which to code out your answer",
		image: "get_starting_intro.jpg"
	},
	{
		words: "Make sure to have some scratch paper to plan your algorithm on!",
		image: "get_starting_intro.jpg"
	},
	{
		words: "Each question will have a maximum of 3 hints you can use at will",
		image: "get_starting_intro.jpg"
	}
];

var SubmittingInterviewOutline = [
	{
		words: "Some instructions to go here...",
		image: "get_starting_intro.jpg"
{'fraction_non_alphanumeric': 0.1562375448385811, 'fraction_numerical': 0.006377042646472699, 'mean_word_length': 3.189482470784641, 'pattern_counts': {'":': 0, '<': 114, '<?xml version=': 0, '>': 114, 'https://': 0, 'lorem ipsum': 0, 'www.': 0, 'xml': 0}, 'pii_count': 0, 'substrings_counts': 0, 'word_list_counts': {'cursed_substrings.json': 0, 'profanity_word_list.json': 0, 'sexual_word_list.json': 0, 'zh_pornsignals.json': 0}}
{'dir': 'git-commits-cleaned', 'id': '2481148', 'n_tokens_mistral': 2131, 'n_tokens_neox': 1622, 'n_words': 393}