/* Shared components, hooks, constants for Аудитор Рынка */
const { useState, useEffect, useRef, useMemo, useCallback } = React;
// ---------- Reveal on intersection ----------
function useReveal(rootRef) {
useEffect(() => {
const root = rootRef?.current || document;
const els = root.querySelectorAll('.reveal');
const io = new IntersectionObserver((entries) => {
entries.forEach(e => {
if (e.isIntersecting) e.target.classList.add('in');
else e.target.classList.remove('in');
});
}, { threshold: 0.18 });
els.forEach(el => io.observe(el));
return () => io.disconnect();
}, [rootRef]);
}
// ---------- Snap-scroll observer (which screen is visible) ----------
function useActiveScreen(rootRef) {
const [active, setActive] = useState(0);
useEffect(() => {
const root = rootRef.current;
if (!root) return;
const screens = root.querySelectorAll('.screen');
const io = new IntersectionObserver((entries) => {
entries.forEach(e => {
if (e.isIntersecting && e.intersectionRatio > 0.55) {
const idx = [...screens].indexOf(e.target);
if (idx >= 0) setActive(idx);
}
});
}, { threshold: [0.55, 0.75] , root });
screens.forEach(s => io.observe(s));
return () => io.disconnect();
}, [rootRef]);
return active;
}
// ---------- Haptic helper ----------
// Pattern [4,12,4] = short double-tick — felt on Android. iOS Safari
// silently ignores Web Vibration API; visual press-feedback in CSS covers it.
function useHaptic() {
return useCallback((pattern) => {
try { navigator.vibrate?.(pattern || [4, 12, 4]); } catch {}
}, []);
}
// ---------- Smooth scroll (custom rAF-based, ~25% faster than browser default) ----------
function smoothScrollTo(container, top, duration = 480) {
if (!container) return;
const start = container.scrollTop;
const delta = top - start;
if (Math.abs(delta) < 1) return;
const t0 = performance.now();
const ease = (t) => 1 - Math.pow(1 - t, 3); // cubic ease-out
const step = (now) => {
const t = Math.min(1, (now - t0) / duration);
container.scrollTop = start + delta * ease(t);
if (t < 1) requestAnimationFrame(step);
};
requestAnimationFrame(step);
}
// ---------- Page transition (curtain) ----------
function navigateWithCurtain(href) {
const c = document.createElement('div');
c.className = 'curtain in';
document.body.appendChild(c);
// Curtain animation is .65s; navigate just before it completes so the next
// page's boot-curtain (in HTML) takes over at translateY(0) seamlessly.
setTimeout(() => { window.location.href = href; }, 620);
}
// ---------- Top nav ----------
const PAGES = [
{ key: 'hub', label: 'Подход', href: 'index.html' },
{ key: 'kapital', label: 'Инвестору', href: 'kapital.html' },
{ key: 'baza', label: 'Семье', href: 'baza.html' },
{ key: 'rezidentsiya',label: 'Трофейное', href: 'rezidentsiya.html' },
];
function TopNav({ currentPage }) {
const [open, setOpen] = useState(false);
const haptic = useHaptic();
useEffect(() => {
if (open) {
const prev = document.body.style.overflow;
document.body.style.overflow = 'hidden';
return () => { document.body.style.overflow = prev; };
}
}, [open]);
const go = (href, key) => {
if (currentPage === key) { setOpen(false); return; }
navigateWithCurtain(href);
};
return (
<>
);
}
// ---------- Progress rail ----------
function ProgressRail({ screens, activeIdx, onJump }) {
return (
{screens.map((s, i) => (
onJump(i)}>
{s}
{String(i+1).padStart(2,'0')}
))}
{children}
);
}
// ---------- Screen index/tag labels ----------
function ScreenMeta({ index, total, tag }) {
return (
<>
{String(index).padStart(2,'0')} / {String(total).padStart(2,'0')}
{tag}
);
}
// ---------- Tweaks panel ----------
const TWEAK_KEY = 'audit_tweaks_v1';
function useTweaks(defaults) {
const [tweaks, setTweaks] = useState(() => {
try {
const saved = JSON.parse(localStorage.getItem(TWEAK_KEY) || '{}');
return { ...defaults, ...saved };
} catch { return defaults; }
});
const set = useCallback((key, value) => {
setTweaks(prev => {
const next = { ...prev, [key]: value };
try { localStorage.setItem(TWEAK_KEY, JSON.stringify(next)); } catch {}
try {
window.parent.postMessage({ type: '__edit_mode_set_keys', edits: { [key]: value } }, '*');
} catch {}
return next;
});
}, []);
return [tweaks, set];
}
function TweaksPanel({ open, tweaks, onSet, schema }) {
if (!open) return null;
return (
Tweaks · настройка
{schema.map(s => (
))}
);
}
function useEditModeBridge() {
const [open, setOpen] = useState(false);
useEffect(() => {
function onMsg(e) {
const d = e.data;
if (!d || typeof d !== 'object') return;
if (d.type === '__activate_edit_mode') setOpen(true);
if (d.type === '__deactivate_edit_mode') setOpen(false);
}
window.addEventListener('message', onMsg);
try { window.parent.postMessage({ type: '__edit_mode_available' }, '*'); } catch {}
return () => window.removeEventListener('message', onMsg);
}, []);
return open;
}
// ---------- Apply tweaks as CSS vars on the root ----------
function applyTweakStyles(tweaks) {
const root = document.documentElement;
const accentMap = {
blue: 'oklch(0.38 0.12 250)',
gold: 'oklch(0.52 0.10 75)',
ink: '#1d1d1f',
};
root.style.setProperty('--accent', accentMap[tweaks.accent] || accentMap.blue);
const surfaceMap = {
white: '#ffffff',
bone: '#f7f5f1',
pearl: '#eff0ec',
};
root.style.setProperty('--bg', surfaceMap[tweaks.surface] || '#ffffff');
document.body.style.background = surfaceMap[tweaks.surface] || '#ffffff';
}
// ---------- Chart frame: dismiss "swipe" hint on first touch ----------
function useChartFrameHints(rootRef) {
useEffect(() => {
const root = rootRef?.current || document;
const frames = root.querySelectorAll('.chart-frame');
const handlers = [];
frames.forEach(f => {
const handler = () => f.classList.add('touched');
f.addEventListener('touchstart', handler, { passive: true });
f.addEventListener('scroll', handler, { passive: true });
handlers.push([f, handler]);
});
return () => handlers.forEach(([f, h]) => {
f.removeEventListener('touchstart', h);
f.removeEventListener('scroll', h);
});
}, [rootRef]);
}
// ---------- Share via window ----------
Object.assign(window, {
useReveal, useActiveScreen, useTweaks, useEditModeBridge,
useHaptic, useChartFrameHints, smoothScrollTo,
TopNav, ProgressRail, Placeholder, Icon,
Corners, ScreenMeta, navigateWithCurtain, TweaksPanel, applyTweakStyles,
});