// v3-comparison.jsx — H3 "The same Tuesday" comparison.
// Left: the SMB owner doing it all himself, after close (cool, desaturated).
// Right: the same man serving in daytime while Lantic works — live Cortex orb
// ON THE PHONE (brand rule: the orb always sits on the phone, so it always
// reads as the mobile app), with the lanes it's handling stacked beside it.
const {
BRAND, SAT, SF, MONO,
useReducedMotion, useInView, useViewport,
CortexOverlay,
} = window;
const CMP_STRESSED = 'v3/assets/s-compare-owner-stressed.png?v=2';
const CMP_RELIEVED = 'v3/assets/s-compare-owner-relieved.png?v=5';
// The worries he carries alone (left side, faint).
const CMP_WORRIES = [
'Chasing unpaid invoices',
'Roster still not done',
'Suppliers bumped prices',
'BAS due Friday',
'Two bookings clashing',
'47 unread emails',
];
// What Lantic is doing (right side). Colour-keyed to the app's lobe system.
const CMP_LANES = [
{ k: 'MONEY', v: 'Morrison was 8 days over. I chased it, it’s in.', col: '#38BDF8', life: false },
{ k: 'CUSTOMERS', v: 'Three regulars asked about Saturday. Replied as you, all booked.', col: '#7DD3FC', life: false },
{ k: 'CASH FLOW', v: 'Checked the numbers. You’re $1,840 up on last month.', col: '#10B981', life: false },
{ k: 'TEAM', v: 'Friday’s cover’s sorted with Jordan’s Lantic. All organised, no call.', col: '#0EA5E9', life: false },
{ k: 'FAMILY', v: 'Blocked Saturday for his game. You’re not missing it this time.', col: '#FB923C', life: true },
{ k: 'HEALTH', v: 'Held your 6am slot. Doc said work on the blood pressure, this starts it.', col: '#F472B6', life: true },
];
// One-time keyframes for this section.
if (typeof document !== 'undefined' && !document.getElementById('cmp-kf')) {
const s = document.createElement('style'); s.id = 'cmp-kf';
s.textContent = `
@keyframes cmp-rise { 0%{opacity:0; transform:translateY(16px)} 100%{opacity:1; transform:translateY(0)} }
@keyframes cmp-thread { 0%{opacity:.25} 50%{opacity:.7} 100%{opacity:.25} }
@keyframes cmp-stream { 0%{transform:translateY(-100%)} 100%{transform:translateY(320%)} }
@keyframes cmp-flow { to { stroke-dashoffset: -28; } }
`;
document.head.appendChild(s);
}
// ─────────────────────────────────────────────────────────────────
// A small lane card — mono label, sky/lobe dot, one line of Lantic voice.
// ─────────────────────────────────────────────────────────────────
function LaneCard({ lane, idx, show, compact }) {
return (
{/* On phone the sentence is split so each half sits above its own picture
(the two scenes stack one after the other in the scroll). */}
{!phone && (
On his own, every job lands on him. With Lantic, he runs the place, and gets
to be home for the rest.
)}
);
}
// ─────────────────────────────────────────────────────────────────
// A framed scene image that shows the FULL plate (so the phone stays in
// frame) and melts into the canvas at its edges — no pasted-rectangle look.
// ─────────────────────────────────────────────────────────────────
function SceneBox({ children, imgSrc, imgAlt, imgFilter, tint }) {
return (
{tint && }
{/* melt into the canvas on every edge */}
{children}
);
}
// ─────────────────────────────────────────────────────────────────
// LEFT — doing it all himself, after close.
// ─────────────────────────────────────────────────────────────────
function StressedPanel({ compact }) {
return (
{/* readability scrims — top (label) and bottom (the load). Kept lighter
in the middle so the closed-shop scene (chairs, boxes) stays visible */}
{/* label block, top-left (matches the relieved panel — headline reads at the top of both) */}
On his own · 9:48 PM
Every job lands on him.
The owner, the bookkeeper, the rosterer, and the one who locks up. The day
never actually ends.
{/* the load he carries, faint, bottom-left */}
All on him
{CMP_WORRIES.map((w, i) => (
{w}
))}
);
}
// ─────────────────────────────────────────────────────────────────
// RIGHT — serving in daytime; live orb ON THE PHONE (phone stays in frame).
// ─────────────────────────────────────────────────────────────────
function RelievedPanel({ compact, inView }) {
// Orb sits on the phone, lower-centre of the full plate.
const orb = { x: 62, y: 78, size: compact ? 82 : 70 };
return (
{/* warm glow around the orb/phone */}
{/* scrim under the top label — top + left, so the label reads over the
espresso machine and never has to sit on his face */}
{/* label block, top-left — headline kept narrow + two-line so it stays
left of his face */}
With Lantic · 9:48 AM
He talks. Lantic runs it.
{/* the live orb, on the phone */}
{/* glowing beam from the orb out toward the lane stream (desktop) */}
{!compact && (
)}
);
}
// ─────────────────────────────────────────────────────────────────
// The lanes Lantic is running — on the canvas, fully legible.
// ─────────────────────────────────────────────────────────────────
function LaneColumn({ compact, inView, wide }) {
return (
{/* entry node — catches the beam coming from the orb (desktop) */}
{!compact && (
)}
{/* continuous rail — from the header dot straight down through every job,
so on mobile it reads as: Lantic is running all of this, on down the line */}
{compact && !wide && (
{/* connector that reaches UP out of this column to the orb on the
relieved photo above, then flows down into the header dot — so on
mobile the thread reads: orb → "Lantic is running:" → every job. */}