const { Card, Button, TextField, Select, Checkbox, Callout, StepList, Badge } =
	window.GlenAbbeyRulebookDesignSystem_08052d;
function FileRequestScreen({ go }) {
	const [step, setStep] = React.useState(0);
	const [checks, setChecks] = React.useState({
		plat: true,
		photo: false,
		spec: false,
	});
	const labels = ["What are you changing?", "Attachments", "Submit"];
	return (
		<div className="ga-detail">
			<div>
				<PageHead
					eyebrow={"Step " + (step + 1) + " of 3"}
					title="Prepare a DRB request"
					lead="This walkthrough gets your packet ready in the same shape the Board expects — filling it out here doesn't submit anything. The last step hands you off to the real form on glenabbeyhoa.com."
				/>
				<Card padding="lg">
					<div
						style={{ display: "flex", gap: 8, marginBottom: "var(--space-6)" }}
					>
						{labels.map((l, i) => (
							<div
								key={l}
								style={{
									flex: 1,
									height: 4,
									borderRadius: 2,
									background:
										i <= step ? "var(--green-700)" : "var(--sand-200)",
								}}
							/>
						))}
					</div>
					{step === 0 && (
						<div
							style={{
								display: "flex",
								flexDirection: "column",
								gap: "var(--space-5)",
							}}
						>
							<Select
								label="What kind of change?"
								options={[
									"Fence or wall",
									"Exterior paint color",
									"Tree removal",
									"Addition or deck",
									"Something else",
								]}
							/>
							<TextField
								label="Describe it the way you would to a neighbor"
								multiline
								defaultValue="Six-foot black aluminum fence along the back property line, set behind the corner of the house."
							/>
							<TextField
								label="Contractor (if you have one)"
								hint="Leave blank if you are doing the work yourself."
							/>
						</div>
					)}
					{step === 1 && (
						<div
							style={{
								display: "flex",
								flexDirection: "column",
								gap: "var(--space-4)",
							}}
						>
							<Callout
								tone="tip"
								title="The plat is the one that holds people up"
							>
								Your closing packet has one. A photo of it is fine.
							</Callout>
							<Checkbox
								label="Plat or survey with the change marked"
								description="Required for anything that touches the yard."
								checked={checks.plat}
								onChange={() => setChecks({ ...checks, plat: !checks.plat })}
							/>
							<Checkbox
								label="Photo of the area today"
								checked={checks.photo}
								onChange={() => setChecks({ ...checks, photo: !checks.photo })}
							/>
							<Checkbox
								label="Product spec, color chip, or link"
								checked={checks.spec}
								onChange={() => setChecks({ ...checks, spec: !checks.spec })}
							/>
						</div>
					)}
					{step === 2 && (
						<div>
							<div
								style={{
									display: "flex",
									gap: 8,
									marginBottom: "var(--space-5)",
								}}
							>
								<Badge tone="ask">Approval needed</Badge>
								<Badge tone="green">Fences &amp; walls</Badge>
							</div>
							<Callout
								tone="warning"
								title="This form doesn't submit your request"
							>
								Nothing you typed above gets sent anywhere — this site has no
								connection to the Association's systems. The button below opens
								the real DRB request form on glenabbeyhoa.com in a new tab,
								where you'll enter the same information for real.
							</Callout>
							<div style={{ marginTop: "var(--space-5)" }}>
								<StepList
									steps={[
										{
											title: "Submit on the official site",
											detail:
												"glenabbeyhoa.com's own DRB Modification Application form.",
											meta: "Opens in a new tab",
										},
										{
											title: "The DRB reviews it",
											detail:
												"By covenant, within 30 days of submission — or it's automatically deemed approved.",
											meta: "Up to 30 days",
										},
										{
											title: "You get a written decision",
											detail:
												"Keep it. Work can begin the day it arrives — not before.",
											meta: "By email",
										},
									]}
								/>
							</div>
						</div>
					)}
					<div
						style={{
							display: "flex",
							justifyContent: "space-between",
							marginTop: "var(--space-8)",
						}}
					>
						<Button
							variant="ghost"
							iconLeft="arrow-left"
							onClick={() => (step ? setStep(step - 1) : go("home"))}
						>
							{step ? "Back" : "Cancel"}
						</Button>
						{step < 2 ? (
							<Button iconRight="arrow-right" onClick={() => setStep(step + 1)}>
								Continue
							</Button>
						) : (
							<Button
								variant="accent"
								iconLeft="external-link"
								onClick={() =>
									window.open(
										"https://www.glenabbeyhoa.com/request-manager/?view=usersubmit&cat=10",
										"_blank",
										"noopener",
									)
								}
							>
								Open the official DRB request form
							</Button>
						)}
					</div>
				</Card>
			</div>
			<aside className="ga-detail-aside">
				<Callout tone="warning" title="Approval first, work second">
					Beginning before the written decision arrives is the most common
					violation in Glen Abbey.
				</Callout>
				<Card padding="md">
					<div className="ga-eyebrow" style={{ marginBottom: 8 }}>
						Prefer to call instead?
					</div>
					<p style={{ margin: 0, fontSize: "var(--text-body-sm)" }}>
						The management office can also walk you through this by phone:
						770.442.9121.
					</p>
				</Card>
			</aside>
		</div>
	);
}
Object.assign(window, { FileRequestScreen });