// Lalaluxe booking — components/steps/toes-base.jsx
// Page: "tbase" — toes base + finish on ONE screen: material (acrylic/gel) on top, finish
// (solid/french) below. Merged from the old toes-base.jsx + toes-finish.jsx because pricing
// already presents them as a single combined line item ("French acrylic toes"), so splitting
// them across two screens was redundant. Pricing/duration math is unchanged.
// One screen per file. Load before app.jsx (see CLAUDE.md "multi-file Babel contract").
function TBaseStep({ cfg, s, set }) {
	const TDESC = {
		acrylic: "A full sculpted acrylic pedicure",
		gel: "Gel / shellac on natural nails",
	};
	const opts = ["acrylic", "gel"].map((id) => ({
		id,
		name: cfg.labels.toesBase[id],
		desc: TDESC[id],
		price: priceTag(cfg.toesBase[id], "flat"),
	}));
	const fins = {
		solid: priceTag(cfg.toesFin.solid),
		french: priceTag(cfg.toesFin.french),
	};

	return (
		<div className="screen">
			<h2 className="h-question">
				What kind of <span className="swirl">toes?</span>
			</h2>
			<p className="h-sub">
				{s.who === "both"
					? "Matching toes for your set — base, then finish."
					: "Pick your base, then your finish."}
			</p>
			<div className="body">
				<div className="opt-list">
					{opts.map((o) => (
						<button
							key={o.id}
							className={"opt " + (s.tbase === o.id ? "sel" : "")}
							aria-pressed={s.tbase === o.id}
							onClick={() => set({ tbase: o.id })}
						>
							<div
								className="ico"
								style={{
									background:
										o.id === "acrylic"
											? "linear-gradient(135deg, var(--bubblegum), var(--pink-pop))"
											: "linear-gradient(135deg, var(--blush), var(--pink-soft))",
								}}
							>
								{o.id === "acrylic" ? "❀" : "✿"}
							</div>
							<div className="meta">
								<div className="name">{o.name}</div>
								<div className="desc">{o.desc}</div>
							</div>
							<div className="price">{o.price}</div>
						</button>
					))}
				</div>

				<div className="co-section">Finish</div>
				<div className="finish-grid" style={{ gridTemplateColumns: "1fr 1fr" }}>
					<button
						className={"fin " + (s.tfinish === "solid" ? "sel" : "")}
						aria-pressed={s.tfinish === "solid"}
						onClick={() => set({ tfinish: "solid" })}
					>
						<span className="mini-nail solid"></span>
						<span className="fname">{cfg.labels.toesFinish.solid}</span>
						<span className={"fprice" + (fins.solid === "Included" ? " included" : "")}>
							{fins.solid}
						</span>
					</button>
					<button
						className={"fin " + (s.tfinish === "french" ? "sel" : "")}
						aria-pressed={s.tfinish === "french"}
						onClick={() => set({ tfinish: "french" })}
					>
						<span className="mini-nail fr-classic"></span>
						<span className="fname">{cfg.labels.toesFinish.french}</span>
						<span className={"fprice" + (fins.french === "Included" ? " included" : "")}>
							{fins.french}
						</span>
					</button>
				</div>
			</div>
		</div>
	);
}