---
import { Image } from "astro:assets";

import Layout from "$layouts/Layout.astro";

import CreditsSection from "$components/Home/CreditsSection.astro";
import DownloadButton from "$components/Home/DownloadButton.astro";

import logoImage from "$assets/images/brand/logo-tenwholeyears.png";
import cardHorseshoesImage from "$assets/images/home/card-horseshoes.png";
import cardRecroomImage from "$assets/images/home/card-recroom.png";
import featureImage from "$assets/images/home/feature.png";
import HandheldVideos from "$components/Home/HandheldVideos.astro";

---

<Layout>
	<div class="jumbotron masthead">
		<div class="container">
			<Image
				src={logoImage}
				alt="TenWholeYears Logo"
				class="masthead-logo"
			/>
			<h1 class="masthead-title">TenWholeYears</h1>
			<p>A love letter to Rec Room on its true 10th anniversary</p>
			<DownloadButton />
		</div>
	</div>
	<div class="container">
		<section class="home-section intro-section">
			<div class="row">
				<div class="span6">
					<h2>What is TenWholeYears?</h2>
					<p class="lead">
						TenWholeYears is a love letter to Rec Room and the
						community that made it special. Created to celebrate Rec
						Room's true tenth anniversary, we invite everyone to
						visit the first release of Rec Room, explore activities
						that never made it into the game, and reflect on how far
						Rec Room and it's community has progressed over the last
						ten years.
					</p>
					<p class="lead">
						Read about the inspiration behind TenWholeYears <a
							href="#">here</a
						>.
					</p>
				</div>
				<div class="span6">
					<Image
						src={featureImage}
						alt="Beta Frisbee Activity"
						class="thumbnail feature-photo"
					/>
				</div>
			</div>
		</section>

		<section class="home-section">
			<div class="page-header">
				<h2>Explore the Game</h2>
			</div>
			<div class="row">
				<div class="span4">
					<div class="archive-feature">
						<Image
							src={cardHorseshoesImage}
							alt="Scrapped Horseshoes Activity"
							class="thumbnail"
						/>
						<h3>Scrapped Activities</h3>
						<p>
							Explore prototype activities and unfinished ideas
							that never made it into Rec Room. These activities
							have been restored to show a glimpse into
							what could of existed.
						</p>
					</div>
				</div>
				<div class="span4">
					<div class="archive-feature">
						<Image
							src={cardRecroomImage}
							alt="Beta LockerRoom (RecRoom)"
							class="thumbnail"
						/>
						<h3>Lorem Ipsum</h3>
						<p>
							Nam fermentum ut lectus et placerat. Nulla nibh
							nulla, rutrum at neque at, vulputate consequat.
						</p>
					</div>
				</div>
				<div class="span4">
					<div class="archive-feature">
						<Image
							src={cardHorseshoesImage}
							alt="Placeholder screenshots and media image"
							class="thumbnail"
						/>
						<h3>Lorem Ipsum</h3>
						<p>
							Duis efficitur ligula non sem hendrerit interdum.
							Donec facilisis efficitur malesuada. Nullam
							venenatis.
						</p>
					</div>
				</div>
			</div>
		</section>

		<HandheldVideos />

		<CreditsSection />
	</div>
</Layout>
