function Contact() {
  const [form, setForm] = useState({ name: "", company: "", scope: [], message: "" });
  const [errs, setErrs] = useState({});
  const [sent, setSent] = useState(false);
  const scopes = ["Análise de dados", "Desenvolvimento de sistemas", "Automação de tarefas", "Ainda não sei"];

  function update(k, v) { setForm(f => ({...f, [k]: v})); setErrs(e => ({...e, [k]: null})); }
  function toggleScope(s) {
    setForm(f => ({...f, scope: f.scope.includes(s) ? f.scope.filter(x => x!==s) : [...f.scope, s]}));
  }
  function submit(e) {
    e.preventDefault();
    const er = {};
    if (!form.name.trim()) er.name = "Informe seu nome";
    if (form.scope.length === 0) er.scope = "Selecione pelo menos uma frente";
    if (form.message.trim().length < 12) er.message = "Nos conte um pouco mais (12+ caracteres)";
    if (Object.keys(er).length) { setErrs(er); return; }
    const companyPart = form.company.trim() ? `, da empresa ${form.company.trim()}` : "";
    const scopePart = form.scope.join(", ");
    const msg = `Olá! Me chamo ${form.name.trim()}${companyPart}.\n\nTenho interesse em: ${scopePart}.\n\n${form.message.trim()}`;
    window.open(`https://wa.me/5579988595156?text=${encodeURIComponent(msg)}`, "_blank", "noopener,noreferrer");
    setSent(true);
  }

  if (sent) return (
    <section className="band" id="contact">
      <div className="shell" style={{maxWidth: 680, textAlign:'center'}}>
        <img src="assets/img/logo-icon.png" width="72" height="72" alt="Nexalyze" style={{filter:'drop-shadow(0 0 18px rgba(43,232,118,0.35))'}} />
        <h2 style={{marginTop: 24}}>Abrindo WhatsApp, <span className="text-grad">{form.name.split(' ')[0]}</span>.</h2>
        <p style={{marginTop: 14, fontSize: 17}}>Sua mensagem já foi pré-preenchida no WhatsApp. Caso a janela não tenha aberto, <a href="https://wa.me/5579988595156" target="_blank" rel="noopener noreferrer" style={{color:'var(--accent)'}}>clique aqui</a>.</p>
        <div className="mono" style={{marginTop: 32, fontSize: 12, color: 'var(--ink-3)', letterSpacing: '0.12em'}}>[ protocolo · NX-{Date.now().toString(36).toUpperCase()} ]</div>
      </div>
    </section>
  );

  return (
    <section className="band" id="contact">
      <div className="shell">
        <div className="sec-head">
          <div>
            <Eyebrow tone="teal">começar</Eyebrow>
            <h2 style={{marginTop: 14}}>Conte o problema. <span className="text-grad">A gente estima o caminho</span>.</h2>
          </div>
          <p>Diagnóstico inicial é gratuito: 45 minutos em call, um mapa do seu fluxo atual e três caminhos priorizados por ROI. Sem amarras.</p>
        </div>

        <div className="contact-grid" style={{marginTop: 56}}>
          <form onSubmit={submit} noValidate>
            <div className={"form-field " + (errs.name ? "error" : "")}>
              <label>Nome</label>
              <input value={form.name} onChange={e => update("name", e.target.value)} placeholder="Como te chamamos?" />
              {errs.name && <span className="err">{errs.name}</span>}
            </div>
            <div className="form-field">
              <label>Empresa (opcional)</label>
              <input value={form.company} onChange={e => update("company", e.target.value)} placeholder="Nome da empresa + setor" />
            </div>
            <div className={"form-field " + (errs.scope ? "error" : "")}>
              <label>Frentes de interesse</label>
              <div className="chip-row">
                {scopes.map(s => (
                  <button type="button" key={s} className={"chip " + (form.scope.includes(s) ? "active" : "")} onClick={() => toggleScope(s)}>{s}</button>
                ))}
              </div>
              {errs.scope && <span className="err" style={{marginTop:6}}>{errs.scope}</span>}
            </div>
            <div className={"form-field " + (errs.message ? "error" : "")}>
              <label>O que está acontecendo?</label>
              <textarea rows={4} value={form.message} onChange={e => update("message", e.target.value)} placeholder="Qual processo, relatório ou decisão está travado hoje?" />
              {errs.message && <span className="err">{errs.message}</span>}
            </div>
            <button className="btn btn-primary" style={{marginTop: 8, width: '100%', justifyContent: 'center'}} type="submit">Enviar pelo WhatsApp →</button>
            <div className="mono" style={{fontSize: 11, color: 'var(--ink-3)', marginTop: 14, letterSpacing: '0.08em'}}>[ você será redirecionado para o WhatsApp ]</div>
          </form>

          <aside>
            <div className="console" style={{padding: 24}}>
              <div className="console-head">
                <span><span className="dot" />escritório</span>
                <span>disponível</span>
              </div>
              <div style={{padding: 8}}>
                <div className="mono" style={{fontSize: 11, color: 'var(--ink-3)', letterSpacing: '0.1em', textTransform:'uppercase'}}>Email</div>
                <a href="mailto:taylannoronha@hotmail.com" className="display" style={{fontSize: 20, marginTop: 4, marginBottom: 20, display:'block', color:'var(--ink)', textDecoration:'none'}}>taylannoronha@hotmail.com</a>
                <div className="mono" style={{fontSize: 11, color: 'var(--ink-3)', letterSpacing: '0.1em', textTransform:'uppercase'}}>Telefone / WhatsApp</div>
                <a href="https://wa.me/5579988595156" target="_blank" rel="noreferrer" className="display" style={{fontSize: 20, marginTop: 4, marginBottom: 20, display:'block', color:'var(--ink)', textDecoration:'none'}}>(79) 98859-5156</a>
                <div className="mono" style={{fontSize: 11, color: 'var(--ink-3)', letterSpacing: '0.1em', textTransform:'uppercase'}}>Horário</div>
                <div className="display" style={{fontSize: 20, marginTop: 4, marginBottom: 20}}>seg–sex · 09h–18h (BRT)</div>
                <div className="mono" style={{fontSize: 11, color: 'var(--ink-3)', letterSpacing: '0.1em', textTransform:'uppercase'}}>Resposta média</div>
                <div className="display text-gold" style={{fontSize: 20, marginTop: 4}}>&lt; 6 horas úteis</div>
              </div>
            </div>
            <div style={{marginTop: 16, padding: 22, border: '1px solid var(--line-2)', borderRadius: 10, background: 'rgba(14,36,51,0.3)'}}>
              <div className="eyebrow gold">garantia</div>
              <p style={{marginTop: 10, color: 'var(--ink)', fontSize: 14}}>Se na primeira sprint você não enxergar clareza sobre o próximo passo, devolvemos integral. Nunca precisamos acionar - mas está escrito.</p>
            </div>
          </aside>
        </div>
      </div>
    </section>
  );
}

function Footer() {
  return (
    <footer>
      <div className="shell">
        <div className="foot-grid">
          <div>
            <a href="#top" className="logo" style={{marginBottom: 14}}>
              <img src="assets/img/logo-icon.png" className="logo-mark" width="36" height="36" alt="Nexalyze" />
              <span className="logo-text"><span className="n">Nex</span><span className="tail">alyze</span></span>
            </a>
            <p style={{fontSize: 13, maxWidth: 300, marginTop: 10}}>Analise. Decida. Vença. Dados, sistemas e automação para quem decide com fato - não com sensação.</p>
          </div>
          <div>
            <h4>Serviços</h4>
            <a href="#services">Análise de dados</a>
            <a href="#services">Desenvolvimento</a>
            <a href="#services">Automação</a>
          </div>
          <div>
            <h4>Empresa</h4>
            <a href="#method">Método</a>
            <a href="#results">Casos</a>
            <a href="#contact">Contato</a>
          </div>
          <div>
            <h4>Contato</h4>
            <a href="mailto:taylannoronha@hotmail.com">taylannoronha@hotmail.com</a>
            <a href="https://wa.me/5579988595156" target="_blank" rel="noreferrer">(79) 98859-5156</a>
            <a href="#contact">Formulário de contato</a>
          </div>
        </div>
        <div className="foot-bottom">
          <span>© 2025 Nexalyze · CNPJ 63.231.826/0001-81</span>
          <span>analise · decida · vença</span>
        </div>
      </div>
    </footer>
  );
}

Object.assign(window, { Contact, Footer });