// Lalaluxe booking — components/steps/plan.jsx
// Page: "plan" — subscription length picker (reuses the length-stage visual).
// One screen per file. Load before app.jsx (see CLAUDE.md "multi-file Babel contract").
function PlanStep({ cfg, s, set, sq }) {
	const heights = { short: "4.6em", medium: "5.7em", long: "7.4em", xl: "9.1em", xxl: "11.667em" }; // em of .finger's container-keyed scale; 3.333em bed + 11.667em XXL = 15em fills the stage (matches length.jsx)
	const cur = s.plan || "short";
	// SQUARE BYPASS — nothing is paid up front under bypass; gates the h-sub clause below (docs/REMOVING-SQUARE-BYPASS.md)
	const bypass = !!(sq && sq.bypass);

	const captions = cfg.content.subscriptionCaptions;

	return (
		<div className="screen">
			<h2 className="h-question">
				How <span className="swirl">long?</span>
			</h2>
			<p className="h-sub">
				One fresh set each month, three months running.{" "}
				{/* SQUARE BYPASS — restore "Plain & French included · paid up front." when removing (docs/REMOVING-SQUARE-BYPASS.md) */}
				{bypass
					? "Plain & French included · plan total due at your first visit."
					: "Plain & French included · paid up front."}{" "}
				You'll book your first visit now — the other two anytime with your
				code.
			</p>
			<div className="body">
				<div className="length-stage">
					<div className="length-vis">
						<div className="finger">
							<div className="skin"></div>
							<div className="knuckle"></div>
							<div
								className="nail-bed"
								style={{ height: heights[cur], opacity: "0.8" }}
							>
								<span className="glint"></span>
							</div>
						</div>
					</div>

					<div className="length-cap">
						{s.plan ? captions[s.plan] : "Tap a length to see your plan"}
					</div>

					<div className="length-buttons">
						{["short", "medium", "long", "xl", "xxl"].map((L) => (
							<button
								key={L}
								className={"lbtn " + (s.plan === L ? "sel" : "")}
								aria-pressed={s.plan === L}
								onClick={() => set({ plan: L })}
							>
								<div className="lname">{cfg.labels.length[L]}</div>
								<div className="lprice">${cfg.plan[L]}</div>
							</button>
						))}
					</div>
				</div>
			</div>
		</div>
	);
}