// Lalaluxe booking — components/steps/design.jsx
// Page: "design" — THE LOOK screen. The whole look is now custom: the customer DESCRIBES what
// they want and uploads inspo, and the look is quoted in studio (design === "custom" → "Quoted"
// on summary/checkout). The old preset menus (base style finish + art tiers) were removed — every
// set is bespoke, so there are no presets to pick. The add-on list stays à-la-carte: each selected
// add-on IS charged, so customers are told to tick everything shown in their inspo up front to
// avoid a surprise at the appointment.
//   removal (arrival prep, decided on the base screen) and matching-toes (handled on the toes flow)
// are never shown here — this screen is purely the nail look.
// One screen per file. Load before app.jsx (see CLAUDE.md "multi-file Babel contract").
function DesignStep({ cfg, s, set, toggleArr }) {
	// The look is always custom here: lock it in on entry so pricing quotes the design and the
	// Continue gate (design === "custom") is satisfied without a preset pick. finish is cleared
	// so no stale base-style upcharge rides along; addons are kept — they're chosen below.
	React.useEffect(() => {
		if (s.design !== "custom" || s.finish) set({ design: "custom", finish: null });
	}, []);

	const PREP = new Set(["removal", "matching-toes"]);
	const addons = orderedKeys(cfg.content.order?.addon, cfg.addon)
		.map((k) => ({
			id: k,
			name: cfg.labels.addon[k],
			desc: cfg.content.addonDesc[k],
			img: cfg.content.addonImg[k],
			price: priceTag(cfg.addon[k]),
		}))
		.filter((o) => !PREP.has(o.id));

	const notes = s.contact?.notes || "";
	const setNotes = (v) => set({ contact: { ...s.contact, notes: v } });

	return (
		<div className="screen">
			<h2 className="h-question">
				What's your <span className="swirl">look?</span>
			</h2>
			<p className="h-sub">
				Describe what you want and show us your inspo — we'll price the design together
				at your appointment.
			</p>

			<div className="body">
				<div className="co-section">Describe your look</div>
				<textarea
					className="look-note"
					rows="4"
					placeholder="Tell us the vibe — colors, shapes, themes, anything you're picturing…"
					value={notes}
					onChange={(e) => setNotes(e.target.value)}
				/>

				<div className="co-section">Your inspo</div>
				<p className="custom-hint">
					Upload any references — screenshots, sketches, a vibe. You can add more notes
					at checkout.
				</p>
				<InspoUpload s={s} set={set} />

				<div className="co-section">Add-ons</div>
				<p className="custom-hint">
					To avoid unexpected costs, please select every add-on shown in your inspo —
					plus anything extra you'd like.
				</p>
				<div className="addon-list">
					{addons.map((o) => {
						const on = s.addons.indexOf(o.id) > -1;
						return (
							<button
								key={o.id}
								className={"addbtn addon-row " + (on ? "sel" : "")}
								aria-pressed={on}
								onClick={() => toggleArr("addons", o.id)}
							>
								<img className="addon-img" src={o.img} alt="" />
								<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">{on ? "On" : "+"}</span>
							</button>
						);
					})}
				</div>
			</div>
		</div>
	);
}