// screens/auth-extra.jsx
// Telas extras de auth: ForgotPasswordScreen, SignupScreen, TwoFAScreen, WorkspaceScreen

const { useState: useAxState, useEffect: useAxEffect, useRef: useAxRef } = React;

// ═══════════════════════════════════════════════════════════════════
// ForgotPasswordScreen — 3 steps: email → sent → nova senha
// ═══════════════════════════════════════════════════════════════════
function ForgotPasswordScreen({ onBack, onDone }) {
  const [step, setStep] = useAxState(0);
  const [email, setEmail] = useAxState('');
  const [pwd, setPwd] = useAxState('');
  const [pwd2, setPwd2] = useAxState('');
  const [showPwd, setShowPwd] = useAxState(false);
  const [loading, setLoading] = useAxState(false);
  const [resending, setResending] = useAxState(false);

  const sendEmail = (e) => {
    e?.preventDefault();
    if (!email) return;
    setLoading(true);
    setTimeout(() => { setLoading(false); setStep(1); }, 1100);
  };

  const resend = () => {
    setResending(true);
    setTimeout(() => setResending(false), 1200);
  };

  const savePassword = (e) => {
    e?.preventDefault();
    if (!pwd || pwd !== pwd2 || pwd.length < 8) return;
    setLoading(true);
    setTimeout(() => { setLoading(false); onDone(); }, 900);
  };

  const backAction =
    step === 0 ? onBack :
    step === 1 ? () => setStep(0) :
    () => setStep(1);

  return (
    <div className="ax-root">
      <div className="ax-blob ax-blob-1" />
      <div className="ax-blob ax-blob-2" />

      <div className="ax-card" key={step}>
        <button className="ax-back" onClick={backAction}>
          {ICN.arrowLeft} Voltar
        </button>

        <div className="ax-step-dots">
          {[0, 1, 2].map(i => (
            <span key={i} className={`ax-dot ${step >= i ? 'ax-dot-on' : ''}`} />
          ))}
        </div>

        {step === 0 && <>
          <div className="ax-icon-wrap"><span className="ax-icon">🔑</span></div>
          <h1 className="ax-title">Esqueci a senha</h1>
          <p className="ax-sub">Digite seu e-mail e enviaremos um link para criar uma nova senha.</p>
          <form className="ax-form" onSubmit={sendEmail}>
            <label className="lr-field">
              <span>E-mail cadastrado</span>
              <input
                type="email"
                value={email}
                onChange={e => setEmail(e.target.value)}
                placeholder="voce@empresa.com.br"
                autoFocus
              />
            </label>
            <button
              type="submit"
              className={`lr-submit ${loading ? 'lr-submit-loading' : ''}`}
              disabled={loading || !email}
            >
              {loading
                ? <span className="lr-loading-dots"><span/><span/><span/></span>
                : 'Enviar link de recuperação'}
            </button>
          </form>
        </>}

        {step === 1 && <>
          <div className="ax-icon-wrap">
            <span className="ax-sent-check">✓</span>
          </div>
          <h1 className="ax-title">E-mail enviado!</h1>
          <p className="ax-sub">
            Mandamos um link para <strong className="ax-email">{email}</strong>.
            Verifique sua caixa de entrada — e também o spam.
          </p>
          <div className="ax-resend-row">
            Não recebeu?{' '}
            <button className="lr-link" onClick={resend} disabled={resending}>
              {resending ? 'Reenviando…' : 'Reenviar link'}
            </button>
          </div>
          <div className="ax-divider-row"><span>Já clicou no link?</span></div>
          <button className="lr-submit ax-submit-outline" onClick={() => setStep(2)}>
            Criar nova senha →
          </button>
        </>}

        {step === 2 && <>
          <div className="ax-icon-wrap"><span className="ax-icon">🔒</span></div>
          <h1 className="ax-title">Nova senha</h1>
          <p className="ax-sub">Crie uma senha forte com pelo menos 8 caracteres.</p>
          <form className="ax-form" onSubmit={savePassword}>
            <label className="lr-field">
              <span>Nova senha</span>
              <span className="lr-pwd-wrap">
                <input
                  type={showPwd ? 'text' : 'password'}
                  value={pwd}
                  onChange={e => setPwd(e.target.value)}
                  placeholder="Mínimo 8 caracteres"
                  autoFocus
                />
                <button type="button" className="lr-pwd-toggle" onClick={() => setShowPwd(s => !s)}>
                  {showPwd ? ICN.eyeOff : ICN.eye}
                </button>
              </span>
            </label>
            <label className="lr-field">
              <span>Confirmar nova senha</span>
              <input
                type="password"
                value={pwd2}
                onChange={e => setPwd2(e.target.value)}
                placeholder="Repita a senha"
              />
            </label>
            {pwd && pwd.length > 0 && pwd.length < 8 && (
              <div className="ax-error">Mínimo de 8 caracteres</div>
            )}
            {pwd2 && pwd !== pwd2 && (
              <div className="ax-error">As senhas não coincidem</div>
            )}
            <button
              type="submit"
              className={`lr-submit ${loading ? 'lr-submit-loading' : ''}`}
              disabled={loading || !pwd || pwd !== pwd2 || pwd.length < 8}
            >
              {loading
                ? <span className="lr-loading-dots"><span/><span/><span/></span>
                : 'Salvar senha e entrar'}
            </button>
          </form>
        </>}
      </div>

      <AuthExtraStyles />
    </div>
  );
}

// ═══════════════════════════════════════════════════════════════════
// SignupScreen — split layout com form completo
// ═══════════════════════════════════════════════════════════════════
function SignupScreen({ onBack, onDone, onTermos, onPrivacidade }) {
  const [nome, setNome] = useAxState('');
  const [email, setEmail] = useAxState('');
  const [empresa, setEmpresa] = useAxState('');
  const [cargo, setCargo] = useAxState('');
  const [pwd, setPwd] = useAxState('');
  const [showPwd, setShowPwd] = useAxState(false);
  const [terms, setTerms] = useAxState(false);
  const [loading, setLoading] = useAxState(false);

  const canSubmit = nome && email && empresa && pwd.length >= 8 && terms;

  const submit = (e) => {
    e?.preventDefault();
    if (!canSubmit) return;
    setLoading(true);
    setTimeout(() => onDone({ name: nome, email }), 1200);
  };

  return (
    <div className="login-root">
      {/* ─── lateral esquerda — editorial ──────────────────────── */}
      <aside className="login-left sg-left">
        <div className="ll-blob ll-blob-1" />
        <div className="ll-blob ll-blob-2" />
        <div className="ll-blob ll-blob-3" />

        <div className="ll-brand">
          <img src="assets/ezza-icon.svg" alt="" />
          <span>ezza<em>CRM</em></span>
        </div>

        <div className="ll-headline">
          <h1>Comece a<br/><em>fechar</em><br/>hoje mesmo.</h1>
          <p className="ll-sub">
            Junte-se a mais de 500 times que usam a Ezza para fechar mais negócios com menos esforço.
          </p>
        </div>

        <div className="sg-benefits">
          {[
            { icon: '⚡', title: '14 dias grátis', sub: 'Sem cartão de crédito necessário' },
            { icon: '🔒', title: 'LGPD compliant', sub: 'Seus dados sempre protegidos' },
            { icon: '💬', title: 'Onboarding assistido', sub: 'Time pronto para te guiar' },
            { icon: '🚀', title: 'Deploy em 2 minutos', sub: 'Configuração zero, use agora' },
          ].map((b, i) => (
            <div key={i} className="sg-benefit">
              <span className="sg-benefit-icon">{b.icon}</span>
              <div>
                <div className="sg-benefit-title">{b.title}</div>
                <div className="sg-benefit-sub">{b.sub}</div>
              </div>
            </div>
          ))}
        </div>

        <div className="ll-stats">
          <div className="ll-stat-block">
            <div className="ll-stat-n">14 dias</div>
            <div className="ll-stat-l">de teste<br/>gratuito</div>
          </div>
          <div className="ll-divider-v" />
          <div className="ll-stat-block">
            <div className="ll-stat-n">2 min</div>
            <div className="ll-stat-l">para criar<br/>sua conta</div>
          </div>
          <div className="ll-divider-v" />
          <div className="ll-stat-block">
            <div className="ll-stat-n">4,9<span style={{fontSize:18}}>★</span></div>
            <div className="ll-stat-l">avaliação<br/>média</div>
          </div>
        </div>
      </aside>

      {/* ─── lateral direita — form ─────────────────────────────── */}
      <main className="login-right">
        <div className="lr-shell sg-shell">
          <button className="sg-back" onClick={onBack}>
            {ICN.arrowLeft} Voltar ao login
          </button>

          <div className="lr-eyebrow">Criar conta gratuita</div>

          <form className="sg-form" onSubmit={submit}>
            <div className="sg-row">
              <label className="lr-field">
                <span>Nome completo</span>
                <input
                  type="text"
                  value={nome}
                  onChange={e => setNome(e.target.value)}
                  placeholder="Ana Beatriz"
                  autoFocus
                />
              </label>
              <label className="lr-field">
                <span>Cargo</span>
                <select
                  className="sg-select"
                  value={cargo}
                  onChange={e => setCargo(e.target.value)}
                >
                  <option value="">Selecionar...</option>
                  <option>CEO / Fundador</option>
                  <option>Diretor de Vendas</option>
                  <option>Gerente Comercial</option>
                  <option>Vendedor(a)</option>
                  <option>Marketing</option>
                  <option>Outro</option>
                </select>
              </label>
            </div>

            <label className="lr-field">
              <span>E-mail profissional</span>
              <input
                type="email"
                value={email}
                onChange={e => setEmail(e.target.value)}
                placeholder="voce@empresa.com.br"
              />
            </label>

            <label className="lr-field">
              <span>Nome da empresa</span>
              <input
                type="text"
                value={empresa}
                onChange={e => setEmpresa(e.target.value)}
                placeholder="Empresa Ltda."
              />
            </label>

            <label className="lr-field">
              <span>Senha</span>
              <span className="lr-pwd-wrap">
                <input
                  type={showPwd ? 'text' : 'password'}
                  value={pwd}
                  onChange={e => setPwd(e.target.value)}
                  placeholder="Mínimo 8 caracteres"
                />
                <button type="button" className="lr-pwd-toggle" onClick={() => setShowPwd(s => !s)}>
                  {showPwd ? ICN.eyeOff : ICN.eye}
                </button>
              </span>
            </label>

            <label className="lr-remember sg-terms">
              <span className={`lr-check ${terms ? 'lr-check-on' : ''}`} onClick={() => setTerms(t => !t)}>
                {terms && ICN.check}
              </span>
              <span>
                Li e concordo com os{' '}
                <button type="button" className="sg-terms-link" onClick={onTermos}>Termos de Uso</button>
                {' '}e{' '}
                <button type="button" className="sg-terms-link" onClick={onPrivacidade}>Política de Privacidade</button>
              </span>
            </label>

            <button
              type="submit"
              className={`lr-submit ${loading ? 'lr-submit-loading' : ''}`}
              disabled={loading || !canSubmit}
            >
              {loading
                ? <span className="lr-loading-dots"><span/><span/><span/></span>
                : <>Criar conta e começar {ICN.arrowRight}</>}
            </button>
          </form>

          <div className="lr-foot">
            <span>Já tem conta?</span>
            <button className="lr-link" onClick={onBack}>Entrar</button>
          </div>

          <div className="lr-legal">
            <span>v2.6.1</span><span>·</span>
            <a href="#">Termos</a><span>·</span>
            <a href="#">Privacidade</a>
          </div>
        </div>
      </main>

      <LoginStyles />
      <SignupExtraStyles />
    </div>
  );
}

// ═══════════════════════════════════════════════════════════════════
// TwoFAScreen — 6 dígitos com auto-advance + timer de reenvio
// ═══════════════════════════════════════════════════════════════════
function TwoFAScreen({ onBack, onVerified, user }) {
  const [d0, setD0] = useAxState('');
  const [d1, setD1] = useAxState('');
  const [d2, setD2] = useAxState('');
  const [d3, setD3] = useAxState('');
  const [d4, setD4] = useAxState('');
  const [d5, setD5] = useAxState('');
  const [loading, setLoading] = useAxState(false);
  const [countdown, setCountdown] = useAxState(60);

  const r0 = useAxRef(null);
  const r1 = useAxRef(null);
  const r2 = useAxRef(null);
  const r3 = useAxRef(null);
  const r4 = useAxRef(null);
  const r5 = useAxRef(null);

  const setters  = [setD0, setD1, setD2, setD3, setD4, setD5];
  const getters  = [d0, d1, d2, d3, d4, d5];
  const refs     = [r0, r1, r2, r3, r4, r5];
  const code     = getters.join('');
  const complete = code.length === 6 && getters.every(d => d !== '');

  // countdown
  useAxEffect(() => {
    if (countdown <= 0) return;
    const t = setTimeout(() => setCountdown(c => c - 1), 1000);
    return () => clearTimeout(t);
  }, [countdown]);

  // auto-verify when all 6 filled
  useAxEffect(() => {
    if (complete && !loading) {
      setLoading(true);
      setTimeout(() => { setLoading(false); onVerified(); }, 1300);
    }
  }, [complete]);

  const handleDigit = (i, val) => {
    const v = val.replace(/\D/g, '').slice(-1);
    setters[i](v);
    if (v && i < 5) refs[i + 1].current?.focus();
  };

  const handleKey = (i, e) => {
    if (e.key === 'Backspace' && !getters[i] && i > 0) {
      refs[i - 1].current?.focus();
    }
    if (e.key === 'ArrowLeft' && i > 0) refs[i - 1].current?.focus();
    if (e.key === 'ArrowRight' && i < 5) refs[i + 1].current?.focus();
  };

  const handlePaste = (e) => {
    const paste = e.clipboardData.getData('text').replace(/\D/g, '').slice(0, 6);
    if (paste.length > 0) {
      const chars = paste.split('');
      setters.forEach((set, i) => set(chars[i] || ''));
      refs[Math.min(paste.length, 5)].current?.focus();
    }
    e.preventDefault();
  };

  const resend = () => {
    setCountdown(60);
    setters.forEach(set => set(''));
    setTimeout(() => refs[0].current?.focus(), 50);
  };

  return (
    <div className="ax-root">
      <div className="ax-blob ax-blob-1" />
      <div className="ax-blob ax-blob-2" />

      <div className="ax-card ax-2fa-card">
        <button className="ax-back" onClick={onBack}>
          {ICN.arrowLeft} Voltar
        </button>

        <div className="ax-icon-wrap">
          <span className="ax-2fa-badge">🛡️</span>
        </div>

        <h1 className="ax-title">Verificação em<br/>dois fatores</h1>
        <p className="ax-sub">
          Enviamos um código de 6 dígitos para{' '}
          <strong className="ax-email">{user?.email || 'seu e-mail'}</strong>.
          Ele expira em 10 minutos.
        </p>

        <div className="ax-digits" onPaste={handlePaste}>
          {getters.map((d, i) => (
            <input
              key={i}
              ref={refs[i]}
              className={`ax-digit ${d ? 'ax-digit-filled' : ''} ${loading ? 'ax-digit-verifying' : ''}`}
              type="text"
              inputMode="numeric"
              maxLength={2}
              value={d}
              onChange={e => handleDigit(i, e.target.value)}
              onKeyDown={e => handleKey(i, e)}
              disabled={loading}
              autoFocus={i === 0}
            />
          ))}
        </div>

        {loading && (
          <div className="ax-verifying">
            <span className="ax-verifying-spinner" />
            <span>Verificando código…</span>
          </div>
        )}

        <div className="ax-resend-row" style={{ marginTop: 20 }}>
          {countdown > 0 ? (
            <span className="ax-countdown">
              Reenviar em <strong>{countdown}s</strong>
            </span>
          ) : (
            <>Não recebeu? <button className="lr-link" onClick={resend}>Reenviar código</button></>
          )}
        </div>

        <div className="ax-2fa-footer">
          Problemas?{' '}
          <a className="sg-terms-link" href="#">Fale com o suporte</a>
        </div>
      </div>

      <AuthExtraStyles />
    </div>
  );
}

// ═══════════════════════════════════════════════════════════════════
// WorkspaceScreen — seleção de workspace ao entrar
// ═══════════════════════════════════════════════════════════════════
const WS_LIST = [
  {
    id: 'ezza', name: 'EZZA Corp', logo: '🏢',
    plan: 'Pro', planColor: 'blue',
    members: 24, role: 'Administrador',
    lastActive: 'há 2 horas',
  },
  {
    id: 'solar', name: 'Tecnoluz Solar', logo: '☀️',
    plan: 'Starter', planColor: 'yellow',
    members: 8, role: 'Membro',
    lastActive: 'há 3 dias',
  },
  {
    id: 'pampa', name: 'Editora Pampa', logo: '📚',
    plan: 'Business', planColor: 'pink',
    members: 67, role: 'Convidado',
    lastActive: 'há 1 semana',
  },
];

function WorkspaceScreen({ onBack, onPick, user }) {
  const [picking, setPicking] = useAxState(null);

  const pick = (ws) => {
    if (picking) return;
    setPicking(ws.id);
    setTimeout(() => onPick(ws), 800);
  };

  return (
    <div className="ws-root">
      <div className="ws-blob ws-blob-1" />
      <div className="ws-blob ws-blob-2" />

      <header className="ws-header">
        <div className="ws-brand">
          <img src="assets/ezza-icon.svg" alt="" />
          <span>ezza<em>CRM</em></span>
        </div>
        <button className="ws-back" onClick={onBack}>
          {ICN.arrowLeft} Voltar
        </button>
      </header>

      <div className="ws-content">
        <div className="ws-user-row">
          <img className="ws-user-av" src="https://i.pravatar.cc/120?img=47" alt="" />
          <div>
            <div className="ws-user-name">{user?.name || 'Letícia Andrade'}</div>
            <div className="ws-user-email">{user?.email || 'leticia@ezza.com.br'}</div>
          </div>
        </div>

        <h1 className="ws-title">
          Selecione um<br/><em>workspace</em>
        </h1>
        <p className="ws-sub">
          Você tem acesso a {WS_LIST.length} workspaces. Qual deseja abrir agora?
        </p>

        <div className="ws-grid">
          {WS_LIST.map(ws => (
            <button
              key={ws.id}
              className={`ws-card ${picking === ws.id ? 'ws-card-picking' : ''}`}
              onClick={() => pick(ws)}
              disabled={!!picking}
            >
              <div className="ws-card-top">
                <div className={`ws-logo ws-logo-${ws.planColor}`}>{ws.logo}</div>
                <div className="ws-card-info">
                  <div className="ws-card-name">{ws.name}</div>
                  <div className="ws-card-meta">
                    <span className={`ws-plan ws-plan-${ws.planColor}`}>{ws.plan}</span>
                    <span className="ws-members-count">· {ws.members} membros</span>
                  </div>
                </div>
              </div>
              <div className="ws-card-bottom">
                <span className={`ws-role ws-role-${
                  ws.role === 'Administrador' ? 'admin' :
                  ws.role === 'Membro' ? 'member' : 'guest'
                }`}>{ws.role}</span>
                <span className="ws-last">{ws.lastActive}</span>
                <span className="ws-arrow">{ICN.arrowRight}</span>
              </div>
              {picking === ws.id && (
                <div className="ws-picking-overlay">
                  <span className="ax-verifying-spinner" />
                </div>
              )}
            </button>
          ))}
        </div>

        <div className="ws-foot">
          <button className="ws-new-btn">
            + Criar novo workspace
          </button>
        </div>
      </div>

      <AuthExtraStyles />
      <WorkspaceStyles />
    </div>
  );
}

// ═══════════════════════════════════════════════════════════════════
// Styles
// ═══════════════════════════════════════════════════════════════════
function AuthExtraStyles() {
  return (
    <style>{`
      /* ══ lr-* reutilizados do LoginStyles (self-contained aqui) ══ */
      .lr-field { display: flex; flex-direction: column; gap: 7px; }
      .lr-field > span:first-child {
        font-size: 11.5px; font-weight: 600;
        color: oklch(0.45 0.012 255);
        letter-spacing: -0.005em;
      }
      .lr-field input {
        font-family: var(--font-ui);
        font-size: 14px; font-weight: 500;
        padding: 13px 14px;
        background: white;
        border: 1px solid oklch(0.90 0.012 255);
        border-radius: 12px;
        color: oklch(0.12 0.008 255);
        letter-spacing: -0.005em;
        transition: border-color .15s, box-shadow .15s;
        width: 100%; box-sizing: border-box;
      }
      .lr-field input:focus {
        outline: none;
        border-color: oklch(0.52 0.18 250);
        box-shadow: 0 0 0 3px oklch(0.78 0.10 250 / 0.25);
      }
      .lr-pwd-wrap { position: relative; }
      .lr-pwd-wrap input { padding-right: 44px; }
      .lr-pwd-toggle {
        position: absolute; right: 8px; top: 50%; transform: translateY(-50%);
        background: none; border: none;
        width: 32px; height: 32px;
        display: grid; place-items: center;
        color: oklch(0.55 0.012 255);
        cursor: default; border-radius: 8px;
        transition: background .15s;
      }
      .lr-pwd-toggle:hover { background: oklch(0.95 0.012 250); }
      .lr-pwd-toggle svg { width: 18px; height: 18px; }
      .lr-submit {
        margin-top: 8px;
        background: oklch(0.12 0.008 255);
        color: white;
        font-family: var(--font-ui);
        font-size: 14px; font-weight: 600;
        padding: 14px;
        border: none; border-radius: 12px;
        cursor: default; width: 100%;
        display: flex; align-items: center; justify-content: center;
        letter-spacing: -0.005em;
        transition: transform .12s, background .15s, opacity .15s;
      }
      .lr-submit:hover:not(:disabled) { background: oklch(0.16 0.008 255); }
      .lr-submit:active { transform: scale(0.985); }
      .lr-submit:disabled { opacity: 0.45; cursor: not-allowed; }
      .lr-loading-dots { display: flex; gap: 5px; }
      .lr-loading-dots span {
        width: 6px; height: 6px; border-radius: 50%;
        background: white;
        animation: lr-dot 1.2s ease-in-out infinite;
      }
      .lr-loading-dots span:nth-child(2) { animation-delay: .15s; }
      .lr-loading-dots span:nth-child(3) { animation-delay: .3s; }
      @keyframes lr-dot {
        0%, 80%, 100% { opacity: 0.3; transform: scale(0.8); }
        40% { opacity: 1; transform: scale(1.1); }
      }
      .lr-link {
        background: none; border: none;
        color: oklch(0.52 0.18 250); font-weight: 600;
        cursor: default; font-family: var(--font-ui);
        font-size: inherit; padding: 0;
      }
      .lr-link:hover { text-decoration: underline; }
      .lr-link:disabled { opacity: 0.5; cursor: not-allowed; text-decoration: none; }

      /* ── keyframes próprios ── */
      @keyframes ax-pop {
        from { opacity: 0; transform: translateY(16px) scale(0.97); }
        to   { opacity: 1; transform: translateY(0) scale(1); }
      }
      @keyframes ax-spin { to { transform: rotate(360deg); } }
      @keyframes ax-rise {
        from { opacity: 0; transform: translateY(12px); }
        to   { opacity: 1; transform: translateY(0); }
      }
      @keyframes ax-blob {
        0%, 100% { transform: translate(0, 0) scale(1); }
        50%       { transform: translate(16px, -16px) scale(1.07); }
      }

      /* ─── root centered card ─── */
      .ax-root {
        position: fixed; inset: 0;
        display: grid; place-items: center;
        font-family: var(--font-ui);
        overflow: hidden;
        background:
          radial-gradient(800px 600px at 20% 20%, oklch(0.94 0.05 245) 0%, transparent 60%),
          radial-gradient(800px 600px at 80% 80%, oklch(0.94 0.06 320) 0%, transparent 55%),
          oklch(0.97 0.02 95);
      }
      .ax-blob {
        position: absolute; border-radius: 50%;
        filter: blur(100px); opacity: 0.55;
        animation: ax-blob 10s ease-in-out infinite;
        pointer-events: none;
      }
      .ax-blob-1 { width: 420px; height: 420px; background: var(--acc-pink); top: -100px; left: -100px; }
      .ax-blob-2 { width: 380px; height: 380px; background: var(--acc-lav); bottom: -100px; right: -100px; animation-delay: -5s; }

      .ax-card {
        position: relative;
        background: white;
        border-radius: 28px;
        padding: 48px 56px;
        box-shadow: 0 40px 80px -32px rgba(20,30,60,.25), 0 8px 20px -10px rgba(20,30,60,.10);
        width: 480px;
        animation: ax-pop 0.45s cubic-bezier(.2,.8,.2,1);
      }
      .ax-2fa-card { width: 500px; }

      /* ─── back button ─── */
      .ax-back {
        display: inline-flex; align-items: center; gap: 8px;
        background: none; border: none;
        font-family: inherit; font-size: 12.5px; font-weight: 600;
        color: var(--ink-muted);
        cursor: default; padding: 0;
        margin-bottom: 28px;
        transition: color .15s;
      }
      .ax-back:hover { color: var(--ink); }
      .ax-back svg { width: 14px; height: 14px; }
      .ax-back-inline { margin-bottom: 16px; display: block; }

      /* ─── step dots ─── */
      .ax-step-dots { display: flex; gap: 6px; margin-bottom: 24px; }
      .ax-dot {
        width: 6px; height: 6px; border-radius: 50%;
        background: oklch(0.90 0.012 255);
        transition: background .3s, width .3s;
      }
      .ax-dot-on { background: var(--acc-blue-strong); width: 18px; border-radius: 99px; }

      /* ─── icon wrap ─── */
      .ax-icon-wrap { margin-bottom: 16px; }
      .ax-icon { font-size: 40px; display: block; }

      .ax-sent-check {
        display: inline-flex; align-items: center; justify-content: center;
        width: 52px; height: 52px; border-radius: 50%;
        background: var(--acc-mint);
        color: oklch(0.32 0.12 160);
        font-size: 24px; font-weight: 800;
        box-shadow: 0 0 0 6px oklch(0.90 0.05 160 / 0.35);
        animation: ax-check-pop .4s cubic-bezier(.2,.8,.2,1);
      }
      @keyframes ax-check-pop {
        from { transform: scale(0.5); opacity: 0; }
        to   { transform: scale(1); opacity: 1; }
      }

      .ax-2fa-badge { font-size: 40px; }

      /* ─── text ─── */
      .ax-title {
        font-family: var(--font-display);
        font-size: 32px; font-weight: 400;
        letter-spacing: -0.02em;
        color: var(--ink);
        margin: 0 0 10px; line-height: 1.1;
      }
      .ax-sub {
        font-size: 14px; color: var(--ink-soft);
        line-height: 1.55; margin: 0 0 24px;
      }
      .ax-email { color: var(--ink); font-weight: 600; }

      /* ─── form ─── */
      .ax-form { display: flex; flex-direction: column; gap: 14px; }

      /* ─── resend / helper rows ─── */
      .ax-resend-row { font-size: 13px; color: var(--ink-muted); }

      .ax-divider-row {
        position: relative; text-align: center;
        margin: 20px 0 10px;
        font-size: 12px; color: var(--ink-muted);
      }
      .ax-divider-row::before {
        content: ''; position: absolute; left: 0; right: 0; top: 50%;
        height: 1px; background: oklch(0.92 0.012 255);
      }
      .ax-divider-row span {
        position: relative; background: white; padding: 0 12px;
      }

      /* ─── error pill ─── */
      .ax-error {
        font-size: 12px; color: oklch(0.50 0.18 25);
        background: oklch(0.97 0.04 25);
        border: 0.5px solid oklch(0.88 0.06 25);
        border-radius: 8px; padding: 8px 12px;
      }

      /* outline variant of lr-submit */
      .ax-submit-outline {
        background: white !important; color: var(--ink) !important;
        border: 1.5px solid oklch(0.88 0.012 255) !important;
        margin-top: 4px;
      }
      .ax-submit-outline:hover { background: oklch(0.98 0.005 250) !important; }

      /* ─── 2FA digit inputs ─── */
      .ax-digits {
        display: flex; gap: 10px; justify-content: center;
        margin: 4px 0 4px;
      }
      .ax-digit {
        width: 56px; height: 68px;
        border: 1.5px solid oklch(0.88 0.012 255);
        border-radius: 14px;
        text-align: center;
        font-size: 28px; font-weight: 700;
        font-family: var(--font-mono);
        color: var(--ink);
        background: white;
        transition: border-color .15s, box-shadow .15s, background .15s;
        caret-color: transparent;
      }
      .ax-digit:focus {
        outline: none;
        border-color: var(--acc-blue-strong);
        box-shadow: 0 0 0 3px oklch(0.78 0.10 250 / 0.25);
      }
      .ax-digit-filled {
        background: oklch(0.96 0.014 250);
        border-color: var(--acc-blue-strong);
      }
      .ax-digit-verifying {
        background: oklch(0.97 0.008 250);
        opacity: 0.6;
      }
      .ax-digit:disabled { cursor: not-allowed; }

      /* ─── verifying state ─── */
      .ax-verifying {
        display: flex; align-items: center; justify-content: center; gap: 10px;
        font-size: 13px; font-weight: 500; color: var(--ink-muted);
        margin-top: 16px;
        animation: ax-rise .3s ease;
      }
      .ax-verifying-spinner {
        width: 16px; height: 16px; border-radius: 50%;
        border: 2px solid oklch(0.88 0.012 255);
        border-top-color: var(--acc-blue-strong);
        animation: ax-spin .75s linear infinite;
        flex-shrink: 0;
      }

      .ax-countdown { font-size: 13px; color: var(--ink-muted); }
      .ax-countdown strong { font-family: var(--font-mono); }

      .ax-2fa-footer {
        margin-top: 32px; text-align: center;
        font-size: 12.5px; color: var(--ink-muted);
      }
    `}</style>
  );
}

function SignupExtraStyles() {
  return (
    <style>{`
      /* signup left override */
      .sg-left {
        background:
          radial-gradient(700px 500px at 0% 0%, oklch(0.92 0.07 245) 0%, transparent 60%),
          radial-gradient(700px 500px at 100% 100%, oklch(0.94 0.05 320) 0%, transparent 55%),
          oklch(0.97 0.02 95) !important;
      }

      .sg-benefits {
        display: flex; flex-direction: column; gap: 18px;
        margin-top: 36px;
        position: relative; z-index: 2;
      }
      .sg-benefit { display: flex; align-items: flex-start; gap: 14px; }
      .sg-benefit-icon { font-size: 22px; flex-shrink: 0; margin-top: 2px; }
      .sg-benefit-title { font-size: 13.5px; font-weight: 600; color: var(--ink); }
      .sg-benefit-sub { font-size: 12px; color: var(--ink-muted); margin-top: 2px; }

      .sg-shell { max-width: 440px !important; }

      .sg-form { display: flex; flex-direction: column; gap: 12px; }
      .sg-row { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }

      .sg-select {
        font-family: inherit; font-size: 14px; font-weight: 500;
        padding: 13px 36px 13px 14px;
        background: white;
        border: 1px solid oklch(0.90 0.012 255);
        border-radius: 12px;
        color: var(--ink);
        letter-spacing: -0.005em;
        transition: border-color .15s, box-shadow .15s;
        width: 100%;
        cursor: default;
        -webkit-appearance: none;
        appearance: none;
        background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%23999' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'%3E%3C/polyline%3E%3C/svg%3E");
        background-repeat: no-repeat;
        background-position: right 12px center;
      }
      .sg-select:focus {
        outline: none;
        border-color: var(--acc-blue-strong);
        box-shadow: 0 0 0 3px oklch(0.78 0.10 250 / 0.25);
      }

      .sg-back {
        display: inline-flex; align-items: center; gap: 8px;
        background: none; border: none;
        font-family: var(--font-ui); font-size: 12.5px; font-weight: 600;
        color: var(--ink-muted);
        cursor: default; padding: 0;
        margin-bottom: 16px;
        transition: color .15s;
      }
      .sg-back:hover { color: var(--ink); }
      .sg-back svg { width: 14px; height: 14px; }

      .sg-terms { align-items: flex-start !important; }
      .sg-terms .lr-check { margin-top: 2px; flex-shrink: 0; }
      .sg-terms-link {
        color: var(--acc-blue-strong); text-decoration: none; font-weight: 600;
        background: none; border: none; padding: 0;
        font-family: inherit; font-size: inherit;
        cursor: default;
      }
      .sg-terms-link:hover { text-decoration: underline; }
    `}</style>
  );
}

function WorkspaceStyles() {
  return (
    <style>{`
      /* ── keyframes próprios (não depende do LoginStyles) ── */
      @keyframes ws-float {
        0%, 100% { transform: translate(0, 0) scale(1); }
        50%       { transform: translate(16px, -16px) scale(1.06); }
      }
      @keyframes ws-rise {
        from { opacity: 0; transform: translateY(14px); }
        to   { opacity: 1; transform: translateY(0); }
      }
      @keyframes ws-pop {
        from { opacity: 0; transform: translateY(20px) scale(0.97); }
        to   { opacity: 1; transform: translateY(0) scale(1); }
      }

      /* ── layout root ── */
      .ws-root {
        position: fixed;
        top: 0; left: 0; right: 0; bottom: 0;
        overflow-y: auto; overflow-x: hidden;
        font-family: var(--font-ui);
        background:
          radial-gradient(900px 600px at 20% 10%, oklch(0.94 0.05 245) 0%, transparent 60%),
          radial-gradient(900px 600px at 80% 90%, oklch(0.95 0.04 320) 0%, transparent 55%),
          oklch(0.97 0.02 95);
      }

      /* ── blobs ── */
      .ws-blob {
        position: fixed;
        border-radius: 50%;
        filter: blur(100px); opacity: 0.42;
        animation: ws-float 14s ease-in-out infinite;
        pointer-events: none;
        z-index: 0;
      }
      .ws-blob-1 { width: 480px; height: 480px; background: oklch(0.75 0.10 250); top: -120px; right: -120px; }
      .ws-blob-2 { width: 420px; height: 420px; background: oklch(0.80 0.09 300); bottom: -100px; left: -100px; animation-delay: -6s; }

      /* ── header ── */
      .ws-header {
        position: relative; z-index: 5;
        display: flex; justify-content: space-between; align-items: center;
        padding: 28px 48px;
      }
      .ws-brand {
        display: flex; align-items: center; gap: 12px;
        font-size: 18px; font-weight: 700; letter-spacing: -0.01em;
        color: var(--ink);
      }
      .ws-brand img { width: 32px; height: 32px; }
      .ws-brand em { font-family: var(--font-display); font-style: italic; font-weight: 400; }
      .ws-back {
        display: inline-flex; align-items: center; gap: 8px;
        background: white;
        border: 0.5px solid oklch(0.92 0.012 255);
        font-family: inherit; font-size: 12.5px; font-weight: 600;
        padding: 9px 16px 9px 12px;
        border-radius: 999px;
        color: var(--ink-soft);
        cursor: default;
        box-shadow: 0 4px 14px -8px rgba(20,30,60,.18);
        transition: color .15s;
      }
      .ws-back:hover { color: var(--ink); }
      .ws-back svg { width: 14px; height: 14px; }

      /* ── content ── */
      .ws-content {
        position: relative; z-index: 2;
        max-width: 660px; margin: 0 auto;
        padding: 16px 48px 80px;
      }

      .ws-user-row {
        display: inline-flex; align-items: center; gap: 14px;
        margin-bottom: 40px;
        padding: 12px 18px 12px 12px;
        background: white;
        border-radius: 18px;
        border: 0.5px solid oklch(0.92 0.012 255);
        box-shadow: 0 8px 24px -16px rgba(20,30,60,.12);
        animation: ws-rise .6s cubic-bezier(.2,.8,.2,1);
      }
      .ws-user-av {
        width: 40px; height: 40px; border-radius: 50%;
        border: 2px solid white;
        box-shadow: 0 4px 12px -4px rgba(20,30,60,.2);
      }
      .ws-user-name { font-size: 13.5px; font-weight: 600; color: var(--ink); }
      .ws-user-email { font-size: 11.5px; color: var(--ink-muted); font-family: var(--font-mono); margin-top: 1px; }

      .ws-title {
        font-family: var(--font-display);
        font-size: 52px; line-height: 0.98; letter-spacing: -0.025em;
        font-weight: 400; color: var(--ink);
        margin: 0 0 14px;
        animation: ws-rise .7s cubic-bezier(.2,.8,.2,1);
      }
      .ws-title em {
        font-style: italic;
        background: linear-gradient(95deg, oklch(0.55 0.16 250) 0%, oklch(0.62 0.18 25) 100%);
        -webkit-background-clip: text; background-clip: text; color: transparent;
      }
      .ws-sub {
        font-size: 15px; color: var(--ink-soft);
        margin: 0 0 36px;
        animation: ws-rise .7s .1s cubic-bezier(.2,.8,.2,1) backwards;
      }

      /* ── cards ── */
      .ws-grid { display: flex; flex-direction: column; gap: 12px; }

      .ws-card {
        position: relative;
        background: white;
        border: 0.5px solid oklch(0.92 0.012 255);
        border-radius: 20px;
        padding: 22px 24px;
        text-align: left;
        font-family: inherit;
        cursor: default;
        display: flex; flex-direction: column; gap: 14px;
        box-shadow: 0 8px 24px -12px rgba(20,30,60,.10);
        transition: transform .2s, box-shadow .2s, border-color .2s;
        animation: ws-pop .5s cubic-bezier(.2,.8,.2,1) backwards;
        width: 100%;
      }
      .ws-card:nth-child(1) { animation-delay: .04s; }
      .ws-card:nth-child(2) { animation-delay: .12s; }
      .ws-card:nth-child(3) { animation-delay: .20s; }
      .ws-card:hover {
        transform: translateY(-2px);
        box-shadow: 0 20px 40px -12px rgba(20,30,60,.18);
        border-color: oklch(0.85 0.02 255);
      }
      .ws-card:disabled { opacity: 0.55; pointer-events: none; }
      .ws-card-picking { opacity: 0.6; transform: scale(0.99) !important; }

      .ws-card-top { display: flex; align-items: center; gap: 16px; }

      .ws-logo {
        width: 52px; height: 52px; border-radius: 14px;
        display: grid; place-items: center; font-size: 24px;
        flex-shrink: 0;
      }
      .ws-logo-blue   { background: oklch(0.92 0.05 250); }
      .ws-logo-yellow { background: oklch(0.95 0.07 80); }
      .ws-logo-pink   { background: oklch(0.94 0.05 5); }

      .ws-card-info { flex: 1; min-width: 0; }
      .ws-card-name { font-size: 16px; font-weight: 700; color: var(--ink); letter-spacing: -0.01em; }
      .ws-card-meta { display: flex; align-items: center; gap: 8px; margin-top: 5px; flex-wrap: wrap; }

      .ws-plan { font-size: 10.5px; font-weight: 700; padding: 3px 8px; border-radius: 99px; letter-spacing: 0.04em; }
      .ws-plan-blue   { background: oklch(0.90 0.06 250); color: oklch(0.38 0.14 250); }
      .ws-plan-yellow { background: oklch(0.93 0.08 80);  color: oklch(0.38 0.12 80); }
      .ws-plan-pink   { background: oklch(0.93 0.06 5);   color: oklch(0.38 0.14 5); }
      .ws-members-count { font-size: 12px; color: var(--ink-muted); }

      .ws-card-bottom {
        display: flex; align-items: center; gap: 10px;
        border-top: 0.5px solid oklch(0.95 0.008 255);
        padding-top: 14px;
      }
      .ws-role { font-size: 11.5px; font-weight: 600; padding: 4px 10px; border-radius: 99px; }
      .ws-role-admin  { background: oklch(0.92 0.05 270); color: oklch(0.38 0.16 270); }
      .ws-role-member { background: oklch(0.95 0.012 250); color: var(--ink-soft); }
      .ws-role-guest  { background: oklch(0.95 0.012 255); color: var(--ink-faint); }

      .ws-last { font-size: 11.5px; color: var(--ink-faint); margin-left: auto; }
      .ws-arrow { color: var(--ink-muted); transition: transform .2s, color .2s; display: flex; align-items: center; flex-shrink: 0; }
      .ws-card:hover .ws-arrow { transform: translateX(4px); color: var(--ink); }
      .ws-arrow svg { width: 16px; height: 16px; }

      .ws-picking-overlay {
        position: absolute;
        top: 0; left: 0; right: 0; bottom: 0;
        border-radius: 20px;
        background: white; opacity: 0.8;
        display: grid; place-items: center;
      }

      .ws-foot { margin-top: 16px; }
      .ws-new-btn {
        background: none;
        border: 1.5px dashed oklch(0.85 0.012 255);
        border-radius: 16px; padding: 16px 28px;
        font-family: inherit; font-size: 13.5px; font-weight: 600;
        color: var(--ink-muted); cursor: default; width: 100%;
        transition: border-color .15s, color .15s, background .15s;
      }
      .ws-new-btn:hover { border-color: oklch(0.52 0.18 250); color: var(--ink); background: oklch(0.98 0.008 250); }

      @media (max-width: 720px) {
        .ws-header { padding: 20px 24px; }
        .ws-content { padding: 16px 24px 60px; }
        .ws-title { font-size: 36px; }
      }
    `}</style>
  );
}

// ═══════════════════════════════════════════════════════════════════
// LegalScreen — layout compartilhado para Termos e Privacidade
// ═══════════════════════════════════════════════════════════════════
function LegalScreen({ onBack, title, eyebrow, lastUpdated, sections }) {
  const [active, setActive] = useAxState(0);

  const scrollTo = (i) => {
    setActive(i);
    document.getElementById('lg-s-' + i)?.scrollIntoView({ behavior: 'smooth', block: 'start' });
  };

  const handleScroll = (e) => {
    const container = e.currentTarget;
    let found = 0;
    for (let i = 0; i < sections.length; i++) {
      const el = document.getElementById('lg-s-' + i);
      if (el && el.offsetTop - container.scrollTop < 160) found = i;
    }
    setActive(found);
  };

  return (
    <div className="lg-root">
      {/* ── sidebar ── */}
      <aside className="lg-sidebar">
        <div className="lg-sidebar-top">
          <button className="ws-back lg-back" onClick={onBack}>
            {ICN.arrowLeft} Voltar
          </button>
          <div className="lg-brand">
            <img src="assets/ezza-icon.svg" alt="" />
            <span>ezza<em>CRM</em></span>
          </div>
          <div className="lg-meta">
            <div className="lg-eyebrow">{eyebrow}</div>
            <h1 className="lg-sidebar-title">{title}</h1>
            <div className="lg-updated">Atualizado em {lastUpdated}</div>
          </div>
        </div>

        <nav className="lg-toc">
          {sections.map((s, i) => (
            <button
              key={i}
              className={`lg-toc-item ${active === i ? 'lg-toc-active' : ''}`}
              onClick={() => scrollTo(i)}
            >
              <span className="lg-toc-n">{String(i + 1).padStart(2, '0')}</span>
              <span>{s.title}</span>
            </button>
          ))}
        </nav>

        <div className="lg-sidebar-foot">
          <div>Dúvidas? <a href="mailto:legal@ezzacrm.com.br" style={{color:'oklch(0.65 0.14 250)'}}>legal@ezzacrm.com.br</a></div>
        </div>
      </aside>

      {/* ── content ── */}
      <main className="lg-content" onScroll={handleScroll}>
        <div className="lg-content-inner">
          <div className="lg-hero">
            <div className="lg-hero-eyebrow">{eyebrow}</div>
            <h1 className="lg-hero-title">{title}</h1>
            <p className="lg-hero-sub">Última atualização: <strong>{lastUpdated}</strong> · Versão 2.6</p>
          </div>

          {sections.map((s, i) => (
            <section key={i} id={'lg-s-' + i} className="lg-section">
              <div className="lg-section-n">{String(i + 1).padStart(2, '0')}</div>
              <div className="lg-section-body">
                <h2 className="lg-section-title">{s.title}</h2>
                {s.content.map((block, j) => (
                  block.type === 'p'  ? <p key={j} className="lg-p">{block.text}</p> :
                  block.type === 'ul' ? <ul key={j} className="lg-ul">{block.items.map((it, k) => <li key={k}>{it}</li>)}</ul> :
                  block.type === 'h3' ? <h3 key={j} className="lg-h3">{block.text}</h3> :
                  null
                ))}
              </div>
            </section>
          ))}

          <div className="lg-foot-block">
            <p>Esta é a versão atual do documento. Ao continuar usando a plataforma Ezza CRM após eventuais alterações, você confirma a aceitação das novas condições.</p>
            <button className="lr-submit" style={{maxWidth:260, marginTop:24}} onClick={onBack}>
              Voltar {ICN.arrowRight}
            </button>
          </div>
        </div>
      </main>

      <AuthExtraStyles />
      <LegalStyles />
    </div>
  );
}

// ─── Termos de Uso ────────────────────────────────────────────────
function TermosScreen({ onBack }) {
  const sections = [
    {
      title: 'Aceitação dos Termos',
      content: [
        { type: 'p', text: 'Ao acessar ou usar a plataforma Ezza CRM ("Serviço"), você concorda em ficar vinculado a estes Termos de Uso. Se você não concordar com qualquer parte destes termos, não poderá acessar o Serviço.' },
        { type: 'p', text: 'Estes Termos se aplicam a todos os visitantes, usuários e outras pessoas que acessam ou usam o Serviço. O uso continuado da plataforma após qualquer alteração constitui aceitação das novas condições.' },
      ],
    },
    {
      title: 'Descrição do Serviço',
      content: [
        { type: 'p', text: 'A Ezza CRM fornece uma plataforma de gestão de relacionamento com clientes (CRM) na modalidade Software as a Service (SaaS), incluindo funcionalidades de pipeline de vendas, automação de comunicação, gestão de contatos e relatórios analíticos.' },
        { type: 'ul', items: [
          'Gestão de pipeline de oportunidades e leads',
          'Automação de follow-up por e-mail e WhatsApp',
          'Integração com IA para scoring e SDR virtual',
          'Relatórios e dashboards em tempo real',
          'API pública para integrações externas',
        ]},
        { type: 'p', text: 'Reservamo-nos o direito de modificar ou descontinuar o Serviço a qualquer momento, com aviso prévio de 30 dias para funcionalidades pagas.' },
      ],
    },
    {
      title: 'Cadastro e Responsabilidades',
      content: [
        { type: 'p', text: 'Para usar o Serviço, você deve criar uma conta fornecendo informações precisas, completas e atualizadas. Você é responsável por manter a confidencialidade de sua senha e por todas as atividades realizadas em sua conta.' },
        { type: 'h3', text: 'Você concorda em:' },
        { type: 'ul', items: [
          'Não compartilhar credenciais de acesso com terceiros não autorizados',
          'Notificar imediatamente qualquer uso não autorizado da sua conta',
          'Usar o serviço apenas para fins legais e comerciais legítimos',
          'Não realizar engenharia reversa ou tentar acessar código-fonte',
        ]},
      ],
    },
    {
      title: 'Planos e Pagamentos',
      content: [
        { type: 'p', text: 'O Serviço é oferecido em diferentes planos (Starter, Pro e Business) com cobrança mensal ou anual. Os preços estão sujeitos a alteração com aviso prévio de 30 dias.' },
        { type: 'p', text: 'O período de teste gratuito de 14 dias não exige cartão de crédito. Ao final do período de teste, a conta será suspensa caso não haja contratação de um plano pago.' },
        { type: 'ul', items: [
          'Cobranças são realizadas antecipadamente (pré-pago)',
          'Reembolsos são concedidos em até 7 dias após a contratação',
          'Cancelamentos entram em vigor no final do período vigente',
          'Aceitamos cartão de crédito, Pix e boleto bancário',
        ]},
      ],
    },
    {
      title: 'Propriedade Intelectual',
      content: [
        { type: 'p', text: 'O Serviço e todo o seu conteúdo original, funcionalidades e características são e permanecerão propriedade exclusiva da Ezza CRM e seus licenciadores. Nossa marca, logotipo e nome de produto são marcas registradas.' },
        { type: 'p', text: 'Você retém todos os direitos sobre os dados que inserir na plataforma. Concede à Ezza CRM uma licença limitada para processar esses dados unicamente para prestação do Serviço.' },
      ],
    },
    {
      title: 'Uso Aceitável',
      content: [
        { type: 'p', text: 'Você concorda em não usar o Serviço de maneira que possa danificá-lo, desabilitá-lo, sobrecarregá-lo ou prejudicá-lo. Também concorda em não tentar obter acesso não autorizado a sistemas ou redes conectados ao Serviço.' },
        { type: 'ul', items: [
          'É proibido o envio de spam, mensagens em massa não solicitadas',
          'É proibido o scraping automatizado de dados da plataforma',
          'É proibido o uso para atividades ilegais ou fraudulentas',
          'É proibida a revenda do serviço sem autorização expressa',
        ]},
      ],
    },
    {
      title: 'Limitação de Responsabilidade',
      content: [
        { type: 'p', text: 'Em nenhuma circunstância a Ezza CRM, seus diretores, funcionários, parceiros ou agentes serão responsáveis por danos indiretos, incidentais, especiais, consequenciais ou punitivos, incluindo perda de lucros, dados ou boa vontade.' },
        { type: 'p', text: 'Nossa responsabilidade total não excederá o valor pago por você nos 12 meses anteriores ao evento que deu origem à reclamação, ou R$ 500,00, o que for maior.' },
      ],
    },
    {
      title: 'Rescisão',
      content: [
        { type: 'p', text: 'Você pode encerrar sua conta a qualquer momento nas configurações da plataforma. A Ezza CRM pode suspender ou encerrar seu acesso imediatamente, sem aviso prévio, por violação destes Termos.' },
        { type: 'p', text: 'Após a rescisão, seu direito de usar o Serviço cessará imediatamente. Você poderá exportar seus dados em até 30 dias após o encerramento.' },
      ],
    },
    {
      title: 'Lei Aplicável e Foro',
      content: [
        { type: 'p', text: 'Estes Termos serão regidos e interpretados de acordo com as leis da República Federativa do Brasil, independentemente de conflito de disposições legais.' },
        { type: 'p', text: 'Qualquer disputa decorrente destes Termos será submetida à jurisdição exclusiva dos tribunais da Comarca de São Paulo, Estado de São Paulo, Brasil.' },
      ],
    },
    {
      title: 'Contato',
      content: [
        { type: 'p', text: 'Se tiver dúvidas sobre estes Termos de Uso, entre em contato conosco:' },
        { type: 'ul', items: [
          'E-mail jurídico: legal@ezzacrm.com.br',
          'Endereço: Av. Paulista, 1000 — São Paulo, SP — 01310-100',
          'Telefone: (11) 3000-0000 (seg–sex, 9h–18h)',
          'Chat de suporte: disponível na plataforma',
        ]},
      ],
    },
  ];

  return (
    <LegalScreen
      onBack={onBack}
      title="Termos de Uso"
      eyebrow="DOCUMENTOS LEGAIS"
      lastUpdated="15 de maio de 2026"
      sections={sections}
    />
  );
}

// ─── Política de Privacidade ─────────────────────────────────────
function PrivacidadeScreen({ onBack }) {
  const sections = [
    {
      title: 'Informações que Coletamos',
      content: [
        { type: 'p', text: 'Coletamos diferentes tipos de informações para fornecer e melhorar nosso Serviço, sempre em conformidade com a Lei Geral de Proteção de Dados (LGPD — Lei 13.709/2018).' },
        { type: 'h3', text: 'Dados fornecidos por você:' },
        { type: 'ul', items: [
          'Nome completo, e-mail e senha ao criar sua conta',
          'Informações de empresa, cargo e telefone no perfil',
          'Dados de clientes e contatos inseridos na plataforma',
          'Conteúdo de mensagens e notas nas oportunidades',
          'Dados de faturamento (nome, CPF/CNPJ, endereço)',
        ]},
        { type: 'h3', text: 'Dados coletados automaticamente:' },
        { type: 'ul', items: [
          'Endereço IP e dados de geolocalização aproximada',
          'Tipo de navegador, sistema operacional e dispositivo',
          'Páginas visitadas, cliques e tempo de sessão',
          'Logs de acesso e eventos de uso da plataforma',
        ]},
      ],
    },
    {
      title: 'Como Usamos as Informações',
      content: [
        { type: 'p', text: 'Utilizamos as informações coletadas para as seguintes finalidades, sempre com base legal adequada conforme a LGPD:' },
        { type: 'ul', items: [
          'Prestação e manutenção do Serviço contratado',
          'Personalização da experiência na plataforma',
          'Envio de comunicações transacionais (recibos, alertas)',
          'Suporte técnico e atendimento ao cliente',
          'Melhoria contínua dos algoritmos de IA e scoring',
          'Cumprimento de obrigações legais e regulatórias',
          'Prevenção a fraudes e segurança da plataforma',
        ]},
      ],
    },
    {
      title: 'Compartilhamento de Dados',
      content: [
        { type: 'p', text: 'Não vendemos, alugamos ou comercializamos seus dados pessoais com terceiros. Podemos compartilhar informações apenas nas seguintes situações:' },
        { type: 'ul', items: [
          'Fornecedores de serviço (cloud, pagamentos, e-mail) sob contrato de confidencialidade',
          'Obrigação legal ou ordem judicial',
          'Proteção de direitos, propriedade ou segurança da Ezza CRM ou usuários',
          'Com seu consentimento explícito para casos específicos',
        ]},
        { type: 'p', text: 'Nossos principais subprocessadores incluem: AWS (infraestrutura), Stripe (pagamentos), SendGrid (e-mail transacional) e OpenAI (processamento de IA). Todos operam com adequação à LGPD/GDPR.' },
      ],
    },
    {
      title: 'Seus Direitos — LGPD',
      content: [
        { type: 'p', text: 'Como titular de dados, a LGPD garante a você os seguintes direitos, exercíveis a qualquer momento:' },
        { type: 'ul', items: [
          'Confirmação da existência e acesso aos seus dados',
          'Correção de dados incompletos, inexatos ou desatualizados',
          'Anonimização, bloqueio ou eliminação de dados desnecessários',
          'Portabilidade dos dados a outro fornecedor',
          'Eliminação de dados tratados com consentimento',
          'Revogação do consentimento a qualquer momento',
          'Oposição ao tratamento com base em interesse legítimo',
        ]},
        { type: 'p', text: 'Para exercer seus direitos, acesse Configurações > Privacidade ou envie e-mail para privacidade@ezzacrm.com.br. Respondemos em até 15 dias úteis.' },
      ],
    },
    {
      title: 'Cookies e Rastreamento',
      content: [
        { type: 'p', text: 'Utilizamos cookies e tecnologias similares para melhorar sua experiência, manter sessões ativas e analisar o uso da plataforma. Você pode configurar seu navegador para recusar cookies, mas isso pode limitar funcionalidades.' },
        { type: 'h3', text: 'Tipos de cookies utilizados:' },
        { type: 'ul', items: [
          'Essenciais: necessários para funcionamento da plataforma (sem opção de recusa)',
          'Funcionais: lembram preferências e configurações do usuário',
          'Analíticos: medem uso e performance (Google Analytics, Mixpanel)',
          'Marketing: não utilizamos cookies de rastreamento para publicidade de terceiros',
        ]},
      ],
    },
    {
      title: 'Segurança dos Dados',
      content: [
        { type: 'p', text: 'Implementamos medidas técnicas e organizacionais adequadas para proteger seus dados contra acesso não autorizado, alteração, divulgação ou destruição.' },
        { type: 'ul', items: [
          'Criptografia TLS 1.3 em todas as transmissões',
          'Dados em repouso criptografados com AES-256',
          'Autenticação de dois fatores disponível para todas as contas',
          'Backups automáticos diários com retenção de 30 dias',
          'Monitoramento contínuo de intrusão e anomalias',
          'Programa de divulgação responsável de vulnerabilidades',
        ]},
        { type: 'p', text: 'Em caso de incidente de segurança, notificaremos os titulares afetados e a ANPD dentro dos prazos legais.' },
      ],
    },
    {
      title: 'Retenção de Dados',
      content: [
        { type: 'p', text: 'Mantemos seus dados pelo tempo necessário para prestar o Serviço e cumprir obrigações legais:' },
        { type: 'ul', items: [
          'Dados de conta ativa: pelo período de vigência do contrato',
          'Após cancelamento: 30 dias para exportação, depois anonimização',
          'Dados fiscais e de faturamento: 5 anos (obrigação legal)',
          'Logs de acesso e segurança: 6 meses',
          'Backups: até 90 dias após exclusão',
        ]},
      ],
    },
    {
      title: 'Transferências Internacionais',
      content: [
        { type: 'p', text: 'Alguns de nossos subprocessadores operam fora do Brasil. Nestes casos, adotamos salvaguardas adequadas conforme o Art. 33 da LGPD, incluindo cláusulas contratuais padrão e certificação de adequação.' },
        { type: 'p', text: 'Países de destino principais: Estados Unidos (AWS, OpenAI, Stripe) e Irlanda (Google Cloud). Todos com nível de proteção equivalente ao exigido pela LGPD.' },
      ],
    },
    {
      title: 'Encarregado (DPO)',
      content: [
        { type: 'p', text: 'Nossa Encarregada de Proteção de Dados (DPO) é responsável por supervisionar o cumprimento da LGPD e atender solicitações dos titulares.' },
        { type: 'ul', items: [
          'Nome: Dra. Camila Rocha',
          'E-mail: dpo@ezzacrm.com.br',
          'Horário: segunda a sexta, 9h às 17h (horário de Brasília)',
          'Prazo de resposta: até 15 dias úteis',
        ]},
      ],
    },
    {
      title: 'Alterações nesta Política',
      content: [
        { type: 'p', text: 'Podemos atualizar esta Política de Privacidade periodicamente. Notificaremos sobre alterações significativas por e-mail e/ou com aviso destacado na plataforma com pelo menos 15 dias de antecedência.' },
        { type: 'p', text: 'Recomendamos revisar esta Política periodicamente. O uso continuado do Serviço após as alterações constitui aceitação da nova Política.' },
      ],
    },
  ];

  return (
    <LegalScreen
      onBack={onBack}
      title="Política de Privacidade"
      eyebrow="PROTEÇÃO DE DADOS · LGPD"
      lastUpdated="15 de maio de 2026"
      sections={sections}
    />
  );
}

// ─── LegalStyles ─────────────────────────────────────────────────
function LegalStyles() {
  return (
    <style>{`
      .lg-root {
        position: fixed;
        top: 0; left: 0; right: 0; bottom: 0;
        display: grid;
        grid-template-columns: 300px 1fr;
        font-family: var(--font-ui);
        background: oklch(0.99 0.005 250);
        overflow: hidden;
      }

      /* ── sidebar ── */
      .lg-sidebar {
        display: flex; flex-direction: column;
        background: oklch(0.12 0.008 255);
        color: white;
        overflow-y: auto;
        padding: 0;
      }
      .lg-sidebar-top {
        padding: 32px 28px 24px;
        border-bottom: 0.5px solid oklch(1 0 0 / 0.08);
      }
      .lg-back {
        color: oklch(0.70 0.012 255) !important;
        margin-bottom: 28px !important;
        border-color: oklch(1 0 0 / 0.12) !important;
        background: oklch(1 0 0 / 0.06) !important;
      }
      .lg-back:hover { color: white !important; }

      .lg-brand {
        display: flex; align-items: center; gap: 10px;
        font-size: 16px; font-weight: 700;
        color: white;
        margin-bottom: 28px;
      }
      .lg-brand img { width: 28px; height: 28px; filter: brightness(10); }
      .lg-brand em { font-family: var(--font-display); font-style: italic; font-weight: 400; }

      .lg-eyebrow {
        font-size: 9.5px; font-weight: 700;
        letter-spacing: 0.14em;
        color: oklch(0.62 0.012 255);
        margin-bottom: 8px;
        text-transform: uppercase;
      }
      .lg-sidebar-title {
        font-family: var(--font-display);
        font-style: italic;
        font-size: 26px; line-height: 1.1;
        font-weight: 400;
        color: white;
        margin: 0 0 12px;
        letter-spacing: -0.015em;
      }
      .lg-updated {
        font-size: 11px; color: oklch(0.55 0.012 255);
        font-family: var(--font-mono);
      }

      /* table of contents */
      .lg-toc {
        flex: 1;
        padding: 16px 0;
        display: flex; flex-direction: column;
      }
      .lg-toc-item {
        display: flex; align-items: baseline; gap: 12px;
        padding: 10px 28px;
        background: none; border: none;
        color: oklch(0.62 0.012 255);
        font-family: var(--font-ui); font-size: 12.5px; font-weight: 500;
        text-align: left; cursor: default;
        transition: background .15s, color .15s;
        border-left: 2px solid transparent;
      }
      .lg-toc-item:hover { background: oklch(1 0 0 / 0.05); color: oklch(0.85 0.012 255); }
      .lg-toc-active {
        color: white !important;
        border-left-color: oklch(0.65 0.14 250) !important;
        background: oklch(1 0 0 / 0.07) !important;
        font-weight: 600;
      }
      .lg-toc-n {
        font-family: var(--font-mono);
        font-size: 10px;
        color: oklch(0.42 0.012 255);
        flex-shrink: 0;
        min-width: 20px;
      }
      .lg-toc-active .lg-toc-n { color: oklch(0.65 0.14 250); }

      .lg-sidebar-foot {
        padding: 20px 28px;
        border-top: 0.5px solid oklch(1 0 0 / 0.08);
        font-size: 12px; color: oklch(0.50 0.012 255);
      }

      /* ── content ── */
      .lg-content {
        overflow-y: auto;
        background: white;
      }
      .lg-content-inner {
        max-width: 720px;
        margin: 0 auto;
        padding: 64px 64px 120px;
      }

      .lg-hero {
        margin-bottom: 64px;
        padding-bottom: 40px;
        border-bottom: 0.5px solid oklch(0.93 0.012 255);
      }
      .lg-hero-eyebrow {
        font-size: 10px; font-weight: 700;
        letter-spacing: 0.14em;
        color: var(--ink-muted);
        margin-bottom: 14px;
      }
      .lg-hero-title {
        font-family: var(--font-display);
        font-size: 56px; line-height: 0.98;
        letter-spacing: -0.025em; font-weight: 400;
        color: var(--ink);
        margin: 0 0 20px;
      }
      .lg-hero-sub {
        font-size: 13.5px; color: var(--ink-muted);
        font-family: var(--font-mono);
        margin: 0;
      }
      .lg-hero-sub strong { color: var(--ink-soft); }

      /* sections */
      .lg-section {
        display: grid;
        grid-template-columns: 44px 1fr;
        gap: 0 24px;
        padding: 40px 0;
        border-bottom: 0.5px solid oklch(0.95 0.008 255);
        scroll-margin-top: 32px;
      }
      .lg-section:last-of-type { border-bottom: none; }
      .lg-section-n {
        font-family: var(--font-mono);
        font-size: 11px; font-weight: 700;
        color: oklch(0.75 0.012 255);
        padding-top: 6px;
      }
      .lg-section-title {
        font-family: var(--font-display);
        font-style: italic;
        font-size: 26px; line-height: 1.1;
        font-weight: 400; letter-spacing: -0.015em;
        color: var(--ink);
        margin: 0 0 18px;
      }
      .lg-p {
        font-size: 14.5px;
        color: var(--ink-soft);
        line-height: 1.7;
        margin: 0 0 14px;
        letter-spacing: -0.003em;
      }
      .lg-h3 {
        font-size: 12px; font-weight: 700;
        text-transform: uppercase; letter-spacing: 0.08em;
        color: var(--ink-muted);
        margin: 20px 0 10px;
      }
      .lg-ul {
        padding: 0; margin: 0 0 14px;
        list-style: none;
        display: flex; flex-direction: column; gap: 8px;
      }
      .lg-ul li {
        display: flex; align-items: flex-start; gap: 10px;
        font-size: 14px; color: var(--ink-soft);
        line-height: 1.55; letter-spacing: -0.003em;
      }
      .lg-ul li::before {
        content: '–';
        color: oklch(0.70 0.012 255);
        flex-shrink: 0;
        font-weight: 600;
        margin-top: 1px;
      }

      .lg-foot-block {
        margin-top: 48px;
        padding: 32px;
        background: oklch(0.97 0.01 250);
        border-radius: 20px;
        border: 0.5px solid oklch(0.92 0.012 255);
      }
      .lg-foot-block p {
        font-size: 13.5px; color: var(--ink-muted);
        line-height: 1.6; margin: 0;
      }

      @media (max-width: 900px) {
        .lg-root { grid-template-columns: 1fr; }
        .lg-sidebar { display: none; }
        .lg-content-inner { padding: 32px 24px 80px; }
        .lg-hero-title { font-size: 36px; }
        .lg-section { grid-template-columns: 1fr; gap: 0; }
        .lg-section-n { display: none; }
      }
    `}</style>
  );
}

// Exportar globalmente
Object.assign(window, {
  ForgotPasswordScreen,
  SignupScreen,
  TwoFAScreen,
  WorkspaceScreen,
  TermosScreen,
  PrivacidadeScreen,
});