);
}
// === SCROLLY 1 — Besoins → Specs (sticky right column reveals specs as user scrolls steps) ===
function ScrollyNeedsSpecs({ t }) {
const containerRef = useRef(null);
const p = useScrollProgress(containerRef);
const n = t.scrolly.steps.length;
// active index: divide scroll progress into n bands
const active = Math.min(n - 1, Math.max(0, Math.floor(p * n * 1.05)));
return (
);
}
// === SCROLLY 2 — Prototype assembly ===
function ScrollyAssembly({ t }) {
const containerRef = useRef(null);
const p = useScrollProgress(containerRef);
const n = t.assembly.steps.length;
const active = Math.min(n - 1, Math.max(0, Math.floor(p * n * 1.05)));
return (
{t.assembly.eyebrow}
{t.assembly.title}
{t.assembly.blurb}
{t.assembly.steps.map((s, i) => (
Couche {s.id}
{s.name}
{s.desc}
{s.deliverables.map((d, j) => (
{`0${j+1}`}
{d}
))}
))}
);
}
function AssemblyFigure({ active, t }) {
// i = 0 mech (bottom of stack), i = 1 acquisition (middle), i = 2 software (top)
const labels = ["Mécanique", "Acquisition", "Logiciel"];
const SVG_W = 480, SVG_H = 560;
const CX = SVG_W / 2; // 240
const CY = SVG_H / 2; // 280 — vertical center
const SPACING = 70; // center-to-center between stacked panels (isometric overlap)
const PANEL_HALF_H = 45; // panel is 90 tall, its centre is 45 from its top
// For a given (active, i), compute the centre Y if the layer is visible.
// Visible layers are stacked top→bottom in the order [software, acquisition, mech]
// (i.e. in descending i), and the whole stack stays centred on CY.
// Rank from top within visible group = active - i (0 = topmost).
const targetCenterY = (i) => {
const rankFromTop = active - i;
const groupTop = CY - (active * SPACING) / 2;
return groupTop + rankFromTop * SPACING;
};
return (
);
}
// === CHAIN ===
function ChainSection({ t }) {
const [open, setOpen] = useState(0);
const node = t.chain.nodes[open];
return (
{t.chain.eyebrow}
{t.chain.title}
{t.chain.blurb}
{t.chain.nodes.map((n, i) => (
setOpen(i)}>
{n.id} · {n.sub}
{n.name}
{n.title}
))}
{node.id} · {node.name}
{node.title}
{node.body}
{node.tools.map(tool => {tool})}
);
}
function ChainVisual({ idx, vt }) {
// Different mini-figures for each step
if (idx === 0) return ;
if (idx === 1) return ;
if (idx === 2) return ;
if (idx === 3) return ;
if (idx === 4) return ;
return ;
}
const vizFrame = { background:"#050a14", border:"1px solid rgba(255,255,255,.12)", padding:18, borderRadius:2, minHeight: 200, display:"flex", flexDirection:"column" };
const vizLabel = { fontFamily:"'JetBrains Mono',monospace", fontSize:10, color:"rgba(255,255,255,.45)", letterSpacing:".14em", marginTop:"auto", paddingTop: 12 };
function SensorViz({vt}) {
return (
{vt.sensor_b}
);
}
function CalibViz({vt}) {
return (
{vt.calib_b}
);
}
function DaqViz({vt}) {
return (
{vt.daq_e}
);
}
function DbViz({vt}) {
return (
{vt.db_c}
);
}
function AnalysisViz({vt}) {
return (
{vt.analysis_c}
);
}
function ReportViz({vt}) {
return (
{vt.report_b}
);
}
// === CASE STUDY ===
function CaseStudy({ t }) {
return (
{t.cas.eyebrow}
{t.cas.title}
{t.cas.blurb}
{/* BEFORE */}
{t.cas.before.tag}
{t.cas.before.title}
{t.cas.before.rows.map(([k, v]) => (
{k}
{v}
))}
{/* AFTER */}
{t.cas.after.tag}
{t.cas.after.title}
{t.cas.after.rows.map(([k, v]) => (
{k}
{v}
))}
{t.cas.after.scope}
{t.cas.metrics.map((m, i) => (
{m[0]}{m.length === 3 ? {m[1]} : null}
{m[m.length - 1]}
))}
);
}
function BeforeChart({ vt }) {
// Sparse, static, hand-recorded points on a paper-style grid (manual readings)
const points = [
[42, 84], [78, 80], [106, 92], [138, 76],
[174, 88], [206, 70], [232, 96], [266, 78],
[298, 84], [322, 72], [350, 90], [378, 76],
[402, 86], [422, 74],
];
return (
);
}
function LiveTrace() {
const [t, setT] = useState(0);
useEffect(() => {
let raf;
const tick = () => { setT(p => p + 0.012); raf = requestAnimationFrame(tick); };
raf = requestAnimationFrame(tick);
return () => cancelAnimationFrame(raf);
}, []);
// 3 traces, panning right
const w = 420, h = 160;
const path = (phase, amp, offset, freq) => {
let d = `M 0 ${h/2 + offset}`;
for (let x = 0; x <= w; x += 6) {
const y = h/2 + offset + Math.sin((x*freq + phase)*0.02) * amp + Math.sin((x*freq + phase)*0.08) * amp * 0.4;
d += ` L ${x} ${y}`;
}
return d;
};
return (
);
}
// === CONTACT ===
function Contact({ t }) {
return (