// Contato page
function ContatoPage() {
  const [sent, setSent] = React.useState(false);
  const [form, setForm] = React.useState({ nome: "", empresa: "", telefone: "", email: "", assunto: "Suporte Técnico", mensagem: "" });
  const onChange = (k) => (e) => setForm({ ...form, [k]: e.target.value });
  const submit = (e) => {
    e.preventDefault();
    setSent(true);
    setTimeout(() => setSent(false), 5000);
    setForm({ nome: "", empresa: "", telefone: "", email: "", assunto: "Suporte Técnico", mensagem: "" });
  };

  return (
    <>
      <section className="hero-page">
        <div className="grid-bg" />
        <div className="wrap">
          <div className="crumbs"><a href="#/home">Home</a> / Contato</div>
          <h1 className="h-display">Vamos resolver isso juntos.</h1>
          <p className="lede">Atendimento rápido por WhatsApp ou por formulário. Responda o que der e a gente segue a conversa direto com você.</p>
        </div>
      </section>

      <section className="section">
        <div className="wrap">
          <div className="contact-grid">
            <div className="contact-info">
              <div className="wa-card">
                <span className="eyebrow">Jeito mais rápido</span>
                <div className="num">(68) 98405-4309</div>
                <p>Chama no WhatsApp. Normalmente respondemos em minutos durante o expediente e o atendimento já começa por lá.</p>
                <a className="btn btn-wa" href={WA_LINK} target="_blank" rel="noreferrer">
                  <WhatsAppIcon /> Abrir conversa no WhatsApp
                </a>
              </div>
              <div className="info-row">
                <div className="info-card">
                  <div className="lbl">Localização</div>
                  <div className="val">Rio Branco — AC<br/>Bairro Aeroporto Velho</div>
                </div>
                <div className="info-card">
                  <div className="lbl">Horário</div>
                  <div className="val">Seg a Sex, 08h–18h<br/>Sáb, 08h–12h</div>
                </div>
                <div className="info-card">
                  <div className="lbl">CNPJ</div>
                  <div className="val mono" style={{ fontSize: 14 }}>32.088.571/0001-16</div>
                </div>
                <div className="info-card">
                  <div className="lbl">Responsável</div>
                  <div className="val">Thiago Gadelha<br/><span className="mono" style={{ fontSize: 12, color: "#8E8C82" }}>Fundador · Técnico</span></div>
                </div>
              </div>
            </div>

            <form className="form-card" onSubmit={submit}>
              <h3>Prefere escrever?</h3>
              <p className="sub">Conta o que está acontecendo. Retornamos por WhatsApp ou e-mail.</p>
              {sent && <div className="sent show">✓ Mensagem enviada. Entraremos em contato em breve.</div>}

              <div className="field-row">
                <div className="field">
                  <label>Nome</label>
                  <input required value={form.nome} onChange={onChange("nome")} placeholder="Seu nome completo" />
                </div>
                <div className="field">
                  <label>Empresa</label>
                  <input value={form.empresa} onChange={onChange("empresa")} placeholder="Razão social ou nome fantasia" />
                </div>
              </div>

              <div className="field-row">
                <div className="field">
                  <label>Telefone / WhatsApp</label>
                  <input required value={form.telefone} onChange={onChange("telefone")} placeholder="(68) 9 ____-____" />
                </div>
                <div className="field">
                  <label>E-mail</label>
                  <input type="email" value={form.email} onChange={onChange("email")} placeholder="voce@empresa.com.br" />
                </div>
              </div>

              <div className="field">
                <label>Assunto</label>
                <select value={form.assunto} onChange={onChange("assunto")}>
                  <option>Suporte Técnico</option>
                  <option>Implantação de ERP</option>
                  <option>Suporte em ERP</option>
                  <option>Automação Comercial</option>
                  <option>Emissão Fiscal / NF-e</option>
                  <option>Outro assunto</option>
                </select>
              </div>

              <div className="field">
                <label>Mensagem</label>
                <textarea required value={form.mensagem} onChange={onChange("mensagem")} placeholder="Descreva o problema ou o que precisa. Pode ser curto." />
              </div>

              <button type="submit" className="btn btn-primary">Enviar mensagem →</button>
            </form>
          </div>
        </div>
      </section>
    </>
  );
}

Object.assign(window, { ContatoPage });