// Monjez landing — The Operation System (interactive 5-layer flow + live previews)
const { useState: useStateSys } = React;
function accentVars(a) {
return a === 'teal'
? { c: 'var(--teal-signal)', soft: 'var(--teal-soft)', glow: 'rgba(20,184,166,0.45)' }
: { c: 'var(--blue-400)', soft: 'var(--blue-soft)', glow: 'rgba(37,99,235,0.5)' };
}
function OperationSystem() {
const t = window.useT();
const S = t.system;
const layers = S.layers;
const [active, setActive] = useStateSys(0);
const L = layers[active];
const av = accentVars(L.accent);
return (
{S.title.pre}{S.title.accent} {S.title.post}}
sub={S.sub}
/>
{/* stepper */}
{layers.map((ly, i) => {
const on = i === active;
const lv = accentVars(ly.accent);
const Ic = window[ly.icon];
return (
setActive(i)}
style={{ position: 'relative', zIndex: 1, background: 'none', border: 'none', cursor: 'pointer', display: 'flex', flexDirection: 'column', alignItems: 'center', gap: 12, padding: 0 }}>
{ly.tag}
{ly.name}
);
})}
{S.flowIn}
{S.flowOut}
{/* detail */}
{React.createElement(window[L.icon], { size: 22 })}
{S.bottleneck}
{L.problem}
{L.caps.map((c) => (
))}
{L.metrics.map(([k, v], i) => (
))}
);
}
// ---------- per-layer previews ----------
function PreviewShell({ url, children }) {
return (
{['#EF4444', '#F59E0B', '#A78BFA'].map((c) => {url}
{children}
);
}
function Bubble({ who, app, time, children, av }) {
return (
{app ? 'AI' : (who ? who[0] : '•')}
{who}
{app && APP }
{time}
{children}
);
}
function LayerPreview({ id, av }) {
const t = window.useT();
const pv = t.pv;
if (id === 'sales') {
const p = pv.sales;
return (
{p.lead1}
{p.ai1}
{p.lead2}
{p.qTitle}
{p.score}
{p.rows.map(([k, v]) => (
{k} {v}
))}
);
}
if (id === 'delivery') {
const p = pv.delivery;
return (
{p.header}
{p.tag}
{p.steps.map((s, i) => {
const done = i < p.steps.length - 1;
return (
{done ?
{s}
{done && {p.done} }
);
})}
);
}
if (id === 'portal') {
const p = pv.portal;
return (
{p.title}
{p.metrics.map(([k, v, a]) => (
))}
);
}
if (id === 'team') {
const p = pv.team;
return (
{p.cols.map(([title, items]) => (
))}
{p.note}
);
}
const p = pv.founder;
const { MetricCard } = window.MonjezDesignSystem_019de9;
return (
{p.cards.map(([label, value, delta, dir, accent]) => (
);
}
Object.assign(window, { OperationSystem });