/* global React */ function TypingDots() { return (
{[0, 1, 2].map(i => ( ))}
); } function Portal() { const chatRef = React.useRef(null); const [step, setStep] = React.useState(0); React.useEffect(() => { const el = chatRef.current; if (!el) return; const timers = []; const obs = new IntersectionObserver(([entry]) => { if (!entry.isIntersecting) return; obs.disconnect(); timers.push(setTimeout(() => setStep(1), 600)); // client msg timers.push(setTimeout(() => setStep(2), 1900)); // typing dots timers.push(setTimeout(() => setStep(3), 3400)); // bolder reply timers.push(setTimeout(() => setStep(4), 4600)); // desert image timers.push(setTimeout(() => setStep(5), 5000)); // status update }, { threshold: 0.4 }); obs.observe(el); return () => { obs.disconnect(); timers.forEach(clearTimeout); }; }, []); const anim = (visible, fromRight = false) => ({ transition: "opacity 450ms ease, transform 450ms ease", opacity: visible ? 1 : 0, transform: visible ? "translateY(0)" : `translateY(${fromRight ? "-" : ""}8px)`, pointerEvents: visible ? "auto" : "none", }); const statusItems = [ { l: "Briefing validado", done: true, active: false }, { l: "Curadoria IA [V01]", done: true, active: false }, { l: "Refinamento [V02]", done: step >= 5, active: step >= 1 && step < 5 }, { l: "Entrega final", done: false, active: step >= 5 }, ]; return (
} title="Onde tudo vive." sub="Distância zero entre ideia e asset final. Briefing, revisões, downloads, tokens, todos no mesmo portal. Powered by Boldy." />
{/* ── Barra de título ── */}
Be Connected · primavera_26
{/* ── Sidebar ── */} {/* ── Chat ── */}
Canal · #042 Primavera_26 {/* M. Lopes — V01 */}
M. Lopes · 14:02 V01 da campanha. Iluminação ok?
{/* V01 image — sempre visível */}
Bolder Platform V01
{/* Cliente — entra ao step 1 */}
= 1, true), padding: "10px 14px", background: "var(--coral)", color: "#FFF", borderRadius: "12px 12px 2px 12px", alignSelf: "flex-end", maxWidth: "70%", fontSize: 13.5 }}> Cliente · 14:08 Adoro. Testar no cenário do deserto?
{/* Typing dots — step 2 e 3 */}
= 2 && step < 4)}>
{/* M. Lopes reply — step 3 */}
= 3), padding: "10px 14px", background: "var(--cream)", border: "1px solid var(--rule)", borderRadius: "12px 12px 12px 2px", alignSelf: "flex-start", maxWidth: "70%", fontSize: 13.5 }}> M. Lopes · 14:09 A gerar variante deserto, já a chegar...
{/* V02 desert — step 4 */}
= 4), position: "relative", alignSelf: "flex-start", width: "calc(50% - 5px)", borderRadius: 8, overflow: "hidden" }}> Bolder Platform V02 — Desert
{/* ── Status ── */}
); } window.Portal = Portal;