---
import { getEmDashEntry } from "emdash";
import { PortableText } from "emdash/ui";
import Base from "../layouts/Base.astro";

const { entry: page, cacheHint } = await getEmDashEntry("pages", "about");

try {
	Astro.cache.set(cacheHint);
} catch {}
---

<Base title="About" description="Learn more about who we are and what we do.">
	<div class="about-page">
		<header class="about-header">
			<h1 class="about-title" {...page?.edit?.title}>
				{page?.data?.title || "About"}
			</h1>
		</header>

		<div class="about-content" {...page?.edit?.content}>
			{
				page?.data?.content ? (
					<PortableText value={page.data.content} />
				) : (
					<p>Content coming soon.</p>
				)
			}
		</div>

		<aside class="about-sidebar">
			<div class="sidebar-section">
				<h3>Services</h3>
				<ul>
					<li>Brand Identity</li>
					<li>Web Design & Development</li>
					<li>Print Design</li>
					<li>Photography & Art Direction</li>
				</ul>
			</div>

			<div class="sidebar-section">
				<h3>Contact</h3>
				<p>
					<a href="mailto:hello@studio.example">hello@studio.example</a>
				</p>
				<p>
					<a href="/contact">Send us a message →</a>
				</p>
			</div>
		</aside>
	</div>
</Base>

<style>
	.about-page {
		max-width: var(--wide-width);
		margin: 0 auto;
		padding: var(--spacing-2xl) var(--spacing-lg) var(--spacing-4xl);
		display: grid;
		grid-template-columns: 2fr 1fr;
		grid-template-rows: auto 1fr;
		gap: var(--spacing-4xl);
	}

	.about-header {
		grid-column: 1 / -1;
	}

	.about-title {
		font-family: var(--font-serif);
		font-size: var(--font-size-4xl);
		font-weight: 500;
		line-height: 1.1;
	}

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

	.about-content :global(p) {
		margin-bottom: 1.5em;
	}

	.about-content :global(h2) {
		font-family: var(--font-serif);
		font-size: var(--font-size-2xl);
		font-weight: 500;
		margin-top: 2.5em;
		margin-bottom: 0.75em;
	}

	.about-content :global(h3) {
		font-family: var(--font-serif);
		font-size: var(--font-size-xl);
		font-weight: 500;
		margin-top: 2em;
		margin-bottom: 0.5em;
	}

	.about-sidebar {
		position: sticky;
		top: var(--spacing-xl);
		align-self: start;
	}

	.sidebar-section {
		margin-bottom: var(--spacing-2xl);
	}

	.sidebar-section h3 {
		font-family: var(--font-serif);
		font-size: var(--font-size-lg);
		font-weight: 500;
		margin-bottom: var(--spacing-md);
	}

	.sidebar-section ul {
		list-style: none;
		font-size: var(--font-size-sm);
		color: var(--color-muted);
	}

	.sidebar-section li {
		margin-bottom: var(--spacing-sm);
	}

	.sidebar-section p {
		font-size: var(--font-size-sm);
		color: var(--color-muted);
		margin-bottom: var(--spacing-sm);
	}

	.sidebar-section a {
		color: var(--color-text);
		text-decoration: none;
		transition: color var(--transition-fast);
	}

	.sidebar-section a:hover {
		color: var(--color-accent);
	}

	@media (max-width: 768px) {
		.about-page {
			grid-template-columns: 1fr;
			gap: var(--spacing-2xl);
		}

		.about-title {
			font-size: var(--font-size-3xl);
		}

		.about-sidebar {
			position: static;
			display: grid;
			grid-template-columns: repeat(2, 1fr);
			gap: var(--spacing-xl);
			padding-top: var(--spacing-xl);
			border-top: 1px solid var(--color-border);
		}

		.sidebar-section {
			margin-bottom: 0;
		}
	}

	@media (max-width: 480px) {
		.about-sidebar {
			grid-template-columns: 1fr;
		}
	}
</style>
