// Lalaluxe booking — components/steps/length.jsx
// Page: "length" — nail length picker with the finger preview.
// One screen per file. Load before app.jsx (see CLAUDE.md "multi-file Babel contract").
function LengthStep({ cfg, s, set }) {
	const lens = ["short", "medium", "long", "xl", "xxl"];
	// em of .finger's container-keyed scale; 3.333em cuticle offset + 11.667em XXL = 15em
	// fills the stage (the .finger font-size denominator is 15 to match).
	const heights = {
		short: "4.6em",
		medium: "5.7em",
		long: "7.4em",
		xl: "9.1em",
		xxl: "11.667em",
	};
	const cur = s.length || "short";
	const prices = cfg.base[s.service];

	const captions = cfg.content.lengthCaptions;

	return (
		<div className="screen">
			<h2 className="h-question">
				How <span className="swirl">long?</span>
			</h2>
			<p className="h-sub">Tap through the lengths.</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.length ? captions[s.length] : "Tap a length"}
					</div>

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