const { Accordion, Card, Button, Callout, Icon } =
	window.GlenAbbeyRulebookDesignSystem_08052d;
function FaqScreen() {
	const d = window.GA_DATA;
	return (
		<div className="ga-detail">
			<div>
				<PageHead
					eyebrow="Quick answers"
					title="The phone-call questions"
					lead="Things that are not really covenant questions, but which everyone still calls the office about."
				/>
				<Accordion items={d.faq} defaultOpen={0} />
			</div>
			<aside className="ga-detail-aside">
				<Card padding="md">
					<div className="ga-eyebrow" style={{ marginBottom: 10 }}>
						Numbers worth saving
					</div>
					{[
						["Management office", "770.442.9121", "7704429121"],
						["Republic Services", "678-985-1753", "6789851753"],
						["Alpharetta Police (non-emergency)", "678-297-6300", "6782976300"],
					].map(([l, n, tel]) => (
						<div
							key={n}
							style={{
								display: "flex",
								justifyContent: "space-between",
								gap: 12,
								padding: "7px 0",
								borderBottom: "1px solid var(--border-hairline)",
								fontSize: "var(--text-body-sm)",
							}}
						>
							<span style={{ color: "var(--text-muted)" }}>{l}</span>
							<a
								href={"tel:" + tel}
								style={{
									fontFamily: "var(--font-mono)",
									color: "var(--text-strong)",
									textDecoration: "none",
								}}
							>
								{n}
							</a>
						</div>
					))}
				</Card>
				<Callout tone="note" title="Missing something?">
					If you called the office about it, it probably belongs here. Tell us
					and we will add it.
				</Callout>
			</aside>
		</div>
	);
}
Object.assign(window, { FaqScreen });