---
import BaseLayout from '../layouts/BaseLayout.astro';

import CallToAction from '../components/CallToAction.astro';
import Grid from '../components/Grid.astro';
import Hero from '../components/Hero.astro';
import Icon from '../components/Icon.astro';
import Pill from '../components/Pill.astro';
import PortfolioPreview from '../components/PortfolioPreview.astro';

import ContactCTA from '../components/ContactCTA.astro';
import Skills from '../components/Skills.astro';

import directus, { directus_url } from "../../lib/directus"
import { readItems,readSingleton } from "@directus/sdk";

const global = await directus.request(readSingleton("global"));

const posts = await directus.request(
  readItems("posts", {
    fields: ['*'],
    sort: ["-published_date"],
  })
);
---

<BaseLayout
	title=`Home | ${global.name}`
	description=""
>
	<div class="stack gap-20 lg:gap-48">
		<div class="wrapper stack gap-8 lg:gap-20">
			<header class="hero">
				<Hero
					title=`Hello, my name is ${global.name}`
					tagline={global.tagline}
					align="start"
				>
					<div class="roles">
						<Pill><Icon icon="hard-drives" size="1.33em" /> Engineer</Pill>
						<Pill><Icon icon="code" size="1.33em" /> Developer</Pill>
						<Pill><Icon icon="pencil-line" size="1.33em" /> Writer</Pill>
					</div>
				</Hero>

				<img
					alt=`${global.name} in Antarctica`
					width="480"
					height="620"
					src=`${directus_url}/assets/${global.portrait}`
				/>
			</header>

			<Skills />
		</div>

		<main class="wrapper stack gap-20 lg:gap-48">
			<section class="section with-background with-cta">
				<header class="section-header stack gap-2 lg:gap-4">
					<h3>Selected Projects</h3>
					<p>Take a look below at some of my projects from the past few years.</p>
				</header>

				<div class="gallery">
					<Grid variant="offset">
                        {
                            posts.map((post) => (
                              <li>
                                <PortfolioPreview posts={post} />
                              </li>
                            ))
                          }
					</Grid>
				</div>

				<div class="cta">
					<CallToAction href="/projects/">
						View All
						<Icon icon="arrow-right" size="1.2em" />
					</CallToAction>
				</div>
			</section>

		</main>
		<ContactCTA />
	</div>
</BaseLayout>

<style>
	.hero {
		display: flex;
		flex-direction: column;
		align-items: center;
		gap: 2rem;
	}

	.roles {
		display: none;
	}

	.hero img {
		aspect-ratio: 5 / 4;
		object-fit: cover;
		object-position: top;
		border-radius: 1.5rem;
		box-shadow: var(--shadow-md);
	}

	@media (min-width: 50em) {
		.hero {
			display: grid;
			grid-template-columns: 6fr 4fr;
			padding-inline: 2.5rem;
			gap: 3.75rem;
		}

		.roles {
			margin-top: 0.5rem;
			display: flex;
			gap: 0.5rem;
		}

		.hero img {
			aspect-ratio: 3 / 4;
			border-radius: 4.5rem;
			object-fit: cover;
		}
	}

	.section {
		display: grid;
		gap: 2rem;
	}

	.with-background {
		position: relative;
	}

	.with-background::before {
		--hero-bg: var(--bg-image-subtle-2);

		content: '';
		position: absolute;
		pointer-events: none;
		left: 50%;
		width: 100vw;
		aspect-ratio: calc(2.25 / var(--bg-scale));
		top: 0;
		transform: translateY(-75%) translateX(-50%);
		background:
			url('/assets/backgrounds/noise.png') top center/220px repeat,
			var(--hero-bg) center center / var(--bg-gradient-size) no-repeat,
			var(--gray-999);
		background-blend-mode: overlay, normal, normal, normal;
		mix-blend-mode: var(--bg-blend-mode);
		z-index: -1;
	}

	.with-background.bg-variant::before {
		--hero-bg: var(--bg-image-subtle-1);
	}

	.section-header {
		justify-self: center;
		text-align: center;
		max-width: 50ch;
		font-size: var(--text-md);
		color: var(--gray-300);
	}

	.section-header h3 {
		font-size: var(--text-2xl);
	}

	@media (min-width: 50em) {
		.section {
			grid-template-columns: repeat(4, 1fr);
			grid-template-areas: 'header header header header' 'gallery gallery gallery gallery';
			gap: 5rem;
		}

		.section.with-cta {
			grid-template-areas: 'header header header cta' 'gallery gallery gallery gallery';
		}

		.section-header {
			grid-area: header;
			font-size: var(--text-lg);
		}

		.section-header h3 {
			font-size: var(--text-4xl);
		}

		.with-cta .section-header {
			justify-self: flex-start;
			text-align: left;
		}

		.gallery {
			grid-area: gallery;
		}

		.cta {
			grid-area: cta;
		}
	}

	.mention-card {
		display: flex;
		height: 7rem;
		justify-content: center;
		align-items: center;
		text-align: center;
		border: 1px solid var(--gray-800);
		border-radius: 1.5rem;
		color: var(--gray-300);
		background: var(--gradient-subtle);
		box-shadow: var(--shadow-sm);
	}

	@media (min-width: 50em) {
		.mention-card {
			border-radius: 1.5rem;
			height: 9.5rem;
		}
	}
</style>