) : 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 ──────────────────────────────────────
// Mirrors the Summit at Bay Harbor pattern Cam/Chad referenced — switch between flat 2D and isometric 3D.
function FloorPlan2D3D({ variant = 0, C, mode = '2D' }) {
// 2D top-down schematic
const draw2D = (v) => {
if (v === 0) {
return (
);
}
// variant 1: 4BR combined walkout
return (
);
};
// 3D isometric
const draw3D = (v) => {
// Isometric projection helpers
const iso = (x, y, z = 0) => {
const ix = (x - y) * 0.866;
const iy = (x + y) * 0.5 - z;
return `${ix + 200},${iy + 120}`;
};
if (v === 0) {
return (
);
}
// v1 — 4BR combined walkout, simplified
return (
);
};
return mode === '3D' ? draw3D(variant) : draw2D(variant);
}
// ─── RESERVATION MODAL — routes to the active listing broker ────────
function ReservationModal({ open, onClose, palette, accentLabel = 'Dune Ridge' }) {
const BROKER = useBroker();
const [step, setStep] = React.useState(0);
const [form, setForm] = React.useState({ name: '', email: '', phone: '', interest: 'The Ridge · 2BR', date: '', notes: '' });
const C = palette;
if (!open) return null;
const submit = (e) => { e.preventDefault(); setStep(2); };
const first = firstNameOf(BROKER.name);
return (
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" />
{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 (
{/* initials portrait placeholder — real headshot to be supplied */}
);
}
// ─── PHASE STATUS BAR ──────────────────────────────────────────────
// Small strip showing all three releases + reservation counts.
function PhaseBar({ palette, displayFont, monoFont }) {
const C = palette;
return (