{children}

O atendimento que nunca dorme.

WhatsApp, Instagram e Facebook unificados, com agente Claude que entende texto, áudio e imagem. CRM, Agenda e relatórios — tudo num só lugar.

); } function Login() { const { setRoute, reloadAuth, enterDemo } = useStore(); const [showPw, setShowPw] = React.useState(false); const [email, setEmail] = React.useState('teste@minhaempresa.com'); const [senha, setSenha] = React.useState('Teste@Atende2026'); const [erro, setErro] = React.useState(''); const [carregando, setCarregando] = React.useState(false); const [sucesso, setSucesso] = React.useState(false); // efeito 3: check antes do redirect const [errKey, setErrKey] = React.useState(0); // efeito 4: re-dispara o shake a cada falha const cardRef = React.useRef(null); // re-toca o shake sem remontar o form (reflow força o restart da animação) React.useEffect(() => { if (!errKey) return; const el = cardRef.current; if (!el) return; el.classList.remove('login-shake'); void el.offsetWidth; el.classList.add('login-shake'); }, [errKey]); const entrar = async () => { if (carregando || sucesso) return; // evita duplo submit (aditivo, seguro) setErro(''); setCarregando(true); try { await API.login(email, senha); const papel = await reloadAuth(); // papel REAL de quem entrou (do /auth/me) window.showToast && window.showToast({ tipo: 'sucesso', titulo: 'Bem-vindo!', descricao: 'Login realizado com sucesso.' }); // efeito 3: mostra o check ~600ms ANTES de redirecionar (MESMOS destinos de antes) setCarregando(false); setSucesso(true); setTimeout(() => { if (papel === 'super_admin') setRoute('super-dashboard'); else if (papel === 'atendente') setRoute('inbox'); else setRoute('dashboard'); }, 600); } catch (e) { setErro(e.message || 'Não foi possível entrar.'); setErrKey((k) => k + 1); window.showToast && window.showToast({ tipo: 'erro', titulo: 'Não foi possível entrar', descricao: e.message || 'Verifique seu e-mail e senha.' }); setCarregando(false); } }; return (

Entrar

Use seu e-mail corporativo. O tenant é detectado automaticamente.

E-mailsetEmail(e.target.value)} placeholder="seu@email.com"/>

Senha

setSenha(e.target.value)} onKeyDown={e=>{if(e.key==='Enter')entrar();}} placeholder="Sua senha"/> setShowPw(!showPw)} style={{position:'absolute', right:10, top:'50%', transform:'translateY(-50%)', color:'var(--text-faint)', cursor:'default'}}>

Manter conectado setRoute('forgot')}>Esqueci minha senha

{erro &&

{erro}

}

ou explore com dados simulados (demo):

{[['admin','Admin'],['atendente','Atendente'],['super','Super Admin']].map(([id,l])=>( enterDemo(id)} style={{padding:'4px 10px', borderRadius:6, background:'var(--surface-3)', color:'var(--text-muted)', fontWeight:500, cursor:'default'}}>{l} ))}

); } function Forgot() { const { setRoute } = useStore(); return (

Recuperar senha

Te enviamos um link de redefinição válido por 30 minutos.

E-mail cadastrado

); } function Onboarding() { const { setRoute } = useStore(); const [step, setStep] = React.useState(1); const steps = [ { n:1, t:'Dados da loja', d:'Nome, logo, segmento e horário' }, { n:2, t:'Conectar WhatsApp', d:'Vincule seu número via API oficial' }, { n:3, t:'Configurar agente', d:'Personalidade e mensagem inicial' }, { n:4, t:'Subir catálogo', d:'Importar planilha ou conectar API' }, ]; return (

Configuração inicial

{steps.map(s=>(

=s.n ? 'var(--accent)':'var(--surface-3)'}}/>

=s.n?'var(--text)':'var(--text-faint)'}}>Passo {s.n} · {s.t}

))}

{steps[step-1].t}

{steps[step-1].d}

{step===1 &&

Nome da loja

Segmento

Timezone

Horário padrão

} {step===2 &&

Conectar WhatsApp Business

Use a API oficial via 360dialog. O processo leva ~5 minutos e mantém o número original.

} {step===3 &&

Nome do agente

Tom de voz

{['Formal','Amigável','Informal'].map((t,i)=>

{t}

)}

Mensagem de boas-vindas

</div>
              </div>}
              {step===4 && <div className="col" style={{gap:14, alignItems:'center', textAlign:'center', padding:'20px 0'}}>
                <div style={{width:72, height:72, borderRadius:18, background:'var(--accent-soft)', color:'var(--accent-700)', display:'flex', alignItems:'center', justifyContent:'center'}}><Ic name="brand" size={36}/></div>
                <div className="h2">Subir catálogo</div>
                <div className="muted" style={{maxWidth:420}}>Faça upload de uma planilha CSV ou conecte sua API própria. Você pode pular e adicionar depois.</div>
                <div className="row" style={{gap:8}}><button className="btn btn-primary"><Ic name="file" size={14}/> Importar CSV</button><button className="btn"><Ic name="link" size={14}/> Conectar API</button></div>
              </div>}
            </div>
            <div className="row" style={{borderTop:'1px solid var(--border)', paddingTop:14, marginTop:14}}>
              {step>1 && <button className="btn fin-btn-back" onClick={()=>setStep(step-1)}><Ic name="chevron-left" size={14}/> Voltar</button>}
              <span className="btn btn-ghost btn-sm" style={{cursor:'default'}} onClick={()=>step===4?setRoute('dashboard'):setStep(step+1)}>Pular esta etapa</span>
              <div className="spacer"/>
              <button className="btn btn-primary" onClick={()=>{ if(step===4){ window.showToast && window.showToast({ tipo: 'sucesso', titulo: 'Configuração concluída', descricao: 'Sua loja está pronta para começar.' }); setRoute('dashboard'); } else setStep(step+1); }}>{step===4?'Concluir':'Próximo'} {step<4 && <Ic name="chevron-right" size={14}/>}</button>
            </div>
          </div>
        </div>
      </div>
    </div>
  );
}

// Página de DEFINIR SENHA — onde o convidado cai ao clicar no link do e-mail.
// Layout no mesmo padrão do Login (AuthShell). Por enquanto é visual (será ligada
// ao token de convite real depois). Inclui a ACEITAÇÃO/confirmação do vínculo.
function SetPassword() {
  const { setRoute } = useStore();
  const token = (typeof window !== 'undefined' && window.__inviteToken) || '';
  // E-mail vem do próprio token (payload do JWT) — só leitura.
  const email = React.useMemo(() => {
    try { return JSON.parse(atob(token.split('.')[1])).email || ''; } catch (e) { return ''; }
  }, [token]);
  const [pw, setPw] = React.useState('');
  const [conf, setConf] = React.useState('');
  const [showPw, setShowPw] = React.useState(false);
  const [aceite, setAceite] = React.useState(false);
  const [erro, setErro] = React.useState('');
  const [salvando, setSalvando] = React.useState(false);
  const forte = pw.length >= 8;
  const confere = pw.length > 0 && pw === conf;
  const podeCriar = !!token && forte && confere && aceite && !salvando;

return (
    <AuthShell>
      <img src="assets/simbolo.png" alt="Pk360" style={{ width: 48, height: 48, objectFit: 'contain', marginBottom: 24 }} />
      <div className="h1">Criar sua senha</div>
      <div className="muted" style={{ marginTop: 6 }}>Defina sua senha para acessar a plataforma.</div>
      <div className="col" style={{ gap: 14, marginTop: 28 }}>
        {!token &&
          <div style={{ padding: '10px 12px', borderRadius: 8, background: 'color-mix(in oklab, #ef4444 10%, var(--surface))', border: '1px solid color-mix(in oklab, #ef4444 30%, var(--border))', color: '#dc2626', fontSize: 'var(--type-sm)' }}>Link inválido ou expirado. Peça um novo convite ao administrador.</div>}
        <div><label className="label">E-mail</label><input className="input" value={email || '—'} disabled readOnly style={{ opacity: .7, cursor: 'not-allowed' }} /></div>
        <div>
          <label className="label">Nova senha</label>
          <div style={{ position: 'relative' }}>
            <input className="input" type={showPw ? 'text' : 'password'} value={pw} onChange={e => setPw(e.target.value)} placeholder="Mínimo 8 caracteres" autoComplete="new-password" disabled={!token} />
            <span onClick={() => setShowPw(!showPw)} style={{ position: 'absolute', right: 10, top: '50%', transform: 'translateY(-50%)', color: 'var(--text-faint)', cursor: 'default' }}><Ic name={showPw ? 'eye-off' : 'eye'} size={16} /></span>
          </div>
        </div>
        <div><label className="label">Confirmar senha</label><input className="input" type={showPw ? 'text' : 'password'} value={conf} onChange={e => setConf(e.target.value)} onKeyDown={e => { if (e.key === 'Enter') criar(); }} placeholder="Repita a senha" autoComplete="new-password" disabled={!token} /></div>
        <label className="row" style={{ gap: 8, fontSize: 'var(--type-sm)', alignItems: 'flex-start' }}>
          <input type="checkbox" checked={aceite} onChange={e => setAceite(e.target.checked)} style={{ marginTop: 3 }} disabled={!token} />
          <span>Li e aceito os <strong>Termos de Uso</strong> e confirmo o vínculo da minha conta.</span>
        </label>
        {erro && <div style={{ padding: '8px 12px', borderRadius: 8, background: 'color-mix(in oklab, #ef4444 10%, var(--surface))', border: '1px solid color-mix(in oklab, #ef4444 30%, var(--border))', color: '#dc2626', fontSize: 'var(--type-sm)' }}>{erro}</div>}
        <button className="btn btn-primary" style={{ height: 42, opacity: podeCriar ? 1 : .6 }} disabled={!podeCriar} onClick={criar}>{salvando ? 'Salvando…' : 'Criar senha e acessar'}</button>
        <div className="muted" style={{ fontSize: 'var(--type-xs)', textAlign: 'center', color: 'var(--text-faint)' }}>O link do convite expira em 24 horas.</div>
      </div>
    </AuthShell>
  );
}

Object.assign(window, { Login, Forgot, Onboarding, SetPassword });