{/* === GAMIFIED PROGRESS ===
XP-bar style: 4 step badges connected by a gold fill that animates
smoothly as steps advance. Each badge pops with a spring on
activation; completed steps show a checkmark. */}
{/* achievement toast */}
{/* burst layer for tap rewards (sits behind the buttons) */}
{/* ── COMING SOON — an OPAQUE ivory scrim fully hides the live form behind
it; the module reads as built-but-not-yet-open, with a clear way home ── */}
MODULE · 08 / BOOKING
Coming soon
Online reservations open shortly. Until then, our sales team will gladly reserve your residence in person.
);
}
// === Score helper — how complete is the customer step? ====================
function scoreCustomer(c) {
let s = 0;
if (c.name && c.name.trim().length > 1) s += 0.30;
if (c.phone && c.phone.replace(/\D/g, '').length >= 10) s += 0.25;
if (c.email && /@/.test(c.email)) s += 0.25;
if (c.pan && c.pan.length >= 5) s += 0.20;
return Math.min(1, s);
}
// === GamifiedProgress — XP-bar with step badges ============================
function GamifiedProgress({ step, stepScores, flashKey }) {
const STEPS = ['Customer', 'Residence', 'Schedule', 'Confirm'];
const fill = ((step - 1) + (stepScores[step - 1] || 0)) / 3;
return (
{/* the connector bar (positioned behind badges) */}
{STEPS.map((s, i) => {
const n = i + 1;
const done = step > n;
const cur = step === n;
return (
{done ? : n}
{s}
);
})}
);
}
// === Achievement toast — slides in from top, fades after 1.7s ============
function AchievementToast({ a }) {
if (!a) return null;
return (
★{a.label}
);
}
// === Score readout — small "x% complete" ticker under STEP X OF 4 =========
function ScoreReadout({ step, score }) {
const pct = Math.round(score * 100);
return (
{pct}%
);
}
// === StepFader — cross-fade + slide between steps ========================
function StepFader({ stepKey, children }) {
return (
{children}
);
}
// === NextButton — magnetic-CTA-style with tap reward burst ===============
function NextButton({ onTap, label, dens = 0 }) {
const d = dens;
return (
);
}
function StepCustomer({ customer, setCustomer, dens = 0 }) {
const d = dens;
const set = (k, v) => setCustomer({ ...customer, [k]: v });
return (
{/* LEFT — pitch, vertically centred */}
Tell us a little about you.
We use this information to personalise your visit, your cost sheet, and your home-loan options.
YOUR PRIVACY
Your details are stored only on this tablet. Our sales team will reach out within 24 hours.
{/* RIGHT — fields grouped at the vertical centre (mirrors the left pitch
column) so they never stretch apart into dead space on the taller
iPad canvas. */}