// B&L ENGENHARIA — Página CONTATOS
// Dados de contato + formulário (visual, sem back-end) + mapa.

const MAPA_SRC =
  "https://maps.google.com/maps?q=Avenida%20Maur%C3%ADlio%20Biagi%2C%20800%2C%20Ribeir%C3%A3o%20Preto%20-%20SP&t=&z=15&ie=UTF8&iwloc=&output=embed";

function ContatoInfo() {
  return (
    <div className="contato-info">
      <div className="contato-info-block">
        <div className="contato-info-k">Endereço</div>
        <div className="contato-info-v">
          Av. Maurílio Biagi, nº 800, Sala 509<br />
          Santa Cruz<br />
          Ribeirão Preto / SP — CEP 14020-750
        </div>
      </div>

      <div className="contato-info-block">
        <div className="contato-info-k">Telefone</div>
        <div className="contato-info-v">
          <a href="tel:+551639112020" className="big">(16) 3911-2020</a>
        </div>
      </div>

      <div className="contato-info-block">
        <div className="contato-info-k">E-mail</div>
        <div className="contato-info-v">
          <a href="mailto:blengenharia@blengenharia.eng.br">blengenharia@blengenharia.eng.br</a>
        </div>
      </div>

      <div className="contato-info-block">
        <div className="contato-info-k">Atendimento</div>
        <div className="contato-info-v">Segunda a sexta · 8h às 18h</div>
        <a href="https://wa.me/5516996219616" target="_blank" rel="noopener" className="contato-wa">
          <svg width="18" height="18" viewBox="0 0 32 32" fill="currentColor" aria-hidden="true">
            <path d="M16 3C8.82 3 3 8.82 3 16c0 2.3.61 4.46 1.67 6.33L3 29l6.85-1.6A12.92 12.92 0 0 0 16 29c7.18 0 13-5.82 13-13S23.18 3 16 3Zm6.96 18.16c-.3.83-1.74 1.6-2.41 1.66-.63.05-1.45.18-4.27-.92-3.55-1.4-5.81-5.03-5.99-5.27-.18-.24-1.43-1.93-1.43-3.68 0-1.75.9-2.6 1.22-2.95.3-.33.66-.42.88-.42h.64c.2 0 .48-.08.75.59.27.68.92 2.33 1 2.5.08.18.13.39.03.62-.1.24-.15.39-.3.6-.16.21-.33.46-.47.62-.16.16-.33.34-.14.66.18.32.83 1.36 1.78 2.2 1.22 1.08 2.25 1.42 2.57 1.58.32.16.51.13.7-.08.18-.21.81-.94 1.02-1.27.21-.32.42-.27.71-.16.3.11 1.86.88 2.18 1.04.32.16.53.24.61.38.08.13.08.79-.22 1.62Z" />
          </svg>
          Chamar no WhatsApp
        </a>
      </div>
    </div>
  );
}

// Envio via Web3Forms (sem backend próprio). A access key direciona o e-mail
// para a caixa cadastrada no Web3Forms (blengenharia@blengenharia.eng.br).
const WEB3FORMS_ENDPOINT = "https://api.web3forms.com/submit";
const WEB3FORMS_KEY = "8b902ed9-3c2f-47a2-8aea-941f85a7f329";

function ContatoForm() {
  const [sent, setSent] = React.useState(false);
  const [sending, setSending] = React.useState(false);
  const [erro, setErro] = React.useState("");
  const [nome, setNome] = React.useState("");

  async function handleSubmit(e) {
    e.preventDefault();
    if (sending) return;
    setErro("");
    setSending(true);

    const form = e.target;
    const empresa = form.elements["c-empresa"].value;
    const email = form.elements["c-email"].value;
    const telefone = form.elements["c-tel"].value;
    const tipo = form.elements["c-tipo"].value;
    const mensagem = form.elements["c-msg"].value;

    const payload = {
      access_key: WEB3FORMS_KEY,
      subject: `[Site] Novo contato — ${nome}${tipo ? ` · ${tipo}` : ""}`,
      from_name: "Site B&L Engenharia",
      // Campos da mensagem (aparecem no e-mail recebido):
      Nome: nome,
      Empresa: empresa || "—",
      email: email, // usado pelo Web3Forms como Reply-To
      Telefone: telefone || "—",
      "Tipo de projeto": tipo || "—",
      Mensagem: mensagem,
      // Honeypot nativo do Web3Forms:
      botcheck: form.elements["botcheck"].checked,
    };

    try {
      const res = await fetch(WEB3FORMS_ENDPOINT, {
        method: "POST",
        headers: { "Content-Type": "application/json", Accept: "application/json" },
        body: JSON.stringify(payload),
      });
      const data = await res.json().catch(() => ({}));
      if (res.ok && data.success) {
        setSent(true);
      } else {
        setErro(data.message || "Não foi possível enviar agora. Tente novamente ou use o WhatsApp.");
      }
    } catch (_) {
      setErro("Falha de conexão. Verifique sua internet e tente novamente.");
    } finally {
      setSending(false);
    }
  }

  if (sent) {
    return (
      <div className="contato-form">
        <div className="contato-success">
          <div className="contato-success-mark">
            <svg width="26" height="26" viewBox="0 0 26 26" fill="none"><path d="M5 13.5l5 5L21 7.5" stroke="currentColor" strokeWidth="2.2" strokeLinecap="round" strokeLinejoin="round"/></svg>
          </div>
          <h3>Mensagem <span className="italic">enviada</span>.</h3>
          <p>
            Obrigado{nome ? `, ${nome.split(" ")[0]}` : ""}. Nossa equipe responde em até 24h úteis —
            ou fale agora pelo WhatsApp.
          </p>
          <button className="btn btn-light" onClick={() => setSent(false)}>Enviar outra mensagem</button>
        </div>
      </div>
    );
  }

  return (
    <form
      className="contato-form"
      onSubmit={handleSubmit}
    >
      <div className="contato-form-head">
        <div className="eyebrow">Fale com a engenharia</div>
        <h2>Conte sobre o seu <span className="italic">projeto</span>.</h2>
      </div>

      <div className="field-row">
        <div className="field">
          <label htmlFor="c-nome">Nome</label>
          <input id="c-nome" type="text" required placeholder="Seu nome" value={nome} onChange={(e) => setNome(e.target.value)} />
        </div>
        <div className="field">
          <label htmlFor="c-empresa">Empresa</label>
          <input id="c-empresa" type="text" placeholder="Construtora / incorporadora" />
        </div>
      </div>

      <div className="field-row">
        <div className="field">
          <label htmlFor="c-email">E-mail</label>
          <input id="c-email" type="email" required placeholder="voce@empresa.com.br" />
        </div>
        <div className="field">
          <label htmlFor="c-tel">Telefone</label>
          <input id="c-tel" type="tel" placeholder="(16) 90000-0000" />
        </div>
      </div>

      <div className="field">
        <label htmlFor="c-tipo">Tipo de projeto</label>
        <select id="c-tipo" defaultValue="">
          <option value="" disabled>Selecione uma disciplina</option>
          <option>Infraestrutura</option>
          <option>Instalações Hidrossanitárias</option>
          <option>Prevenção e Combate a Incêndio</option>
          <option>BIM / Compatibilização</option>
          <option>Outro / não sei ainda</option>
        </select>
      </div>

      <div className="field">
        <label htmlFor="c-msg">Mensagem</label>
        <textarea id="c-msg" required placeholder="Tipo de empreendimento, cidade, área aproximada e o que você precisa."></textarea>
      </div>

      {/* Honeypot anti-spam nativo do Web3Forms — oculto para humanos */}
      <input
        type="checkbox"
        name="botcheck"
        id="botcheck"
        tabIndex="-1"
        autoComplete="off"
        aria-hidden="true"
        style={{ position: "absolute", left: "-9999px", width: "1px", height: "1px", overflow: "hidden" }}
      />

      {erro ? <div className="contato-erro" role="alert">{erro}</div> : null}

      <button type="submit" className="btn contato-submit" disabled={sending}>
        {sending ? "Enviando…" : "Enviar mensagem"}
        {!sending && <svg width="14" height="14" viewBox="0 0 14 14" fill="none"><path d="M2 7h10M7 2l5 5-5 5" stroke="currentColor" strokeWidth="1.6" strokeLinecap="round" strokeLinejoin="round"/></svg>}
      </button>
      <div className="contato-disclaimer">
        Ao enviar, você concorda em ser contatado pela B&amp;L Engenharia sobre o seu projeto.
      </div>
    </form>
  );
}

function ContatosPage() {
  return (
    <React.Fragment>
      <Nav active="contato" />

      <PageHero
        eyebrow="Contato"
        title={<>Vamos falar sobre o <span className="italic">seu projeto</span>.</>}
        lead={
          <>
            Atendimento direto com quem projeta. Conte o que vai construir e retornamos com os
            próximos passos — escopo e prazos.
          </>
        }
        meta={[
          { num: "24h", label: "úteis para resposta" },
          { num: "BR", label: "atuação nacional" },
        ]}
      />

      <section className="contato">
        <div className="wrap-wide contato-grid">
          <ContatoInfo />
          <ContatoForm />
        </div>

        <div className="contato-map">
          <span className="contato-map-tag">Sede · Ribeirão Preto / SP</span>
          <iframe
            src={MAPA_SRC}
            title="Mapa — sede da B&L Engenharia em Ribeirão Preto"
            loading="lazy"
            referrerPolicy="no-referrer-when-downgrade"
          ></iframe>
        </div>
      </section>

      <Footer />
      <WaFloat />
    </React.Fragment>
  );
}

window.ContatosPage = ContatosPage;