// Variant A — EDITORIAL const { useState: useStateA, useEffect: useEffectA, useRef: useRefA } = React; // --- Philosophy section with sequential reveal + strike animation --- function PhilosophySection({ t }) { const ref = React.useRef(null); const [step, setStep] = React.useState(-1); React.useEffect(() => { const io = new IntersectionObserver((es) => { if (es[0].isIntersecting) { setStep(0); io.disconnect(); } }, { threshold: 0.4 }); if (ref.current) io.observe(ref.current); return () => io.disconnect(); }, []); React.useEffect(() => { if (step < 0) return; const lines = t.philosophy.lines.length; if (step < lines) { const id = setTimeout(() => setStep(s => s + 1), 420); return () => clearTimeout(id); } if (step === lines) { const id = setTimeout(() => setStep(s => s + 1), 500); return () => clearTimeout(id); } }, [step, t.philosophy.lines.length]); const linesCount = t.philosophy.lines.length; const revealedIdx = Math.min(step, linesCount); const strikeOn = step > linesCount; return (
{t.philosophy.eyebrow}
{t.philosophy.lines.map((l, i) => { const isLast = i === linesCount - 1; const shown = i < revealedIdx; const shouldStrike = strikeOn && !isLast; return (
{String(i+1).padStart(2,'0')} {l}
); })}
); } // --- Agent-to-agent live thread --- function AgentThread({ t }) { const [step, setStep] = React.useState(0); const [playing, setPlaying] = React.useState(true); const total = t.core.log.length; const ref = React.useRef(null); const [inView, setInView] = React.useState(false); React.useEffect(() => { const io = new IntersectionObserver(es => setInView(es[0].isIntersecting), { threshold: 0.25 }); if (ref.current) io.observe(ref.current); return () => io.disconnect(); }, []); React.useEffect(() => { if (!inView || !playing) return; const id = setInterval(() => setStep(s => (s + 1) % (total + 2)), 1400); return () => clearInterval(id); }, [inView, playing, total]); const visible = t.core.log.slice(0, Math.min(step + 1, total)); return (
04 — {t.core.eyebrow}

{t.core.title}

{t.core.caption}
{t.core.scenario}
{t.core.parties.map(p => (
{p.label}
{p.sub}
))}
{visible.map((L, i) => { const isNew = i === Math.min(step, total - 1); return (
{L.t} {L.who} {L.msg}
); })} {step >= total && (
— system next event awaiting…
)}
); } function VariantA() { const { lang } = useLang(); const t = window.OPROVA_COPY[lang]; return (
{/* HERO */}
— {t.hero.eyebrow}

{t.hero.line1} {t.hero.line2}

FOUNDED2026
LOCATIONSEOUL
STAGEDESIGN PARTNER
INTAKEQ2 · 4 LEFT
{/* PROBLEM */}
01 — {t.problem.eyebrow}

{t.problem.title}
a.

{t.problem.p1}
b.

{t.problem.p2}
c.

{t.problem.p3}
"{t.problem.close}"
{/* WHO */}
02 — {t.who.eyebrow}

{t.who.title}
{t.who.items.map((it, i) => (
{String(i+1).padStart(2,'0')}
{it.k}
{it.v}
 ))}
{/* HOW */}
03 — {t.how.eyebrow}

{t.how.title}
{t.how.steps.map((s, i) => (
{s.n}
{s.t}

{s.d}

 ))}
{/* AGENT THREAD */} {/* METRICS */}
05 — {t.metrics.eyebrow}

{t.metrics.title}
{t.metrics.items.map((m,i) => (
{m.unit}
{m.label}
{m.foot}
 ))}
{/* PHILOSOPHY */} {/* CTA */}
06 — {t.cta.eyebrow}

{t.cta.title.split('\n').map((ln, i, arr) => ( {ln} ))}

{t.cta.sub}