/* Sections D: Form, PS, Footer, WhatsApp Float */

const LEEZI_WEBHOOK = "https://api.leezi.com.br/api/v1/webhook/lead/e6ea3416-c2f7-4c85-be1f-2de5a58367cc";

function readUTMs() {
  try {
    const p = new URLSearchParams(window.location.search);
    const u = {};
    ["utm_source", "utm_medium", "utm_campaign", "utm_term", "utm_content"].forEach((k) => {
      const v = p.get(k);
      if (v) u[k] = v;
    });
    return u;
  } catch (e) { return {}; }
}

function CtaForm({ accent }) {
  const [status, setStatus] = React.useState("idle"); // idle | sending | success | error
  const [errorMsg, setErrorMsg] = React.useState("");
  const [form, setForm] = React.useState({
    nome: "", empresa: "", cargo: "", telefone: "", email: "", setor: "", mensagem: "", consent: false,
  });
  const set = (k) => (e) => setForm({ ...form, [k]: e.target.type === "checkbox" ? e.target.checked : e.target.value });

  const submit = async (e) => {
    e.preventDefault();
    if (status === "sending") return;
    setStatus("sending");
    setErrorMsg("");

    const utms = readUTMs();
    const payload = {
      nome: form.nome,
      telefone: form.telefone,
      email: form.email,
      empresa: form.empresa,
      mensagem: form.mensagem,
      // extras (saved as notes by Leezi)
      cargo: form.cargo,
      setor: form.setor,
      ...utms,
    };

    try {
      const res = await fetch(LEEZI_WEBHOOK, {
        method: "POST",
        headers: {
          "Content-Type": "application/json",
          "X-Form-Origin": window.location.href,
        },
        body: JSON.stringify(payload),
      });
      const data = await res.json().catch(() => ({}));
      if (!res.ok || data.success === false) {
        throw new Error(data.error || `Erro ${res.status}`);
      }
      // Fire conversion events if pixels are loaded
      if (typeof window.fbq === "function") {
        try { window.fbq("track", "Lead"); } catch (_) {}
      }
      if (typeof window.gtag === "function") {
        try { window.gtag("event", "generate_lead", { value: 1, currency: "BRL" }); } catch (_) {}
      }
      setStatus("success");
    } catch (err) {
      setStatus("error");
      setErrorMsg(err.message || "Não foi possível enviar agora. Tente novamente em instantes.");
    }
  };

  return (
    <section className="cta-final section-pad reveal" id="contato">
      <div className="shell">
        <div className="form-grid">
          <div>
            <div className="eyebrow">O primeiro passo</div>
            <h2 className="display" style={{ fontSize: "clamp(36px, 5.4vw, 80px)", marginTop: 24 }}>
              Vamos conversar<br/>antes de propor<br/>qualquer coisa.
            </h2>
            <p className="lede" style={{ marginTop: 28, color: "rgba(244,240,232,0.78)", maxWidth: "44ch" }}>
              Conte rapidamente o cenário da sua empresa. Um estrategista sênior, não um SDR, responde em até um dia útil para marcar uma conversa.
            </p>

            <div style={{ marginTop: 48, display: "flex", flexDirection: "column", gap: 16 }}>
              <div style={{ display: "flex", alignItems: "center", gap: 14, color: "rgba(244,240,232,0.78)", fontSize: 14 }}>
                <span style={{ width: 8, height: 8, borderRadius: "50%", background: accent }}/>
                Resposta em até 24h úteis
              </div>
              <div style={{ display: "flex", alignItems: "center", gap: 14, color: "rgba(244,240,232,0.78)", fontSize: 14 }}>
                <span style={{ width: 8, height: 8, borderRadius: "50%", background: accent }}/>
                Primeira conversa sem custo, sem compromisso
              </div>
              <div style={{ display: "flex", alignItems: "center", gap: 14, color: "rgba(244,240,232,0.78)", fontSize: 14 }}>
                <span style={{ width: 8, height: 8, borderRadius: "50%", background: accent }}/>
                Conversa com um estrategista sênior
              </div>
            </div>
          </div>

          <div>
            {status === "success" ? (
              <div className="form-ok">
                <div className="eyebrow">Recebido</div>
                <h3 className="display" style={{ marginTop: 16 }}>
                  Obrigado.<br/><span className="red" style={{ color: accent }}>Falamos em até um dia útil.</span>
                </h3>
                <p style={{ marginTop: 16, color: "var(--muted)" }}>
                  Um estrategista sênior da Empória entrará em contato pelo e-mail e telefone informados.
                </p>
              </div>
            ) : (
              <form className="form-card" onSubmit={submit}>
                <div className="form-row two">
                  <div className="field">
                    <label>Nome</label>
                    <input required value={form.nome} onChange={set("nome")} placeholder="Seu nome completo"/>
                  </div>
                  <div className="field">
                    <label>Empresa</label>
                    <input required value={form.empresa} onChange={set("empresa")} placeholder="Nome da empresa"/>
                  </div>
                </div>
                <div className="form-row two">
                  <div className="field">
                    <label>Cargo</label>
                    <input required value={form.cargo} onChange={set("cargo")} placeholder="Sua função"/>
                  </div>
                  <div className="field">
                    <label>Telefone (WhatsApp)</label>
                    <input required type="tel" value={form.telefone} onChange={set("telefone")} placeholder="(00) 00000-0000"/>
                  </div>
                </div>
                <div className="form-row two">
                  <div className="field">
                    <label>E-mail</label>
                    <input required type="email" value={form.email} onChange={set("email")} placeholder="voce@empresa.com.br"/>
                  </div>
                  <div className="field">
                    <label>Setor</label>
                    <select required value={form.setor} onChange={set("setor")}>
                      <option value="">Selecione</option>
                      <option value="construcao">Construção</option>
                      <option value="industria">Indústria</option>
                      <option value="servicos">Serviços</option>
                      <option value="outro">Outro</option>
                    </select>
                  </div>
                </div>
                <div className="form-row">
                  <div className="field">
                    <label>Mensagem (opcional)</label>
                    <textarea value={form.mensagem} onChange={set("mensagem")} placeholder="Conte rapidamente o contexto atual da sua empresa."/>
                  </div>
                </div>

                <label className="consent">
                  <input type="checkbox" required checked={form.consent} onChange={set("consent")}/>
                  <span>Concordo com a <a href="#">Política de Privacidade</a> e o tratamento dos meus dados conforme a LGPD.</span>
                </label>

                {status === "error" && (
                  <div style={{
                    marginBottom: 16,
                    padding: "12px 14px",
                    border: "1px solid rgba(230, 36, 43, 0.4)",
                    background: "rgba(230, 36, 43, 0.08)",
                    fontFamily: "var(--font-mono)",
                    fontSize: 12,
                    color: accent,
                    letterSpacing: "0.04em",
                  }}>
                    {errorMsg}
                  </div>
                )}

                <button type="submit" className="form-submit" style={{ background: accent, opacity: status === "sending" ? 0.7 : 1 }} disabled={status === "sending"}>
                  {status === "sending" ? "Enviando…" : "Quero conversar com o time da Empória"}
                  {status !== "sending" && <I.Arrow size={14}/>}
                </button>
              </form>
            )}
          </div>
        </div>
      </div>
    </section>
  );
}

function PS({ accent }) {
  return (
    <section className="ps section-pad reveal" style={{ background: accent }}>
      <div className="shell ps-grid">
        <div>
          <div className="eyebrow">P.S.</div>
        </div>
        <div>
          <p>
            Se você chegou até aqui, provavelmente reconhece o sintoma que descrevemos lá em cima, e provavelmente já tentou resolver contratando mais um fornecedor.
          </p>
          <p>
            O próximo passo não é contratar mais alguém. É escolher uma direção. A conversa com a Empória custa 45 minutos e termina com você sabendo, com clareza, se faz sentido seguir adiante ou não.
          </p>
          <p>
            Em qualquer dos dois casos, sua marca sai do encontro mais clara do que entrou.
          </p>
          <div className="ps-sign">Direção Empória</div>
          <div style={{ marginTop: 32 }}>
            <a href="#contato" className="btn btn-ghost" style={{ borderColor: "rgba(244,240,232,0.4)", color: "var(--accent-ink)" }}>
              Voltar para o formulário
              <I.Arrow size={12}/>
            </a>
          </div>
        </div>
      </div>
    </section>
  );
}

function Footer() {
  return (
    <footer className="footer">
      <div className="shell footer-grid">
        <div className="brand">
          <span>Empória</span>
          <span className="mark">Branding</span>
        </div>
        <div style={{ fontFamily: "var(--font-mono)", fontSize: 11, letterSpacing: "0.14em", textTransform: "uppercase" }}>
          © 2026 · Todos os direitos reservados · LGPD compliant
        </div>
      </div>
    </footer>
  );
}

function WhatsAppFloat() {
  return (
    <a className="wa" href="https://wa.me/55" target="_blank" rel="noopener" aria-label="Falar pelo WhatsApp">
      <span className="wa-label">Falar pelo WhatsApp</span>
      <I.Whatsapp size={26}/>
    </a>
  );
}

function BackToTop() {
  const [visible, setVisible] = React.useState(false);
  React.useEffect(() => {
    const onScroll = () => setVisible(window.scrollY > 600);
    onScroll();
    window.addEventListener("scroll", onScroll, { passive: true });
    return () => window.removeEventListener("scroll", onScroll);
  }, []);
  const goTop = (e) => {
    e.preventDefault();
    window.scrollTo({ top: 0, behavior: "smooth" });
  };
  return (
    <button
      type="button"
      className={`back-top${visible ? " is-visible" : ""}`}
      onClick={goTop}
      aria-label="Voltar para o topo"
    >
      <svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2.4" strokeLinecap="square">
        <path d="M12 19V5"/>
        <path d="M5 12l7-7 7 7"/>
      </svg>
    </button>
  );
}

Object.assign(window, { CtaForm, PS, Footer, WhatsAppFloat, BackToTop });