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

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

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

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

<BaseLayout title=`About | ${global.name}` description=`About ${global.name}`>
	<div class="stack gap-20">
		<main class="wrapper about">
			<Hero
				title="About"
				tagline="Thanks for stopping by. Read below to learn more about myself and my background."
			>
				<img
					width="1553"
					height="873"
					src=`${directus_url}/assets/${global.about}`
					alt=`${global.name} hiking in Texas`
				/>
			</Hero>

			<section>
				<h2 class="section-title">Background</h2>
                <div
                    class="content"
                    set:html={about.background}
                />
			</section>
			<section>
				<h2 class="section-title">Experience</h2>
                <div
                    class="content"
                    set:html={about.experience}
                />
			</section>
			<section>
				<h2 class="section-title">Education</h2>
                <div
                    class="content"
                    set:html={about.education}
                />
			</section>
			<section>
				<h2 class="section-title">Certifications</h2>
                <div
                    class="content"
                    set:html={about.certifications}
                />
			</section>
		</main>

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

<style>
	.about {
		display: flex;
		flex-direction: column;
		gap: 3.5rem;
	}

	img {
		margin-top: 1.5rem;
		border-radius: 1.5rem;
		box-shadow: var(--shadow-md);
	}

	section {
		display: flex;
		flex-direction: column;
		gap: 0.5rem;
		color: var(--gray-200);
	}

	.section-title {
		grid-column-start: 1;
		font-size: var(--text-xl);
		color: var(--gray-0);
	}

	.content {
		grid-column: 2 / 4;
	}

	.content :global(a) {
		text-decoration: 1px solid underline transparent;
		text-underline-offset: 0.25em;
		transition: text-decoration-color var(--theme-transition);
	}

	.content :global(a:hover),
	.content :global(a:focus) {
		text-decoration-color: currentColor;
	}

	@media (min-width: 50em) {
		.about {
			display: grid;
			grid-template-columns: 1fr 60% 1fr;
		}

		.about > :global(:first-child) {
			grid-column-start: 2;
		}

		section {
			display: contents;
			font-size: var(--text-lg);
		}
	}
</style>