const { SearchInput, CategoryTile, RuleCard, Button, Callout, Icon, Tag } =
	window.GlenAbbeyRulebookDesignSystem_08052d;
function HomeScreen({ go, goTopic, query, setQuery, openRule }) {
	const d = window.GA_DATA;
	const q = query.trim().toLowerCase();
	const qWords = q.split(/\s+/).filter(Boolean);
	const hits = qWords.length
		? d.rules.filter((r) => {
				const hay = (
					r.title +
					" " +
					r.summary +
					" " +
					r.topic +
					" " +
					r.plain.join(" ")
				).toLowerCase();
				return qWords.every((w) => hay.includes(w));
			})
		: [];
	return (
		<div>
			<section className="ga-hero">
				<div className="ga-hero-inner">
					<div
						className="ga-eyebrow"
						style={{ color: "var(--green-300)", marginBottom: 12 }}
					>
						Unofficial · Resident-maintained
					</div>
					<h1 style={{ color: "#fff", marginBottom: 14 }}>
						What the rules really say.
					</h1>
					<p
						style={{
							fontSize: "var(--text-lead)",
							lineHeight: "var(--lh-lead)",
							color: "var(--green-100)",
							marginBottom: "var(--space-6)",
						}}
					>
						Plain-English answers to the questions Glen Abbey residents actually
						ask — with the exact covenant language underneath, so you can check
						our work.
					</p>
					<SearchInput
						size="lg"
						value={query}
						onChange={(e) => setQuery(e.target.value)}
						onClear={() => setQuery("")}
						placeholder="Can I put up a fence?"
					/>
					<div
						style={{
							display: "flex",
							flexWrap: "wrap",
							gap: 8,
							marginTop: 14,
							alignItems: "center",
						}}
					>
						<span
							style={{
								fontSize: "var(--text-caption)",
								color: "var(--green-300)",
							}}
						>
							Try:
						</span>
						{["fence", "tree removal", "trash cans", "pool guests"].map((s) => (
							<Tag key={s} onClick={() => setQuery(s)}>
								{s}
							</Tag>
						))}
					</div>
				</div>
			</section>
			{q && (
				<section style={{ marginBottom: "var(--space-12)" }}>
					<PageHead
						eyebrow={hits.length + " result" + (hits.length === 1 ? "" : "s")}
						title={"“" + query + "”"}
					/>
					<div
						style={{
							display: "flex",
							flexDirection: "column",
							gap: "var(--space-3)",
						}}
					>
						{hits.map((r) => (
							<RuleCard
								key={r.id}
								verdict={r.verdict}
								verdictLabel={r.verdictLabel}
								topic={r.topic}
								title={r.title}
								summary={r.summary}
								updated={r.updated}
								onClick={() => openRule(r.id)}
							/>
						))}
						{!hits.length && (
							<Callout tone="note" title="Nothing yet">
								Try a plainer word — “shed” instead of “accessory structure”. Or
								ask the board directly.
							</Callout>
						)}
					</div>
				</section>
			)}
			<section style={{ marginBottom: "var(--space-12)" }}>
				<PageHead eyebrow="Browse" title="Start with a topic" />
				<div className="ga-tile-grid">
					{d.topics.map((t) => (
						<CategoryTile
							key={t.id}
							icon={t.icon}
							title={t.title}
							count={t.count}
							description={t.desc}
							onClick={() => goTopic(t.id)}
						/>
					))}
				</div>
			</section>
			<section className="ga-home-split">
				<div>
					<PageHead
						eyebrow="Asked most this month"
						title="The four everyone gets wrong"
					/>
					<div
						style={{
							display: "flex",
							flexDirection: "column",
							gap: "var(--space-3)",
						}}
					>
						{d.rules.slice(0, 4).map((r) => (
							<RuleCard
								key={r.id}
								verdict={r.verdict}
								verdictLabel={r.verdictLabel}
								topic={r.topic}
								title={r.title}
								summary={r.summary}
								onClick={() => openRule(r.id)}
							/>
						))}
					</div>
				</div>
				<div className="ga-home-rail">
					<Callout tone="warning" title="This site is unofficial">
						The recorded covenants and the Board's written decisions govern.
						When they disagree with us, they win — and please tell us.
						<div style={{ marginTop: 8 }}>
							<a
								href="#/conflicts"
								style={{
									color: "var(--ask-500)",
									fontWeight: "var(--weight-semibold)",
									textDecoration: "underline",
								}}
							>
								See all 17 open questions →
							</a>
						</div>
					</Callout>
					<Callout tone="deadline" title="Assessments due January 1">
						Late after January 31. Received, not postmarked.
					</Callout>
					<Button
						variant="accent"
						iconLeft="file-plus"
						fullWidth
						onClick={() => go("file")}
					>
						Walk me through a DRB request
					</Button>
				</div>
			</section>
		</div>
	);
}
Object.assign(window, { HomeScreen });