// Onboarding — 4-step wizard
const Onboarding = ({ onNavigate }) => {
  const [step, setStep] = React.useState(0);
  const [form, setForm] = React.useState({
    cnpj: '',
    company: '',
    email: '',
    workspace: 'minha-empresa',
    importMethod: 'planilha',
    certA1: false,
    sefaz: true,
    pix: true,
    whatsapp: true,
    sendgrid: false,
  });

  const steps = [
    { num: 1, title: 'Criação da conta', sub: '~2 minutos', icon: 'shield' },
    { num: 2, title: 'Importação de dados', sub: 'Dia 1', icon: 'upload' },
    { num: 3, title: 'Configuração fiscal', sub: 'Dias 2-4', icon: 'settings' },
    { num: 4, title: 'Go-live & suporte', sub: '30 dias ativo', icon: 'zap' },
  ];

  const setField = (k, v) => setForm(f => ({ ...f, [k]: v }));
  const formatCNPJ = (v) => v.replace(/\D/g, '').slice(0, 14)
    .replace(/^(\d{2})(\d)/, '$1.$2')
    .replace(/^(\d{2})\.(\d{3})(\d)/, '$1.$2.$3')
    .replace(/\.(\d{3})(\d)/, '.$1/$2')
    .replace(/(\d{4})(\d)/, '$1-$2');

  return (
    <div data-screen-label="05 Onboarding" className="fade-in" style={{ minHeight: '100vh', background: 'var(--ink-50)', display: 'flex', flexDirection: 'column' }}>
      <style>{`
        .onb-header {
          background: white; border-bottom: 1px solid var(--ink-200);
          padding: 16px 32px; display: flex; justify-content: space-between; align-items: center;
        }
        .onb-body {
          flex: 1; display: grid; grid-template-columns: 320px 1fr;
          max-width: 1280px; width: 100%; margin: 0 auto; padding: 32px;
          gap: 32px; align-items: start;
        }
        @media (max-width: 900px) { .onb-body { grid-template-columns: 1fr; } }
        .onb-stepper {
          background: white; border: 1px solid var(--ink-200); border-radius: 16px;
          padding: 20px; display: flex; flex-direction: column; gap: 4px;
          position: sticky; top: 24px;
        }
        .onb-progress-label { font-size: 11px; color: var(--ink-500); text-transform: uppercase; letter-spacing: .08em; font-weight: 600; margin-bottom: 8px; }
        .onb-progress-bar { height: 6px; background: var(--ink-100); border-radius: 999px; overflow: hidden; margin-bottom: 20px; }
        .onb-progress-fill { height: 100%; background: linear-gradient(90deg, var(--coral-400), var(--coral-600)); transition: width .4s; border-radius: 999px; }
        .onb-step {
          display: flex; gap: 12px; padding: 10px; border-radius: 10px; cursor: pointer;
          align-items: center; transition: all .15s;
        }
        .onb-step:hover { background: var(--ink-50); }
        .onb-step.active { background: var(--coral-50); }
        .onb-step.done { }
        .onb-step-num {
          width: 32px; height: 32px; border-radius: 50%;
          background: var(--ink-100); color: var(--ink-500); font-weight: 600; font-size: 13px;
          display: grid; place-items: center; flex-shrink: 0;
        }
        .onb-step.active .onb-step-num { background: var(--coral-500); color: white; box-shadow: 0 0 0 4px rgba(234,90,31,.15); }
        .onb-step.done .onb-step-num { background: var(--green-500); color: white; }
        .onb-step-title { font-size: 13.5px; font-weight: 600; color: var(--ink-900); }
        .onb-step.active .onb-step-title { color: var(--coral-700); }
        .onb-step-sub { font-size: 11px; color: var(--ink-500); margin-top: 1px; }

        .onb-card {
          background: white; border: 1px solid var(--ink-200); border-radius: 20px;
          padding: 40px; max-width: 720px;
        }
        .onb-card h2 {
          font-family: var(--font-display); font-size: 36px; letter-spacing: -0.02em;
          font-weight: 400; margin: 0 0 8px; line-height: 1.1;
        }
        .onb-card h2 em { font-style: italic; color: var(--coral-600); }
        .onb-card-sub { font-size: 15px; color: var(--ink-600); margin: 0 0 28px; }
        .onb-badge {
          display: inline-block; padding: 4px 10px; border-radius: 999px;
          background: var(--coral-50); color: var(--coral-700); font-size: 11px;
          font-weight: 600; text-transform: uppercase; letter-spacing: .08em;
          margin-bottom: 14px;
        }
        .field { display: block; margin-bottom: 16px; }
        .field label { display: block; font-size: 13px; font-weight: 500; margin-bottom: 6px; color: var(--ink-800); }
        .field input, .field select {
          width: 100%; padding: 11px 14px; border-radius: 10px;
          border: 1px solid var(--ink-200); font-size: 14px; background: white;
        }
        .field input:focus, .field select:focus { outline: none; border-color: var(--coral-500); box-shadow: 0 0 0 3px rgba(234,90,31,.12); }
        .field-hint { font-size: 11px; color: var(--ink-500); margin-top: 4px; }
        .field-row { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }

        .import-option, .integ-option {
          display: flex; gap: 14px; padding: 16px; border: 1px solid var(--ink-200);
          border-radius: 12px; cursor: pointer; transition: all .15s;
          margin-bottom: 10px; align-items: flex-start;
        }
        .import-option:hover, .integ-option:hover { border-color: var(--ink-300); }
        .import-option.selected, .integ-option.selected { border-color: var(--coral-500); background: var(--coral-50); }
        .import-radio, .integ-check {
          width: 20px; height: 20px; border-radius: 50%; border: 2px solid var(--ink-300);
          flex-shrink: 0; margin-top: 2px; display: grid; place-items: center;
        }
        .integ-check { border-radius: 6px; }
        .import-option.selected .import-radio, .integ-option.selected .integ-check { border-color: var(--coral-500); background: var(--coral-500); }
        .import-option.selected .import-radio::after { content: ''; width: 8px; height: 8px; border-radius: 50%; background: white; }
        .import-option-title { font-size: 14px; font-weight: 600; margin-bottom: 2px; }
        .import-option-desc { font-size: 12.5px; color: var(--ink-600); line-height: 1.5; }

        .dropzone {
          border: 2px dashed var(--ink-300); border-radius: 12px;
          padding: 32px; text-align: center; background: var(--ink-50);
          margin-top: 14px;
        }
        .dropzone svg { color: var(--coral-500); margin: 0 auto 10px; }

        .onb-footer {
          display: flex; justify-content: space-between; align-items: center;
          margin-top: 28px; padding-top: 24px; border-top: 1px solid var(--ink-100);
        }
        .trust-line { display: flex; gap: 14px; font-size: 11px; color: var(--ink-500); }
        .trust-line span { display: inline-flex; align-items: center; gap: 4px; }

        .success-icon {
          width: 80px; height: 80px; border-radius: 50%;
          background: linear-gradient(135deg, var(--coral-400), var(--coral-600));
          display: grid; place-items: center; margin: 0 auto 24px;
          box-shadow: 0 12px 32px -4px rgba(234,90,31,.4);
        }
        .summary-row {
          display: flex; justify-content: space-between; padding: 12px 0;
          border-bottom: 1px solid var(--ink-100); font-size: 13.5px;
        }
        .summary-row:last-child { border-bottom: none; }
      `}</style>

      <header className="onb-header">
        <button onClick={() => onNavigate('landing')} className="wordmark">
          <span className="wordmark-dot">A</span>
          Automatiza
        </button>
        <div style={{ display: 'flex', alignItems: 'center', gap: 16 }}>
          <span style={{ fontSize: 12, color: 'var(--ink-500)' }}>Já tem conta?</span>
          <button className="btn btn-outline" onClick={() => onNavigate('login')} style={{ padding: '6px 14px', fontSize: 13 }}>Entrar</button>
        </div>
      </header>

      <div className="onb-body">
        <aside className="onb-stepper">
          <div className="onb-progress-label">Progresso — {Math.round(((step+1)/4)*100)}%</div>
          <div className="onb-progress-bar"><div className="onb-progress-fill" style={{ width: `${((step+1)/4)*100}%` }}/></div>
          {steps.map((s, i) => (
            <div key={i} className={`onb-step ${i === step ? 'active' : ''} ${i < step ? 'done' : ''}`} onClick={() => setStep(i)}>
              <div className="onb-step-num">
                {i < step ? <Icon name="check" size={14}/> : s.num}
              </div>
              <div>
                <div className="onb-step-title">{s.title}</div>
                <div className="onb-step-sub">{s.sub}</div>
              </div>
            </div>
          ))}
          <div style={{ marginTop: 16, padding: 14, background: 'var(--ink-950)', borderRadius: 12, color: 'var(--ink-300)', fontSize: 12, lineHeight: 1.55 }}>
            <div style={{ display: 'flex', alignItems: 'center', gap: 8, color: 'white', fontWeight: 600, marginBottom: 6, fontSize: 13 }}>
              <Icon name="help" size={14} color="var(--coral-400)"/> Precisa de ajuda?
            </div>
            Nosso time de onboarding fala com você por WhatsApp de segunda a sábado, 8h às 20h.
          </div>
        </aside>

        <main className="onb-card">
          {step === 0 && (
            <>
              <span className="onb-badge">Passo 1 de 4 · ~2 minutos</span>
              <h2>Vamos criar sua <em>conta</em>.</h2>
              <p className="onb-card-sub">Cada workspace é isolado, criptografado e aderente à LGPD. Você pode convidar sua equipe depois.</p>

              <div className="field">
                <label>CNPJ da empresa</label>
                <input placeholder="00.000.000/0000-00" value={form.cnpj} onChange={e => setField('cnpj', formatCNPJ(e.target.value))}/>
                <div className="field-hint">Buscamos razão social, endereço e regime tributário automaticamente na Receita Federal.</div>
              </div>
              <div className="field">
                <label>Nome fantasia</label>
                <input placeholder="Ex: Padaria São João" value={form.company} onChange={e => setField('company', e.target.value)}/>
              </div>
              <div className="field-row">
                <div className="field">
                  <label>E-mail do administrador</label>
                  <input type="email" placeholder="voce@empresa.com.br" value={form.email} onChange={e => setField('email', e.target.value)}/>
                </div>
                <div className="field">
                  <label>URL do workspace</label>
                  <div style={{ display: 'flex', alignItems: 'center', border: '1px solid var(--line-2)', borderRadius: 10, overflow: 'hidden', background: 'var(--bg-1)' }}>
                    <input style={{ border: 'none', flex: 1, background: 'transparent' }} value={form.workspace} onChange={e => setField('workspace', e.target.value.toLowerCase().replace(/\s/g,'-'))}/>
                    <span style={{ padding: '0 12px', fontSize: 12, color: 'var(--text-3)' }}>.automatiza.com.br</span>
                  </div>
                </div>
              </div>

              <div style={{ padding: 14, background: 'var(--green-50)', border: '1px solid #bbf7d0', borderRadius: 10, display: 'flex', gap: 10, fontSize: 13 }}>
                <Icon name="shield" size={18} color="var(--green-600)" style={{ flexShrink: 0 }}/>
                <div>
                  <b style={{ color: 'var(--green-700)' }}>Workspace LGPD isolado.</b>{' '}
                  <span style={{ color: 'var(--ink-700)' }}>Seus dados nunca são compartilhados com outras empresas. Criptografia AES-256 em repouso.</span>
                </div>
              </div>
            </>
          )}

          {step === 1 && (
            <>
              <span className="onb-badge">Passo 2 de 4 · Dia 1</span>
              <h2>Como você quer <em>importar</em> seus dados?</h2>
              <p className="onb-card-sub">Traga clientes, produtos, financeiro e funcionários do sistema atual. Você pode combinar métodos.</p>

              {[
                { id: 'planilha', icon: 'file', title: 'Planilha Excel ou CSV', desc: 'Baixe nosso template preenchido com exemplos. Ideal para menos de 5.000 registros.' },
                { id: 'ofx', icon: 'wallet', title: 'Extrato bancário OFX', desc: 'Importe o extrato dos últimos 12 meses do Banco do Brasil, Itaú, Bradesco, Santander, Caixa ou Inter.' },
                { id: 'api', icon: 'cpu', title: 'API do sistema atual', desc: 'Conectamos direto ao Omie, Bling, ContaAzul, Conta Simples ou sistema legado. Migração automática.' },
                { id: 'manual', icon: 'edit', title: 'Começar do zero', desc: 'Cadastrar manualmente. Indicado para MEIs e empresas novas.' },
              ].map(o => (
                <div key={o.id} className={`import-option ${form.importMethod === o.id ? 'selected' : ''}`} onClick={() => setField('importMethod', o.id)}>
                  <div className="import-radio"/>
                  <div style={{
                    width: 36, height: 36, borderRadius: 8, background: form.importMethod === o.id ? 'var(--coral-500)' : 'var(--ink-100)',
                    color: form.importMethod === o.id ? 'white' : 'var(--ink-700)', display: 'grid', placeItems: 'center', flexShrink: 0,
                  }}>
                    <Icon name={o.icon} size={16}/>
                  </div>
                  <div style={{ flex: 1 }}>
                    <div className="import-option-title">{o.title}</div>
                    <div className="import-option-desc">{o.desc}</div>
                  </div>
                </div>
              ))}

              {form.importMethod === 'planilha' && (
                <div className="dropzone">
                  <Icon name="upload" size={32}/>
                  <div style={{ fontSize: 14, fontWeight: 600, marginBottom: 4 }}>Arraste o arquivo ou clique para selecionar</div>
                  <div style={{ fontSize: 12, color: 'var(--ink-500)', marginBottom: 12 }}>Aceita .xlsx, .xls ou .csv até 50 MB</div>
                  <button className="btn btn-outline" style={{ padding: '8px 14px', fontSize: 13 }}>
                    <Icon name="download" size={14}/> Baixar template
                  </button>
                </div>
              )}
            </>
          )}

          {step === 2 && (
            <>
              <span className="onb-badge">Passo 3 de 4 · Dias 2-4</span>
              <h2>Configure sua <em>parte fiscal</em> e integrações.</h2>
              <p className="onb-card-sub">Marque o que você vai usar. Tudo pode ser ativado depois.</p>

              {[
                { id: 'certA1', icon: 'lock', title: 'Certificado Digital A1', desc: 'Necessário para emissão de NF-e, NFC-e e NFS-e. Envie o arquivo .pfx.', action: 'Enviar certificado' },
                { id: 'sefaz', icon: 'shield', title: 'Integração SEFAZ', desc: 'Homologação automática em todas as SEFAZ estaduais. Testamos em ambiente de homologação antes do go-live.' },
                { id: 'pix', icon: 'pix', title: 'PIX & Boleto', desc: 'Cobrança por PIX dinâmico com confirmação em tempo real. Boletos bancários via Itaú, BB ou Bradesco.' },
                { id: 'whatsapp', icon: 'whatsapp', title: 'WhatsApp Business (Evolution API)', desc: 'Integração oficial para CRM, marketing e suporte. Leva de 24h a 48h para aprovação.' },
                { id: 'sendgrid', icon: 'mail', title: 'SendGrid (E-mail transacional)', desc: 'Envio garantido de notas, cobranças e campanhas. Configuração SPF/DKIM automática.' },
              ].map(o => (
                <div key={o.id} className={`integ-option ${form[o.id] ? 'selected' : ''}`} onClick={() => setField(o.id, !form[o.id])}>
                  <div className="integ-check">
                    {form[o.id] && <Icon name="check" size={12} color="white"/>}
                  </div>
                  <div style={{
                    width: 36, height: 36, borderRadius: 8, background: form[o.id] ? 'var(--coral-500)' : 'var(--ink-100)',
                    color: form[o.id] ? 'white' : 'var(--ink-700)', display: 'grid', placeItems: 'center', flexShrink: 0,
                  }}>
                    <Icon name={o.icon} size={16}/>
                  </div>
                  <div style={{ flex: 1 }}>
                    <div className="import-option-title">{o.title}</div>
                    <div className="import-option-desc">{o.desc}</div>
                  </div>
                  {o.action && <button className="btn btn-outline" style={{ padding: '6px 10px', fontSize: 11, flexShrink: 0 }} onClick={(e) => e.stopPropagation()}>{o.action}</button>}
                </div>
              ))}
            </>
          )}

          {step === 3 && (
            <>
              <span className="onb-badge">Passo 4 de 4 · Tudo pronto</span>
              <div style={{ textAlign: 'center' }}>
                <div className="success-icon">
                  <Icon name="check" size={40} color="white"/>
                </div>
                <h2>Tudo <em>pronto!</em></h2>
                <p className="onb-card-sub">Seu workspace está ativo. Veja o que preparamos para você:</p>
              </div>

              <div style={{ background: 'var(--ink-50)', borderRadius: 12, padding: 20, marginTop: 20 }}>
                <div className="summary-row">
                  <span style={{ color: 'var(--ink-600)' }}>Workspace</span>
                  <b>{form.workspace || 'minha-empresa'}.automatiza.com.br</b>
                </div>
                <div className="summary-row">
                  <span style={{ color: 'var(--ink-600)' }}>Plano</span>
                  <b>Profissional — {BRL(399)}/mês</b>
                </div>
                <div className="summary-row">
                  <span style={{ color: 'var(--ink-600)' }}>Período grátis</span>
                  <b style={{ color: 'var(--green-600)' }}>14 dias (até 02/05/2026)</b>
                </div>
                <div className="summary-row">
                  <span style={{ color: 'var(--ink-600)' }}>Treinamento agendado</span>
                  <b>Seg 21/04 às 10h via Google Meet</b>
                </div>
                <div className="summary-row">
                  <span style={{ color: 'var(--ink-600)' }}>Suporte ativo</span>
                  <b>30 dias com CSM dedicado</b>
                </div>
              </div>

              <div style={{
                background: 'linear-gradient(135deg, var(--coral-50), white)', border: '1px solid var(--coral-200)',
                borderRadius: 12, padding: 16, marginTop: 16,
                display: 'flex', alignItems: 'center', gap: 14,
              }}>
                <Icon name="sparkle" size={22} color="var(--coral-600)"/>
                <div style={{ flex: 1, fontSize: 13, color: 'var(--ink-800)', lineHeight: 1.55 }}>
                  <b>Próximo passo:</b> Vamos te guiar em um tour interativo de 90 segundos mostrando como emitir sua primeira NF-e e cadastrar o primeiro cliente.
                </div>
              </div>

              <button className="btn btn-primary" onClick={() => onNavigate('dashboard')} style={{ width: '100%', padding: '16px', fontSize: 15, marginTop: 24 }}>
                Acessar meu dashboard
                <Icon name="arrowRight" size={16}/>
              </button>
            </>
          )}

          {step < 3 && (
            <div className="onb-footer">
              <div className="trust-line">
                <span><Icon name="check" size={12} color="var(--green-500)"/> LGPD</span>
                <span><Icon name="check" size={12} color="var(--green-500)"/> Cancele quando quiser</span>
                <span><Icon name="check" size={12} color="var(--green-500)"/> 14 dias grátis</span>
              </div>
              <div style={{ display: 'flex', gap: 8 }}>
                {step > 0 && (
                  <button className="btn btn-outline" onClick={() => setStep(step - 1)} style={{ padding: '10px 18px', fontSize: 13 }}>
                    Voltar
                  </button>
                )}
                <button className="btn btn-primary" onClick={() => setStep(step + 1)} style={{ padding: '10px 20px', fontSize: 13 }}>
                  {step === 2 ? 'Concluir configuração' : 'Continuar'}
                  <Icon name="arrowRight" size={14}/>
                </button>
              </div>
            </div>
          )}
        </main>
      </div>
    </div>
  );
};

Object.assign(window, { Onboarding });