// Animated WhatsApp-style chat mockup — auto-types a sample lead conversation
const ChatMockup = () => {
  // user (cliente) → bubble esquerda · ai (escritório/IA) → bubble direita
  const messages = [
    { side: 'user', text: 'Bom dia, sofri um acidente no trabalho e queria saber se posso entrar com ação.', delay: 600, time: '09:42' },
    { side: 'ai', text: 'Bom dia! Sou a IA do Dr. Marcelo, vou te ajudar. Em qual estado você trabalha e há quanto tempo aconteceu o acidente?', delay: 1400, time: '09:42' },
    { side: 'user', text: 'SP, faz uns 4 meses. Tenho atestado e o CAT.', delay: 2400, time: '09:43' },
    { side: 'ai', text: 'Perfeito. Pode me enviar o CAT por aqui? Analiso o documento e te confirmo se o caso é elegível. Posso agendar uma reunião com o Dr. Marcelo?', delay: 3400, time: '09:43' },
    { side: 'user', text: 'Pode sim. Ainda hoje tem horário?', delay: 4500, time: '09:44' },
    { side: 'ai', text: '✅ Reunião agendada: hoje 16h00. Te mando lembrete 1h antes.', delay: 5400, time: '09:44' },
  ];

  const [visible, setVisible] = React.useState(0);
  const [typing, setTyping] = React.useState(false);

  React.useEffect(() => {
    if (visible >= messages.length) {
      const reset = setTimeout(() => setVisible(0), 4000);
      return () => clearTimeout(reset);
    }
    const next = messages[visible];
    if (next.side === 'ai') {
      setTyping(true);
      const t1 = setTimeout(() => setTyping(false), 900);
      const t2 = setTimeout(() => setVisible(v => v + 1), 1500);
      return () => { clearTimeout(t1); clearTimeout(t2); };
    } else {
      const t = setTimeout(() => setVisible(v => v + 1), 1100);
      return () => clearTimeout(t);
    }
  }, [visible]);

  return (
    <div className="chat-mockup">
      <div className="float-badge tl green">
        <div className="icon"><Icon.Bolt size={16}/></div>
        <div>
          <div style={{color: '#fff', fontWeight: 600}}>Resposta em 2s</div>
          <div style={{color: 'var(--text-3)', fontSize: 10}}>vs. 4h média humana</div>
        </div>
      </div>
      <div className="float-badge br">
        <div className="icon"><Icon.Calendar size={16}/></div>
        <div>
          <div style={{color: '#fff', fontWeight: 600}}>Reunião agendada</div>
          <div style={{color: 'var(--text-3)', fontSize: 10}}>direto no Google Calendar</div>
        </div>
      </div>
      <div className="float-badge bl">
        <div className="icon"><Icon.Doc size={16}/></div>
        <div>
          <div style={{color: '#fff', fontWeight: 600}}>CAT analisado</div>
          <div style={{color: 'var(--text-3)', fontSize: 10}}>caso elegível</div>
        </div>
      </div>

      <div className="chat-screen">
        <div className="chat-header">
          <div className="chat-avatar">CV</div>
          <div style={{flex: 1}}>
            <div className="chat-name">Escritório Dr. Marcelo</div>
            <div className="chat-status-plain">online</div>
          </div>
          <Icon.Whatsapp size={18}/>
        </div>
        <div className="chat-body">
          {messages.slice(0, visible).map((m, i) => (
            <div key={i} className={`bubble ${m.side}`}>
              {m.text}
              <span className="time">{m.time} {m.side === 'user' && '✓✓'}</span>
            </div>
          ))}
          {typing && (
            <div className="bubble typing">
              <span className="dot"></span>
              <span className="dot"></span>
              <span className="dot"></span>
            </div>
          )}
        </div>
        <div className="chat-input">
          <div className="chat-input-field">Digite uma mensagem…</div>
          <div className="chat-send"><Icon.Send size={14}/></div>
        </div>
      </div>
    </div>
  );
};

window.ChatMockup = ChatMockup;