/* ============================================================
VIZ — kept deliberately small.
The landing page gets ONE picture (the four links, in the demo's own
icon language: the pill is a measure someone chose) and ONE light
line (where the field stands). Everything that used to live here is
parked in _notes/unused/_attic.jsx, which is not served — the deep pages
keep only the three components they actually use.
============================================================ */
const { useState: vState } = React;
/* ---------------------------------------------------------------- */
/* Icons — drawn rather than emoji so they hold up at display size,
but the meaning is the demo's: a pill is a measure someone chose. */
const MedIcon = {
pulse: ({ s = 28 }) => (
),
break: ({ s = 28 }) => (
),
euro: ({ s = 28 }) => (
),
pill: ({ s = 28 }) => (
),
};
/* ---------------------------------------------------------------- */
/* The one picture: the chain in the direction it runs — measure, cause,
outcome. The right-hand pair is what we bring; the measure on the left
is the open end, so it is the only card carrying colour. */
function PictureRow() {
const { PICTURE } = window.GD;
return (
{PICTURE.map((p, i) => {
const I = MedIcon[p.icon];
return (
{p.med.toUpperCase()}
{p.us}
{p.b}
{i < PICTURE.length - 1 && (
)}
);
})}
{/* who owns which end of the chain — one thin row, no decoration */}
WE FIND THESE TOGETHER
THIS THE PRODUCT MEASURES
);
}
/* ---------------------------------------------------------------- */
/* The light line: five dots, one marker, nothing else. */
function PathLine() {
const { PATH, PATH_HERE } = window.GD;
return (
);
}
/* ---------------------------------------------------------------- */
/* The questions. One open at a time, so the section stays short. */
function QAList() {
const { QA } = window.GD;
const [open, setOpen] = vState(0);
return (
);
}
/* ---------------------------------------------------------------- */
/* Still used by the evidence and method pages. */
function RandomDrawStrip({ k = 0, label = 'the observed effect' }) {
const cells = [];
for (let i = 0; i < 400; i++) {
const hit = i < k;
cells.push(
);
}
return (
{cells}
400 random cohorts of sites where nothing happened.{' '}
{k === 0 ? `None of them reached ${label}.` : `${k} of them reached ${label}.`}
);
}
function FiveLights({ checks }) {
const { FIVE } = window.GD;
const [open, setOpen] = vState(FIVE[0].id);
const cur = checks[open];
return (
{FIVE.map(f => {
const [tone] = checks[f.id];
const active = open === f.id;
const col = tone === 'green' ? '#16A34A' : tone === 'amber' ? '#B45309' : 'var(--mute)';
return (
);
})}