{data.map((week, wi) => (
{week.map((c, di) => {
const pad = [4, 3, 2, 1, 0][c.intensity];
return (
{c.intensity > 0 && (
= 3 ? `inset 0 0 0 1px color-mix(in oklab, var(--${c.type}) 50%, black)` : "none",
}} />
)}
);
})}
))}
);
}
/* --- Style 4: Deal bars — activity is segmented bar per day -------- */
function GridDealBars({ data, showType }) {
// each day cell shows a vertical bar broken into deal-type segments based on intensity+type
return (
{data.map((week, wi) => (
{week.map((c, di) => {
const h = [0, 25, 50, 75, 100][c.intensity];
const color = showType ? `var(--${c.type})` : "var(--accent)";
return (
);
})}
))}
);
}
/* --- Grid wrapper with labels ------------------------------------ */
function ActivityGrid({ style, showType }) {
// Monthly view is the default for house/keys styles; other styles still use the weekly data
const isMonthly = (style === "houses" || style === "keys");
const data = useMemo(() => isMonthly ? makeMonthlyActivityData() : makeActivityData(), [isMonthly]);
const [selected, setSelected] = useState(null); // { key, cell, wi, di } — wi=month idx, di=house idx in monthly mode
const [cursor, setCursor] = useState(null);
const containerRef = useRef(null);
const cellRefs = useRef({});
const demoActiveRef = useRef(true);
const demoTimeouts = useRef([]);
const Cmp = {
squares: GridSquares,
houses: GridMonths,
floorplan: GridFloorplan,
dealbars: GridDealBars,
keys: GridMonths,
}[style] || GridFloorplan;
const handleCellClick = (key, cell, wi, di) => {
setSelected(prev => prev && prev.key === key ? null : { key, cell, wi, di });
};
// Cancel the demo the moment the user's real mouse enters the grid
const cancelDemo = () => {
if (!demoActiveRef.current) return;
demoActiveRef.current = false;
demoTimeouts.current.forEach(t => clearTimeout(t));
demoTimeouts.current = [];
setCursor(null);
setSelected(null);
};
// Wait until the grid scrolls into view before starting the demo
const [visible, setVisible] = useState(false);
useEffect(() => {
if (!containerRef.current || !("IntersectionObserver" in window)) { setVisible(true); return; }
const io = new IntersectionObserver((entries) => {
if (entries.some(e => e.isIntersecting && e.intersectionRatio >= 0.4)) {
setVisible(true);
io.disconnect();
}
}, { threshold: [0, 0.4, 0.8] });
io.observe(containerRef.current);
return () => io.disconnect();
}, []);
// Auto-run cursor demo once the grid mounts (houses/keys style only)
useEffect(() => {
if (!visible) return;
if (!(style === "houses" || style === "keys")) return;
const schedule = (fn, delay) => {
const t = setTimeout(() => { if (demoActiveRef.current) fn(); }, delay);
demoTimeouts.current.push(t);
};
// Gather a pool of houses across months to demo; spread picks across different months and types
const picks = [];
const seen = new Set();
for (let mi = 0; mi < data.length; mi++) {
const month = data[mi];
const limit = Math.min(month.length, 18);
for (let hi = 0; hi < limit; hi++) {
const cell = month[hi];
const key = `m${mi}-${hi}`;
if (cell.intensity >= 3 && !seen.has(key)) {
picks.push({ wi: mi, di: hi, cell, key });
seen.add(key);
break; // one per month max
}
}
}
if (picks.length === 0) return;
// Shuffle once for a less predictable order
for (let i = picks.length - 1; i > 0; i--) {
const j = Math.floor(Math.random() * (i + 1));
[picks[i], picks[j]] = [picks[j], picks[i]];
}
// Start cursor at a neutral entry point
schedule(() => {
if (!containerRef.current) return;
const rect = containerRef.current.getBoundingClientRect();
setCursor({ x: rect.width - 40, y: 20, click: false });
}, 500);
let t = 900;
let idx = 0;
// Schedule one visit, then recursively schedule the next — loops forever until cancelDemo() runs
const visitNext = () => {
const p = picks[idx % picks.length];
idx++;
schedule(() => {
const el = cellRefs.current[p.key];
if (!el || !containerRef.current) return;
const eRect = el.getBoundingClientRect();
const cRect = containerRef.current.getBoundingClientRect();
setCursor({ x: eRect.left - cRect.left + eRect.width / 2, y: eRect.top - cRect.top + eRect.height / 2, click: false });
}, t);
t += 200;
schedule(() => {
setCursor(c => c ? { ...c, click: true } : c);
handleCellClick(p.key, p.cell, p.wi, p.di);
}, t);
t += 220;
schedule(() => {
setCursor(c => c ? { ...c, click: false } : c);
}, t);
t += 1600; // let the popover stay readable
schedule(() => {
setSelected(null); // close before moving on
visitNext();
}, t);
t += 12;
};
visitNext();
return () => {
demoActiveRef.current = false;
demoTimeouts.current.forEach(clearTimeout);
demoTimeouts.current = [];
};
// eslint-disable-next-line react-hooks/exhaustive-deps
}, [style, visible]);
// Client-safe labels — each house now has its own pre-generated label + events count
const dealTypeLabel = { precon: "Pre-construction", resale: "Re-sale", luxury: "Luxury", investor: "Investor" };
const activityLabels = {
precon: [
"Builder site visit · 1-bed + den",
"Buyer consultation · pre-con",
"Deposit structure review",
"Assignment opportunity thread",
"Floor plan walkthrough · 2-bed",
"Occupancy timeline update",
"Platinum access · VIP release",
"Amenity package review",
],
resale: [
"Property tour · 2-bed condo",
"Offer preparation · detached",
"Listing prep walkthrough",
"Buyer consultation · first-time",
"Comparative market analysis",
"Staging consultation · townhouse",
"Open house debrief",
"Counter-offer review",
],
luxury: [
"Private showing · detached",
"Past-client follow-up",
"Concierge intro",
"Off-market preview",
"Estate walkthrough · waterfront",
"Exclusive listing consultation",
"Architectural review · custom build",
"High-net-worth referral intro",
],
investor: [
"Portfolio cap-rate review",
"Assignment contract thread",
"Rental comparables · 3-unit",
"Cash flow projection review",
"Duplex inspection walkthrough",
"Pre-construction assignment flip",
"Multi-family acquisition intro",
"Tenant turnover strategy",
],
};
const hashKey = (k) => { let h = 0; for (let i = 0; i < k.length; i++) h = (h * 31 + k.charCodeAt(i)) >>> 0; return h; };
return (
{isMonthly ? (
) : (
<>
{/* month labels (weekly view only) */}
)}
{/* Demo cursor — fades once user moves their mouse into the grid */}
{cursor && (
)}
{/* hint strip */}
{/* Inline popover — opens just below the grid when a cell is selected */}
{selected && (
{isMonthly ? MONTHS[selected.wi] : `week ${selected.wi + 1} · ${DAYS_FULL[selected.di]}`}
{isMonthly && selected.cell.label
? selected.cell.label
: `${dealTypeLabel[selected.cell.type]} · ${selected.cell.intensity} activities`}
setSelected(null)} className="mono"
style={{ background: "none", border: "none", cursor: "pointer", color: "var(--mute)", fontSize: 14 }}>×
{isMonthly ? (
<>
{(() => {
const acts = activityLabels[selected.cell.type] || [];
const h = hashKey(selected.key);
const a1 = acts[h % acts.length];
const a2 = acts[(h + 1) % acts.length];
return (
<>
{dealTypeLabel[selected.cell.type]}
{a1}
{a2}
{selected.cell.events} cross-source signal{selected.cell.events === 1 ? "" : "s"}
(calendar + email)
);
})()}
) : null}
// generalized activity · no timestamps, client names or addresses shown publicly
)}
{/* legend — placed well below the grid so chips don't overlap the last row */}
{showType && (
{[
["precon", "Pre-construction"],
["resale", "Re-sale"],
["luxury", "Luxury"],
["investor", "Investor"],
].map(([k, label]) => (
))}
)}
less
{[1,2,3,4].map(i => (
);
}
Object.assign(window, { ActivityGrid, makeActivityData, MONTHS, DAYS });