/* App screens part 3: Financial, Analytics, Settings, Auth, Onboarding, Booking, Odonto extras */
const D3 = window.AppData;

// =============================================================
// FINANCIAL
// =============================================================
const FinancialScreen = () => {
  const [tab, setTab] = React.useState('overview');
  const totalIn = D3.transactions.filter(t=>t.status==='paid').reduce((s,t)=>s+t.amount,0);
  const totalPending = D3.transactions.filter(t=>t.status==='pending').reduce((s,t)=>s+t.amount,0);
  return (
    <div className="page">
      <div className="page-head">
        <div><h1 className="page-title">Financeiro</h1><p className="page-sub">Receita, comissões e contas em um só lugar</p></div>
        <div className="page-actions">
          <Btn kind="outline" icon="download">Exportar</Btn>
          <Btn icon="plus">Lançamento manual</Btn>
        </div>
      </div>
      <Tabs active={tab} onChange={setTab} tabs={[
        {id:'overview', label:'Visão geral', icon:'chart'},
        {id:'transactions', label:'Transações', icon:'money', count: D3.transactions.length},
        {id:'invoices', label:'Faturas / NF', icon:'doc'},
        {id:'commissions', label:'Comissões', icon:'users'},
        {id:'packages', label:'Pacotes', icon:'gift'},
        {id:'plans', label:'Convênios', icon:'shield'},
      ]}/>

      {tab === 'overview' && (
        <>
          <div className="kpi-grid" style={{ marginBottom: 24 }}>
            <StatTile label="Receita do mês" value={fmtMoneyShort(totalIn)} icon="money" delta={15} accent="#10B981" />
            <StatTile label="A receber" value={fmtMoneyShort(totalPending)} icon="alert" delta={-3} accent="#F59E0B" />
            <StatTile label="Despesas" value="R$ 12,4k" icon="chart" delta={8} accent="#EF4444" />
            <StatTile label="Lucro líquido" value={fmtMoneyShort(totalIn - 12400)} icon="zap" delta={22} accent="#7C3AED" />
          </div>
          <div style={{ display: 'grid', gridTemplateColumns: '2fr 1fr', gap: 24 }}>
            <Card>
              <div className="between" style={{ marginBottom: 12 }}>
                <h4 style={{ margin: 0 }}>Receita — últimos 30 dias</h4>
                <Select style={{ width: 140 }}><option>30 dias</option><option>90 dias</option><option>12 meses</option></Select>
              </div>
              <BarChart data={[2.1,3.2,2.8,4.1,3.6,5.2,4.8,4.0,3.1,4.5,5.6,5.2,3.8,4.4,5.1,4.7,3.9,5.8,6.1,5.4,4.2,3.8,5.6,6.4,5.9,4.8,5.2,6.1,6.8,7.2]} />
            </Card>
            <Card>
              <h4 style={{ margin: '0 0 12px' }}>Métodos de pagamento</h4>
              <div className="vstack-tight">
                {[['PIX',58,'#10B981'],['Crédito',24,'#0EA5E9'],['Convênio',12,'#7C3AED'],['Débito',4,'#F59E0B'],['Dinheiro',2,'#6B7280']].map(([n,p,c]) => (
                  <div key={n}>
                    <div className="between"><span style={{ fontSize: 13 }}>{n}</span><strong className="tabular" style={{ fontSize: 13 }}>{p}%</strong></div>
                    <div style={{ height: 6, background: 'var(--text-bg)', borderRadius: 3, overflow:'hidden', marginTop: 4 }}><div style={{ width: p+'%', height: '100%', background: c, borderRadius: 3 }}></div></div>
                  </div>
                ))}
              </div>
            </Card>
          </div>
        </>
      )}

      {tab === 'transactions' && (
        <Card padding="0">
          <table className="tbl">
            <thead><tr><th>Data</th><th>Cliente</th><th>Serviço</th><th>Profissional</th><th>Método</th><th>Valor</th><th>Status</th></tr></thead>
            <tbody>
              {D3.transactions.slice(0, 16).map(tx => {
                const c = findClient(tx.clientId), s = findService(tx.serviceId), p = findPro(tx.proId);
                return <tr key={tx.id}>
                  <td className="mono">{tx.date}</td>
                  <td><div className="row-name"><Avatar initials={c.initials} color={c.color} size={28} /><span>{c.name}</span></div></td>
                  <td>{s.name}</td>
                  <td>{p.name.replace(/^Dr[a]?\. /,'')}</td>
                  <td>{ {pix:'PIX',credit:'Crédito',debit:'Débito',cash:'Dinheiro',convenio:'Convênio'}[tx.method] }</td>
                  <td className="tabular">{fmtMoney(tx.amount)}</td>
                  <td>{tx.status==='paid' ? <Badge color="#10B981">Pago</Badge> : <Badge color="#F59E0B">Pendente</Badge>}</td>
                </tr>;
              })}
            </tbody>
          </table>
        </Card>
      )}

      {tab === 'invoices' && (
        <Card padding="0">
          <table className="tbl">
            <thead><tr><th>Nº</th><th>Cliente</th><th>Emissão</th><th>Vencimento</th><th>Valor</th><th>NFS-e</th><th>Status</th><th></th></tr></thead>
            <tbody>
              {Array.from({length: 10}, (_, i) => {
                const c = D3.clients[i % D3.clients.length];
                const sts = i%4===0 ? {l:'Pago', c:'#10B981'} : i%5===0 ? {l:'Vencido', c:'#EF4444'} : {l:'Aguardando', c:'#F59E0B'};
                return <tr key={i}>
                  <td className="mono">#{(2025001+i).toString()}</td>
                  <td>{c.name}</td>
                  <td className="mono">10/04/2025</td>
                  <td className="mono">25/04/2025</td>
                  <td className="tabular">{fmtMoney(180+i*45)}</td>
                  <td>{i%2===0 ? <Badge color="#10B981">Emitida</Badge> : <Badge color="#9CA3AF">—</Badge>}</td>
                  <td><Badge color={sts.c}>{sts.l}</Badge></td>
                  <td><div className="hstack-tight"><IconBtn name="eye"/><IconBtn name="printer"/><IconBtn name="more"/></div></td>
                </tr>;
              })}
            </tbody>
          </table>
        </Card>
      )}

      {tab === 'commissions' && (
        <div className="vstack" style={{ gap: 16 }}>
          {D3.pros.map(p => {
            const ptx = D3.transactions.filter(t=>t.proId===p.id&&t.status==='paid');
            const total = ptx.reduce((s,t)=>s+t.amount,0);
            const com = total * (p.commission / 100);
            return (
              <Card key={p.id}>
                <div className="between" style={{ marginBottom: 12 }}>
                  <div className="hstack"><Avatar initials={p.initials} color={p.color} /><div><strong>{p.name}</strong><div className="muted" style={{fontSize:12}}>{p.role}</div></div></div>
                  <Badge>{p.commission}% comissão</Badge>
                </div>
                <div style={{ display: 'grid', gridTemplateColumns: 'repeat(4, 1fr)', gap: 16 }}>
                  <InfoRow label="Receita gerada" value={fmtMoneyShort(total)} />
                  <InfoRow label="Comissão a pagar" value={fmtMoneyShort(com)} />
                  <InfoRow label="Atendimentos" value={ptx.length} />
                  <InfoRow label="Ticket médio" value={fmtMoneyShort(ptx.length ? total/ptx.length : 0)} />
                </div>
              </Card>
            );
          })}
        </div>
      )}

      {tab === 'packages' && (
        <div style={{ display: 'grid', gridTemplateColumns: 'repeat(auto-fill, minmax(280px, 1fr))', gap: 16 }}>
          {[
            {n:'Pacote 5 limpezas', p:'R$ 800', sub:'12% de desconto · validade 12 meses', sold: 28},
            {n:'Combo clareamento + retorno', p:'R$ 1.200', sub:'inclui kit caseiro · validade 6 meses', sold: 16},
            {n:'Plano ortodôntico anual', p:'R$ 2.400', sub:'12 manutenções · à vista 10% off', sold: 42},
            {n:'Pacote infantil — 4 visitas', p:'R$ 700', sub:'profilaxia + flúor · até 12 anos', sold: 11},
          ].map((pk, i) => (
            <Card key={i}>
              <strong style={{ fontSize: 16 }}>{pk.n}</strong>
              <div className="muted" style={{ fontSize: 13, marginTop: 4, marginBottom: 12 }}>{pk.sub}</div>
              <div className="between"><div className="stat-value" style={{ fontSize: 22 }}>{pk.p}</div><Badge color="#10B981">{pk.sold} vendidos</Badge></div>
            </Card>
          ))}
          <Card style={{ display: 'grid', placeItems: 'center', minHeight: 160, border: '2px dashed var(--border)' }}><Btn kind="ghost" icon="plus">Novo pacote</Btn></Card>
        </div>
      )}

      {tab === 'plans' && (
        <Card padding="0">
          <table className="tbl">
            <thead><tr><th>Convênio</th><th>Multiplicador da tabela</th><th>Coparticipação</th><th>Procedimentos cobertos</th><th>Glosas (mês)</th><th></th></tr></thead>
            <tbody>
              {D3.insurances.map(ins => (
                <tr key={ins.id}>
                  <td><strong>{ins.name}</strong></td>
                  <td className="tabular">{(ins.tableMultiplier * 100).toFixed(0)}%</td>
                  <td className="tabular">{fmtMoney(ins.copay)}</td>
                  <td>Geral · Ortodontia · Endo · Cirurgia menor</td>
                  <td className="tabular">{ins.id==='in1' ? '2,4%' : ins.id==='in3' ? '5,1%' : '1,2%'}</td>
                  <td><Btn kind="ghost" size="sm">Editar</Btn></td>
                </tr>
              ))}
            </tbody>
          </table>
        </Card>
      )}
    </div>
  );
};

const BarChart = ({ data, color = '#0EA5E9' }) => {
  const max = Math.max(...data);
  return (
    <div style={{ display: 'flex', alignItems: 'flex-end', gap: 4, height: 180 }}>
      {data.map((v, i) => (
        <div key={i} style={{ flex: 1, height: ((v / max) * 100) + '%', background: `linear-gradient(180deg, ${color}, color-mix(in oklab, ${color} 60%, transparent))`, borderRadius: '4px 4px 0 0', position: 'relative', minHeight: 4 }} title={`R$ ${v.toFixed(1)}k`}></div>
      ))}
    </div>
  );
};

// =============================================================
// ANALYTICS
// =============================================================
const AnalyticsScreen = () => {
  const [tab, setTab] = React.useState('overview');
  return (
    <div className="page">
      <div className="page-head">
        <div><h1 className="page-title">Analytics</h1><p className="page-sub">Insights de performance, ocupação e crescimento</p></div>
        <div className="page-actions"><Select style={{width:160}}><option>Últimos 30 dias</option><option>Últimos 90 dias</option></Select></div>
      </div>

      <Tabs active={tab} onChange={setTab} tabs={[
        {id:'overview',label:'Visão geral',icon:'chart'},
        {id:'occupation',label:'Ocupação',icon:'cal'},
        {id:'revenue',label:'Receita',icon:'money'},
        {id:'clients',label:'Clientes',icon:'users'},
        {id:'insights',label:'Insights IA',icon:'zap'},
      ]}/>

      {tab === 'overview' && (
        <>
          <div className="kpi-grid" style={{ marginBottom: 24 }}>
            <StatTile label="Atendimentos" value="412" icon="cal" delta={12} accent="#0EA5E9" />
            <StatTile label="Ticket médio" value="R$ 287" icon="money" delta={8} accent="#10B981" />
            <StatTile label="Taxa de no-show" value="4,2%" icon="alert" delta={-2} deltaDir="up" accent="#F59E0B" />
            <StatTile label="NPS" value="72" icon="star" delta={5} accent="#7C3AED" />
          </div>
          <div style={{ display: 'grid', gridTemplateColumns: '1fr 1fr', gap: 24 }}>
            <Card>
              <h4 style={{margin:'0 0 16px'}}>Heatmap de ocupação · semana</h4>
              <Heatmap />
            </Card>
            <Card>
              <h4 style={{margin:'0 0 16px'}}>Funil de agendamento</h4>
              <Funnel data={[{l:'Visualizou landing',v:1240},{l:'Iniciou agendamento',v:386},{l:'Selecionou horário',v:312},{l:'Confirmou',v:284},{l:'Compareceu',v:271}]} />
            </Card>
          </div>
          <div style={{ display: 'grid', gridTemplateColumns: '1fr 1fr 1fr', gap: 16, marginTop: 24 }}>
            <Card>
              <h4 style={{margin:'0 0 12px'}}>Serviços mais vendidos</h4>
              <div className="vstack-tight">
                {[['Limpeza',82,'#06B6D4'],['Avaliação',62,'#0EA5E9'],['Restauração',54,'#10B981'],['Ortodontia',48,'#0284C7'],['Clareamento',32,'#38BDF8']].map(([n,p,c]) => (
                  <div key={n}>
                    <div className="between"><span style={{fontSize:13}}>{n}</span><strong style={{fontSize:13}}>{p}</strong></div>
                    <div style={{height:5,background:'var(--text-bg)',borderRadius:3,marginTop:3}}><div style={{height:'100%',width:(p/82*100)+'%',background:c,borderRadius:3}}></div></div>
                  </div>
                ))}
              </div>
            </Card>
            <Card>
              <h4 style={{margin:'0 0 12px'}}>Origem dos clientes</h4>
              <div className="vstack-tight">
                {[['Google',42],['Instagram',24],['Indicação',18],['WhatsApp direto',10],['Outros',6]].map(([n,p])=>(
                  <div key={n} className="between" style={{padding:8,background:'var(--text-bg)',borderRadius:6,fontSize:13}}><span>{n}</span><strong>{p}%</strong></div>
                ))}
              </div>
            </Card>
            <Card>
              <h4 style={{margin:'0 0 12px'}}>Faturamento por profissional</h4>
              <div className="vstack-tight">
                {D3.pros.map(p => (
                  <div key={p.id} className="hstack" style={{ padding: 6 }}>
                    <Avatar initials={p.initials} color={p.color} size={32} />
                    <span style={{flex:1, fontSize:13}}>{p.name.replace(/^Dr[a]?\. /,'')}</span>
                    <strong className="tabular">{fmtMoneyShort(8000+Math.random()*4000)}</strong>
                  </div>
                ))}
              </div>
            </Card>
          </div>
        </>
      )}

      {tab === 'occupation' && (
        <Card><h4 style={{margin:'0 0 16px'}}>Mapa de calor — atendimentos por horário</h4><Heatmap big /></Card>
      )}

      {tab === 'insights' && (
        <div className="vstack">
          {[
            {ic:'zap',ti:'Aumente conversão da landing em 18%',d:'Sua landing converte 31% dos visitantes em "iniciou agendamento", mas apenas 73% finalizam. O passo "Selecionar profissional" tem o maior abandono (28%). Sugerimos esconder esse passo quando há apenas 1 profissional disponível.',a:'Aplicar sugestão',c:'#0EA5E9'},
            {ic:'gift',ti:'12 clientes inativos com alto LTV',d:'Pacientes com gasto histórico acima de R$ 2.000 que não vêm há 6+ meses. Recomendação: campanha de WhatsApp com cupom de retorno de 15%. Receita potencial estimada: R$ 8.4k.',a:'Criar campanha',c:'#7C3AED'},
            {ic:'alert',ti:'Quinta-feira está sempre lotada',d:'Sua taxa de ocupação na quinta às 15h–18h é 92%. Se você abrisse 1 hora extra (9h–10h ou 19h–20h) nesse dia, capturaria ~R$ 4.2k/mês.',a:'Sugerir horário',c:'#F59E0B'},
            {ic:'star',ti:'Estimule reviews de 8 clientes satisfeitos',d:'Detectamos 8 clientes que deixaram retorno positivo no WhatsApp mas ainda não avaliaram no Google. Probabilidade de conversão alta com pedido direto.',a:'Pedir review',c:'#10B981'},
          ].map((x,i) => (
            <Card key={i}>
              <div className="hstack" style={{ alignItems: 'flex-start', gap: 14 }}>
                <div style={{ width: 40, height: 40, borderRadius: 10, background: `color-mix(in oklab, ${x.c} 15%, white)`, color: x.c, display: 'grid', placeItems: 'center' }}><Icon name={x.ic} size={20}/></div>
                <div style={{ flex: 1 }}>
                  <strong style={{ fontSize: 15 }}>{x.ti}</strong>
                  <div style={{ fontSize: 13, color: 'var(--muted)', marginTop: 4, lineHeight: 1.55 }}>{x.d}</div>
                </div>
                <Btn kind="outline" size="sm">{x.a}</Btn>
              </div>
            </Card>
          ))}
        </div>
      )}

      {tab === 'revenue' && (
        <Card>
          <h4 style={{margin:'0 0 16px'}}>Receita acumulada — 12 meses</h4>
          <BarChart data={[42,38,45,52,48,56,62,58,67,71,75,82]} color="#10B981" />
          <div style={{ display: 'flex', gap: 12, marginTop: 12, fontSize: 11 }} className="muted">
            {['Mai','Jun','Jul','Ago','Set','Out','Nov','Dez','Jan','Fev','Mar','Abr'].map(m => <span key={m} style={{flex:1, textAlign:'center'}}>{m}</span>)}
          </div>
        </Card>
      )}

      {tab === 'clients' && (
        <div className="kpi-grid">
          <StatTile label="Novos clientes" value="38" icon="users" delta={22} />
          <StatTile label="Recorrentes" value="172" icon="refresh" delta={8} />
          <StatTile label="Reativados" value="11" icon="zap" delta={45} />
          <StatTile label="Inativos (>90d)" value="64" icon="alert" delta={-3} />
        </div>
      )}
    </div>
  );
};

const Heatmap = ({ big }) => {
  const days = ['Seg','Ter','Qua','Qui','Sex','Sáb'];
  const hours = ['8h','10h','12h','14h','16h','18h'];
  const data = days.map(() => hours.map(() => Math.random()));
  return (
    <div>
      <div style={{ display: 'grid', gridTemplateColumns: `36px repeat(${hours.length}, 1fr)`, gap: 4 }}>
        <div></div>
        {hours.map(h => <div key={h} className="muted" style={{ fontSize: 11, textAlign: 'center' }}>{h}</div>)}
        {days.map((d, di) => (
          <React.Fragment key={d}>
            <div className="muted" style={{ fontSize: 11, alignSelf: 'center' }}>{d}</div>
            {hours.map((_, hi) => (
              <div key={d+hi} style={{ aspectRatio: '1.4', background: `color-mix(in oklab, #0EA5E9 ${(data[di][hi]*100).toFixed(0)}%, white)`, borderRadius: 4 }} title={`${(data[di][hi]*100).toFixed(0)}% ocupação`}></div>
            ))}
          </React.Fragment>
        ))}
      </div>
    </div>
  );
};
const Funnel = ({ data }) => {
  const max = data[0].v;
  return (
    <div className="vstack-tight">
      {data.map((d, i) => (
        <div key={i}>
          <div className="between" style={{ fontSize: 13 }}><span>{d.l}</span><strong className="tabular">{d.v}</strong></div>
          <div style={{ height: 22, background: 'var(--text-bg)', borderRadius: 4, overflow:'hidden', marginTop: 4 }}>
            <div style={{ width: (d.v/max*100)+'%', height: '100%', background: `linear-gradient(90deg, #0EA5E9, #2563EB)`, borderRadius: 4, color:'white', fontSize: 11, padding: '0 8px', display:'flex', alignItems:'center' }}>{((d.v/max)*100).toFixed(0)}%</div>
          </div>
        </div>
      ))}
    </div>
  );
};

// =============================================================
// SETTINGS
// =============================================================
const SettingsScreen = () => {
  const [tab, setTab] = React.useState('establishment');
  return (
    <div className="page page-narrow">
      <div className="page-head"><div><h1 className="page-title">Configurações</h1><p className="page-sub">Personalize tudo do seu negócio</p></div></div>
      <Tabs active={tab} onChange={setTab} tabs={[
        {id:'establishment',label:'Estabelecimento',icon:'home'},
        {id:'team',label:'Equipe',icon:'users'},
        {id:'services',label:'Serviços',icon:'doc'},
        {id:'hours',label:'Horários',icon:'cal'},
        {id:'billing',label:'Plano e cobrança',icon:'money'},
        {id:'domain',label:'Domínio e site',icon:'globe'},
        {id:'integrations',label:'Integrações',icon:'link'},
      ]}/>

      {tab === 'establishment' && (
        <div className="vstack">
          <Card>
            <h4 style={{margin:'0 0 16px'}}>Dados do estabelecimento</h4>
            <div className="form-grid">
              <Field label="Nome fantasia"><Input defaultValue="Odonto Sorriso" /></Field>
              <Field label="Razão social"><Input defaultValue="Odonto Sorriso Clínica LTDA" /></Field>
              <Field label="CNPJ"><Input defaultValue="12.345.678/0001-90" /></Field>
              <Field label="Inscrição municipal"><Input defaultValue="123456-7" /></Field>
              <Field label="Categoria"><Select defaultValue="odonto"><option value="odonto">Odontologia</option><option>Barbearia</option><option>Estética</option><option>Fisioterapia</option><option>Psicologia</option></Select></Field>
              <Field label="Telefone"><Input defaultValue="(11) 3456-7890" /></Field>
              <Field label="Endereço"><Input defaultValue="Av. Paulista 1500, sala 802" /></Field>
              <Field label="Cidade / UF"><Input defaultValue="São Paulo / SP" /></Field>
            </div>
          </Card>
          <Card>
            <h4 style={{margin:'0 0 16px'}}>Identidade visual</h4>
            <div className="form-grid">
              <Field label="Cor primária"><div className="hstack-tight"><Input defaultValue="#0EA5E9" /><div style={{width:40,height:40,background:'#0EA5E9',borderRadius:8}}></div></div></Field>
              <Field label="Logo"><div className="hstack-tight"><div style={{width:60,height:60,borderRadius:12,background:'linear-gradient(135deg,#0EA5E9,#2563EB)',color:'white',display:'grid',placeItems:'center',fontWeight:800,fontSize:24}}>O</div><Btn kind="outline" icon="upload">Trocar</Btn></div></Field>
            </div>
          </Card>
          <div style={{ display: 'flex', justifyContent: 'flex-end', gap: 8 }}><Btn kind="outline">Cancelar</Btn><Btn>Salvar alterações</Btn></div>
        </div>
      )}

      {tab === 'team' && (
        <div className="vstack">
          {D3.pros.map(p => (
            <Card key={p.id}>
              <div className="between">
                <div className="hstack"><Avatar initials={p.initials} color={p.color} size={48}/><div><strong>{p.name}</strong><div className="muted" style={{fontSize:13}}>{p.role}</div><div className="muted mono" style={{fontSize:11}}>{p.cred} · {p.commission}% comissão</div></div></div>
                <div className="hstack-tight"><Badge color="#10B981">Ativo</Badge><IconBtn name="edit"/><IconBtn name="trash"/></div>
              </div>
            </Card>
          ))}
          <Btn kind="outline" icon="plus" style={{alignSelf:'flex-start'}}>Adicionar profissional</Btn>
        </div>
      )}

      {tab === 'services' && (
        <Card padding="0">
          <table className="tbl">
            <thead><tr><th>Serviço</th><th>Categoria</th><th>Duração</th><th>Preço</th><th>Profissionais</th><th></th></tr></thead>
            <tbody>{D3.services.map(s => (
              <tr key={s.id}><td><div className="hstack-tight"><span style={{width:8,height:24,background:s.color,borderRadius:2}}></span><strong>{s.name}</strong></div></td><td>{s.cat}</td><td className="tabular">{s.dur} min</td><td className="tabular">{fmtMoney(s.price)}</td><td><div className="hstack-tight">{D3.pros.filter(p=>p.services.includes(s.id)).slice(0,3).map(p=><Avatar key={p.id} initials={p.initials} color={p.color} size={24}/>)}</div></td><td><IconBtn name="edit"/></td></tr>
            ))}</tbody>
          </table>
        </Card>
      )}

      {tab === 'hours' && (
        <Card>
          <h4 style={{margin:'0 0 16px'}}>Horário de funcionamento</h4>
          <div className="vstack-tight">
            {dayLabelsLong.map((d, i) => (
              <div key={d} className="hstack" style={{ padding: 10, background: 'var(--text-bg)', borderRadius: 8 }}>
                <strong style={{ width: 100, fontSize: 14 }}>{d}</strong>
                <Toggle checked={i!==0} />
                <Input style={{ width: 100 }} defaultValue="08:00" disabled={i===0} />
                <span className="muted">até</span>
                <Input style={{ width: 100 }} defaultValue={i===6?'13:00':'19:00'} disabled={i===0} />
                <Btn kind="ghost" size="sm" style={{ marginLeft: 'auto' }} icon="plus">Pausa</Btn>
              </div>
            ))}
          </div>
        </Card>
      )}

      {tab === 'billing' && (
        <div className="vstack">
          <Card>
            <div className="between">
              <div><h4 style={{margin:'0 0 4px'}}>Plano Pro</h4><div className="muted" style={{fontSize:13}}>R$ 297/mês · próxima cobrança 12/05/2025</div></div>
              <div className="hstack-tight"><Btn kind="outline">Trocar plano</Btn><Btn kind="ghost">Cancelar</Btn></div>
            </div>
            <div style={{ display: 'grid', gridTemplateColumns: 'repeat(4, 1fr)', gap: 16, marginTop: 16, paddingTop: 16, borderTop: '1px solid var(--border)' }}>
              <div><div className="muted" style={{fontSize:12}}>Profissionais</div><strong>4 / ilimitado</strong></div>
              <div><div className="muted" style={{fontSize:12}}>Atendimentos</div><strong>412 / ilimitado</strong></div>
              <div><div className="muted" style={{fontSize:12}}>WhatsApp</div><strong>2 linhas / 4</strong></div>
              <div><div className="muted" style={{fontSize:12}}>Armazenamento</div><strong>2.4 GB / 50 GB</strong></div>
            </div>
          </Card>
          <Card padding="0">
            <table className="tbl">
              <thead><tr><th>Fatura</th><th>Período</th><th>Valor</th><th>Status</th><th></th></tr></thead>
              <tbody>{['Abril 2025','Março 2025','Fevereiro 2025','Janeiro 2025'].map((m,i)=>(
                <tr key={m}><td className="mono">FAT-2025-{(4-i).toString().padStart(2,'0')}</td><td>{m}</td><td className="tabular">R$ 297,00</td><td><Badge color="#10B981">Pago</Badge></td><td><IconBtn name="download" title="Baixar NF"/></td></tr>
              ))}</tbody>
            </table>
          </Card>
        </div>
      )}

      {tab === 'domain' && (
        <div className="vstack">
          <Card>
            <h4 style={{margin:'0 0 8px'}}>Sua landing page está em</h4>
            <div className="hstack" style={{ marginTop: 12 }}>
              <code style={{ flex:1, padding: 12, background: 'var(--text-bg)', borderRadius: 8, fontSize: 14 }}>https://odontosorriso.kairos.app</code>
              <Btn kind="outline" icon="copy">Copiar</Btn>
              <Btn kind="outline" icon="globe" onClick={()=>window.open('landings/odontologia.html','_blank')}>Abrir</Btn>
            </div>
            <div style={{ marginTop: 24, padding: 16, background: 'var(--primary-soft)', borderRadius: 12, display: 'flex', gap: 12 }}>
              <Icon name="info" />
              <div>
                <strong>Quer usar seu próprio domínio?</strong>
                <div className="muted" style={{ fontSize: 13, marginTop: 4 }}>Configure um CNAME apontando para kairos.app e seu site ficará em www.odontosorriso.com.br.</div>
                <Btn kind="outline" size="sm" style={{ marginTop: 12 }}>Configurar domínio próprio</Btn>
              </div>
            </div>
          </Card>
        </div>
      )}

      {tab === 'integrations' && (
        <div style={{ display: 'grid', gridTemplateColumns: 'repeat(2, 1fr)', gap: 16 }}>
          {[
            {n:'Google Meu Negócio',d:'Sincroniza horário, fotos e reviews', on:true},
            {n:'Google Agenda',d:'Sincronização bidirecional', on:true},
            {n:'Instagram',d:'Importa fotos para galeria', on:true},
            {n:'Stripe',d:'Pagamentos online', on:false},
            {n:'NFE.io',d:'Emissão automática de NFS-e', on:true},
            {n:'TISS / Convênios',d:'Envio de guias eletrônicas', on:true},
            {n:'Mailchimp',d:'Email marketing', on:false},
            {n:'Zapier',d:'1.000+ apps via Zaps', on:false},
          ].map(int => (
            <Card key={int.n}>
              <div className="between">
                <div><strong>{int.n}</strong><div className="muted" style={{fontSize:13}}>{int.d}</div></div>
                <Toggle checked={int.on} />
              </div>
            </Card>
          ))}
        </div>
      )}
    </div>
  );
};

// =============================================================
// AUTH
// =============================================================
const AuthScreen = ({ mode = 'login', onNav }) => (
  <div className="auth-page">
    <div className="auth-aside">
      <div className="auth-aside-brand"><div style={{width:36,height:36,borderRadius:10,background:'rgba(255,255,255,0.2)',display:'grid',placeItems:'center',fontWeight:800,fontSize:18}}>K</div>Kairos</div>
      <div className="auth-aside-content">
        <div className="auth-aside-headline">A plataforma de agendamento que cresce com seu negócio.</div>
        <div className="auth-aside-quote">
          <div style={{ marginBottom: 12, fontSize: 15, lineHeight: 1.55 }}>"Em 3 meses, dobramos o número de pacientes novos. O Kairos faz o trabalho que antes ocupava metade do meu dia."</div>
          <div className="hstack-tight" style={{ fontSize: 13, opacity: 0.85 }}>
            <Avatar initials="AP" color="rgba(255,255,255,0.2)" />
            <div><strong>Dra. Ana Paula</strong><div style={{fontSize:12}}>Odonto Sorriso · São Paulo</div></div>
          </div>
        </div>
      </div>
      <div className="muted" style={{ color: 'rgba(255,255,255,0.6)', fontSize: 12 }}>© 2026 Kairos · Todos os direitos reservados</div>
    </div>
    <div className="auth-form-side">
      <div className="auth-form">
        {mode === 'login' && <LoginForm onNav={onNav} />}
        {mode === 'register' && <RegisterForm onNav={onNav} />}
        {mode === 'forgot' && <ForgotForm onNav={onNav} />}
      </div>
    </div>
  </div>
);

const LoginForm = ({ onNav }) => (
  <>
    <h1 style={{ fontSize: 28, fontWeight: 700, letterSpacing: '-0.02em', marginBottom: 8 }}>Bem-vindo de volta</h1>
    <p className="muted" style={{ marginBottom: 24, fontSize: 15 }}>Entre na sua conta para continuar</p>
    <div className="vstack">
      <Field label="Email"><Input type="email" defaultValue="ana@odontosorriso.com.br" placeholder="seu@email.com" /></Field>
      <Field label="Senha"><Input type="password" defaultValue="********" /></Field>
      <div className="between"><label className="checkbox"><input type="checkbox" defaultChecked /><span style={{fontSize:13}}>Mantenha-me conectado</span></label><a href="#auth/forgot" onClick={(e)=>{e.preventDefault();onNav('auth/forgot')}} style={{ color: 'var(--primary)', fontSize: 13, textDecoration: 'none' }}>Esqueci a senha</a></div>
      <Btn size="lg" onClick={() => onNav('app')}>Entrar</Btn>
      <div className="auth-divider">ou continue com</div>
      <div className="hstack-tight" style={{ gap: 8 }}>
        <Btn kind="outline" style={{flex:1}}>Google</Btn>
        <Btn kind="outline" style={{flex:1}}>Apple</Btn>
      </div>
      <p className="muted" style={{ fontSize: 14, textAlign: 'center', marginTop: 8 }}>Ainda não tem conta? <a href="#auth/register" onClick={(e)=>{e.preventDefault();onNav('auth/register')}} style={{color:'var(--primary)',textDecoration:'none',fontWeight:600}}>Comece grátis</a></p>
    </div>
  </>
);

const RegisterForm = ({ onNav }) => (
  <>
    <h1 style={{ fontSize: 28, fontWeight: 700, letterSpacing: '-0.02em', marginBottom: 8 }}>Comece grátis em 2 minutos</h1>
    <p className="muted" style={{ marginBottom: 24, fontSize: 15 }}>Sem cartão de crédito · 14 dias de teste no plano Pro</p>
    <div className="vstack">
      <Field label="Seu nome"><Input placeholder="Como você quer ser chamado" /></Field>
      <Field label="Email"><Input type="email" placeholder="seu@email.com" /></Field>
      <Field label="Senha" hint="Mínimo 8 caracteres"><Input type="password" /></Field>
      <Field label="WhatsApp" hint="Para te avisar de tudo importante"><Input placeholder="(11) 9____-____" /></Field>
      <label className="checkbox"><input type="checkbox" /><span style={{fontSize:12,color:'var(--muted)'}}>Concordo com os <a href="#" style={{color:'var(--primary)'}}>Termos</a> e <a href="#" style={{color:'var(--primary)'}}>Política de Privacidade</a></span></label>
      <Btn size="lg" onClick={() => onNav('onboarding')}>Criar minha conta</Btn>
      <p className="muted" style={{ fontSize: 14, textAlign: 'center', marginTop: 8 }}>Já tem conta? <a href="#auth" onClick={(e)=>{e.preventDefault();onNav('auth')}} style={{color:'var(--primary)',textDecoration:'none',fontWeight:600}}>Entrar</a></p>
    </div>
  </>
);

const ForgotForm = ({ onNav }) => (
  <>
    <h1 style={{ fontSize: 28, fontWeight: 700, letterSpacing: '-0.02em', marginBottom: 8 }}>Recuperar acesso</h1>
    <p className="muted" style={{ marginBottom: 24, fontSize: 15 }}>Vamos enviar um link mágico para o seu email</p>
    <div className="vstack">
      <Field label="Email cadastrado"><Input type="email" placeholder="seu@email.com" /></Field>
      <Btn size="lg">Enviar link de recuperação</Btn>
      <p className="muted" style={{ fontSize: 14, textAlign: 'center' }}><a href="#auth" onClick={(e)=>{e.preventDefault();onNav('auth')}} style={{color:'var(--primary)',textDecoration:'none',fontWeight:600}}>← Voltar ao login</a></p>
    </div>
  </>
);

// =============================================================
// ONBOARDING WIZARD
// =============================================================
const OnboardingScreen = ({ onNav }) => {
  const [step, setStep] = React.useState(1);
  const total = 7;
  const next = () => step < total ? setStep(step+1) : onNav('app');
  const prev = () => step > 1 ? setStep(step-1) : onNav('auth/register');
  return (
    <div className="wizard">
      <div className="wizard-top">
        <div className="auth-aside-brand" style={{ color: 'var(--foreground)' }}><div style={{width:32,height:32,borderRadius:8,background:'linear-gradient(135deg,#0EA5E9,#2563EB)',color:'white',display:'grid',placeItems:'center',fontWeight:800,fontSize:14}}>K</div>Kairos</div>
        <div className="wizard-progress"><div style={{ width: `${(step/total)*100}%` }}></div></div>
        <span className="muted" style={{ fontSize: 13 }}>Passo {step} de {total}</span>
      </div>
      <div className="wizard-body">
        <div className="wizard-card">
          <div className="wizard-step-eyebrow">{['Categoria','Estabelecimento','Equipe','Serviços','Horário','Identidade','Quase lá'][step-1]}</div>
          {step===1 && (<><h2 className="wizard-step-title">Qual seu segmento?</h2><p className="wizard-step-sub">Vamos preparar templates específicos para o seu tipo de negócio.</p>
            <div className="choice-grid">
              {[['Odontologia','tooth'],['Barbearia','user'],['Fisioterapia','zap'],['Psicologia','user'],['Estética','star'],['Outro','more']].map(([n,ic]) => (
                <button key={n} className={`choice-tile ${n==='Odontologia'?'is-selected':''}`}>
                  <div className="choice-tile-icon"><Icon name={ic}/></div>
                  <div className="choice-tile-title">{n}</div>
                  <div className="choice-tile-sub">{n==='Odontologia'?'Odontogramas, anamnese, TISS':'Configurações específicas'}</div>
                </button>
              ))}
            </div></>)}
          {step===2 && (<><h2 className="wizard-step-title">Como vamos chamar seu estabelecimento?</h2><p className="wizard-step-sub">Esses dados aparecerão na sua landing e nas confirmações enviadas aos clientes.</p>
            <div className="vstack"><Field label="Nome fantasia" required><Input defaultValue="Odonto Sorriso"/></Field><Field label="Endereço"><Input defaultValue="Av. Paulista 1500, sala 802"/></Field><Field label="Telefone / WhatsApp"><Input defaultValue="(11) 3456-7890"/></Field></div></>)}
          {step===3 && (<><h2 className="wizard-step-title">Quem está no seu time?</h2><p className="wizard-step-sub">Adicione os profissionais que atendem. Você pode editar comissões depois.</p>
            <div className="vstack"><div className="hstack" style={{padding:12,background:'var(--text-bg)',borderRadius:8}}><Avatar initials="AP" color="#0EA5E9"/><div style={{flex:1}}><strong>Dra. Ana Paula Mendes</strong><div className="muted" style={{fontSize:12}}>Você · CRO-SP 35.421</div></div><Badge color="#7C3AED">Proprietária</Badge></div><Btn kind="outline" icon="plus" style={{alignSelf:'flex-start'}}>Adicionar profissional</Btn></div></>)}
          {step===4 && (<><h2 className="wizard-step-title">O que você oferece?</h2><p className="wizard-step-sub">Selecione os serviços padrão para sua categoria — você ajusta preços agora ou depois.</p>
            <div className="vstack-tight">{D3.services.slice(0,5).map(s=>(<label key={s.id} className="checkbox" style={{padding:12,background:'var(--text-bg)',borderRadius:8,width:'100%'}}><input type="checkbox" defaultChecked/><div style={{flex:1}}><strong>{s.name}</strong><div className="muted" style={{fontSize:12}}>{s.dur} min · {fmtMoney(s.price)}</div></div></label>))}</div></>)}
          {step===5 && (<><h2 className="wizard-step-title">Quando você atende?</h2><p className="wizard-step-sub">Defina seu horário padrão. Pode haver exceções por feriado ou pausas.</p>
            <div className="vstack-tight">{['Segunda a Sexta','Sábado','Domingo'].map((d,i)=>(<div key={d} className="hstack" style={{padding:10,background:'var(--text-bg)',borderRadius:8}}><strong style={{width:160}}>{d}</strong><Toggle checked={i<2}/><Input style={{width:90}} defaultValue="08:00" disabled={i===2}/><span className="muted">até</span><Input style={{width:90}} defaultValue={i===0?'19:00':i===1?'13:00':'00:00'} disabled={i===2}/></div>))}</div></>)}
          {step===6 && (<><h2 className="wizard-step-title">Sua identidade visual</h2><p className="wizard-step-sub">Escolha cores e suba seu logo. Pode trocar a qualquer momento.</p>
            <div className="vstack"><Field label="Cor primária"><div className="row-wrap" style={{gap:8}}>{['#0EA5E9','#10B981','#7C3AED','#EC4899','#F59E0B','#1F2937'].map((c,i)=>(<div key={c} style={{width:40,height:40,background:c,borderRadius:8,cursor:'pointer',border:i===0?'3px solid var(--foreground)':'1px solid var(--border)'}}></div>))}</div></Field><Field label="Logo (opcional)"><Btn kind="outline" icon="upload">Selecionar arquivo</Btn></Field></div></>)}
          {step===7 && (<><h2 className="wizard-step-title">Tudo pronto, Dra. Ana! 🎉</h2><p className="wizard-step-sub">Sua conta está configurada e sua landing page já está no ar.</p>
            <Card style={{ padding: 16, background: 'var(--primary-soft)', borderColor: 'var(--primary)' }}><div className="hstack-tight" style={{ fontSize: 13, marginBottom: 6 }}><Icon name="globe" size={14}/><strong>Sua landing está em:</strong></div><code style={{display:'block',padding:8,background:'white',borderRadius:6,fontSize:13}}>https://odontosorriso.kairos.app</code></Card>
            <Card style={{marginTop:12,padding:16}}><strong>Próximos passos sugeridos:</strong><ul style={{margin:'8px 0 0 18px',padding:0,fontSize:14}}><li>Conectar WhatsApp</li><li>Importar contatos de uma planilha</li><li>Convidar sua equipe</li><li>Configurar lembretes automáticos</li></ul></Card></>)}
        </div>
      </div>
      <div className="wizard-foot">
        <Btn kind="ghost" onClick={prev}>{step > 1 ? 'Voltar' : 'Cancelar'}</Btn>
        <Btn icon={step===total?'check':'arrow'} onClick={next}>{step === total ? 'Ir para o painel' : 'Próximo'}</Btn>
      </div>
    </div>
  );
};

// =============================================================
// BOOKING (public)
// =============================================================
const BookingScreen = ({ onDone }) => {
  const [step, setStep] = React.useState(1);
  const [svc, setSvc] = React.useState(null);
  const [pro, setPro] = React.useState(null);
  const [day, setDay] = React.useState(0);
  const [time, setTime] = React.useState(null);
  const [info, setInfo] = React.useState({name:'',phone:'',email:''});
  const days = Array.from({length: 14}, (_, i) => D3.dayOffset(i));
  const times = ['09:00','09:30','10:00','10:30','11:00','11:30','14:00','14:30','15:00','15:30','16:00','16:30','17:00'];

  const next = () => setStep(s => Math.min(s + 1, 6));
  const prev = () => step > 1 ? setStep(step - 1) : onDone?.();
  const canNext = (step===1 && svc) || (step===2 && pro) || (step===3 && time != null) || (step===4 && info.name && info.phone) || step >= 5;

  return (
    <div className="booking">
      <div className="booking-top">
        <div className="auth-aside-brand" style={{ color: 'var(--foreground)', fontSize: 18 }}>
          <div style={{width:32,height:32,borderRadius:8,background:'linear-gradient(135deg,#0EA5E9,#2563EB)',color:'white',display:'grid',placeItems:'center',fontWeight:800,fontSize:14}}>O</div>
          Odonto Sorriso
        </div>
        <div className="booking-progress">
          {[1,2,3,4,5,6].map(n => (
            <React.Fragment key={n}>
              <div className={`booking-step-dot ${step===n?'is-active':step>n?'is-done':''}`}>{step>n?<Icon name="check" size={14}/>:n}</div>
              {n<6 && <div className={`booking-step-line ${step>n?'is-done':''}`}></div>}
            </React.Fragment>
          ))}
        </div>
        <Btn kind="ghost" size="sm" onClick={onDone}>← Voltar ao site</Btn>
      </div>
      <div className="booking-body">
        {step === 1 && (<><div className="booking-step-title">Qual serviço você quer?</div><p className="booking-step-sub">Selecione o procedimento. Você pode adicionar mais na próxima etapa.</p>
          <div className="service-list">{D3.services.slice(0,6).map(s => (
            <div key={s.id} className={`service-tile ${svc?.id===s.id?'is-selected':''}`} onClick={()=>setSvc(s)}>
              <div style={{ width: 6, height: 56, borderRadius: 4, background: s.color }}></div>
              <div className="service-tile-info"><div className="service-tile-name">{s.name}</div><div className="service-tile-meta">{s.dur} min · {s.cat}</div></div>
              <div className="service-tile-price">{fmtMoney(s.price)}</div>
            </div>
          ))}</div></>)}
        {step === 2 && (<><div className="booking-step-title">Com quem você prefere?</div><p className="booking-step-sub">Profissionais habilitados para {svc?.name}.</p>
          <div className="pro-list">
            <div className={`pro-tile ${pro?.id==='any'?'is-selected':''}`} onClick={()=>setPro({id:'any',name:'Sem preferência'})}>
              <div style={{width:48,height:48,borderRadius:'50%',background:'var(--text-bg)',display:'grid',placeItems:'center'}}><Icon name="users" size={24}/></div>
              <div className="name">Sem preferência</div><div className="role">Qualquer profissional</div>
            </div>
            {D3.pros.filter(p=>!svc||p.services.includes(svc.id)).map(p=>(
              <div key={p.id} className={`pro-tile ${pro?.id===p.id?'is-selected':''}`} onClick={()=>setPro(p)}>
                <Avatar initials={p.initials} color={p.color} size={48}/>
                <div className="name">{p.name.replace(/^Dr[a]?\. /,'')}</div>
                <div className="role">{p.role.split('·')[0]}</div>
              </div>
            ))}
          </div></>)}
        {step === 3 && (<><div className="booking-step-title">Escolha um horário</div><p className="booking-step-sub">Mostrando próximas 2 semanas. Verde = horário disponível.</p>
          <div className="day-pills">{days.map((d,i) => (
            <div key={i} className={`day-pill ${day===i?'is-selected':''}`} onClick={()=>setDay(i)}>
              <div className="dow">{dayLabels[d.getDay()]}</div>
              <div className="num">{d.getDate()}</div>
              <div style={{ fontSize: 10, color: day===i?'rgba(255,255,255,0.8)':'var(--muted)', marginTop: 2 }}>{['ago','jan','fev','mar','abr','mai','jun','jul','ago','set','out','nov','dez'][d.getMonth()]}</div>
            </div>
          ))}</div>
          <div className="time-grid">{times.map(t => (
            <button key={t} className={`time-pill ${time===t?'is-selected':''}`} onClick={()=>setTime(t)} disabled={t==='11:30'||t==='15:00'}>{t}</button>
          ))}</div></>)}
        {step === 4 && (<><div className="booking-step-title">Seus dados</div><p className="booking-step-sub">Vamos enviar a confirmação por WhatsApp.</p>
          <div className="vstack">
            <Field label="Nome completo" required><Input value={info.name} onChange={e=>setInfo({...info,name:e.target.value})}/></Field>
            <Field label="WhatsApp" required><Input value={info.phone} onChange={e=>setInfo({...info,phone:e.target.value})} placeholder="(11) 9____-____"/></Field>
            <Field label="Email (opcional)"><Input type="email" value={info.email} onChange={e=>setInfo({...info,email:e.target.value})}/></Field>
            <Field label="É a primeira vez aqui?"><div className="hstack-tight"><label className="radio"><input type="radio" name="first" defaultChecked/>Sim, sou novo(a)</label><label className="radio"><input type="radio" name="first"/>Já sou cliente</label></div></Field>
            <Field label="Convênio"><Select><option>Particular</option>{D3.insurances.filter(i=>i.id!=='particular').map(i=><option key={i.id}>{i.name}</option>)}</Select></Field>
          </div></>)}
        {step === 5 && (<><div className="booking-step-title">Confirme seu agendamento</div><p className="booking-step-sub">Revise os detalhes antes de finalizar.</p>
          <Card padding="20px">
            <div style={{ display: 'grid', gridTemplateColumns: '1fr 1fr', gap: 16 }}>
              <InfoRow label="Serviço" value={svc?.name} accent={svc?.color} />
              <InfoRow label="Profissional" value={pro?.name} />
              <InfoRow label="Data" value={days[day].toLocaleDateString('pt-BR',{weekday:'long',day:'numeric',month:'long'})} />
              <InfoRow label="Horário" value={time} />
              <InfoRow label="Duração" value={`${svc?.dur} min`} />
              <InfoRow label="Valor" value={fmtMoney(svc?.price || 0)} />
            </div>
            <div style={{ marginTop: 16, paddingTop: 16, borderTop: '1px solid var(--border)' }}>
              <strong>{info.name}</strong> · {info.phone} {info.email && '· ' + info.email}
            </div>
            <div style={{padding:12,background:'var(--primary-soft)',borderRadius:8,marginTop:16,fontSize:13}}>
              <strong>📍 Av. Paulista 1500, sala 802 · Bela Vista</strong><br/>
              Você receberá lembrete 24h antes. Para cancelar, basta responder a mensagem.
            </div>
          </Card></>)}
        {step === 6 && (
          <div style={{ textAlign: 'center', padding: '40px 20px' }}>
            <div style={{ width: 80, height: 80, borderRadius: '50%', background: 'var(--success-soft)', color: 'var(--success)', display: 'grid', placeItems: 'center', margin: '0 auto 20px' }}><Icon name="check" size={40} /></div>
            <h2 style={{ fontSize: 28, fontWeight: 700, letterSpacing: '-0.02em', margin: '0 0 8px' }}>Agendamento confirmado!</h2>
            <p className="muted" style={{ fontSize: 16, marginBottom: 20 }}>Enviamos os detalhes no seu WhatsApp.</p>
            <Card style={{ maxWidth: 400, margin: '0 auto', textAlign: 'left' }}>
              <strong>{svc?.name}</strong>
              <div className="muted" style={{ fontSize: 13, marginTop: 4 }}>{days[day].toLocaleDateString('pt-BR',{weekday:'long',day:'numeric',month:'long'})} às {time}</div>
              <div className="muted" style={{ fontSize: 13 }}>{pro?.name}</div>
            </Card>
            <div className="hstack-tight" style={{ justifyContent: 'center', marginTop: 24 }}>
              <Btn kind="outline" icon="cal">Adicionar ao Google Agenda</Btn>
              <Btn icon="whats">Abrir WhatsApp</Btn>
            </div>
          </div>
        )}
      </div>
      {step < 6 && (
        <div className="wizard-foot">
          <Btn kind="ghost" onClick={prev}>{step > 1 ? '← Voltar' : 'Cancelar'}</Btn>
          <Btn icon={step===5?'check':'arrow'} onClick={next} disabled={!canNext}>{step === 5 ? 'Confirmar agendamento' : 'Próximo'}</Btn>
        </div>
      )}
    </div>
  );
};

// =============================================================
// ODONTO EXTRAS — TISS, Anamnese, Teleconsultation
// =============================================================
const OdontoExtrasScreen = () => {
  const [tab, setTab] = React.useState('anamnese');
  return (
    <div className="page page-narrow">
      <div className="page-head"><div><h1 className="page-title">Recursos clínicos</h1><p className="page-sub">Anamnese, prontuários, TISS e teleconsulta</p></div></div>
      <Tabs active={tab} onChange={setTab} tabs={[
        {id:'anamnese',label:'Anamnese',icon:'doc'},
        {id:'tiss',label:'Guias TISS',icon:'shield'},
        {id:'tele',label:'Teleconsulta',icon:'video'},
        {id:'recall',label:'Recall longo',icon:'refresh'},
      ]}/>

      {tab === 'anamnese' && (
        <Card>
          <h4 style={{margin:'0 0 16px'}}>Modelo de anamnese — Odontologia</h4>
          <div className="vstack">
            <Field label="Queixa principal"><Textarea defaultValue="Dor leve no dente superior direito ao mastigar, há aproximadamente 1 semana." /></Field>
            <div className="form-grid">
              <Field label="Faz uso de medicação contínua?"><Select><option>Sim — Losartana 50mg/dia</option><option>Não</option></Select></Field>
              <Field label="É alérgico a algum medicamento?"><Input defaultValue="Anestésico com vasoconstritor" /></Field>
              <Field label="Possui alguma comorbidade?"><Input defaultValue="Hipertensão controlada" /></Field>
              <Field label="Está grávida ou amamentando?"><Select><option>Não</option><option>Sim</option></Select></Field>
              <Field label="Fuma?"><Select><option>Não</option><option>Sim</option><option>Ex-fumante</option></Select></Field>
              <Field label="Bebe alcoólicas?"><Select><option>Socialmente</option><option>Diariamente</option><option>Não</option></Select></Field>
            </div>
            <Field label="Procedimentos odontológicos anteriores"><Textarea placeholder="Restaurações, canais, extrações..." /></Field>
            <Field label="Hábitos parafuncionais"><div className="row-wrap">{['Bruxismo','Apertamento','Roer unha','Mastigação unilateral'].map(h=><label key={h} className="checkbox" style={{padding:'6px 10px',background:'var(--text-bg)',borderRadius:6}}><input type="checkbox"/>{h}</label>)}</div></Field>
            <div className="hstack-tight" style={{justifyContent:'flex-end'}}><Btn kind="outline" icon="printer">Imprimir</Btn><Btn icon="check">Salvar anamnese</Btn></div>
          </div>
        </Card>
      )}

      {tab === 'tiss' && (
        <div className="vstack">
          <Card>
            <div className="between" style={{ marginBottom: 12 }}>
              <h4 style={{margin:0}}>Guia SP-SADT · Mariana Souza · Bradesco Dental</h4>
              <Badge color="#F59E0B">Aguardando envio</Badge>
            </div>
            <table className="tbl">
              <thead><tr><th>Cód.</th><th>Procedimento</th><th>Dente</th><th>Face</th><th>Qtd</th><th>Valor tabela</th></tr></thead>
              <tbody>
                <tr><td className="mono">81000146</td><td>Restauração resina cl. II</td><td>16</td><td>OM</td><td>1</td><td className="tabular">R$ 145,00</td></tr>
                <tr><td className="mono">81000405</td><td>Profilaxia</td><td>—</td><td>—</td><td>1</td><td className="tabular">R$ 90,00</td></tr>
                <tr><td className="mono">81000308</td><td>Aplicação tópica de flúor</td><td>—</td><td>—</td><td>1</td><td className="tabular">R$ 35,00</td></tr>
              </tbody>
            </table>
            <div className="between" style={{ marginTop: 12 }}>
              <Btn kind="ghost" icon="plus" size="sm">Adicionar procedimento</Btn>
              <div className="hstack-tight">
                <strong>Total: R$ 270,00</strong>
                <Btn icon="send">Enviar guia eletrônica</Btn>
              </div>
            </div>
          </Card>
          <Card padding="0">
            <div className="card-head"><h4>Histórico de guias enviadas</h4><span className="sub">Últimos 30 dias</span></div>
            <table className="tbl">
              <thead><tr><th>Data</th><th>Paciente</th><th>Convênio</th><th>Valor</th><th>Status</th></tr></thead>
              <tbody>
                {[['10/04','Felipe Costa','Amil',420,{l:'Aprovada',c:'#10B981'}],
                  ['09/04','Larissa Alves','Odontoprev',180,{l:'Glosada',c:'#EF4444'}],
                  ['08/04','Camila Rodrigues','SulAmérica',650,{l:'Em análise',c:'#F59E0B'}],
                  ['05/04','Roberto Lima','MetLife',890,{l:'Aprovada',c:'#10B981'}]].map(([d,n,c,v,s],i) => (
                  <tr key={i}><td className="mono">{d}/2025</td><td>{n}</td><td>{c}</td><td className="tabular">R$ {v},00</td><td><Badge color={s.c}>{s.l}</Badge></td></tr>
                ))}
              </tbody>
            </table>
          </Card>
        </div>
      )}

      {tab === 'tele' && (
        <Card padding="0" style={{ overflow: 'hidden' }}>
          <div style={{ aspectRatio: '16/9', background: 'linear-gradient(135deg, #0F172A, #1E293B)', position: 'relative', display: 'grid', gridTemplateColumns: '3fr 1fr', gap: 12, padding: 12 }}>
            <div style={{ background: 'linear-gradient(135deg, #475569, #1E293B)', borderRadius: 12, position: 'relative', overflow: 'hidden' }}>
              <div style={{ position: 'absolute', bottom: 16, left: 16, color: 'white', background: 'rgba(0,0,0,0.4)', padding: '4px 10px', borderRadius: 6, fontSize: 13 }}>Mariana Souza</div>
              <div style={{ position: 'absolute', top: 16, left: 16, color: 'white', background: 'rgba(239,68,68,0.9)', padding: '4px 10px', borderRadius: 6, fontSize: 11, fontWeight: 700, letterSpacing: '0.05em', display: 'flex', alignItems: 'center', gap: 6 }}><span style={{width:8,height:8,borderRadius:'50%',background:'white',animation:'pulse 1.5s infinite'}}></span>AO VIVO · 12:34</div>
            </div>
            <div style={{ background: 'linear-gradient(135deg,#0EA5E9,#1E40AF)', borderRadius: 12, position: 'relative' }}>
              <div style={{ position: 'absolute', bottom: 8, left: 8, color: 'white', fontSize: 12, background: 'rgba(0,0,0,0.4)', padding: '2px 8px', borderRadius: 4 }}>Você (Dra. Ana)</div>
            </div>
          </div>
          <div className="hstack" style={{ padding: 16, justifyContent: 'center', gap: 10 }}>
            <IconBtn name="phone" kind="primary" size={20} />
            <IconBtn name="video" kind="primary" size={20} />
            <IconBtn name="x" kind="danger" size={20} />
            <IconBtn name="more" />
          </div>
        </Card>
      )}

      {tab === 'recall' && (
        <Card>
          <h4 style={{margin:'0 0 16px'}}>Pacientes em tratamento longo · Recall automático</h4>
          <table className="tbl">
            <thead><tr><th>Paciente</th><th>Tratamento</th><th>Etapa</th><th>Próxima visita</th><th>Status</th></tr></thead>
            <tbody>
              {[['Mariana Souza','Reabilitação superior','3 de 6','28/04/2025',{l:'No prazo',c:'#10B981'}],
                ['Felipe Costa','Ortodontia (manutenção)','12 de 24','—',{l:'Atrasado 14 dias',c:'#EF4444'}],
                ['Camila Rodrigues','Implante 36','Aguarda osseointegração','12/06/2025',{l:'Aguardando',c:'#F59E0B'}],
                ['Roberto Lima','Endo + coroa','Coroa em laboratório','22/04/2025',{l:'No prazo',c:'#10B981'}]].map(([n,t,e,p,s],i) => (
                <tr key={i}><td><strong>{n}</strong></td><td>{t}</td><td className="muted">{e}</td><td className="mono">{p}</td><td><Badge color={s.c}>{s.l}</Badge></td></tr>
              ))}
            </tbody>
          </table>
        </Card>
      )}
    </div>
  );
};

Object.assign(window, { FinancialScreen, AnalyticsScreen, SettingsScreen, AuthScreen, OnboardingScreen, BookingScreen, OdontoExtrasScreen, BarChart, Heatmap, Funnel });