/* global React, ReactDOM, Icon, PageShell, PageHeader, FinalCta, useFormHardening, usePageHardening, SecurityStancePanel */
const { useState: useS_ct } = React;

function ContatoPage() {
  usePageHardening();
  const sec = useFormHardening({ formKey: "contato" });
  const [data, setData] = useS_ct({ nome: "", empresa: "", email: "", tipo: "Avaliação", msg: "" });
  const [status, setStatus] = useS_ct({ kind: "idle", msg: "" });

  const onSubmit = (e) => {
    e.preventDefault();
    const r = sec.validate({
      nome: data.nome, empresa: data.empresa, email: data.email, msg: data.msg,
    });
    if (!r.ok) {
      if (r.silent) {
        // Bot-like behavior — pretend success, drop input
        setStatus({ kind: "sent", msg: "Mensagem enviada — retornaremos em até 1 dia útil." });
        return;
      }
      if (r.reason === "rate") {
        setStatus({ kind: "err", msg: `Aguarde ${r.retryInSec}s antes de tentar novamente.` });
        return;
      }
      if (r.reason === "email-invalid") {
        setStatus({ kind: "err", msg: "Verifique o e-mail corporativo." });
        return;
      }
      setStatus({ kind: "err", msg: "Dados inválidos." });
      return;
    }
    setStatus({ kind: "sent", msg: "Mensagem enviada — retornaremos em até 1 dia útil." });
    setTimeout(() => setStatus({ kind: "idle", msg: "" }), 6000);
  };

  return (
    <PageShell active="contato">
      <PageHeader
        eyebrow="Contato direto"
        title={<>Pronto para proteger seu <em>futuro digital</em>?</>}
        lead="Conte o seu cenário em algumas linhas. Em até 1 dia útil, um especialista responde com um diagnóstico inicial e os próximos passos sugeridos — sem formulário robotizado, sem funil de vendas agressivo."
      />

      <section className="contact-page">
        <div className="container contact-grid">
          <div className="contact-copy">
            <span className="eyebrow">Canais oficiais</span>
            <h2 className="h-section" style={{ marginTop: 16, fontSize: "clamp(28px, 3vw, 40px)" }}>
              Fale conosco<br />
              <span className="muted-em">pelo canal que preferir.</span>
            </h2>

            <ul className="contact-methods">
              <li>
                <span className="cm-tag mono">WHATSAPP 24/7</span>
                <a href="https://wa.me/5561999949060?text=Precisa%20de%20tranquilidade%20na%20internet%3F" target="_blank" rel="noopener noreferrer">
                  <Icon.Wa /> +55 (61) 99994‑9060 <Icon.Arrow />
                </a>
              </li>
              <li>
                <span className="cm-tag mono">E‑MAIL</span>
                <a href="mailto:diretoria@crimesolution.net">
                  <Icon.Mail /> diretoria@crimesolution.net <Icon.Arrow />
                </a>
              </li>
              <li>
                <span className="cm-tag mono">TELEFONE</span>
                <a href="tel:5561999949060">
                  <Icon.Phone /> +55 (61) 99994‑9060 <Icon.Arrow />
                </a>
              </li>
              <li>
                <span className="cm-tag mono">SOC PLANTÃO</span>
                <a href="https://wa.me/5561999949060?text=PLANT%C3%83O%20-%20suspeita%20de%20incidente" target="_blank" rel="noopener noreferrer">
                  <Icon.Bolt /> Acionar emergência <Icon.Arrow />
                </a>
              </li>
            </ul>

            <div className="security-strip">
              <span><Icon.Check /> TLS 1.3 · HSTS</span>
              <span><Icon.Check /> Honeypot · anti-bot · rate limit</span>
              <span><Icon.Check /> Conforme LGPD</span>
            </div>
          </div>

          <form className="contact-form card" onSubmit={onSubmit} autoComplete="on" noValidate>
            <span className="tick tl" /><span className="tick tr" />
            <span className="tick bl" /><span className="tick br" />
            <header className="panel-head">
              <div className="panel-head-left">
                <span className="dot dot-live" />
                <span className="mono panel-title">FORMULÁRIO · TLS</span>
              </div>
              <div className="panel-head-right mono">~1 dia útil</div>
            </header>

            <div className="form-body">
              <input {...sec.honeypotProps} />

              <div className="field">
                <label className="mono">Nome</label>
                <input value={data.nome} maxLength={120}
                  onChange={(e) => setData({ ...data, nome: e.target.value })}
                  placeholder="seu nome" autoComplete="name" />
              </div>
              <div className="field">
                <label className="mono">Empresa</label>
                <input value={data.empresa} maxLength={160}
                  onChange={(e) => setData({ ...data, empresa: e.target.value })}
                  placeholder="organização" autoComplete="organization" />
              </div>
              <div className="field">
                <label className="mono">E‑mail corporativo</label>
                <input type="email" value={data.email} maxLength={254}
                  inputMode="email" spellCheck={false}
                  onChange={(e) => setData({ ...data, email: e.target.value })}
                  placeholder="voce@empresa.com" autoComplete="email" />
              </div>
              <div className="field">
                <label className="mono">Necessidade</label>
                <div className="chips">
                  {["Avaliação", "Cyber Investigator", "Resposta a incidente", "Pentest", "Consultoria", "Treinamento"].map((t) => (
                    <button
                      key={t} type="button"
                      className={"chip " + (data.tipo === t ? "is-on" : "")}
                      onClick={() => setData({ ...data, tipo: t })}
                    >
                      {t}
                    </button>
                  ))}
                </div>
              </div>
              <div className="field">
                <label className="mono">Como podemos ajudar?</label>
                <textarea value={data.msg} maxLength={4000}
                  onChange={(e) => setData({ ...data, msg: e.target.value })}
                  rows={3} placeholder="cenário, urgência, contexto…" />
              </div>

              <button type="submit" className="btn btn-primary form-submit">
                {status.kind === "sent"
                  ? <><Icon.Check /> Mensagem enviada</>
                  : <>Enviar mensagem <Icon.Arrow className="arr" /></>}
              </button>
              {status.kind === "err" && (
                <p className="mono" style={{ color: "var(--warning)", fontSize: 12, margin: "4px 0 0" }}>
                  {status.msg}
                </p>
              )}
              <p className="mono form-foot muted">
                ao enviar, você concorda com nossa <a href="privacidade.html" style={{ color: "var(--fg-1)", textDecoration: "underline" }}>política de privacidade</a>. dados criptografados em trânsito e em repouso. envios protegidos por honeypot, anti-bot e rate limit.
              </p>
            </div>
          </form>
        </div>
      </section>
    </PageShell>
  );
}

ReactDOM.createRoot(document.getElementById("root")).render(<ContatoPage />);