<template>
	<div>
		<section class="section landing-header text-center">
			<div class="container">
				<h1>
					<app-theme-svg
						src="~img/jolt.svg"
						alt=""
						:width="17 * 3"
						:height="18 * 3"
						strict-colors
					/>
					Game API
				</h1>

				<div class="row">
					<div class="col-sm-10 col-md-8 col-lg-6 col-centered">
						<p>
							By implementing the Game Jolt Game API you can add trophies, leaderboards, cloud data
							storage, and sessions to your games to get players coming back for more!
						</p>

						<div class="text-center">
							<app-button primary :to="{ name: 'landing.game-api-doc' }">
								Get Started
							</app-button>
						</div>
					</div>
				</div>
			</div>
		</section>

		<section class="section">
			<div class="container">
				<div class="row text-center">
					<div class="col-lg-3"></div>
					<div class="col-lg-2" v-if="totalScores">
						<div class="stat-big">
							<div class="stat-big-digit">
								{{ totalScores | number }}
							</div>
							<div class="stat-big-label">Scores Logged</div>
						</div>
					</div>
					<div class="col-lg-2">
						<div class="stat-big" v-if="totalAchievedTrophies">
							<div class="stat-big-digit">
								{{ totalAchievedTrophies | number }}
							</div>
							<div class="stat-big-label">Trophies Achieved</div>
						</div>
					</div>
					<div class="col-lg-2">
						<div class="stat-big" v-if="sessionTime">
							<div class="stat-big-digit">
								{{ sessionTime | number }}
							</div>
							<div class="stat-big-label">Hours Logged</div>
						</div>
					</div>
				</div>
			</div>
		</section>

		<section class="section">
			<div class="container">
				<div class="row">
					<div class="col-lg-4">
						<div class="landing-graphic">
							<app-theme-svg src="./leaderboards.svg" alt="Leaderboards" />
						</div>

						<h4 class="text-center">Leaderboards</h4>

						<p>
							Implement leaderboards in your game to allow anyone to battle it out for the top
							spots. You create the leaderboards, you control the scoring. You can even allow guests
							to score without a Game Jolt account.
						</p>
					</div>

					<div class="col-lg-4">
						<div class="landing-graphic">
							<app-theme-svg src="./trophies.svg" alt="Trophies" />
						</div>

						<h4 class="text-center">Trophies</h4>

						<p>
							Feed into your player base's hunger for trophy hunting. Trophies will sync to their
							Game Jolt profile for all to see as badges of honor.
						</p>
					</div>

					<div class="col-lg-4">
						<div class="landing-graphic">
							<app-theme-svg src="./data-storage.svg" alt="Data Storage" />
						</div>

						<h4 class="text-center">Cloud Data Storage</h4>

						<p>
							Sync saved games, user-created levels, friend lists, debug logs--save any bit of data
							to the player's account, or globally for your game. The clouds are the limit!
						</p>
					</div>

					<div class="landing-break-lg"></div>

					<div class="col-lg-4 col-centered-lg">
						<div class="landing-graphic">
							<app-theme-svg src="./sessions.svg" alt="Sessions" />
						</div>

						<h4 class="text-center">Sessions</h4>

						<p>
							Track when and how long each player is active in your game. You can then view stats
							such as avg. play time per session, total time played across users, and even see how
							many people are playing your game in real time.
						</p>
					</div>
				</div>

				<div class="row">
					<div class="col-lg-6 col-centered text-center">
						<h1>Sounds cool, yeah?</h1>
						<hr class="underbar underbar-center" />

						<app-button primary lg :to="{ name: 'landing.game-api-doc' }">
							Get Started
						</app-button>
					</div>
				</div>
			</div>
		</section>
	</div>
</template>

<script lang="ts" src="./game-api"></script>
