// Shared primitives + chrome for Oprova landing const { useState, useEffect, useRef, useMemo, useCallback } = React; // ---------- i18n hook (shared pub-sub so all components re-render on change) ---------- window.__oprovaLangListeners = window.__oprovaLangListeners || new Set(); window.__oprovaLang = window.__oprovaLang || (() => { try { return localStorage.getItem('oprova_lang') || 'ko'; } catch(e) { return 'ko'; } })(); function useLang() { const [lang, setLangState] = useState(window.__oprovaLang); useEffect(() => { const fn = (v) => setLangState(v); window.__oprovaLangListeners.add(fn); return () => { window.__oprovaLangListeners.delete(fn); }; }, []); const setLang = useCallback((v) => { window.__oprovaLang = v; try { localStorage.setItem('oprova_lang', v); } catch(e){} window.__oprovaLangListeners.forEach(fn => fn(v)); }, []); const t = window.OPROVA_COPY[lang]; return { lang, setLang, t }; } // ---------- Logo (white inline SVG) ---------- function Logo({ size = 22, color = "currentColor" }) { return ( ); } // ---------- Inline arrow ---------- function ArrowRight({ size = 16 }) { return ( ); } // ---------- Top nav ---------- function TopNav({ lang, setLang }) { const t = window.OPROVA_COPY[lang]; return (
{['EN','KO'].map(l => ( ))}
); } // ---------- Marquee ---------- function Marquee({ items, speed = 40 }) { return (
{[...items, ...items, ...items].map((x,i) => ( {x} ))}
); } // ---------- IntersectionObserver reveal ---------- function Reveal({ children, delay=0, className="", style={} }) { const ref = useRef(null); const [on, setOn] = useState(false); useEffect(() => { const io = new IntersectionObserver((ents) => { ents.forEach(e => { if (e.isIntersecting) { setTimeout(() => setOn(true), delay); io.disconnect(); } }); }, { threshold: 0.15 }); if (ref.current) io.observe(ref.current); return () => io.disconnect(); }, [delay]); return (
{children}
); } // ---------- Counter animation ---------- function Counter({ to, duration = 1400 }) { const ref = useRef(null); const [val, setVal] = useState(0); useEffect(() => { const io = new IntersectionObserver((ents) => { if (!ents[0].isIntersecting) return; const start = performance.now(); const target = parseFloat(to); function tick(now) { const p = Math.min(1, (now - start) / duration); const eased = 1 - Math.pow(1 - p, 3); setVal(target * eased); if (p < 1) requestAnimationFrame(tick); } requestAnimationFrame(tick); io.disconnect(); }, { threshold: 0.3 }); if (ref.current) io.observe(ref.current); return () => io.disconnect(); }, [to, duration]); const n = Number.isInteger(parseFloat(to)) ? Math.round(val) : val.toFixed(1); return {n}; } // ---------- Footer ---------- function Footer() { return ( ); } Object.assign(window, { useLang, Logo, ArrowRight, TopNav, Marquee, Reveal, Counter, Footer });