// v3-mindmodel.jsx — S6 "One mind, connected to your whole world."
// Answers the reader's question after S5 ("so how does it know about me?").
// Left : a constellation — the Cortex orb at centre with the 6 lobes of
// Lantic's mental model around it, beams flowing inward.
// Right : a spotlight panel showing the ACTIVE lobe — what feeds it (clean
// text chips). The active lobe AUTO-ROTATES (work → money → …) so the
// reader sees every lobe without scrolling; tapping a lobe (or a dot)
// takes over and the spotlight updates in place. Goals + Notes are
// merged into a single "Memory" lobe.
const {
BRAND, SAT, SF, MONO,
useReducedMotion, useInView, useViewport,
Cortex,
} = window;
// The six lobes. kind drives the small descriptor: tools you connect, people
// around you, or Lantic's own running memory of you.
const MIND_LOBES = [
{ id: 'work', label: 'WORK', col: '#38BDF8', kind: 'Apps & tools',
line: 'Reads your email, calendar, jobs and customers, then acts on them.',
chips: ['Google', 'Microsoft', 'Tradify', 'ServiceM8', 'Jobber', 'HubSpot', 'Shopify'] },
{ id: 'money', label: 'MONEY', col: '#10B981', kind: 'Apps & tools',
line: 'Watches cash flow, chases what’s owed, sees every dollar in and out.',
chips: ['Xero', 'MYOB', 'Square', 'Basiq'] },
{ id: 'team', label: 'TEAM', col: '#7DD3FC', kind: 'People',
line: 'Sorts cover and schedules with your staff’s Lantics. No calls needed.',
chips: ['Your staff', 'Their Lantics'] },
{ id: 'family', label: 'FAMILY', col: '#FB923C', kind: 'People',
line: 'Protects the dinners, the games, the time that’s theirs.',
chips: ['Your family’s Lantics', 'Shared calendar'] },
{ id: 'health', label: 'HEALTH', col: '#F472B6', kind: 'Apps & tools',
line: 'Holds the gym slot, the early walk, the break you keep skipping.',
chips: ['Calendar', 'Reminders'] },
{ id: 'memory', label: 'MEMORY', col: '#A78BFA', kind: 'Remembers',
line: 'You mention it once. Lantic writes it down and brings it back at exactly the right moment.',
chips: ['Your goals', 'Offhand notes', 'What you said last week'] },
];
// One-time keyframes.
if (typeof document !== 'undefined' && !document.getElementById('mm-kf')) {
const s = document.createElement('style'); s.id = 'mm-kf';
s.textContent = `
@keyframes mm-flow { to { stroke-dashoffset: -24; } }
@keyframes mm-orbpulse { 0%,100%{ transform: translate(-50%,-50%) scale(1); } 50%{ transform: translate(-50%,-50%) scale(1.03); } }
@keyframes mm-cardin { from { opacity: 0; transform: translateY(9px); } to { opacity: 1; transform: none; } }
`;
document.head.appendChild(s);
}
// ─────────────────────────────────────────────────────────────────
// A single integration / source chip.
// ─────────────────────────────────────────────────────────────────
function SourceChip({ label, col }) {
return (
{label}
);
}
// ─────────────────────────────────────────────────────────────────
// Spotlight — the detail panel for the active lobe. Sits beside the
// constellation (below it on mobile) so what you tap is instantly in view.
// ─────────────────────────────────────────────────────────────────
function Spotlight({ lobe, order, active, onPick, phone }) {
return (
{/* content re-keyed on the active lobe so it re-animates on each change */}
{lobe.label}{lobe.kind}
{lobe.line}
{lobe.chips.map(c => )}
{/* rotation dots — show progress through the lobes and let you jump */}
{order.map(id => {
const o = MIND_LOBES.find(l => l.id === id);
const on = id === active;
return (
);
}
// ─────────────────────────────────────────────────────────────────
// Section
// ─────────────────────────────────────────────────────────────────
function MindModel() {
const ref = React.useRef(null);
const inView = useInView(ref, 0.16);
const reduced = useReducedMotion();
const vw = useViewport();
const phone = vw < 640;
const compact = vw < 1024;
const order = MIND_LOBES.map(l => l.id);
const [active, setActive] = React.useState('work');
const [paused, setPaused] = React.useState(false);
const resumeRef = React.useRef(null);
// user takes over: select + pause auto-rotate, then resume after idle.
const pick = (id) => {
setActive(id);
setPaused(true);
clearTimeout(resumeRef.current);
resumeRef.current = setTimeout(() => setPaused(false), 9000);
};
// auto-rotate the active lobe while the section is in view.
React.useEffect(() => {
if (!inView || paused || reduced) return;
const t = setInterval(() => {
setActive(prev => order[(order.indexOf(prev) + 1) % order.length]);
}, 3200);
return () => clearInterval(t);
}, [inView, paused, reduced]);
React.useEffect(() => () => clearTimeout(resumeRef.current), []);
// Ring geometry — nodes evenly spaced, starting at the top.
const N = MIND_LOBES.length;
const radius = phone ? 40 : 39;
const pts = MIND_LOBES.map((l, i) => {
const a = (-90 + i * (360 / N)) * Math.PI / 180;
return { ...l, x: 50 + radius * Math.cos(a), y: 50 + radius * Math.sin(a) };
});
const activeLobe = MIND_LOBES.find(l => l.id === active) || MIND_LOBES[0];
return (
{/* ambient glow, tinted to the active lobe */}
{/* Header */}
How it knows you
One mind, connected to your whole world.
Lantic connects to your world, the tools you already run on and the people
around you, and keeps it all in one mind. {phone ? 'Tap' : 'Hover or tap'} a
lobe to see what feeds it.
{/* constellation + spotlight */}
{/* Part A — constellation */}
{/* beams */}
{/* centre orb */}
{/* lobe nodes */}
{pts.map((p, i) => {
const on = active === p.id;
return (
);
})}
{/* Part B — spotlight (updates as it rotates / on tap) */}