/* shared.jsx — hooks, mascote Broto e elementos decorativos */
const { useState, useEffect, useRef, useCallback } = React;
/* Reveal-on-scroll: adiciona .in quando o elemento entra na viewport */
function useReveal(options) {
const ref = useRef(null);
useEffect(() => {
const el = ref.current;
if (!el) return;
const io = new IntersectionObserver((entries) => {
entries.forEach((e) => {
if (e.isIntersecting) {
el.classList.add('in');
io.unobserve(el);
}
});
}, { threshold: 0.15, ...(options || {}) });
io.observe(el);
return () => io.disconnect();
}, []);
return ref;
}
/* Posição global do mouse (normalizada -1..1 a partir do centro da janela) */
function useGlobalMouse() {
const ref = useRef({ x: 0, y: 0, px: window.innerWidth / 2, py: window.innerHeight / 2 });
const [, force] = useState(0);
useEffect(() => {
let raf = null;
const onMove = (e) => {
ref.current = {
x: (e.clientX / window.innerWidth - 0.5) * 2,
y: (e.clientY / window.innerHeight - 0.5) * 2,
px: e.clientX, py: e.clientY,
};
if (!raf) raf = requestAnimationFrame(() => { raf = null; force((n) => n + 1); });
};
window.addEventListener('mousemove', onMove);
return () => { window.removeEventListener('mousemove', onMove); if (raf) cancelAnimationFrame(raf); };
}, []);
return ref.current;
}
/* ===========================================================
Broto — mascote brotinho (metáfora de crescimento)
Olhos seguem o cursor. Pisca, respira e acena.
=========================================================== */
function Broto({ size = 220, mood = 'happy', wave = false }) {
const wrapRef = useRef(null);
const [pupil, setPupil] = useState({ x: 0, y: 0 });
const [blink, setBlink] = useState(false);
useEffect(() => {
const onMove = (e) => {
const el = wrapRef.current;
if (!el) return;
const r = el.getBoundingClientRect();
const cx = r.left + r.width / 2;
const cy = r.top + r.height * 0.46;
const dx = e.clientX - cx;
const dy = e.clientY - cy;
const ang = Math.atan2(dy, dx);
const dist = Math.min(Math.hypot(dx, dy) / 90, 1);
setPupil({ x: Math.cos(ang) * 6 * dist, y: Math.sin(ang) * 5 * dist });
};
window.addEventListener('mousemove', onMove);
return () => window.removeEventListener('mousemove', onMove);
}, []);
useEffect(() => {
let t;
const loop = () => {
setBlink(true);
setTimeout(() => setBlink(false), 160);
t = setTimeout(loop, 2400 + Math.random() * 2600);
};
t = setTimeout(loop, 1800);
return () => clearTimeout(t);
}, []);
const eyeRy = blink ? 0.6 : 7;
return (
);
}
/* Blob decorativo reutilizável */
function Blob({ color, size = 120, style }) {
return (
);
}
Object.assign(window, { useReveal, useGlobalMouse, Broto, Blob });