---
import { getMenu, getSiteSettings } from "emdash";
import { EmDashHead } from "emdash/ui";
import { createPublicPageContext } from "emdash/page";
import { Font } from "astro:assets";
import "../styles/theme.css";

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 siteLogo = (settings?.logo as any)?.url ? settings.logo as
	{ mediaId: string; alt?: string; url: string } : null;

const menu = await getMenu("primary");

const pageCtx = createPublicPageContext({
	Astro,
	kind: "custom",
	pageType: "website",
	title: fullTitle,
	pageTitle: title ?? siteTitle,
	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} />
		<Font cssVariable="--font-sans" preload />
		<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">
					{siteLogo
						? <img src={siteLogo.url} alt={siteLogo.alt || siteTitle} class="site-logo-img" />
						: 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">
						{siteLogo
							? <img src={siteLogo.url} alt={siteLogo.alt || siteTitle} class="footer-logo-img" />
							: 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>
			/*
			 * Establish layer order: "base" has lower priority than unlayered
			 * styles, so theme.css overrides always win regardless of source
			 * order in the bundled CSS.
			 */
			@layer base;

			@layer base {
				*,
				*::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-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;
			}

			.site-logo-img {
				height: 48px;
				width: auto;
				display: block;
				margin: -8px 0;
			}

			.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-logo-img {
				height: 24px;
				width: auto;
			}

			.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>
