---
import { getEmDashEntry } from "emdash";
import Base from "../layouts/Base.astro";
import MarketingBlocks from "../components/MarketingBlocks.astro";

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

Astro.cache.set(cacheHint);

const pageContent = page?.data.content;
---

<Base
	title="Pricing"
	description="Simple, transparent pricing. No hidden fees. No surprises."
>
	{
		pageContent ? (
			<MarketingBlocks value={pageContent} />
		) : (
			<div class="empty-state">
				<h1>Pricing</h1>
				<p>Add pricing content in the admin.</p>
				<a href="/_emdash/admin" class="btn btn-primary">
					Open Admin
				</a>
			</div>
		)
	}
</Base>

<style>
	.empty-state {
		text-align: center;
		padding: var(--spacing-5xl) var(--spacing-lg);
		max-width: var(--max-width);
		margin: 0 auto;
	}

	.empty-state h1 {
		margin-bottom: var(--spacing-md);
	}

	.empty-state p {
		color: var(--color-muted);
		margin-bottom: var(--spacing-xl);
	}
</style>
