// Área do Sócio — Sub-páginas (dados, mensalidades, agendar, etc)

function PageDados({ socio }) {
  const [form, setForm] = React.useState(socio);
  const [salvando, setSalvando] = React.useState(false);
  const [feedback, setFeedback] = React.useState(null);
  React.useEffect(() => setForm(socio), [socio]);
  const update = (k) => (e) => setForm({ ...form, [k]: e.target.value });
  const salvar = async () => {
    setFeedback(null);
    if (window.IKIGAI_API_ENABLED) {
      setSalvando(true);
      try { await IkigaiAPI.atualizar(form); setFeedback({ ok: true, msg: "Dados atualizados." }); }
      catch (e) { setFeedback({ ok: false, msg: "Falha ao salvar." }); }
      finally { setSalvando(false); }
    } else {
      setFeedback({ ok: true, msg: "Dados atualizados (modo demo)." });
    }
  };
  return (
    <>
      <h1 className="as-page-title">Dados pessoais</h1>
      <p className="as-page-sub">Mantenha seus dados sempre atualizados.</p>
      <div className="as-panel" style={{ maxWidth: 760 }}>
        <div className="as-form-grid">
          <div className="as-field full"><label>Nome completo</label><input value={form.nome || ""} onChange={update("nome")} /></div>
          <div className="as-field"><label>Data de nascimento</label><input value={form.nascimento || ""} onChange={update("nascimento")} /></div>
          <div className="as-field"><label>CPF</label><input value={form.cpf || ""} onChange={update("cpf")} /></div>
          <div className="as-field"><label>E-mail</label><input value={form.email || ""} onChange={update("email")} /></div>
          <div className="as-field"><label>Telefone</label><input value={form.tel || ""} onChange={update("tel")} /></div>
          <div className="as-field full"><label>Cidade</label><input value={form.cidade || ""} onChange={update("cidade")} /></div>
          <div className="as-field full"><label>Contato de emergência</label><input value={form.emergencia || ""} onChange={update("emergencia")} placeholder="Nome e telefone" /></div>
        </div>
        {feedback && <div style={{ marginTop: 12, padding: 10, borderRadius: 8, fontSize: 13, background: feedback.ok ? "rgba(45,160,106,0.12)" : "rgba(198,59,59,0.10)", color: feedback.ok ? "#1f7a4d" : "#a02e2e" }}>{feedback.msg}</div>}
        <div className="as-form-actions">
          <button className="k-btn k-btn-light" onClick={() => setForm(socio)}>Cancelar</button>
          <button className="k-btn k-btn-primary" disabled={salvando} onClick={salvar}>{salvando ? "Salvando..." : "Salvar alterações"}</button>
        </div>
      </div>
    </>
  );
}

function PageQuestionario() {
  const [respostas, setRespostas] = React.useState(Array(PARQ.length).fill(null));
  const todasRespondidas = respostas.every((r) => r !== null);
  return (
    <>
      <h1 className="as-page-title">Questionário de prontidão física</h1>
      <p className="as-page-sub">PAR-Q simplificado · Responda todas as 7 perguntas.</p>
      <div className="as-panel" style={{ maxWidth: 760 }}>
        {PARQ.map((q, i) => (
          <div key={i} className="as-q-row">
            <div style={{ width: 24, fontWeight: 600, color: "var(--k-ink-3)" }}>{i + 1}</div>
            <p>{q}</p>
            <div className="as-q-toggle">
              <button className={respostas[i] === "sim" ? "is-on" : ""} onClick={() => setRespostas((r) => { const c = [...r]; c[i] = "sim"; return c; })}>Sim</button>
              <button className={respostas[i] === "nao" ? "is-on" : ""} onClick={() => setRespostas((r) => { const c = [...r]; c[i] = "nao"; return c; })}>Não</button>
            </div>
          </div>
        ))}
        <div className="as-form-actions">
          <button className="k-btn k-btn-primary" disabled={!todasRespondidas} style={{ opacity: todasRespondidas ? 1 : 0.5 }}>
            Enviar questionário
          </button>
        </div>
      </div>
    </>
  );
}

function PageMensalidades({ socio }) {
  const status = socio.mensalidade?.status;
  const fallback = (() => {
    const lista = [...MENSALIDADES_BASE];
    if (status === "atrasada") lista[0] = { ...lista[0], mes: socio.mensalidade.mes, status: "atrasada" };
    return lista;
  })();
  const { data: lista, loading } = useApiData(IkigaiAPI.mensalidades, fallback);
  return (
    <>
      <h1 className="as-page-title">Minhas mensalidades</h1>
      <p className="as-page-sub">Histórico de pagamentos dos últimos 12 meses.</p>
      <div className="as-panel" style={{ padding: 0, overflow: "hidden" }}>
        <table className="as-table">
          <thead>
            <tr>
              <th>Mês de referência</th>
              <th>Vencimento</th>
              <th>Valor</th>
              <th>Status</th>
              <th></th>
            </tr>
          </thead>
          <tbody>
            {lista.map((m, i) => (
              <tr key={i}>
                <td style={{ fontWeight: 500 }}>{m.mes}</td>
                <td style={{ color: "var(--k-ink-3)" }}>{m.venc}</td>
                <td>R$ {m.valor},00</td>
                <td>
                  {m.status === "paga" && <span className="as-pill as-pill--paid">Paga</span>}
                  {m.status === "em-dia" && <span className="as-pill as-pill--paid">Em dia</span>}
                  {m.status === "atrasada" && <span className="as-pill as-pill--due">Atrasada</span>}
                  {m.status === "aberta" && <span className="as-pill as-pill--open">Em aberto</span>}
                </td>
                <td><a className="as-link-mini" href="#">{m.status === "atrasada" ? "Pagar agora ›" : "2ª via ›"}</a></td>
              </tr>
            ))}
          </tbody>
        </table>
      </div>
    </>
  );
}

function PageAgendar({ openModal }) {
  const { data: slots, loading } = useApiData(IkigaiAPI.aulasDisponiveis, SLOTS);
  return (
    <>
      <h1 className="as-page-title">Agendar aula</h1>
      <p className="as-page-sub">Próximas aulas disponíveis. Toque numa para confirmar.</p>
      <div className="as-panel">
        {loading ? <div style={{ padding: 30, textAlign: "center", color: "var(--k-ink-3)" }}>Carregando...</div> : (
        <div className="as-slot-grid" style={{ gridTemplateColumns: "repeat(4, 1fr)" }}>
          {(slots || []).map((s, i) => (
            <div key={i} className={`as-slot ${s.vagas === 0 ? "is-off" : ""}`} onClick={() => s.vagas > 0 && openModal("agendar", s)}>
              <div className="d">{s.dia} · {s.data}</div>
              <div className="h">{s.titulo} · {s.hora}</div>
              <div className="l">{s.vagas === 0 ? "lotada" : `${s.vagas} vagas`}</div>
            </div>
          ))}
        </div>)}
      </div>
    </>
  );
}

function PageHistorico() {
  const { data: lista, loading } = useApiData(IkigaiAPI.historico, HISTORICO);
  return (
    <>
      <h1 className="as-page-title">Histórico de aulas</h1>
      <p className="as-page-sub">Suas últimas presenças e faltas.</p>
      <div className="as-panel" style={{ padding: 0, overflow: "hidden" }}>
        <table className="as-table">
          <thead>
            <tr>
              <th>Data</th><th>Hora</th><th>Aula</th><th>Instrutor</th><th>Presença</th>
            </tr>
          </thead>
          <tbody>
            {(lista || []).map((h, i) => (
              <tr key={i}>
                <td>{h.data}</td>
                <td style={{ color: "var(--k-ink-3)" }}>{h.hora}</td>
                <td style={{ fontWeight: 500 }}>{h.aula}</td>
                <td style={{ color: "var(--k-ink-3)" }}>{h.instrutor}</td>
                <td>
                  {h.presenca === "Presente"
                    ? <span className="as-pill as-pill--paid">Presente</span>
                    : <span className="as-pill as-pill--due">Faltou</span>}
                </td>
              </tr>
            ))}
          </tbody>
        </table>
      </div>
    </>
  );
}

function PageCredencial({ socio }) {
  return (
    <>
      <h1 className="as-page-title">Credencial</h1>
      <p className="as-page-sub">Sua carteirinha digital de sócio.</p>
      <div style={{ display: "flex", gap: 24, flexWrap: "wrap", alignItems: "flex-start" }}>
        <div className="as-credencial">
          <div className="as-credencial-h">
            <span style={{ fontFamily: "var(--k-font-jp)", fontSize: 16 }}>空手</span>
            <span>IKIGAI · SKIBRASIL · MEMBRO ATIVO</span>
          </div>
          <div className="as-credencial-name">{socio.nome}</div>
          <div className="as-credencial-code">Cód. Sócio · {socio.id}</div>
          <div className="as-credencial-belt">{socio.faixa.nome}</div>
          <div className="as-credencial-belt-sub">desde {socio.faixa.desde}</div>
          <div className="as-credencial-foot">
            <div>
              <div style={{ opacity: 0.6 }}>Sócio desde</div>
              <div style={{ color: "#fff", marginTop: 2 }}>{socio.desde}</div>
            </div>
            <div style={{ textAlign: "right" }}>
              <div style={{ opacity: 0.6 }}>Validade</div>
              <div style={{ color: "#fff", marginTop: 2 }}>12/2026</div>
            </div>
          </div>
        </div>
        <div className="as-panel" style={{ flex: 1, minWidth: 280 }}>
          <div className="as-panel-h">Como apresentar</div>
          <p style={{ fontSize: 14, color: "var(--k-ink-2)", lineHeight: 1.5 }}>
            Mostre esta carteirinha digital na recepção do dojo para registrar entrada,
            participar de eventos e acessar os benefícios de sócio.
          </p>
          <div className="as-form-actions" style={{ justifyContent: "flex-start", marginTop: 14 }}>
            <button className="k-btn k-btn-dark">Salvar imagem</button>
            <button className="k-btn k-btn-light">Compartilhar</button>
          </div>
        </div>
      </div>
    </>
  );
}

function PageMaterial() {
  const { data: mats, loading } = useApiData(IkigaiAPI.materiais, MATERIAIS);
  return (
    <>
      <h1 className="as-page-title">Material didático</h1>
      <p className="as-page-sub">Apostilas, vídeos e referências da nossa escola.</p>
      <div className="as-panel">
        <div style={{ display: "flex", flexDirection: "column", gap: 10 }}>
          {(mats || []).map((m, i) => (
            <div key={i} className="as-file-row">
              <div className="as-file-icon">{m.icone === "video" ? ICON.video : ICON.doc}</div>
              <div className="as-file-meta">
                <div className="t">{m.titulo}</div>
                <div className="s">{m.tipo} · {m.tamanho}</div>
              </div>
              <button className="k-btn k-btn-light" style={{ padding: "8px 16px", fontSize: 14 }}>{ICON.download} Baixar</button>
            </div>
          ))}
        </div>
      </div>
    </>
  );
}

function PageGraduacoes({ socio }) {
  return (
    <>
      <h1 className="as-page-title">Graduações e faixas</h1>
      <p className="as-page-sub">Sistema de progressão da nossa escola.</p>
      <div className="as-two-col">
        <div className="as-panel">
          <div className="as-panel-h">Sua trajetória</div>
          <BeltStrip current={socio.faixa.nome} />
        </div>
        <div className="as-panel">
          <div className="as-panel-h">Sobre as faixas</div>
          <p style={{ fontSize: 14, color: "var(--k-ink-2)", lineHeight: 1.55 }}>
            A progressão segue do Branco (9º Kyu) ao Preta (1º ao 10º Dan).
            Cada faixa exige tempo mínimo de prática, frequência e exame técnico
            avaliado pela banca de senseis.
          </p>
          <p style={{ fontSize: 14, color: "var(--k-ink-2)", lineHeight: 1.55, marginTop: 12 }}>
            Sua próxima graduação: <strong style={{ color: "var(--k-ink)" }}>{socio.proximoExame.titulo}</strong>,
            em <strong style={{ color: "var(--k-ink)" }}>{socio.proximoExame.data}</strong>.
          </p>
        </div>
      </div>
    </>
  );
}

function PageEventos() {
  const cor = { exame: "#5e3aa1", torneio: "#c63b3b", estagio: "#0071e3", social: "#2da06a" };
  return (
    <>
      <h1 className="as-page-title">Eventos e exames</h1>
      <p className="as-page-sub">Calendário oficial de 2026.</p>
      <div className="as-panel">
        {EVENTOS.map((e, i) => (
          <div key={i} className="as-event">
            <div className="as-event-date" style={{ background: cor[e.tipo] }}>
              <div className="d">{e.dia}</div>
              <div className="m">{e.mes}</div>
            </div>
            <div>
              <div style={{ fontSize: 15, fontWeight: 500, letterSpacing: "-0.01em" }}>{e.titulo}</div>
              <div style={{ fontSize: 12, color: "var(--k-ink-3)", marginTop: 3 }}>{e.local} · {e.ano}</div>
            </div>
            <a className="k-link" style={{ fontSize: 14 }}>Inscrever</a>
          </div>
        ))}
      </div>
    </>
  );
}

function PageValores() {
  return (
    <>
      <h1 className="as-page-title">Tabela de valores</h1>
      <p className="as-page-sub">Planos disponíveis para sócios.</p>
      <div className="as-status-grid" style={{ gridTemplateColumns: "repeat(2, 1fr)" }}>
        {PLANOS.map((p, i) => (
          <div key={i} className="as-panel" style={{ display: "flex", flexDirection: "column", gap: 10 }}>
            <div style={{ fontSize: 12, color: "var(--k-ink-3)", textTransform: "uppercase", letterSpacing: "0.04em" }}>{p.nome}</div>
            <div style={{ fontFamily: "var(--k-font-display)", fontSize: 32, fontWeight: 700, letterSpacing: "-0.02em" }}>
              {p.valor}<span style={{ fontSize: 14, fontWeight: 400, color: "var(--k-ink-3)" }}>{p.periodo}</span>
            </div>
            <p style={{ fontSize: 14, color: "var(--k-ink-2)", lineHeight: 1.5 }}>{p.desc}</p>
            <button className="k-btn k-btn-dark" style={{ alignSelf: "flex-start" }}>Mudar para este plano</button>
          </div>
        ))}
      </div>
    </>
  );
}

function PageEstatuto() {
  return (
    <>
      <h1 className="as-page-title">Estatuto</h1>
      <p className="as-page-sub">Documento oficial da associação. Última revisão: jan/2026.</p>
      <div className="as-panel" style={{ maxWidth: 760 }}>
        <div className="as-file-row">
          <div className="as-file-icon">{ICON.scroll}</div>
          <div className="as-file-meta">
            <div className="t">Estatuto Ikigai — versão 2026.01</div>
            <div className="s">PDF · 28 páginas · 480 KB</div>
          </div>
          <button className="k-btn k-btn-light" style={{ padding: "8px 16px", fontSize: 14 }}>{ICON.download} Baixar</button>
        </div>
        <div style={{ marginTop: 20, fontSize: 14, color: "var(--k-ink-2)", lineHeight: 1.6 }}>
          <p><strong>Capítulo I — Da denominação e finalidades.</strong> A Ikigai é uma associação sem fins lucrativos dedicada à prática e ensino do Karatê tradicional Shotokan…</p>
          <p style={{ marginTop: 12 }}><strong>Capítulo II — Dos sócios.</strong> São direitos e deveres do sócio frequentar as aulas, pagar a mensalidade em dia, manter conduta condizente com os princípios da arte marcial…</p>
          <p style={{ marginTop: 12, color: "var(--k-ink-3)", fontStyle: "italic" }}>(documento completo no PDF acima)</p>
        </div>
      </div>
    </>
  );
}

function PageConfig({ setRoute }) {
  return (
    <>
      <h1 className="as-page-title">Configurações</h1>
      <p className="as-page-sub">Preferências da sua conta.</p>
      <div className="as-panel" style={{ maxWidth: 600 }}>
        <div className="as-q-row">
          <p>Receber lembretes de aula por e-mail</p>
          <div className="as-q-toggle"><button className="is-on">Sim</button><button>Não</button></div>
        </div>
        <div className="as-q-row">
          <p>Receber notificações de eventos e exames</p>
          <div className="as-q-toggle"><button className="is-on">Sim</button><button>Não</button></div>
        </div>
        <div className="as-q-row">
          <p>Aparecer na lista pública de alunos</p>
          <div className="as-q-toggle"><button>Sim</button><button className="is-on">Não</button></div>
        </div>
        <div className="as-form-actions">
          <button className="k-btn k-btn-light" onClick={() => setRoute && setRoute("alterar-senha")}>Trocar senha</button>
          <button className="k-btn k-btn-primary">Salvar</button>
        </div>
      </div>
    </>
  );
}

function PageSeguranca({ socio, totpAtivo, onAtivar, onDesativar }) {
  return (
    <>
      <h1 className="as-page-title">Segurança da conta</h1>
      <p className="as-page-sub">Proteja seu acesso com autenticação em 2 fatores.</p>
      <div className="as-panel" style={{ maxWidth: 680 }}>
        <div style={{ display: "flex", alignItems: "flex-start", gap: 18 }}>
          <div style={{ width: 56, height: 56, borderRadius: 14, background: totpAtivo ? "rgba(45,160,106,0.12)" : "rgba(230,168,0,0.12)", display: "grid", placeItems: "center", fontSize: 26, flexShrink: 0 }}>
            {totpAtivo ? "🛡️" : "🔓"}
          </div>
          <div style={{ flex: 1 }}>
            <div style={{ display: "flex", alignItems: "center", gap: 10, marginBottom: 6 }}>
              <h3 style={{ margin: 0, fontSize: 17, fontWeight: 600 }}>Autenticação em 2 fatores</h3>
              {totpAtivo
                ? <span className="as-pill as-pill--paid">ativa</span>
                : <span className="as-pill as-pill--open">desativada</span>}
            </div>
            <p style={{ fontSize: 14, color: "var(--k-ink-2)", lineHeight: 1.55, marginBottom: 14 }}>
              {totpAtivo
                ? "Toda vez que você entrar na sua área, vamos pedir um código de 6 dígitos gerado pelo seu app autenticador. Sua conta está protegida."
                : "Use um app como Google Authenticator, Authy ou Microsoft Authenticator para gerar códigos de 6 dígitos. Sem 2FA, sua conta depende apenas da senha."}
            </p>
            {!totpAtivo ? (
              <button className="k-btn k-btn-primary" onClick={onAtivar}>Ativar 2FA agora</button>
            ) : (
              <button className="k-btn" style={{ background: "#c63b3b", color: "#fff" }} onClick={() => {
                if (!confirm("Tem certeza? Sua conta ficará menos protegida.")) return;
                onDesativar();
              }}>Desativar 2FA</button>
            )}
          </div>
        </div>
        {totpAtivo && (
          <div style={{ borderTop: "1px solid var(--k-line-soft)", marginTop: 18, paddingTop: 14 }}>
            <p style={{ fontSize: 12, color: "var(--k-ink-3)" }}>
              App configurado · Códigos válidos por 30 segundos · Códigos de backup salvos.
            </p>
          </div>
        )}
      </div>

      <div className="as-panel" style={{ maxWidth: 680, marginTop: 16 }}>
        <div style={{ display: "flex", alignItems: "center", justifyContent: "space-between", gap: 18 }}>
          <div>
            <h3 style={{ margin: 0, fontSize: 16, fontWeight: 600, marginBottom: 4 }}>Senha</h3>
            <p style={{ fontSize: 13, color: "var(--k-ink-3)" }}>Altere sua senha periodicamente para mais segurança.</p>
          </div>
          <a href="#area-socio/alterar-senha" className="k-btn k-btn-light">Alterar senha</a>
        </div>
      </div>
    </>
  );
}

function PageAlterarSenha({ setRoute }) {
  const [modo, setModo] = React.useState("alterar"); // alterar | recuperar
  const [atual, setAtual] = React.useState("");
  const [nova, setNova] = React.useState("");
  const [conf, setConf] = React.useState("");
  const [msg, setMsg] = React.useState(null);

  const fortaleza = (() => {
    if (!nova) return { score: 0, label: "—", color: "var(--k-ink-4)" };
    let s = 0;
    if (nova.length >= 8) s++;
    if (/[A-Z]/.test(nova) && /[a-z]/.test(nova)) s++;
    if (/\d/.test(nova)) s++;
    if (/[^A-Za-z0-9]/.test(nova)) s++;
    const labels = ["Muito fraca", "Fraca", "Razoável", "Boa", "Forte"];
    const colors = ["#c63b3b", "#c63b3b", "#e6a800", "#2da06a", "#1f7a4d"];
    return { score: s, label: labels[s], color: colors[s] };
  })();

  const submitAlterar = (e) => {
    e.preventDefault();
    if (nova !== conf) { setMsg({ tipo: "erro", texto: "A nova senha e a confirmação não coincidem." }); return; }
    if (nova.length < 8) { setMsg({ tipo: "erro", texto: "A senha precisa ter pelo menos 8 caracteres." }); return; }
    setMsg({ tipo: "ok", texto: "Senha alterada com sucesso! Use a nova senha no próximo login." });
    setAtual(""); setNova(""); setConf("");
  };

  const submitRecuperar = (e) => {
    e.preventDefault();
    setMsg({ tipo: "ok", texto: "Pronto! Enviamos um link de redefinição para o e-mail cadastrado." });
  };

  return (
    <>
      <h1 className="as-page-title">Senha</h1>
      <p className="as-page-sub">
        {modo === "alterar" ? "Altere sua senha sabendo a senha atual." : "Esqueceu a senha atual? Recupere por e-mail."}
      </p>

      <div style={{ display: "flex", gap: 8, marginBottom: 18 }}>
        <button
          className={`k-btn ${modo === "alterar" ? "k-btn-dark" : "k-btn-light"}`}
          style={{ padding: "8px 18px", fontSize: 14 }}
          onClick={() => { setModo("alterar"); setMsg(null); }}
        >
          Alterar senha
        </button>
        <button
          className={`k-btn ${modo === "recuperar" ? "k-btn-dark" : "k-btn-light"}`}
          style={{ padding: "8px 18px", fontSize: 14 }}
          onClick={() => { setModo("recuperar"); setMsg(null); }}
        >
          Recuperar por e-mail
        </button>
      </div>

      {modo === "alterar" && (
        <div className="as-panel" style={{ maxWidth: 540 }}>
          <form onSubmit={submitAlterar} style={{ display: "flex", flexDirection: "column", gap: 14 }}>
            <div className="as-field">
              <label>Senha atual</label>
              <input type="password" value={atual} onChange={(e) => setAtual(e.target.value)} required placeholder="••••••••" />
            </div>
            <div className="as-field">
              <label>Nova senha</label>
              <input type="password" value={nova} onChange={(e) => setNova(e.target.value)} required placeholder="mínimo 8 caracteres" />
              <div style={{ display: "flex", alignItems: "center", gap: 10, marginTop: 4 }}>
                <div style={{ flex: 1, height: 4, background: "var(--k-line-soft)", borderRadius: 2, overflow: "hidden" }}>
                  <div style={{ width: `${(fortaleza.score / 4) * 100}%`, height: "100%", background: fortaleza.color, transition: "all 0.2s" }} />
                </div>
                <span style={{ fontSize: 11, color: fortaleza.color, fontWeight: 500, minWidth: 80, textAlign: "right" }}>{fortaleza.label}</span>
              </div>
              <div style={{ fontSize: 11, color: "var(--k-ink-3)", marginTop: 4 }}>
                Use 8+ caracteres com maiúsculas, números e símbolos.
              </div>
            </div>
            <div className="as-field">
              <label>Confirmar nova senha</label>
              <input type="password" value={conf} onChange={(e) => setConf(e.target.value)} required placeholder="repita a nova senha" />
            </div>
            {msg && (
              <div style={{
                background: msg.tipo === "ok" ? "rgba(45,160,106,0.12)" : "rgba(198,59,59,0.12)",
                color: msg.tipo === "ok" ? "#1f7a4d" : "#a02e2e",
                padding: 12, borderRadius: 10, fontSize: 13,
              }}>{msg.texto}</div>
            )}
            <div className="as-form-actions">
              <button type="button" className="k-btn k-btn-light" onClick={() => setRoute && setRoute("config")}>Cancelar</button>
              <button type="submit" className="k-btn k-btn-primary">Alterar senha</button>
            </div>
            <p style={{ fontSize: 12, color: "var(--k-ink-3)", marginTop: 4 }}>
              Esqueceu sua senha atual? <a onClick={(e) => { e.preventDefault(); setModo("recuperar"); setMsg(null); }} style={{ color: "var(--k-blue)" }} href="#">Recuperar por e-mail ›</a>
            </p>
          </form>
        </div>
      )}

      {modo === "recuperar" && (
        <div className="as-panel" style={{ maxWidth: 540 }}>
          <form onSubmit={submitRecuperar} style={{ display: "flex", flexDirection: "column", gap: 14 }}>
            <p style={{ fontSize: 14, color: "var(--k-ink-2)", lineHeight: 1.55 }}>
              Vamos enviar um link de redefinição para o e-mail cadastrado na sua conta.
              Você poderá criar uma nova senha sem precisar da atual.
            </p>
            <div className="as-field">
              <label>E-mail cadastrado</label>
              <input type="email" required placeholder="voce@exemplo.com" />
            </div>
            {msg && (
              <div style={{
                background: msg.tipo === "ok" ? "rgba(45,160,106,0.12)" : "rgba(198,59,59,0.12)",
                color: msg.tipo === "ok" ? "#1f7a4d" : "#a02e2e",
                padding: 12, borderRadius: 10, fontSize: 13,
              }}>{msg.texto}</div>
            )}
            <div className="as-form-actions">
              <button type="button" className="k-btn k-btn-light" onClick={() => setRoute && setRoute("config")}>Cancelar</button>
              <button type="submit" className="k-btn k-btn-primary">Enviar link de recuperação</button>
            </div>
          </form>
        </div>
      )}
    </>
  );
}

Object.assign(window, {
  PageDados, PageQuestionario, PageMensalidades, PageAgendar, PageHistorico,
  PageCredencial, PageMaterial, PageGraduacoes, PageEventos, PageValores,
  PageEstatuto, PageConfig, PageAlterarSenha, PageSeguranca,
});