// Lalaluxe booking — components/steps/visit.jsx
// Page: "visit" — appointment vs. 3-month subscription. Picking subscription reveals a
// NEW vs. "I already have a subscription" choice (onSubMode) before advancing.
// One screen per file. Load before app.jsx (see CLAUDE.md "multi-file Babel contract").
function VisitStep({ cfg, s, set, onPick, onSubMode, sq }) {
	// Subscription opens a NEW-vs-existing modal (subMode still undecided). Picking a mode
	// advances; cancelling deselects the tile so the screen returns to its clean two-tile state.
	const subModal = s.visit === "subscription" && !s.subMode;
	// SQUARE BYPASS — nothing is paid up front under bypass; gates the plan copy below (docs/REMOVING-SQUARE-BYPASS.md)
	const bypass = !!(sq && sq.bypass);
	const cardRef = useRef(null);
	const closeModal = () => set({ visit: null, subMode: null });
	// Modal contract (mirrors ConsentModal): focus the card, lock the page scroller,
	// Escape cancels. Effects keyed on subModal so they arm only while it is open.
	useEffect(() => {
		if (!subModal) return;
		const opener = document.activeElement;
		cardRef.current && cardRef.current.focus();
		const wrap = document.querySelector(".screen-wrap");
		const prevOverflow = wrap ? wrap.style.overflowY : "";
		if (wrap) wrap.style.overflowY = "hidden";
		const onKey = (e) => {
			if (e.key === "Escape") closeModal();
		};
		window.addEventListener("keydown", onKey);
		return () => {
			if (wrap) wrap.style.overflowY = prevOverflow;
			window.removeEventListener("keydown", onKey);
			opener && opener.focus && opener.focus();
		};
	}, [subModal]);
	return (
		<div className="screen">
			<h2 className="h-question">
				What type of appointment would you like to <span className="swirl">book?</span>
			</h2>

			<div className="body">
				<div className="tile-stack">
					<button
						className={
							"tile tile-dark " + (s.visit === "appointment" ? "sel" : "")
						}
						aria-pressed={s.visit === "appointment"}
						onClick={() => onPick("appointment")}
					>
						<span className="title">
							A single <em>appointment</em>
						</span>
						<span className="desc">
							Build one custom set — nails, toes, or both.
						</span>
						<span className="ornament">♡</span>
					</button>

					<button
						className={"tile cherry " + (s.visit === "subscription" ? "sel" : "")}
						aria-pressed={s.visit === "subscription"}
						onClick={() => onPick("subscription")}
					>
						<span className="title">
							<em>3-month</em> subscription
						</span>
						<span className="desc">
							{/* SQUARE BYPASS — restore "… — paid up front." when removing (docs/REMOVING-SQUARE-BYPASS.md) */}
							{bypass
								? "One fresh set a month, for three months — plan total due at your first visit."
								: "One fresh set a month, for three months — paid up front."}
						</span>
						<span className="ornament">∞</span>
					</button>

				</div>
			</div>

			{subModal && (
				<div
					className="modal-scrim"
					onClick={(e) => {
						if (e.target.classList.contains("modal-scrim")) closeModal();
					}}
				>
					<div
						className="modal-card sub-mode-card"
						role="dialog"
						aria-modal="true"
						aria-labelledby="sub-mode-title"
						ref={cardRef}
						tabIndex={-1}
					>
						<h3 className="modal-title" id="sub-mode-title">
							Your <em>subscription</em>
						</h3>
						<div className="sub-mode-row">
							<button
								className="sub-mode-btn"
								onClick={() => onSubMode("new")}
							>
								<span className="smb-title">Start a new subscription</span>
								<span className="smb-sub">
									{/* SQUARE BYPASS — restore "Save by prepaying for all three visits" when removing (docs/REMOVING-SQUARE-BYPASS.md) */}
									{bypass
										? "One plan, three monthly visits"
										: "Save by prepaying for all three visits"}
								</span>
							</button>
							<button
								className="sub-mode-btn"
								onClick={() => onSubMode("existing")}
							>
								<span className="smb-title">I already have a subscription</span>
								<span className="smb-sub">
								Enter your subscription code to schedule your next appointment
							</span>
							</button>
						</div>
						<div className="modal-actions">
							<button className="modal-cancel" onClick={closeModal}>
								Cancel
							</button>
						</div>
					</div>
				</div>
			)}
		</div>
	);
}