const Demo = () => { const SCRIPT = [ { who:"user", text:"Oi, vocês têm horário pra limpeza de pele amanhã?" }, { who:"aria", text:"Oi! 😊 Temos sim. Amanhã consigo às 14h, 16h ou 18h. Qual fica melhor pra você?" }, { who:"user", text:"16h tá ótimo" }, { who:"aria", text:"Perfeito! Vou reservar amanhã às 16h. Pode me confirmar seu nome, por favor?" }, { who:"user", text:"Marina Alves" }, { who:"aria", text:"Prontinho, Marina! ✅ Agendado para amanhã às 16h. Vou te mandar um lembrete 2h antes. Algo mais que eu possa ajudar?" }, ]; const SUGGESTIONS = ["Quais procedimentos vocês fazem?", "Onde fica a clínica?", "Tem horário hoje?"]; const [shown, setShown] = React.useState(0); const [typing, setTyping] = React.useState(false); const [extra, setExtra] = React.useState([]); const scrollRef = React.useRef(null); const started = React.useRef(false); // auto-play when section visible React.useEffect(() => { const sec = document.getElementById("demo"); if (!sec) return; const io = new IntersectionObserver((es)=>{ es.forEach(e=>{ if(e.isIntersecting && !started.current){ started.current = true; runScript(); } }); }, { threshold:0.4 }); io.observe(sec); return ()=>io.disconnect(); }, []); const runScript = () => { let i = 0; const next = () => { if (i >= SCRIPT.length) return; const msg = SCRIPT[i]; if (msg.who === "aria") { setTyping(true); setTimeout(() => { setTyping(false); setShown(s=>s+1); i++; setTimeout(next, 700); }, 1100); } else { setShown(s=>s+1); i++; setTimeout(next, 900); } }; next(); }; React.useEffect(() => { if (scrollRef.current) scrollRef.current.scrollTop = scrollRef.current.scrollHeight; }, [shown, typing, extra]); const ANSWERS = { "Quais procedimentos vocês fazem?":"Fazemos limpeza de pele, peeling, drenagem e protocolos faciais! Quer que eu te passe a lista completa? 💆", "Onde fica a clínica?":"Estamos na Av. Paulista, 1000 — pertinho do metrô. Te envio a localização no mapa? 📍", "Tem horário hoje?":"Deixa eu ver… hoje ainda tenho 19h disponível! Quer que eu reserve pra você? ⏰", }; const ask = (q) => { setExtra(prev => [...prev, { who:"user", text:q }]); setTyping(true); setTimeout(() => { setTyping(false); setExtra(prev => [...prev, { who:"aria", text: ANSWERS[q] }]); }, 1100); }; const allMsgs = [...SCRIPT.slice(0, shown), ...extra]; return (
{/* left copy + video placeholder */}
Demonstração

Veja a Aura
atendendo de verdade.

Esta é uma conversa real, do jeito que sua paciente veria. Toque em uma pergunta e veja a resposta na hora.

{SUGGESTIONS.map(s=>( ))}
{[["brain","Entende"],["calendar","Agenda"],["check","Confirma"]].map(([ic,l])=>( {l} ))}
{/* phone chat */}
{/* chat header */}
Aura
online agora · respondendo em tempo real
{/* messages */}
{allMsgs.map((m,i)=>)} {typing && }
{/* input */}
Escreva uma mensagem…
); }; const Bubble = ({ who, text }) => { const isAria = who === "aria"; return (
{text}
); }; const LiveStyles = () => (); const Typing = () => (
{[0,1,2].map(i=>( ))}
); window.Demo = Demo;