// Lalaluxe booking — components/steps/sub-addons.jsx
// Page: "subaddons" — subscription add-ons (freestyle / matching toes / repairs).
// One screen per file. Load before app.jsx (see CLAUDE.md "multi-file Babel contract").
function SubAddonsStep({ cfg, s, toggleArr }) {
	const SDESC = {
		freestyle: "Adds gel art, charms, the works to every set",
		"acrylic-toes": "Matching toes at every visit",
		repair: "Pop a charm? Lost a tip? Come back, no charge.",
	};
	// Zero-price perks (repairs) are part of every plan: rendered with the same locked
	// "Included ✓" recipe as the look screen's bundled art, not as a live toggle.
	const opts = orderedKeys(cfg.content.order?.subAdd, cfg.subAdd).map((k) => ({
		id: k,
		name: cfg.labels.subAddon[k],
		desc: SDESC[k],
		included: cfg.subAdd[k] === 0,
		price: priceTag(cfg.subAdd[k]),
	}));

	return (
		<div className="screen">
			<h2 className="h-question">
				Anything to <span className="swirl">add?</span>
			</h2>
			<p className="h-sub">Across all three months — totally optional.</p>
			<div className="body">
				<div className="opt-list">
					{opts.map((o) => {
						const on = !o.included && s.subaddons.indexOf(o.id) > -1;
						return (
							<button
								key={o.id}
								className={
									"addbtn addon-row prep-row " +
									(o.included ? "included" : on ? "sel" : "")
								}
								disabled={o.included}
								aria-pressed={o.included ? undefined : on}
								onClick={() => !o.included && toggleArr("subaddons", o.id)}
							>
								<span className="addon-copy">
									<span className="addon-name">{o.name}</span>
									<span className="addon-desc">{o.desc}</span>
								</span>
								<span className="ap">{o.price}</span>
								<span className="plus">{o.included ? "✓" : on ? "On" : "+"}</span>
							</button>
						);
					})}
				</div>
			</div>
		</div>
	);
}