const { useState: usePsBodyState, useEffect: usePsBodyEffect, useRef: usePsBodyRef } = React; const PS_HU = new Intl.NumberFormat('hu-HU'); const PS_FIG = 'assets/vitruvian-sm.png'; const PS_SYSTEMS = [ { id: 'ideg', cls: 'ps-lyr-nerve', side: 'l', label: 'IDEGRENDSZER', big: '86 milliárd', bigSub: 'idegsejt egyetlen testben', lines: ['kb. 100 billió szinaptikus kapcsolat', 'egy neuron kb. 7 000 másikkal beszél', 'az inger akár 120 m/s sebességgel fut'] }, { id: 'er', cls: 'ps-lyr-vasc', side: 'l', label: 'ÉRRENDSZER', big: '100 000 km', bigSub: 'érhálózat — kétszer a Föld körül, kétszer', lines: ['kb. 7 500 liter vér naponta', 'kb. 100 000 szívverés naponta', 'egy vörösvértest kb. 120 napot él, majd cserélődik'] }, { id: 'bel', cls: 'ps-lyr-gut', side: 'l', label: 'BÉLFLÓRA', big: '38 billió', bigSub: 'mikroba — nagyjából annyi, mint ahány sejted van', lines: ['kb. 1 000 faj, mindenkinél más összetételben', 'kb. 32 m² felület, amin a szervezet érintkezik velük', 'kb. 500 millió idegsejt a bélfalban'] }, { id: 'sejt', cls: 'ps-lyr-cell', side: 'r', label: 'SEJTSZINT', big: '36 billió', bigSub: 'sejt, kb. 400 különböző típusban', lines: ['minden sejtben kb. 2 méter DNS, összetekerve', 'sejtenként kb. 1–3 milliárd fehérje dolgozik', 'másodpercenként kb. 3,8 millió sejt születik újra'] }, { id: 'szerk', cls: 'ps-lyr-bone', side: 'r', label: 'SZERKEZET', big: '78 szerv', bigSub: '11 szervrendszerbe rendezve', lines: ['206 csont, kb. 600 izom', 'kb. 100 000 milliárd kémiai reakció másodpercenként', 'egyetlen rendszer sem működik a többi nélkül'] }, ]; const PS_LIVE = [ { cap: 'SZÍVVERÉS', rate: 1.2, unit: '×' }, { cap: 'MOZGATOTT VÉR', rate: 83, unit: 'ml' }, { cap: 'ÚJ SEJT', rate: 3800000, unit: '' }, { cap: 'LÉLEGZETVÉTEL', rate: 0.25, unit: '×' }, ]; function PsSystemBox({ s, active, onEnter, onLeave }) { return (
{s.label}
{s.big}
{s.bigSub}
); } function LivingBody() { const [hover, setHover] = usePsBodyState(null); const reduce = usePsBodyRef(!!(window.matchMedia && window.matchMedia('(prefers-reduced-motion: reduce)').matches)).current; const refs = usePsBodyRef([]); const activeId = hover; const active = PS_SYSTEMS.find((s) => s.id === activeId) || null; usePsBodyEffect(() => { if (reduce) { PS_LIVE.forEach((c, i) => { const n = refs.current[i]; if (n) n.textContent = PS_HU.format(Math.floor(c.rate * 60)); }); return; } const t0 = performance.now(); let raf = 0, last = 0; const tick = (t) => { if (t - last > 70) { last = t; const s = (t - t0) / 1000; PS_LIVE.forEach((c, i) => { const n = refs.current[i]; if (n) n.textContent = PS_HU.format(Math.floor(c.rate * s)); }); } raf = requestAnimationFrame(tick); }; raf = requestAnimationFrame(tick); return () => cancelAnimationFrame(raf); }, [reduce]); const col = (side) => PS_SYSTEMS.filter((s) => s.side === side); return (