// Lalaluxe booking — components/steps/who.jsx
// Page: "who" — nails / both / toes, plus the kids-pricing toggle.
// One screen per file. Load before app.jsx (see CLAUDE.md "multi-file Babel contract").
function WhoStep({ cfg, s, set }) {
	return (
		<div className="screen">
			<h2 className="h-question">
				What are you booking <span className="swirl">today?</span>
			</h2>

			<div className="body">
				<div className="who-grid">
					<button
						className={"who-tile " + (s.who === "nails" ? "sel" : "")}
						aria-pressed={s.who === "nails"}
						onClick={() => set({ who: "nails" })}
					>
						<img
							className="nail-photo"
							src="images/nail-finger.png"
							alt="Manicured nail"
						/>
						<div className="who-name">{cfg.content.whoTiles.nails.name}</div>
						<div className="who-sub">{cfg.content.whoTiles.nails.sub}</div>
					</button>
					<button
						className={"who-tile " + (s.who === "both" ? "sel" : "")}
						aria-pressed={s.who === "both"}
						onClick={() => set({ who: "both" })}
					>
						<div
							style={{
								display: "flex",
								gap: 2,
								marginTop: 2,
								alignItems: "flex-end",
								justifyContent: "center",
							}}
						>
							<img
								className="nail-photo"
								src="images/nail-finger.png"
								alt="Manicured nail"
								style={{ height: "4.8em", minWidth: 0 }}
							/>
							<div
								style={{
									fontFamily: "var(--display)",
									fontStyle: "italic",
									color: "var(--cherry)",
									fontSize: "1.2em",
									paddingBottom: "0.778em",
								}}
							>
								+
							</div>
							<img
								className="toe-photo"
								src="images/toe-finger.png"
								alt="Pedicured toe"
								style={{ height: "3.867em", minWidth: 0 }}
							/>
						</div>
						<div className="who-name">{cfg.content.whoTiles.both.name}</div>
						<div className="who-sub">{cfg.content.whoTiles.both.sub}</div>
					</button>
					<button
						className={"who-tile " + (s.who === "toes" ? "sel" : "")}
						aria-pressed={s.who === "toes"}
						onClick={() => set({ who: "toes" })}
					>
						<img
							className="toe-photo"
							src="images/toe-finger.png"
							alt="Pedicured toe"
						/>
						<div className="who-name">{cfg.content.whoTiles.toes.name}</div>
						<div className="who-sub">{cfg.content.whoTiles.toes.sub}</div>
					</button>
				</div>

				<div className="kid" onClick={() => set({ isKid: !s.isKid })}>
					<span className="label" id="kid-label">
						Is this booking for a child?
					</span>
					<button
						type="button"
						className={"switch " + (s.isKid ? "on" : "")}
						aria-pressed={s.isKid}
						aria-labelledby="kid-label"
					/>
				</div>
			</div>
		</div>
	);
}