// Lalaluxe booking — components/steps/summary.jsx
// Page: "summary" — review the receipt before scheduling. The pinned botbar owns the
// "Pick a time" CTA (next() routes summary → calendar).
function SummaryStep({ cfg, s, sq }) {
	const items = priceItems(s);
	const t = total(s);
	const quoted = items.some((it) => it.quote);
	// SQUARE BYPASS — nothing is charged at booking under bypass; gates the due copy below (docs/REMOVING-SQUARE-BYPASS.md)
	const bypass = !!(sq && sq.bypass);
	const quoteNote = quoted
		? " · custom design priced in studio — not included above"
		: "";
	const today = new Date().toLocaleDateString(undefined, {
		month: "short",
		day: "numeric",
		year: "numeric",
	});
	return (
		<div className="screen">
			<h2 className="h-question" style={{ marginBottom: 4 }}>
				Your <span className="swirl">set.</span>
			</h2>
			<p className="h-sub" style={{ marginBottom: 10 }}>
				Looks good — now lock in a time.
			</p>

			<div className="body" style={{ gap: 10 }}>
				<div className="receipt">
					<span
						className="deco-spark"
						style={{ top: 10, right: 14, width: 12, height: 12 }}
					></span>
					<div className="rcpt-head">
						<span className="rcpt-title">
							{s.visit === "subscription"
								? "Subscription"
								: s.isKid
									? "Kids · Custom set"
									: "Custom set"}
						</span>
						<span className="rcpt-date">{today}</span>
					</div>
					{items.length === 0 ? (
						<div className="rcpt-list">
							<div className="rcpt-row">
								<span
									className="l"
									style={{
										fontStyle: "italic",
										fontWeight: 500,
										color: "var(--wine-soft)",
									}}
								>
									Nothing selected
								</span>
							</div>
						</div>
					) : (
						<dl className="rcpt-list">
							{items.map((it, i) => (
								<div className="rcpt-row" key={i}>
									<dt className="l">{it.label}</dt>
									<dd className={"r" + (it.quote ? " quoted" : "")}>
										{it.quote ? "Quoted" : "$" + it.amt}
									</dd>
								</div>
							))}
						</dl>
					)}
					<div className="rcpt-total">
						<span className="lbl">
							{s.visit === "subscription"
								? "Plan total"
								: quoted
									? "Estimated total"
									: "Total"}
						</span>
						<span className="amt">${t}</span>
					</div>
					<div className="rcpt-due">
						<span className="rcpt-due-lbl">
							{/* SQUARE BYPASS — restore the unconditional "Due at booking"/"Due today" label when removing (docs/REMOVING-SQUARE-BYPASS.md) */}
							{s.visit === "subscription"
								? bypass
									? "Due at first visit"
									: "Due at booking"
								: bypass
									? "Deposit · due at visit"
									: "Due today"}
						</span>
						<span className="rcpt-due-amt">${dueNow(s)}</span>
					</div>
					<div className="rcpt-note">
						{/* SQUARE BYPASS — restore the unconditional note when removing (docs/REMOVING-SQUARE-BYPASS.md) */}
						{s.visit === "subscription"
							? (bypass
									? "No charge today — your plan total is due at your first visit, covers all 3 visits. "
									: "Paid in full now · covers all 3 visits. ") +
								"You'll book your first visit next, then use your code to book the other two anytime — reschedule by contacting the studio."
							: (bypass
									? "No charge today — your $" +
										dueNow(s) +
										" deposit and balance are collected at your visit"
									: "Full balance due at your visit") + quoteNote}
					</div>
				</div>
			</div>
		</div>
	);
}