// Operação Brasil — cadastro simples, nativo e compatível com autopreenchimento.
const { SectionHeading: FmSH, Field: FmField, Select: FmSelect, Button: FmButton, LegalNote: FmLegal, DogTag: FmDogTag, StoreOption: FmStore } =
  window.OperaOBrasilDesignSystem_ac060f;

const STORES = [
  { id: "cac", name: "CAC Armas", region: "GO" },
  { id: "big", name: "Big Boar", region: "DF" },
  { id: "canil", name: "Canil do Caçador", region: "MG" },
];

const UFS = [
  ["AC","Acre"],["AL","Alagoas"],["AP","Amapá"],["AM","Amazonas"],["BA","Bahia"],["CE","Ceará"],
  ["DF","Distrito Federal"],["ES","Espírito Santo"],["GO","Goiás"],["MA","Maranhão"],["MT","Mato Grosso"],
  ["MS","Mato Grosso do Sul"],["MG","Minas Gerais"],["PA","Pará"],["PB","Paraíba"],["PR","Paraná"],
  ["PE","Pernambuco"],["PI","Piauí"],["RJ","Rio de Janeiro"],["RN","Rio Grande do Norte"],["RS","Rio Grande do Sul"],
  ["RO","Rondônia"],["RR","Roraima"],["SC","Santa Catarina"],["SP","São Paulo"],["SE","Sergipe"],["TO","Tocantins"],
].map(([value, name]) => ({ value, label: `${name} · ${value}` }));

const FORM_PRODUCTS = [
  { value: "nao-sei", label: "Ainda não sei — quero orientação" },
  { value: "g2c-cafo", label: "G2C CAFO Black" },
  { value: "gx4-grafeno", label: "GX4 Carry Grafeno" },
  { value: "gx4-tungstenio", label: "GX4 Carry Tungstênio" },
  { value: "g3-tungstenio", label: "G3 Tungstênio" },
  { value: "g3-toro", label: "G3 T.O.R.O." },
];

const PRODUCT_DESTINATIONS = {
  cac: {
    "nao-sei": "https://cacarmas.com.br/categoria-produto/operacao-brasil/",
    "g2c-cafo": "https://cacarmas.com.br/produto/pistola-taurus-g2c-calibre-38-tpc-cafo-black/",
    "gx4-grafeno": "https://cacarmas.com.br/produto/pistola-taurus-gx4-carry-calibre-38-tpc-graphene/",
    "gx4-tungstenio": "https://cacarmas.com.br/produto/pistola-taurus-gx4-carry-calibre-38-tpc-tungstenio/",
    "g3-tungstenio": "https://cacarmas.com.br/produto/pistola-taurus-g3-toro-calibre-38-tpc-tungstenio/",
    "g3-toro": "https://cacarmas.com.br/produto/pistola-taurus-g3-toro-calibre-38-tpc-oxidado-fosco/",
  },
  big: {
    "nao-sei": "https://bigboar.com.br/categoria-produto/operacao-brasil/",
    "g2c-cafo": "https://bigboar.com.br/produto/pistola-taurus-g2c-cafo-black-38-tpc-bigboar/",
    "gx4-grafeno": "https://bigboar.com.br/produto/pistola-taurus-gx4-carry-graphene-38-tpc-bigboar/",
    "gx4-tungstenio": "https://bigboar.com.br/produto/pistola-taurus-gx4-carry-tungstenio-38-tpc-bigboar/",
    "g3-tungstenio": "https://bigboar.com.br/produto/pistola-taurus-g3-tungstenio-38-tpc-toro-bigboar/",
    "g3-toro": "https://bigboar.com.br/produto/pistola-taurus-g3-tenox-38-tpc-toro-bigboar/",
  },
};

const SUBMIT_TIMEOUT_MS = 15000;
const OPERATION_COPY_EMAIL = "suporte@kivodigital.com.br";
const STORE_RECIPIENTS = {
  cac: "socialmedia.cacarmas@gmail.com",
  big: "bigboarvendas@gmail.com",
  canil: "acbcbrasil@gmail.com",
};
const BIG_BOAR_WHATSAPP_NUMBER = "5561996478620";
const CANIL_DO_CACADOR_WHATSAPP_NUMBER = "5534992484444";

function formEndpointFor() {
  return `https://formsubmit.co/ajax/${OPERATION_COPY_EMAIL}`;
}

function FormSection() {
  const storeOrder = ["big", "cac", "canil"];
  const [store, setStore] = React.useState("big");
  const [product, setProduct] = React.useState("nao-sei");
  const [sent, setSent] = React.useState(false);
  const [sending, setSending] = React.useState(false);
  const [error, setError] = React.useState("");
  const [sentStore, setSentStore] = React.useState(null);
  const [redirectUrl, setRedirectUrl] = React.useState("");
  const [redirectLabel, setRedirectLabel] = React.useState("");
  const [whatsAppUrl, setWhatsAppUrl] = React.useState("");
  const [showBigBoarModal, setShowBigBoarModal] = React.useState(false);
  const [popupBlocked, setPopupBlocked] = React.useState(false);
  const modalRef = React.useRef(null);
  const returnFocusRef = React.useRef(null);
  const selected = STORES.find((item) => item.id === store);
  const currentProduct = FORM_PRODUCTS.find((item) => item.value === product) || FORM_PRODUCTS[0];
  const orderedStores = storeOrder.map((storeId) => STORES.find((item) => item.id === storeId));

  const handleSubmit = async (event) => {
    event.preventDefault();
    const form = event.currentTarget;
    if (!form.reportValidity()) return;

    setSending(true);
    setError("");

    const fields = new FormData(form);
    const productId = fields.get("product-interest") || "nao-sei";
    const selectedProduct = FORM_PRODUCTS.find((item) => item.value === productId) || FORM_PRODUCTS[0];
    const destination = PRODUCT_DESTINATIONS[selected.id]?.[productId] || PRODUCT_DESTINATIONS[selected.id]?.["nao-sei"] || "";
    const payload = {
      Nome: fields.get("name"),
      WhatsApp: fields.get("tel"),
      Estado: fields.get("address-level1"),
      "Produto de interesse": selectedProduct.label,
      "Loja escolhida": `${selected.name} — ${selected.region}`,
      "Página de destino": destination || "Atendimento direto pela loja",
      Origem: "Landing page Operação Brasil",
      _subject: `Novo cadastro Operação Brasil — ${selected.name} — ${selected.region}`,
      _template: "table",
      _captcha: "false",
      _honey: fields.get("_honey") || "",
      _cc: STORE_RECIPIENTS[selected.id] || "",
    };

    const controller = new AbortController();
    const timeoutId = window.setTimeout(() => controller.abort(), SUBMIT_TIMEOUT_MS);

    try {
      const response = await fetch(formEndpointFor(), {
        method: "POST",
        headers: { "Content-Type": "application/json", Accept: "application/json" },
        body: JSON.stringify(payload),
        signal: controller.signal,
      });
      const result = await response.json().catch(() => ({}));
      if (!response.ok || result.success === false || result.success === "false") {
        const serverError = new Error(result.message || "Não foi possível confirmar o cadastro.");
        serverError.isServerResponse = true;
        throw serverError;
      }

      setSentStore(selected);
      setRedirectUrl(destination);
      setRedirectLabel(selectedProduct.value === "nao-sei" ? "catálogo" : selectedProduct.label);
      setSent(true);
      form.reset();
      if (selected.id === "big") {
        const whatsAppMessage = [
          `Olá, equipe Big Boar! Meu nome é ${fields.get("name")}.`,
          `Vim pela Operação Brasil e tenho interesse em ${selectedProduct.label}.`,
          "Gostaria de falar com a equipe antes de continuar pelo site.",
        ].join(" ");
        setWhatsAppUrl(`https://wa.me/${BIG_BOAR_WHATSAPP_NUMBER}?text=${encodeURIComponent(whatsAppMessage)}`);
        returnFocusRef.current = document.activeElement;
        setPopupBlocked(false);
        setShowBigBoarModal(true);
      } else if (selected.id === "canil") {
        const whatsAppMessage = [
          `Olá, equipe do Canil do Caçador! Meu nome é ${fields.get("name")}.`,
          `Vim pela Operação Brasil e tenho interesse em ${selectedProduct.label}.`,
          "Acabei de enviar meu cadastro e gostaria de continuar o atendimento pelo WhatsApp.",
        ].join(" ");
        setWhatsAppUrl(`https://wa.me/${CANIL_DO_CACADOR_WHATSAPP_NUMBER}?text=${encodeURIComponent(whatsAppMessage)}`);
      } else if (destination) {
        window.location.assign(destination);
      }
    } catch (submitError) {
      setError(submitError?.name === "AbortError"
        ? "A confirmação demorou mais que o esperado. Tente novamente."
        : submitError?.isServerResponse
          ? submitError.message
          : "Não foi possível enviar agora. Verifique sua conexão e tente novamente.");
    } finally {
      window.clearTimeout(timeoutId);
      setSending(false);
    }
  };

  React.useEffect(() => {
    window.dispatchEvent(new CustomEvent("operation-progress", { detail: { complete: sent } }));
  }, [sent]);

  React.useEffect(() => {
    if (!showBigBoarModal) return undefined;

    const modal = modalRef.current;
    const focusableSelector = 'a[href], button:not([disabled]), [tabindex]:not([tabindex="-1"])';
    const focusable = () => Array.from(modal?.querySelectorAll(focusableSelector) || []);
    focusable()[0]?.focus();

    const handleKeyDown = (event) => {
      if (event.key === "Escape") {
        event.preventDefault();
        setShowBigBoarModal(false);
        return;
      }
      if (event.key !== "Tab") return;
      const items = focusable();
      if (!items.length) return;
      const first = items[0];
      const last = items[items.length - 1];
      if (event.shiftKey && document.activeElement === first) {
        event.preventDefault();
        last.focus();
      } else if (!event.shiftKey && document.activeElement === last) {
        event.preventDefault();
        first.focus();
      }
    };

    document.addEventListener("keydown", handleKeyDown);
    const previousOverflow = document.body.style.overflow;
    document.body.style.overflow = "hidden";
    return () => {
      document.removeEventListener("keydown", handleKeyDown);
      document.body.style.overflow = previousOverflow;
      returnFocusRef.current?.focus?.();
    };
  }, [showBigBoarModal]);

  const openBigBoarWhatsApp = () => {
    const whatsAppWindow = window.open("", "_blank");
    if (!whatsAppWindow) {
      setPopupBlocked(true);
      return;
    }
    whatsAppWindow.opener = null;
    whatsAppWindow.location.replace(whatsAppUrl);
    setPopupBlocked(false);
  };

  return (
    <section id="cadastro" style={{
      position: "relative", isolation: "isolate",
      padding: "clamp(56px, 8vw, 120px) clamp(20px, 4vw, 62px)",
    }}>
      <div aria-hidden="true" style={{
        position: "absolute", inset: 0, zIndex: -1,
        background: "var(--grad-protect-left), url('../../assets/landing-page/route-04-ecossistema-de-lojas.png') center/cover no-repeat",
      }} />
      <div className="form-grid" style={{
        width: "min(100%, 1120px)", margin: "0 auto", display: "grid",
        gridTemplateColumns: "minmax(0,1fr) minmax(0,1.05fr)",
        gap: "clamp(28px, 4vw, 64px)", alignItems: "center",
      }}>
        <div>
          <HudEyebrow style={{ marginBottom: "18px" }}>Cadastro</HudEyebrow>
          <FmSH title="Entre na Operação Brasil" size="title"
            description="Envie seus dados e siga para a loja escolhida ou receba o retorno da equipe." />
          <div style={{ marginTop: "28px", display: "flex", gap: "16px", alignItems: "center" }}>
            <FmDogTag label="1 minuto" sublabel="Formulário simples" size="sm" rotate={-5} />
            <p style={{ margin: 0, color: "var(--text-body)", fontSize: "0.95rem", lineHeight: 1.55, maxWidth: "34ch" }}>
              Pode usar o preenchimento automático do seu celular ou navegador.
            </p>
          </div>
        </div>

        <div style={{
          background: "var(--fill-card)", border: "1px solid var(--border-card)",
          borderRadius: "var(--radius-md)", padding: "clamp(22px, 3vw, 34px)", boxShadow: "var(--shadow-raised)",
        }}>
          {sent ? (
            <div style={{ textAlign: "center", padding: "24px 8px" }}>
              <FmDogTag label="Enviado" sublabel="Operação Brasil" size="lg" rotate={-4} style={{ margin: "0 auto" }} />
              <h3 style={{ margin: "24px 0 0", fontFamily: "var(--font-display)", fontWeight: 900, textTransform: "uppercase", fontSize: "2rem", color: "var(--text-strong)" }}>
                Cadastro enviado
              </h3>
              <p style={{ margin: "12px 0 0", color: "var(--text-body)", lineHeight: 1.55 }}>
                {sentStore?.id === "big"
                  ? <>Escolha se prefere falar com a equipe ou abrir <strong style={{ color: "var(--gold-300)" }}>{redirectLabel}</strong> no site.</>
                  : sentStore?.id === "canil"
                    ? <>Seu cadastro foi enviado para a equipe do <strong style={{ color: "var(--gold-300)" }}>Canil do Caçador</strong>. Continue o atendimento pelo WhatsApp.</>
                    : <>Redirecionando para <strong style={{ color: "var(--gold-300)" }}>{redirectLabel}</strong> no site da {sentStore?.name}.</>}
              </p>
              <div style={{ marginTop: "22px", display: "flex", flexWrap: "wrap", justifyContent: "center", gap: "10px" }}>
                {sentStore?.id === "big" && (
                  <FmButton type="button" onClick={() => setShowBigBoarModal(true)}>Escolher como continuar</FmButton>
                )}
                {sentStore?.id === "canil" && whatsAppUrl && (
                  <FmButton as="a" href={whatsAppUrl} target="_blank" rel="noopener noreferrer">
                    Falar com o Canil no WhatsApp
                  </FmButton>
                )}
                {redirectUrl && <FmButton as="a" href={redirectUrl} variant="secondary">Continuar pelo site</FmButton>}
              </div>
            </div>
          ) : (
            <form className="simple-form" autoComplete="on" onSubmit={handleSubmit}>
              <div className="final-progress-cue" style={{ marginBottom: "22px" }}>
                <div style={{ display: "flex", alignItems: "center", justifyContent: "space-between", gap: "12px" }}>
                  <span>Etapa final · preencha e confirme</span>
                  <strong>90%</strong>
                </div>
                <div aria-hidden="true"><span /></div>
              </div>

              <div className="contact-fields" style={{ display: "grid", gridTemplateColumns: "1fr 1fr", gap: "14px" }}>
                <FmField label="Nome" name="name" autoComplete="name" placeholder="Seu nome completo" enterKeyHint="next" required />
                <FmField label="WhatsApp" name="tel" autoComplete="tel" type="tel" inputMode="tel" placeholder="(00) 00000-0000" enterKeyHint="next" required />
              </div>

              <div className="simple-select-grid" style={{ display: "grid", gridTemplateColumns: "1fr 1fr", gap: "14px", marginTop: "14px" }}>
                <FmSelect label="Estado" name="address-level1" autoComplete="address-level1"
                  placeholder="Escolha seu estado" options={UFS} required />
                <FmSelect label="Produto de interesse" name="product-interest" value={product}
                  onChange={(event) => setProduct(event.target.value)}
                  options={FORM_PRODUCTS} hint="Se tiver dúvida, deixe a primeira opção." />
              </div>

              <div style={{ marginTop: "18px" }}>
                <span style={{ display: "block", marginBottom: "9px", color: "var(--text-strong)", fontSize: "0.88rem", fontWeight: 700 }}>
                  Por qual loja você quer ser atendido?
                </span>
                <div className="store-option-grid" role="radiogroup" aria-label="Loja para atendimento" style={{
                  display: "grid", gridTemplateColumns: "repeat(3, minmax(0, 1fr))", gap: "10px",
                }}>
                  {orderedStores.map((item) => (
                    <FmStore key={item.id} name={item.name} region={item.region}
                      selected={store === item.id} onSelect={() => setStore(item.id)} />
                  ))}
                </div>
                <input type="hidden" name="preferred-store" value={store} />
                <input type="text" name="_honey" tabIndex="-1" autoComplete="off" aria-hidden="true"
                  style={{ position: "absolute", left: "-10000px", width: "1px", height: "1px", overflow: "hidden" }} />
                <p aria-live="polite" style={{ margin: "12px 0 0", color: "var(--text-muted)", fontSize: ".78rem", lineHeight: 1.45 }}>
                  {selected.id === "big"
                    ? <>Após o envio: escolha entre falar com a equipe pelo WhatsApp ou abrir {product === "nao-sei" ? "o catálogo" : currentProduct.label} no site.</>
                    : selected.id === "canil"
                      ? <>Após o envio: confirme o cadastro e continue o atendimento pelo WhatsApp do Canil do Caçador.</>
                    : <>Após o envio: abrir {product === "nao-sei" ? "o catálogo" : currentProduct.label} no site da {selected.name}.</>}
                </p>
              </div>

              <div style={{ marginTop: "22px" }}>
                <FmButton type="submit" size="lg" disabled={sending} style={{ width: "100%", opacity: sending ? 0.72 : 1 }}>
                  {sending ? "Enviando…" : selected.id === "canil" ? "Enviar e falar no WhatsApp" : "Enviar e abrir produto"}
                </FmButton>
                {sending && (
                  <div className="submit-confirmation-progress" aria-hidden="true"><span /></div>
                )}
              </div>
              {error && (
                <p role="alert" style={{ margin: "14px 0 0", padding: "12px", border: "1px solid var(--danger)", color: "var(--bone)", background: "rgba(194,69,47,.12)", fontSize: ".88rem", lineHeight: 1.45 }}>
                  {error}
                </p>
              )}
              <div style={{ marginTop: "16px" }}>
                <FmLegal icon={false}>
                  * Ao enviar, seus dados são recebidos pela Operação Brasil e encaminhados à loja escolhida. Quando disponível, o produto selecionado é aberto no site da parceira. Você também declara ter lido a <a href="../../politica-de-privacidade/">Política de Privacidade</a> e os <a href="../../termos-de-uso/">Termos de Uso</a>.
                </FmLegal>
              </div>
            </form>
          )}
        </div>
      </div>
      {showBigBoarModal && (
        <div role="presentation" onMouseDown={(event) => {
          if (event.target === event.currentTarget) setShowBigBoarModal(false);
        }} style={{
          position: "fixed", inset: 0, zIndex: 120, display: "grid", placeItems: "center",
          padding: "20px", background: "rgba(4,5,4,.82)", backdropFilter: "blur(10px)",
        }}>
          <div ref={modalRef} role="dialog" aria-modal="true" aria-labelledby="big-boar-modal-title" aria-describedby="big-boar-modal-description" style={{
            position: "relative", width: "min(100%, 560px)", maxHeight: "calc(100vh - 40px)", overflowY: "auto",
            padding: "clamp(24px, 5vw, 40px)", background: "var(--fill-card)", border: "1px solid var(--gold-300)",
            borderRadius: "var(--radius-md)", boxShadow: "0 28px 80px rgba(0,0,0,.68), var(--glow-gold)",
          }}>
            <button type="button" aria-label="Fechar" onClick={() => setShowBigBoarModal(false)} style={{
              position: "absolute", top: "14px", right: "14px", width: "40px", height: "40px",
              border: "1px solid var(--border-card)", borderRadius: "50%", background: "rgba(255,255,255,.04)",
              color: "var(--bone)", cursor: "pointer", fontSize: "1.35rem", lineHeight: 1,
            }}>×</button>
            <HudEyebrow style={{ marginBottom: "16px" }}>Big Boar · próximo passo</HudEyebrow>
            <h3 id="big-boar-modal-title" style={{
              margin: 0, paddingRight: "32px", fontFamily: "var(--font-display)", fontWeight: 900,
              textTransform: "uppercase", fontSize: "clamp(1.8rem, 6vw, 2.6rem)", lineHeight: .95, color: "var(--text-strong)",
            }}>Como você prefere continuar?</h3>
            <p id="big-boar-modal-description" style={{ margin: "16px 0 0", color: "var(--text-body)", lineHeight: 1.55 }}>
              Você pode avançar para <strong style={{ color: "var(--gold-300)" }}>{redirectLabel}</strong> no site ou conversar com a equipe da Big Boar primeiro.
            </p>
            <div style={{ display: "grid", gap: "12px", marginTop: "26px" }}>
              <FmButton as="a" href={redirectUrl} size="lg" style={{ width: "100%" }}>Continuar pelo site</FmButton>
              <FmButton type="button" size="lg" variant="secondary" onClick={openBigBoarWhatsApp} style={{ width: "100%" }}>
                Falar com a equipe primeiro
              </FmButton>
            </div>
            <p style={{ margin: "14px 0 0", color: "var(--text-muted)", fontSize: ".78rem", lineHeight: 1.45 }}>
              O WhatsApp abre em uma nova aba. Esta janela continuará disponível para você acessar o site depois.
            </p>
            {popupBlocked && (
              <p role="alert" style={{ margin: "14px 0 0", padding: "12px", border: "1px solid var(--gold-300)", color: "var(--bone)", background: "rgba(201,158,55,.1)", fontSize: ".86rem", lineHeight: 1.45 }}>
                O navegador bloqueou a nova aba. <a href={whatsAppUrl} target="_blank" rel="noopener noreferrer">Abrir o WhatsApp diretamente</a>.
              </p>
            )}
          </div>
        </div>
      )}
    </section>
  );
}
window.FormSection = FormSection;
