---
import { getEmDashEntry } from "emdash";
import PortfolioBase from "../layouts/PortfolioBase.astro";

const { entry: page, cacheHint } = await getEmDashEntry("pages", "about");
Astro.cache.set(cacheHint);
---

<PortfolioBase title="About">
	<main class="container">
		<article>
			<h1>About Us</h1>
			{page?.data?.content ? (
				<div class="content">
					{page.data.content.map((block: any) => {
						if (block._type === "block") {
							return <p>{block.children?.map((c: any) => c.text).join("")}</p>;
						}
						return null;
					})}
				</div>
			) : (
				<div class="content">
					<p>We are a creative studio focused on design and development.</p>
					<p>Add your about page content in the admin panel.</p>
					<a href="/_emdash/admin">Open Admin</a>
				</div>
			)}
		</article>
	</main>
</PortfolioBase>

<style>
	main.container {
		padding: var(--spacing-5xl) var(--spacing-lg);
		max-width: 800px;
		margin: 0 auto;
	}

	article h1 {
		font-size: var(--font-size-4xl);
		margin-bottom: var(--spacing-2xl);
		font-family: var(--font-serif);
	}

	.content {
		font-size: var(--font-size-lg);
		line-height: 1.7;
	}

	.content p {
		margin-bottom: var(--spacing-lg);
	}

	.content a {
		display: inline-block;
		margin-top: var(--spacing-lg);
		padding: var(--spacing-md) var(--spacing-xl);
		background: var(--color-primary);
		color: white;
		text-decoration: none;
		border-radius: var(--radius);
		font-weight: 600;
	}
</style>