/* global React */

function ContactForm() {
  const [fields, setFields] = React.useState({ nome: "", email: "", assunto: "", orcamento: "", mensagem: "" });
  const [status, setStatus] = React.useState("idle"); // idle | sending | ok | error

  const set = k => e => setFields(f => ({ ...f, [k]: e.target.value }));

  const submit = async e => {
    e.preventDefault();
    if (!fields.nome || !fields.email || !fields.assunto) return;

    // CC #162 FIX (2026-05-07): fire qualify_lead no submit intent, não só no
    // success do servidor. Standard GA4 form conversion = user intent. Antes
    // ficava dentro de `if (json.success)` o que significava que validation
    // failures (honeypot, missing fields) impediam o evento de chegar ao Ads.
    try {
      if (window.BolderTracking && typeof window.BolderTracking.trackContact === 'function') {
        window.BolderTracking.trackContact();
      }
    } catch (_) { /* tracking nunca pode bloquear o flow */ }

    setStatus("sending");
    try {
      const api = (window.BOLDER_API_BASE || '/wp-content/plugins/wp-bolder-plugin/api/') + 'contact.php';
      const body = new FormData();
      body.append("nome",     fields.nome);
      body.append("empresa",  fields.nome); // campo empresa usa nome da marca
      body.append("email",    fields.email);
      body.append("assunto",  fields.assunto + (fields.orcamento ? " · " + fields.orcamento : ""));
      body.append("mensagem", fields.mensagem);
      const r = await fetch(api, { method: "POST", body });
      const json = await r.json();
      setStatus(json.success ? "ok" : "error");
    } catch {
      setStatus("error");
    }
  };

  if (status === "ok") {
    return (
      <div style={{ textAlign: "center", padding: "32px 0" }}>
        <span style={{ fontSize: 32 }}>✓</span>
        <p className="display" style={{ fontSize: 22, margin: "12px 0 6px", letterSpacing: "-0.02em" }}>Recebemos o pedido.</p>
        <p style={{ fontSize: 14, color: "var(--muted)" }}>Respondemos em 48h úteis.</p>
      </div>
    );
  }

  return (
    <form onSubmit={submit} style={{ display: "flex", flexDirection: "column", gap: 10 }}>
      <input placeholder="Nome · marca" value={fields.nome}     onChange={set("nome")}     required />
      <input placeholder="Email" type="email" value={fields.email} onChange={set("email")} required />
      <select value={fields.assunto} onChange={set("assunto")} required style={{ color: fields.assunto ? "var(--ink)" : "var(--muted)" }}>
        <option value="">Tipo de campanha…</option>
        <option>Filme publicitário</option>
        <option>Lançamento de produto</option>
        <option>Reposicionamento de marca</option>
        <option>Outro</option>
      </select>
      <select value={fields.orcamento} onChange={set("orcamento")} style={{ color: fields.orcamento ? "var(--ink)" : "var(--muted)" }}>
        <option value="">Orçamento estimado…</option>
        <option>€8k – €15k</option>
        <option>€15k – €30k</option>
        <option>€30k – €60k</option>
        <option>+ €60k</option>
      </select>
      <textarea rows={3} placeholder="Briefing curto, prazo, referências…" value={fields.mensagem} onChange={set("mensagem")} />
      <button className="btn" type="submit" disabled={status === "sending"} style={{ opacity: status === "sending" ? 0.6 : 1 }}>
        {status === "sending" ? "A enviar…" : status === "error" ? "Erro — tenta novamente" : <>Enviar pedido <span className="arrow">→</span></>}
      </button>
    </form>
  );
}

function FAQContact() {
  const [open, setOpen] = React.useState(0);
  const faq = [
    { q: "Como funciona o sistema de Tokens?", a: "Os Tokens são a nossa moeda interna. Em vez de orçamentos complexos, cada serviço tem um valor fixo em tokens: gerar uma imagem custa 1 Token, um vídeo curto até 15s custa 5 Tokens. Sabe exatamente quanto vai gastar e tem total controlo sobre a produção." },
    { q: "Os conteúdos são gerados 100% por robôs?", a: "De forma alguma. Do nosso lado da plataforma estão profissionais criativos, diretores de arte, estrategas e designers, que gerem todos os resultados da IA. Todo o processo criativo, desde a estratégia e criação de prompts até à curadoria e edição final, é guiado, executado e validado por humanos." },
    { q: "Qual a diferença entre Packs Avulso e Subscrição?", a: "Packs Avulso são ideais para necessidades pontuais, com validade de 3 meses e sem fidelização. Subscrições Mensais são para marcas com necessidade de conteúdo contínuo (fidelização 6 meses), com custo por Token mais baixo e descontos até 100% no Brand Blueprint." },
    { q: "Os meus Tokens da Subscrição acumulam?", a: "Sim. Pode transitar um máximo de 5 tokens não utilizados para o mês seguinte, garantindo que não perde o investimento em meses mais parados." },
    { q: "O que é o Brand Blueprint?", a: "O Brand Blueprint é um estudo profundo da sua marca na era da IA. Define o manual de identidade visual AI, prompts-base e o estilo fotográfico/vídeo. Uma vez validado, este ADN é implementado na plataforma garantindo resultados muito mais precisos, criativos e consistentes." },
    { q: "Quantas revisões estão incluídas?", a: "Imagens e vídeos incluem até 2 rondas de revisão. Cada revisão extra após as duas incluídas tem o custo de apenas 1 Token." },
    { q: "A Bolder faz filmagens ou media buying?", a: "Não. A Bolder é um estúdio AI-Native focado em eficiência e velocidade de produção. Os serviços não incluem captação real no local. Para isso existe a Bolder Production House." },
  ];

  return (
    <Section id="faq" tone="cream">
      <SectionHead
        num="13 / FAQ + Contacto"
        title="Tudo o que precisa <em>antes de começar</em>."
        sub="As perguntas críticas. Para o resto, falamos."
      />

      <div className="grid-2">
        <div>
          {faq.map((f, i) => (
            <div key={i} style={{
              borderTop: i === 0 ? "1px solid var(--rule-strong)" : "none",
              borderBottom: "1px solid var(--rule-strong)"
            }}>
              <button
                onClick={() => setOpen(open === i ? -1 : i)}
                style={{
                  display: "flex", justifyContent: "space-between", alignItems: "center",
                  width: "100%", padding: "20px 0", border: "none", background: "transparent",
                  cursor: "pointer", textAlign: "left",
                  fontFamily: "var(--font-display)", fontSize: 18, letterSpacing: "-0.015em",
                  color: "var(--ink)"
                }}
              >
                {f.q}
                <span className="mono mono-coral" style={{ transform: open === i ? "rotate(45deg)" : "none", transition: "transform 200ms var(--easing)" }}>+</span>
              </button>
              {open === i && (
                <p style={{ padding: "0 0 20px", margin: 0, fontSize: 15, color: "var(--muted)", maxWidth: "60ch" }}>{f.a}</p>
              )}
            </div>
          ))}
        </div>

        <div id="contact">
          <div className="card" style={{ background: "var(--paper)" }}>
            <span className="chip"><span className="dot" />Pedir proposta · Be Cinematic</span>
            <h3 className="display" style={{ fontSize: 28, margin: "12px 0 6px", letterSpacing: "-0.02em" }}>Para campanhas e propostas dedicadas.</h3>
            <p style={{ margin: "0 0 18px", fontSize: 14, color: "var(--muted)" }}>
              Para subscreveres um plano, vai diretamente para <a href="#pricing" className="wavy" style={{ color: "var(--ink)" }}>Pricing</a>.
            </p>
            <ContactForm /></div>
          <div style={{ marginTop: 16, display: "flex", justifyContent: "space-between", alignItems: "center" }}>
            <PoweredByBoldy />
            <span className="mono">Resposta em 48h úteis</span>
          </div>
        </div>
      </div>
    </Section>
  );
}

window.FAQContact = FAQContact;