const { SiteHeader, SiteFooter, SearchInput } =
	window.GlenAbbeyRulebookDesignSystem_08052d;
const GA_NAV = [
	{ value: "home", label: "Home" },
	{ value: "topics", label: "All topics" },
	{ value: "faq", label: "Quick answers" },
	{ value: "file", label: "File a request" },
];
function Shell({ route, go, children, withSearch, query, setQuery }) {
	return (
		<div
			style={{
				minHeight: "100%",
				display: "flex",
				flexDirection: "column",
				background: "var(--surface-page)",
			}}
		>
			<SiteHeader
				nav={GA_NAV}
				active={route}
				onNavigate={go}
				compactSearch={
					withSearch ? (
						<SearchInput
							value={query}
							onChange={(e) => setQuery(e.target.value)}
							onClear={() => setQuery("")}
							placeholder="Search the rules…"
						/>
					) : null
				}
			/>
			<main
				style={{
					flex: 1,
					width: "100%",
					maxWidth: "var(--width-page)",
					margin: "0 auto",
					padding: "var(--space-10) var(--gutter-page) var(--space-16)",
				}}
			>
				{children}
			</main>
			<SiteFooter />
		</div>
	);
}
function PageHead({ eyebrow, title, lead }) {
	return (
		<header
			style={{
				marginBottom: "var(--space-8)",
				maxWidth: "var(--measure-prose)",
			}}
		>
			{eyebrow && (
				<div className="ga-eyebrow" style={{ marginBottom: 8 }}>
					{eyebrow}
				</div>
			)}
			<h2 style={{ marginBottom: lead ? 12 : 0 }}>{title}</h2>
			{lead && (
				<p
					style={{
						fontSize: "var(--text-lead)",
						lineHeight: "var(--lh-lead)",
						color: "var(--text-body)",
						margin: 0,
					}}
				>
					{lead}
				</p>
			)}
		</header>
	);
}
Object.assign(window, { Shell, PageHead, GA_NAV });