---
import { getMenu, getSiteSettings } from "emdash";
import { EmDashHead } from "emdash/ui";
import { createPublicPageContext } from "emdash/page";

interface Props {
	title?: string;
	description?: string;
	image?: string;
}

const { title, description, image } = Astro.props;
const settings = await getSiteSettings();
const siteTitle = settings?.title || "Acme";
const fullTitle = title ? `${title} — ${siteTitle}` : siteTitle;
const siteDescription =
	settings?.tagline || "Build products people actually want";

const menu = await getMenu("primary");

const pageCtx = createPublicPageContext({
	Astro,
	kind: "custom",
	pageType: "website",
	title: fullTitle,
	description: description || siteDescription,
	canonical: Astro.url.href,
	image,
	seo: { ogImage: image },
	siteName: siteTitle,
});
---

<!doctype html>
<html lang="en">
	<head>
		<meta charset="UTF-8" />
		<meta name="viewport" content="width=device-width, initial-scale=1.0" />
		<title>{fullTitle}</title>
		<EmDashHead page={pageCtx} />
		<link rel="preconnect" href="https://fonts.googleapis.com" />
		<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
		<link
			rel="preload"
			as="style"
			href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700;800&display=swap"
		/>
		<link
			href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700;800&display=swap"
			rel="stylesheet"
		/>
		<link
			href="https://unpkg.com/@phosphor-icons/web@2.1.2/src/regular/style.css"
			rel="stylesheet"
		/>
		<style>
			/* Fallback font with metrics adjusted to match Inter */
			@font-face {
				font-family: "Inter Fallback";
				src: local("Arial");
				size-adjust: 107%;
				ascent-override: 90%;
				descent-override: 25%;
				line-gap-override: 0%;
			}
		</style>
		<script is:inline>
			// Apply theme immediately to prevent flash
			(function () {
				var c = document.cookie;
				var i = c.indexOf("theme=");
				var theme = i >= 0 ? c.slice(i + 6).split(";")[0] : null;
				if (theme === "dark" || theme === "light") {
					document.documentElement.classList.add(theme);
				} else if (window.matchMedia("(prefers-color-scheme: dark)").matches) {
					document.documentElement.classList.add("dark");
				}
			})();
		</script>
	</head>
	<body>
		<header class="site-header">
			<nav class="nav">
				<a href="/" class="site-logo">{siteTitle}</a>
				<div class="nav-links">
					{
						menu?.items.map((item) => (
							<a href={item.url} target={item.target}>
								{item.label}
							</a>
						))
					}
				</div>
				<div class="nav-actions">
					<a href="/_emdash/admin" class="nav-admin">Admin</a>
					<a href="/signup" class="nav-cta">Get Started</a>
				</div>
			</nav>
		</header>

		<main>
			<slot />
		</main>

		<footer class="site-footer">
			<div class="footer-content">
				<div class="footer-brand">
					<span class="footer-logo">{siteTitle}</span>
					<p class="footer-tagline">
						{settings?.tagline || "Build something amazing"}
					</p>
				</div>
				<div class="footer-links">
					<div class="footer-col">
						<h4>Product</h4>
						<a href="/#features">Features</a>
						<a href="/pricing">Pricing</a>
						<a href="/changelog">Changelog</a>
					</div>
					<div class="footer-col">
						<h4>Company</h4>
						<a href="/about">About</a>
						<a href="/blog">Blog</a>
						<a href="/careers">Careers</a>
					</div>
					<div class="footer-col">
						<h4>Support</h4>
						<a href="/docs">Documentation</a>
						<a href="/contact">Contact</a>
						<a href="/status">Status</a>
					</div>
				</div>
			</div>
			<div class="footer-bottom">
				<p>
					&copy; {new Date().getFullYear()}
					{siteTitle}. All rights reserved.
				</p>
				<div class="theme-switcher">
					<button
						type="button"
						class="theme-btn"
						data-theme="light"
						aria-label="Light mode">Light</button
					>
					<button
						type="button"
						class="theme-btn"
						data-theme="dark"
						aria-label="Dark mode">Dark</button
					>
					<button
						type="button"
						class="theme-btn"
						data-theme="system"
						aria-label="System theme">System</button
					>
				</div>
				<p class="footer-powered">
					Powered by <a href="https://emdashcms.com">EmDash</a>
				</p>
			</div>
		</footer>

		<script>
			// Theme switcher
			const THEME_REGEX = /theme=([^;]+)/;
			const themeBtns =
				document.querySelectorAll<HTMLButtonElement>(".theme-btn");
			const root = document.documentElement;

			function setTheme(theme: string) {
				const secure = location.protocol === "https:" ? "; Secure" : "";
				if (theme === "system") {
					document.cookie = `theme=; path=/; max-age=0; SameSite=Lax${secure}`;
					root.classList.remove("light", "dark");
					if (window.matchMedia("(prefers-color-scheme: dark)").matches) {
						root.classList.add("dark");
					}
				} else {
					document.cookie = `theme=${theme}; path=/; max-age=31536000; SameSite=Lax${secure}`;
					root.classList.remove("light", "dark");
					root.classList.add(theme);
				}
				updateActiveBtn(theme);
			}

			function updateActiveBtn(theme: string) {
				themeBtns.forEach((btn) => {
					btn.classList.toggle("active", btn.dataset.theme === theme);
				});
			}

			function getStoredTheme(): string {
				const match = document.cookie.match(THEME_REGEX);
				return match ? match[1] : "system";
			}

			// Initialize - apply stored theme on load
			const storedTheme = getStoredTheme();
			setTheme(storedTheme);

			themeBtns.forEach((btn) => {
				btn.addEventListener("click", () => {
					setTheme(btn.dataset.theme || "system");
				});
			});

			// Listen for system preference changes
			window
				.matchMedia("(prefers-color-scheme: dark)")
				.addEventListener("change", (e) => {
					if (getStoredTheme() === "system") {
						root.classList.toggle("dark", e.matches);
					}
				});
		</script>

		<style is:global>
			*,
			*::before,
			*::after {
				box-sizing: border-box;
				margin: 0;
				padding: 0;
			}

			:root {
				/* Colors - Playful/Bold palette */
				--color-bg: #ffffff;
				--color-text: #0f172a;
				--color-muted: #64748b;
				--color-border: #e2e8f0;
				--color-surface: #f8fafc;
				--color-primary: #6366f1;
				--color-primary-dark: #4f46e5;
				--color-primary-light: #818cf8;
				--color-accent: #f472b6;
				--color-accent-light: #f9a8d4;
				--color-success: #22c55e;
				--color-warning: #f59e0b;

				/* Typography */
				--font-sans:
					"Inter", "Inter Fallback", system-ui, -apple-system, sans-serif;
				--font-mono: ui-monospace, "SF Mono", monospace;

				--font-size-xs: 0.75rem;
				--font-size-sm: 0.875rem;
				--font-size-base: 1rem;
				--font-size-lg: 1.125rem;
				--font-size-xl: 1.25rem;
				--font-size-2xl: 1.5rem;
				--font-size-3xl: 2rem;
				--font-size-4xl: 2.5rem;
				--font-size-5xl: 3.5rem;
				--font-size-6xl: 4.5rem;

				/* Spacing */
				--spacing-xs: 0.25rem;
				--spacing-sm: 0.5rem;
				--spacing-md: 1rem;
				--spacing-lg: 1.5rem;
				--spacing-xl: 2rem;
				--spacing-2xl: 3rem;
				--spacing-3xl: 4rem;
				--spacing-4xl: 6rem;
				--spacing-5xl: 8rem;

				/* Layout */
				--max-width: 720px;
				--wide-width: 1200px;
				--radius-sm: 6px;
				--radius: 10px;
				--radius-lg: 16px;
				--radius-full: 9999px;

				/* Transitions */
				--transition-fast: 150ms ease;
				--transition-base: 200ms ease;
				--transition-slow: 300ms ease;

				/* Shadows */
				--shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.05);
				--shadow:
					0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -2px rgba(0, 0, 0, 0.1);
				--shadow-lg:
					0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -4px rgba(0, 0, 0, 0.1);
				--shadow-xl:
					0 20px 25px -5px rgba(0, 0, 0, 0.1),
					0 8px 10px -6px rgba(0, 0, 0, 0.1);
			}

			/* Dark mode via system preference (when no explicit class) */
			@media (prefers-color-scheme: dark) {
				:root:not(.light) {
					--color-bg: #0f172a;
					--color-text: #f1f5f9;
					--color-muted: #94a3b8;
					--color-border: #334155;
					--color-surface: #1e293b;
					--color-primary: #818cf8;
					--color-primary-dark: #6366f1;
					--color-primary-light: #a5b4fc;
				}
			}

			/* Explicit dark mode */
			:root.dark {
				--color-bg: #0f172a;
				--color-text: #f1f5f9;
				--color-muted: #94a3b8;
				--color-border: #334155;
				--color-surface: #1e293b;
				--color-primary: #818cf8;
				--color-primary-dark: #6366f1;
				--color-primary-light: #a5b4fc;
			}

			html {
				scroll-behavior: smooth;
			}

			body {
				font-family: var(--font-sans);
				font-size: var(--font-size-base);
				line-height: 1.6;
				color: var(--color-text);
				background: var(--color-bg);
				-webkit-font-smoothing: antialiased;
				min-height: 100vh;
			}

			a {
				color: currentColor;
				text-decoration: none;
			}

			img {
				max-width: 100%;
				height: auto;
				display: block;
			}

			h1,
			h2,
			h3,
			h4,
			h5,
			h6 {
				font-weight: 700;
				line-height: 1.2;
				letter-spacing: -0.02em;
			}

			h1 {
				font-size: var(--font-size-5xl);
			}
			h2 {
				font-size: var(--font-size-3xl);
			}
			h3 {
				font-size: var(--font-size-2xl);
			}
			h4 {
				font-size: var(--font-size-xl);
			}

			/* Utility classes */
			.container {
				max-width: var(--wide-width);
				margin: 0 auto;
				padding: 0 var(--spacing-lg);
			}

			.section {
				padding: var(--spacing-5xl) 0;
			}

			.btn {
				display: inline-flex;
				align-items: center;
				justify-content: center;
				gap: var(--spacing-sm);
				padding: var(--spacing-sm) var(--spacing-lg);
				font-family: inherit;
				font-size: var(--font-size-sm);
				font-weight: 600;
				border-radius: var(--radius);
				cursor: pointer;
				transition:
					background var(--transition-fast),
					transform var(--transition-fast),
					box-shadow var(--transition-fast);
			}

			.btn:hover {
				transform: translateY(-1px);
			}

			.btn:active {
				transform: translateY(0);
			}

			.btn-primary {
				color: white;
				background: linear-gradient(
					135deg,
					var(--color-primary-dark),
					var(--color-accent)
				);
				border: none;
				transition:
					background 0.3s ease,
					box-shadow 0.3s ease;
			}

			.btn-primary:hover {
				background: linear-gradient(
					135deg,
					var(--color-primary),
					var(--color-accent)
				);
				box-shadow: var(--shadow-lg);
			}

			.btn-secondary {
				color: var(--color-text);
				background: transparent;
				border: 1px solid var(--color-border);
			}

			.btn-secondary:hover {
				background: var(--color-surface);
				border-color: var(--color-muted);
			}

			.btn-lg {
				padding: var(--spacing-md) var(--spacing-xl);
				font-size: var(--font-size-base);
			}
		</style>

		<style>
			.site-header {
				position: sticky;
				top: 0;
				z-index: 100;
				background: var(--color-bg);
				border-bottom: 1px solid var(--color-border);
			}

			.nav {
				max-width: var(--wide-width);
				margin: 0 auto;
				padding: var(--spacing-md) var(--spacing-lg);
				display: flex;
				flex-wrap: nowrap;
				align-items: center;
				gap: var(--spacing-lg);
			}

			.site-logo {
				font-size: var(--font-size-xl);
				font-weight: 800;
				letter-spacing: -0.03em;
				background: linear-gradient(
					135deg,
					var(--color-primary),
					var(--color-accent)
				);
				-webkit-background-clip: text;
				-webkit-text-fill-color: transparent;
				background-clip: text;
			}

			.nav-links {
				display: flex;
				flex-wrap: wrap;
				gap: var(--spacing-lg);
				margin-left: auto;
			}

			.nav-links a {
				font-size: var(--font-size-sm);
				font-weight: 500;
				color: var(--color-muted);
				transition: color var(--transition-fast);
			}

			.nav-links a:hover {
				color: var(--color-text);
			}

			.nav-actions {
				display: flex;
				align-items: center;
				gap: var(--spacing-lg);
			}

			.nav-admin {
				font-size: var(--font-size-sm);
				color: var(--color-muted);
				opacity: 0.5;
			}

			.nav-cta {
				padding: var(--spacing-sm) var(--spacing-md);
				font-size: var(--font-size-sm);
				font-weight: 600;
				color: white;
				background: linear-gradient(
					135deg,
					var(--color-primary-dark),
					var(--color-accent)
				);
				border-radius: var(--radius-sm);
				transition:
					background 0.3s ease,
					transform var(--transition-fast);
			}

			.nav-cta:hover {
				background: linear-gradient(
					135deg,
					var(--color-primary),
					var(--color-accent)
				);
				transform: translateY(-1px);
			}

			main {
				min-height: calc(100vh - 200px);
			}

			.site-footer {
				background: var(--color-surface);
				border-top: 1px solid var(--color-border);
			}

			.footer-content {
				max-width: var(--wide-width);
				margin: 0 auto;
				padding: var(--spacing-4xl) var(--spacing-lg) var(--spacing-2xl);
				display: grid;
				grid-template-columns: 1fr 2fr;
				gap: var(--spacing-4xl);
			}

			.footer-logo {
				font-size: var(--font-size-xl);
				font-weight: 800;
				letter-spacing: -0.03em;
			}

			.footer-tagline {
				margin-top: var(--spacing-sm);
				font-size: var(--font-size-sm);
				color: var(--color-muted);
			}

			.footer-links {
				display: grid;
				grid-template-columns: repeat(3, 1fr);
				gap: var(--spacing-xl);
			}

			.footer-col h4 {
				font-size: var(--font-size-sm);
				font-weight: 600;
				margin-bottom: var(--spacing-md);
			}

			.footer-col a {
				display: block;
				font-size: var(--font-size-sm);
				color: var(--color-muted);
				padding: var(--spacing-xs) 0;
				transition: color var(--transition-fast);
			}

			.footer-col a:hover {
				color: var(--color-text);
			}

			.footer-bottom {
				max-width: var(--wide-width);
				margin: 0 auto;
				padding: var(--spacing-lg);
				display: flex;
				justify-content: space-between;
				align-items: center;
				font-size: var(--font-size-sm);
				color: var(--color-muted);
				border-top: 1px solid var(--color-border);
			}

			.footer-powered a {
				color: var(--color-text);
			}

			.theme-switcher {
				display: flex;
				gap: var(--spacing-xs);
			}

			.theme-btn {
				background: transparent;
				border: 1px solid var(--color-border);
				color: var(--color-muted);
				font-family: var(--font-sans);
				font-size: var(--font-size-sm);
				padding: var(--spacing-xs) var(--spacing-sm);
				border-radius: var(--radius-sm);
				cursor: pointer;
				transition: all var(--transition-fast);
			}

			.theme-btn:hover {
				color: var(--color-text);
				border-color: var(--color-text);
			}

			.theme-btn.active {
				background: var(--color-bg);
				color: var(--color-text);
				border-color: var(--color-primary);
			}

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

				.footer-links {
					grid-template-columns: repeat(2, 1fr);
				}

				.footer-bottom {
					flex-direction: column;
					gap: var(--spacing-md);
					text-align: center;
				}

				.theme-switcher {
					order: -1;
				}

				h1 {
					font-size: var(--font-size-4xl);
				}
				h2 {
					font-size: var(--font-size-2xl);
				}
			}

			@media (max-width: 540px) {
				.nav {
					flex-wrap: wrap;
					row-gap: var(--spacing-md);
					justify-content: space-between;
				}

				.nav-links {
					order: 3;
					width: 100%;
					justify-content: flex-end;
					margin-left: 0;
				}
			}

			@media (max-width: 480px) {
				.footer-links {
					grid-template-columns: 1fr;
				}
			}
		</style>
	</body>
</html>
