:
null;
return { open, node };
}
// ─── VIRTUAL TOUR — Kuula 360° embed ───────────────────────────────
// Preliminary interactive rendering walk-through. Click to engage, then drag /
// scroll inside the pane to look around. The URL is tweakable so we can swap
// in a new tour (or a final render) without touching code.
const TOUR_URL_DEFAULT = 'https://kuula.co/share/collection/7M8zV?logo=1&info=0&fs=1&vr=1&sd=1&initload=0&thumbs=1';
const TourContext = React.createContext(TOUR_URL_DEFAULT);
function useTourUrl() {return React.useContext(TourContext);}
function VirtualTour({ palette, label = 'Interactive walkthrough · Ridge unit', caption = 'Preliminary rendering · drag to look around', url }) {
const [engaged, setEngaged] = React.useState(false);
const ctxUrl = useTourUrl();
const src = url || ctxUrl;
const C = palette;
return (
{/* The iframe itself — always mounted so the tour loads once, but pointer-events are gated until engaged */}
{/* Chrome overlay — hides once engaged so nothing fights the tour UI */}
{!engaged &&
<>
● 360° · KUULARIDGE UNIT · INT → BALCONY
{label}{caption}
}
{/* Re-show chrome toggle — small corner tab when engaged */}
{engaged &&
}
);
}
// ─── FLYOVER / VIDEO PLACEHOLDER ────────────────────────────────────
// Retained as a fallback for when no tour URL is available — e.g. if the
// tweak is cleared. Used by V3 Quiet Modern as a static hero strip.
function FlyoverPlaceholder({ palette, label = 'Flyover · Ridge unit to patio', src }) {
const [playing, setPlaying] = React.useState(false);
const C = palette;
return (
{/* timecode overlay */}
● REC · 00:00:00:00DRONE A / RIDGE UNIT / INT→EXT
{/* center play */}
{/* bottom caption */}
{label}Preview · arrives April
{/* scanlines to feel "not yet real" */}
);
}
// ─── 2D / 3D FLOOR PLAN TOGGLE ──────────────────────────────────────
// 2D mode = schematic SVG drawn below. 3D mode = real isometric rendering
// from the architect, with an Upper / Lower switcher for the walkout plan.
function FloorPlan2D3D({ variant = 0, C, mode = '2D' }) {
const [level, setLevel] = React.useState('upper'); // for variant 1 (walkout) in 3D mode
const monoFamily = 'Geist Mono, ui-monospace, monospace';
if (mode === '3D') {
// 2BR — single rendering
if (variant === 0) {
return (
{accentLabel} · Reservations open · Construction Summer 2026
{step === 0 &&
<>
Reserve your visit.
Inquiries route directly to {BROKER.name}, our listing broker at {BROKER.firm}. {first === 'your broker' ? 'They' : first} will confirm within one business day.
setForm({ ...form, name: v })} C={C} />
setForm({ ...form, email: v })} C={C} type="email" />
setForm({ ...form, phone: v })} C={C} />
setForm({ ...form, date: v })} C={C} type="date" />
Interest
{['The Lake · waterfront', 'The Ridge · 2BR', 'The Ridge · 3BR walkout', 'The Trail · trail-side', 'Undecided'].map((x) =>
)}
}
{step === 2 &&
<>
Sent to {first}.
{first} will reach out within one business day to confirm {form.date || 'your visit'}. Watch for a note from {BROKER.email}.
}
);
}
function Field({ label, value, onChange, C, type = 'text' }) {
return (
);
}
// ─── BROKER CARD ───────────────────────────────────────────────────
// Reads from BrokerContext — swap the value via TweaksPanel to re-skin
// every mention across all three site variations at once.
function BrokerCard({ palette, displayFont, bodyFont, monoFont, style = {} }) {
const BROKER = useBroker();
const C = palette;
return (
);
}
// ─── PHASE STATUS BAR ──────────────────────────────────────────────
// Small strip showing all three releases + reservation counts.
function PhaseBar({ palette, displayFont, monoFont }) {
const C = palette;
return (