// Lalaluxe booking — components/steps/toes-addons.jsx
// Page: "taddons" — toes add-ons (chip cloud).
// One screen per file. Load before app.jsx (see CLAUDE.md "multi-file Babel contract").
function TAddonsStep({ cfg, s, toggleArr }) {
	const opts = orderedKeys(cfg.content.order?.toesAdd, cfg.toesAdd).map((k) => ({
		id: k,
		name: cfg.labels.toesAddon[k],
		price: priceTag(cfg.toesAdd[k]),
	}));

	return (
		<div className="screen">
			<h2 className="h-question">
				Anything <span className="swirl">on top?</span>
			</h2>
			<p className="h-sub">Stack as many as you want — totally optional.</p>
			<div className="body">
				<div className="cloud">
					{opts.map((o) => {
						const on = s.taddons.indexOf(o.id) > -1;
						return (
							<button
								key={o.id}
								className={"addbtn " + (on ? "sel" : "")}
								aria-pressed={on}
								onClick={() => toggleArr("taddons", o.id)}
							>
								<span>{o.name}</span>
								<span className="ap">{o.price}</span>
								<span className="plus">{on ? "On" : "+"}</span>
							</button>
						);
					})}
				</div>
			</div>
		</div>
	);
}