function Methodology() { const { t } = window.useT(); const STEP_COLORS = ['#FF8A3D', '#FFC93C', '#52CCA0', '#3DA9FF']; // Refs to the four moving pieces inside Roby const sceneRef = React.useRef(null); // hover-target scene container const eyesRef = React.useRef(null); // pupils group const antennaRef = React.useRef(null); // antenna group const waveRef = React.useRef(null); // right-arm group const jumpRef = React.useRef(null); // wrapper for click jump // Refs that the rAF loop reads each frame (no re-renders triggered by these) const mouseRef = React.useRef({ x: 0, y: 0 }); const moodRef = React.useRef('idle'); // React state — drives mouth/cheeks/chest visuals only const [mood, setMood] = React.useState('idle'); // 'idle' | 'hover' | 'click' const [bursts, setBursts] = React.useState([]); const [popMsg, setPopMsg] = React.useState(null); React.useEffect(() => { moodRef.current = mood; }, [mood]); // ───────── Single rAF loop drives every continuous motion ───────── React.useEffect(() => { let raf; let curX = 0, curY = 0; // eased cursor coordinates let waveAngle = 0; // current arm rotation let waveT = 0; // wave-time accumulator (in frames) const tick = () => { const target = mouseRef.current; // Ease the cursor — natural follow-through, never snap curX += (target.x - curX) * 0.20; curY += (target.y - curY) * 0.20; // 1) Pupils — pure translate inside the white sclera if (eyesRef.current) { const dx = Math.max(-1, Math.min(1, curX)) * 6; const dy = Math.max(-1, Math.min(1, curY)) * 5; eyesRef.current.setAttribute('transform', `translate(${dx.toFixed(2)} ${dy.toFixed(2)})`); } // 2) Antenna — rotate around its base point (160, 58) if (antennaRef.current) { const tilt = Math.max(-1, Math.min(1, curX)) * 16; antennaRef.current.setAttribute('transform', `rotate(${tilt.toFixed(2)} 160 58)`); } // 3) Right arm — sine wave when hovered/clicked, eases back when idle. // Pivot is the shoulder (228, 222) in viewBox coordinates. const isHappy = moodRef.current === 'hover' || moodRef.current === 'click'; if (isHappy) { waveT += 1; const amp = moodRef.current === 'click' ? 26 : 18; const sineTarget = Math.sin(waveT * 0.16) * amp; waveAngle += (sineTarget - waveAngle) * 0.35; } else { waveAngle += (0 - waveAngle) * 0.18; waveT = 0; } if (waveRef.current) { waveRef.current.setAttribute('transform', `rotate(${waveAngle.toFixed(2)} 228 222)`); } raf = requestAnimationFrame(tick); }; raf = requestAnimationFrame(tick); return () => cancelAnimationFrame(raf); }, []); // ───────── Cursor → -1..1 vector relative to Roby's centre ───────── const handleMove = (e) => { const el = sceneRef.current; if (!el) return; const rect = el.getBoundingClientRect(); const cx = rect.left + rect.width * 0.5; const cy = rect.top + rect.height * 0.42; // mascot sits a bit above mid const range = 280; mouseRef.current = { x: (e.clientX - cx) / range, y: (e.clientY - cy) / range, }; }; const handleLeave = () => { mouseRef.current = { x: 0, y: 0 }; // ease back to centre setMood('idle'); }; const handleRobotEnter = () => { if (mood !== 'click') setMood('hover'); }; const handleRobotLeave = () => { if (mood !== 'click') setMood('idle'); }; // ───────── Click reaction: jump + emoji burst + speech bubble ───── const handleClick = () => { setMood('click'); // Re-trigger the jump CSS animation by clearing then resetting it if (jumpRef.current) { jumpRef.current.style.animation = 'none'; void jumpRef.current.offsetHeight; // force reflow jumpRef.current.style.animation = 'roby-jump 0.6s cubic-bezier(.34,1.56,.64,1)'; } const id = Date.now(); const emojis = ['✨', '⭐', '💫', '🎉', '🧱', '⚡', '💜', '🎊', '🤖', '🚀']; const newBursts = Array.from({ length: 16 }).map((_, i) => ({ id: id + i, angle: (i / 16) * Math.PI * 2 + (Math.random() - 0.5) * 0.4, dist: 90 + Math.random() * 70, rot: (Math.random() - 0.5) * 1080, delay: Math.floor(Math.random() * 120), emoji: emojis[Math.floor(Math.random() * emojis.length)], size: 18 + Math.floor(Math.random() * 16), })); setBursts(b => [...b, ...newBursts]); const messages = [t.method.tryIt, t.method.iterate, t.method.make, '👋', '🎉']; setPopMsg({ id, text: messages[Math.floor(Math.random() * messages.length)] }); setTimeout(() => setMood(prev => prev === 'click' ? 'hover' : prev), 600); setTimeout(() => setPopMsg(p => p && p.id === id ? null : p), 1400); setTimeout(() => setBursts(b => b.filter(x => !newBursts.find(n => n.id === x.id))), 1600); }; return (
{/* concentric ground rings */}
{/* ambient floating dots */}
{/* Roby + interaction overlay */}
{/* Single wrapper — only used for the one-shot click jump */}
{/* Floating speech popup on click */} {popMsg && (
{popMsg.text}
)} {/* Emoji burst */} {bursts.map(b => ( {b.emoji} ))}
{/* greeting bubble (i18n) */}
{t.method.hi}
{t.method.roby}
{/* corner sticker badges */}
{t.method.tryIt}
{t.method.iterate}
{t.method.make}
{t.method.pill}

{t.method.title1}
{t.method.title2} {t.method.title3}

{t.method.body1} {t.method.bodyBold}{t.method.body2}

    {t.method.steps.map((s, i) => (
  1. {String(i+1).padStart(2,'0')}
    {s.title}

    {s.desc}

    2. ))}
); } window.Methodology = Methodology;