// Runtime overrides for two components baked into the pre-built _ds_bundle.js
// (SiteHeader, SiteFooter) whose source has fixed dead links, but which can't
// take effect until the bundle itself is regenerated by the design-system
// tooling. This file reassigns corrected versions onto the same namespace
// object, loaded after _ds_bundle.js and before any screen that uses them.
// Keep this in sync with components/navigation/SiteHeader.jsx and
// components/navigation/SiteFooter.jsx — those are the source of truth for
// the next bundle rebuild; this file is the live-site stopgap until then.
(() => {
	const ns = window.GlenAbbeyRulebookDesignSystem_08052d;
	const { Button, Icon } = ns;

	function SiteHeader({
		nav = [],
		active,
		onNavigate,
		compactSearch,
		style,
		...rest
	}) {
		const [open, setOpen] = React.useState(false);

		// Collapse the menu as soon as the viewport is wide enough to show the
		// real nav, otherwise the panel can be left stranded open on rotate/resize.
		React.useEffect(() => {
			const mq = window.matchMedia("(min-width: 1024px)");
			const sync = (e) => e.matches && setOpen(false);
			mq.addEventListener("change", sync);
			return () => mq.removeEventListener("change", sync);
		}, []);

		const officialSite = () =>
			window.open("https://www.glenabbeyhoa.com/home/", "_blank", "noopener");

		return (
			<header
				{...rest}
				style={{
					position: "sticky",
					top: 0,
					zIndex: 20,
					background: "var(--surface-inverse)",
					color: "var(--text-inverse)",
					borderBottom: "1px solid var(--border-inverse)",
					...style,
				}}
			>
				<div className="ga-header-inner">
					<a
						href="#/home"
						onClick={() => setOpen(false)}
						style={{
							display: "flex",
							alignItems: "baseline",
							gap: "8px",
							textDecoration: "none",
							color: "inherit",
							flexShrink: 0,
						}}
					>
						<span
							style={{
								fontFamily: "var(--font-display)",
								fontSize: 20,
								fontWeight: 700,
								letterSpacing: "-.01em",
							}}
						>
							Glen Abbey
						</span>
						<span
							style={{
								fontFamily: "var(--font-mono)",
								fontSize: 11,
								letterSpacing: ".14em",
								textTransform: "uppercase",
								color: "var(--green-300)",
							}}
						>
							Rulebook
						</span>
					</a>
					<nav className="ga-nav-desktop">
						{nav.map((n) => {
							const v = n.value || n,
								l = n.label || n;
							const on = v === active;
							return (
								<a
									key={v}
									href={"#/" + v}
									aria-current={on ? "page" : undefined}
									style={{
										textDecoration: "none",
										fontSize: "var(--text-body-sm)",
										fontWeight: on
											? "var(--weight-semibold)"
											: "var(--weight-medium)",
										color: on ? "#fff" : "var(--green-200)",
										borderBottom:
											"2px solid " + (on ? "var(--brick-500)" : "transparent"),
										paddingBottom: 2,
									}}
								>
									{l}
								</a>
							);
						})}
					</nav>
					{compactSearch && (
						<div className="ga-header-search">{compactSearch}</div>
					)}
					<span className="ga-header-cta">
						<Button
							variant="secondary"
							size="sm"
							iconLeft="external-link"
							onClick={officialSite}
						>
							Official HOA site
						</Button>
					</span>
					<button
						type="button"
						className="ga-menu-button"
						aria-expanded={open}
						aria-controls="ga-mobile-menu"
						aria-label={open ? "Close menu" : "Open menu"}
						onClick={() => setOpen((v) => !v)}
					>
						<Icon name={open ? "x" : "menu"} size={18} />
						<span>Menu</span>
					</button>
				</div>
				{open && (
					<div id="ga-mobile-menu">
						{compactSearch && (
							<div className="ga-mobile-menu-search">{compactSearch}</div>
						)}
						<nav className="ga-mobile-menu">
							{nav.map((n) => {
								const v = n.value || n,
									l = n.label || n;
								const on = v === active;
								return (
									<a
										key={v}
										href={"#/" + v}
										aria-current={on ? "page" : undefined}
										onClick={() => setOpen(false)}
									>
										{l}
									</a>
								);
							})}
							<a
								href="https://www.glenabbeyhoa.com/home/"
								target="_blank"
								rel="noopener"
								onClick={() => setOpen(false)}
							>
								Official HOA site ↗
							</a>
						</nav>
					</div>
				)}
			</header>
		);
	}

	function SiteFooter({ style, ...rest }) {
		const col = { display: "flex", flexDirection: "column", gap: "8px" };
		const link = {
			color: "var(--green-200)",
			textDecoration: "none",
			fontSize: "var(--text-body-sm)",
		};
		return (
			<footer
				{...rest}
				style={{
					background: "var(--surface-inverse)",
					color: "var(--green-100)",
					marginTop: "var(--space-20)",
					...style,
				}}
			>
				<div
					className="ga-footer-grid"
					style={{
						maxWidth: "var(--width-page)",
						margin: "0 auto",
						padding: "var(--space-10) var(--gutter-page)",
					}}
				>
					<div>
						<div
							style={{
								fontFamily: "var(--font-display)",
								fontSize: 22,
								fontWeight: 700,
								color: "#fff",
							}}
						>
							Glen Abbey Rulebook
						</div>
						<p
							style={{
								maxWidth: "40ch",
								fontSize: "var(--text-body-sm)",
								color: "var(--green-200)",
								marginTop: 8,
							}}
						>
							An unofficial plain-language guide maintained for residents. The
							recorded covenants and the Board's decisions are what govern.
						</p>
					</div>
					<div style={col}>
						<span className="ga-eyebrow" style={{ color: "var(--green-300)" }}>
							Rules
						</span>
						<a href="#/topics/exterior" style={link}>
							Exterior
						</a>
						<a href="#/topics/parking" style={link}>
							Parking
						</a>
						<a href="#/topics/amenities" style={link}>
							Amenities
						</a>
						<a href="#/conflicts" style={link}>
							Open questions
						</a>
					</div>
					<div style={col}>
						<span className="ga-eyebrow" style={{ color: "var(--green-300)" }}>
							Official
						</span>
						<a
							href="https://www.glenabbeyhoa.com/home/"
							target="_blank"
							rel="noopener"
							style={link}
						>
							glenabbeyhoa.com
						</a>
						<a
							href="https://www.glenabbeyhoa.com/document-library/"
							target="_blank"
							rel="noopener"
							style={link}
						>
							Document library
						</a>
						<a href="tel:7704429121" style={link}>
							770.442.9121
						</a>
					</div>
				</div>
				<div style={{ borderTop: "1px solid var(--border-inverse)" }}>
					<div
						style={{
							maxWidth: "var(--width-page)",
							margin: "0 auto",
							padding: "var(--space-4) var(--gutter-page)",
							fontSize: "var(--text-caption)",
							color: "var(--green-300)",
						}}
					>
						3600 Grey Abbey Drive, Alpharetta, GA 30022
					</div>
				</div>
			</footer>
		);
	}

	Object.assign(ns, { SiteHeader, SiteFooter });
})();
