// Lalaluxe booking — components/steps/checkout.jsx
// Page: "checkout" — contact details before the Square redirect. (Look description + inspo
// upload moved to the look screen; this page is contact-only now.)
// One screen per file. Load before app.jsx (see CLAUDE.md "multi-file Babel contract").
function CheckoutStep({ cfg, s, set, sq }) {
	const t = total(s);
	const dur = totalDuration(s);
	const quoted = priceItems(s).some((it) => it.quote);
	const upd = (field, key, val) =>
		set({ [field]: { ...s[field], [key]: val } });
	const c = s.contact;
	const squareOn = !!(sq && sq.configured);
	// Per-field validation hints appear only after a field is touched (blurred), using the
	// SAME predicates that gate "Review & continue" (contactChecks — shared.jsx).
	const [touched, setTouched] = useState({});
	const ck = contactChecks(c);
	const touch = (k) => setTouched((p) => ({ ...p, [k]: true }));
	const err = (k, msg) =>
		touched[k] && !ck[k] ? (
			<span className="field-err" id={"co-" + k + "-err"}>
				{msg}
			</span>
		) : null;
	const errProps = (k) =>
		touched[k] && !ck[k]
			? { "aria-invalid": true, "aria-describedby": "co-" + k + "-err" }
			: {};

	return (
		<div className="screen">
			<h2 className="h-question">
				Lock it <span className="swirl">in.</span>
			</h2>
			<p className="h-sub">
				{/* SQUARE BYPASS — restore the two unconditional Square sentences when removing (docs/REMOVING-SQUARE-BYPASS.md) */}
				{s.visit === "subscription"
					? sq && sq.bypass
						? "No charge today — your $" +
							t +
							" plan total is due at your visit, covers all 3 visits."
						: "Your subscription opens in Square - $" +
							t +
							" today, covers all 3 visits."
					: sq && sq.bypass
						? "Share your details below, then confirm your booking."
						: "Share your details below, then continue to Square."}
			</p>

			<div className="body co-scroll">
				<div className="co-summary">
					<div className="l">
						<div className="when-line">
							{s.date ? prettyDateShort(s.date) : "—"} ·{" "}
							{s.time ? fmtTime(s.time) : "—"}
						</div>
						<div className="when-sub">
							{s.visit === "subscription"
								? "3-month subscription"
								: s.isKid
									? "Kids set"
									: "Custom set"}{" "}
							· est. {dur > 0 ? humanDuration(dur) : "90 min"}
							{s.design === "custom" && (
								<span className="quote-note"> · design quoted in studio</span>
							)}
						</div>
					</div>
					<div className="r">
						<span className="total-lbl">
							{s.visit === "subscription"
								? "Plan total"
								: quoted
									? "Est. total"
									: "Total"}{" "}
							${t}
						</span>
						<span className="co-due">
							{/* SQUARE BYPASS — restore the plain "Due now" pill when removing (docs/REMOVING-SQUARE-BYPASS.md) */}
							{sq && sq.bypass ? (
								s.visit === "subscription" ? (
									<>
										<span className="due-lbl">Due at visit</span>
										<span className="due-amt">${dueNow(s)}</span>
									</>
								) : (
									<span className="due-lbl">No charge today</span>
								)
							) : (
								<>
									<span className="due-lbl">Due now</span>
									<span className="due-amt">${dueNow(s)}</span>
								</>
							)}
						</span>
					</div>
				</div>

				<div className="co-section">Your info</div>
				<div className="field">
					<label className="lab" htmlFor="co-name">
						Name
					</label>
					<input
						id="co-name"
						type="text"
						placeholder="Your full name"
						autoComplete="name"
						aria-required={true}
						value={c.name}
						onChange={(e) => upd("contact", "name", e.target.value)}
						onBlur={() => touch("name")}
						{...errProps("name")}
					/>
					{err("name", "Enter your name")}
				</div>
				<div className="field-row">
					<div className="field">
						<label className="lab" htmlFor="co-email">
							Email
						</label>
						<input
							id="co-email"
							type="email"
							placeholder="you@email.com"
							autoComplete="email"
							aria-required={true}
							value={c.email}
							onChange={(e) => upd("contact", "email", e.target.value)}
							onBlur={() => touch("email")}
							{...errProps("email")}
						/>
						{err("email", "Enter a valid email")}
					</div>
					<div className="field">
						<label className="lab" htmlFor="co-phone">
							Phone
						</label>
						<input
							id="co-phone"
							type="tel"
							inputMode="tel"
							placeholder="(901) 555-0123"
							autoComplete="tel-national"
							aria-required={true}
							value={c.phone}
							onChange={(e) =>
								upd("contact", "phone", formatPhone(e.target.value))
							}
							onBlur={() => touch("phone")}
							{...errProps("phone")}
						/>
						{err("phone", "Enter a 10-digit phone number")}
					</div>
				</div>

				<div className="co-secure">
					<span className="lock"></span>
					<span>
						{/* SQUARE BYPASS — restore the plain Square sentence when removing (docs/REMOVING-SQUARE-BYPASS.md) */}
						{sq && sq.bypass
							? "Online payment is temporarily off — your " +
								(s.visit === "subscription" ? "plan total" : "deposit") +
								" will be collected at your visit."
							: "Payment opens in Square. Lalaluxe does not collect, see, or store card numbers in this booking form." +
								(!squareOn
									? " Square sandbox credentials are not configured yet."
									: "")}
					</span>
				</div>
			</div>
		</div>
	);
}