// ====================== TRUST BAR ======================
function TrustBar() {
  const items = [
    { icon: IconTruck, t: "Entrega Rápida", s: "" },
    { icon: IconHeadset, t: "Atendimento humanizado", s: "" },
    { icon: IconCard, t: "Pagamento Facilitado", s: "" },
    { icon: IconShield, t: "Compra Segura", s: "" },
    { icon: IconMedal, t: "Grandes Marcas", s: "" },
  ];
  return (
    <div style={{ display: "flex", justifyContent: "center", marginTop: -42, position: "relative", zIndex: 30 }}>
      <div className="jgf-trustbar" style={{ width: "100%", maxWidth: 1320, margin: "0 26px", background: "#fff", borderRadius: 14, boxShadow: "var(--shadow-card)", padding: "22px 14px", display: "grid", gridTemplateColumns: "repeat(5,1fr)" }}>
        {items.map((it, k) => (
          <div key={k} style={{ display: "flex", alignItems: "center", gap: 12, padding: "0 18px", minWidth: 0, borderRight: k < 4 ? "1px solid var(--line)" : "none" }}>
            <span style={{ color: "var(--navy)", display: "flex", flexShrink: 0 }}><it.icon size={30} stroke={1.6} /></span>
            <div style={{ lineHeight: 1.3, minWidth: 0 }}>
              <div style={{ fontWeight: 700, fontSize: 13, color: "var(--navy)", textTransform: "uppercase", letterSpacing: ".005em" }}>{it.t}</div>
              {it.s && <div style={{ fontSize: 11.5, color: "#8a93a6", fontWeight: 500, marginTop: 2 }}>{it.s}</div>}
            </div>
          </div>
        ))}
      </div>
    </div>
  );
}

// ====================== COMPRE POR CATEGORIA ======================
function CategoryGrid({ onNav }) {
  return (
    <section style={{ display: "flex", justifyContent: "center", padding: "52px 0 12px" }}>
      <div style={{ width: "100%", maxWidth: 1320, padding: "0 26px" }}>
        <div style={{ textAlign: "center", marginBottom: 34 }}>
          <h2 style={{ margin: 0, fontWeight: 800, fontSize: 28, color: "var(--navy)", letterSpacing: ".01em" }}>COMPRE POR CATEGORIA</h2>
          <div style={{ width: 64, height: 4, background: "var(--yellow)", borderRadius: 3, margin: "12px auto 0" }} />
        </div>
        <div className="jgf-grid-5" style={{ display: "grid", gridTemplateColumns: "repeat(3,1fr)", gap: 28, maxWidth: 1180, marginInline: "auto" }}>
          {VISIBLE_CATEGORIES.map((c) => (
            <div key={c.id} onClick={() => onNav(c.id)}
              style={{ background: "#fff", border: "1px solid var(--line)", borderRadius: 16, padding: "30px 22px 30px", display: "flex", flexDirection: "column", alignItems: "center", textAlign: "center", cursor: "pointer", transition: "transform .18s ease, box-shadow .18s ease, border-color .18s ease" }}
              onMouseEnter={(e) => { e.currentTarget.style.transform = "translateY(-6px)"; e.currentTarget.style.boxShadow = "0 16px 32px rgba(16,30,60,.14)"; e.currentTarget.style.borderColor = "transparent"; }}
              onMouseLeave={(e) => { e.currentTarget.style.transform = "none"; e.currentTarget.style.boxShadow = "none"; e.currentTarget.style.borderColor = "var(--line)"; }}>
              <div style={{ height: 190, display: "flex", alignItems: "center", justifyContent: "center", marginBottom: 20 }}>
                <img src={`assets/categorias/${c.id}_prod.png`} alt={c.label}
                  style={{ maxHeight: "100%", maxWidth: "100%", objectFit: "contain" }} />
              </div>
              <div style={{ fontWeight: 800, fontSize: 15, color: "var(--navy)", lineHeight: 1.3, letterSpacing: ".01em", minHeight: 40, display: "flex", alignItems: "center" }}>{c.label.toUpperCase()}</div>
              <button onClick={(e) => { e.stopPropagation(); onNav(c.id); }}
                style={{ marginTop: 18, background: "var(--navy)", color: "#fff", fontSize: 13, fontWeight: 700, padding: "12px 26px", borderRadius: 8, transition: "background .15s, color .15s" }}
                onMouseEnter={(e) => { e.currentTarget.style.background = "var(--yellow)"; e.currentTarget.style.color = "var(--navy)"; }}
                onMouseLeave={(e) => { e.currentTarget.style.background = "var(--navy)"; e.currentTarget.style.color = "#fff"; }}>
                Ver produtos
              </button>
            </div>
          ))}
        </div>
      </div>
    </section>
  );
}

// ====================== INSTITUTIONAL CARDS ======================
function MaskIcon({ src, size = 80, style }) {
  return <img src={src} alt="" aria-hidden="true" style={{
    display: "block", width: size, height: size, objectFit: "contain", ...style,
  }} />;
}
function InstitutionalCards({ onContact }) {
  const base = { borderRadius: 14, padding: "34px 34px", minHeight: 212, display: "flex", flexDirection: "column", justifyContent: "space-between", position: "relative", overflow: "hidden" };
  const text = { position: "relative", zIndex: 2, paddingRight: 88, display: "flex", flexDirection: "column", gap: 12 };
  const title = (color) => ({ margin: 0, color, fontWeight: 800, fontSize: 22, lineHeight: 1.16, letterSpacing: ".005em" });
  const sub = (color) => ({ margin: 0, color, fontSize: 13, fontWeight: 500, lineHeight: 1.5, maxWidth: 280 });
  const outlineBtn = (color) => ({ alignSelf: "flex-start", marginTop: 22, border: `2px solid ${color}`, color, background: "transparent", fontWeight: 800, fontSize: 12.5, letterSpacing: ".04em", padding: "11px 24px", borderRadius: 26, whiteSpace: "nowrap", transition: "all .15s" });
  const iconWrap = (color) => ({ position: "absolute", top: 30, right: 26, color, zIndex: 1, display: "flex" });
  return (
    <section style={{ display: "flex", justifyContent: "center", padding: "30px 0 60px" }}>
      <div className="jgf-grid-3" style={{ width: "100%", maxWidth: 1320, padding: "0 26px", display: "grid", gridTemplateColumns: "repeat(2,1fr)", gap: 22 }}>
        {/* ABASTECIMENTO — yellow */}
        <div className="jgf-inst-card" style={{ ...base, background: "var(--yellow)" }}>
          <div className="jgf-inst-icon" style={iconWrap("rgba(22,41,77,.88)")}><IconHeadset size={80} stroke={1.4} /></div>
          <div className="jgf-inst-text" style={text}>
            <h3 className="jgf-inst-title" style={title("var(--navy)")}>ABASTECIMENTO<br />PARA SUA EMPRESA</h3>
            <p style={{ ...sub("#3a3417"), fontWeight: 600 }}>Fale com um de nossos consultores e tenha as melhores condições.</p>
          </div>
          <button onClick={onContact} style={{ ...outlineBtn("var(--navy)"), position: "relative", zIndex: 2 }}
            onMouseEnter={(e) => { e.currentTarget.style.background = "var(--navy)"; e.currentTarget.style.color = "#fff"; }}
            onMouseLeave={(e) => { e.currentTarget.style.background = "transparent"; e.currentTarget.style.color = "var(--navy)"; }}>FALE CONOSCO</button>
        </div>
        {/* EMPRESAS — white bordered (no CTA → content vertically centered) */}
        <div className="jgf-inst-card" style={{ ...base, background: "#fff", border: "1px solid var(--line)", justifyContent: "center" }}>
          <div className="jgf-inst-icon" style={iconWrap()}><MaskIcon src="assets/icons/confianca.svg" color="var(--navy)" size={86} /></div>
          <div className="jgf-inst-text" style={text}>
            <h3 className="jgf-inst-title" style={title("var(--navy)")}>EMPRESAS QUE CONFIAM NA JGF DISTRIBUIDORA</h3>
            <p style={sub("#8a93a6")}>Soluções completas para empresas de todos os portes.</p>
          </div>
        </div>
      </div>
    </section>
  );
}

// ====================== FOOTER (compact) ======================
function Footer() {
  const HREFS = { "Produtos de Limpeza": "Produtos de Limpeza.html", "Produtos de Copa": "Copa e Cozinha.html", "Materiais de Escritório": "Materiais de Escritorio.html", "Sobre a JGF": "Sobre a JGF.html" };
  const col = (title, items) => (
    <div>
      <div style={{ color: "#fff", fontWeight: 700, fontSize: 13.5, marginBottom: 14, letterSpacing: ".02em" }}>{title}</div>
      <div style={{ display: "flex", flexDirection: "column", gap: 9 }}>
        {items.map((i) => (
          <a key={i} href={HREFS[i] || "#"} onClick={(e) => { if (!HREFS[i]) e.preventDefault(); }} style={{ color: "#aeb9d0", fontSize: 12.5, fontWeight: 500, transition: "color .15s" }}
            onMouseEnter={(e) => (e.currentTarget.style.color = "var(--yellow)")}
            onMouseLeave={(e) => (e.currentTarget.style.color = "#aeb9d0")}>{i}</a>
        ))}
      </div>
    </div>
  );
  return (
    <footer style={{ background: "var(--navy-3)", display: "flex", justifyContent: "center", padding: "44px 0 0" }}>
      <div style={{ width: "100%", maxWidth: 1320, padding: "0 26px" }}>
        <div className="jgf-footer-cols" style={{ display: "grid", gridTemplateColumns: "1.4fr 1fr 1fr 1fr", gap: 30, paddingBottom: 36 }}>
          <div>
            <a href="JGF Distribuidora.html" aria-label="JGF Distribuidora — Página inicial" style={{ display: "inline-flex" }}>
              <Logo scale={0.92} white />
            </a>
            <p style={{ color: "#9aa6c0", fontSize: 12.5, lineHeight: 1.5, margin: "16px 0 0", maxWidth: 260 }}>
              Distribuidora de produtos de escritório, limpeza e copa. Atendimento empresarial em Recife e região metropolitana.
            </p>
          </div>
          {col("Categorias", [...VISIBLE_CATEGORIES.map((c) => c.label), "Orçamento Corporativo"])}
          {col("Institucional", ["Sobre a JGF", "Atendimento", "Fale conosco"])}
          {col("Contato", ["Rua Marques de Baipendi, 85", "Recife - PE · CEP 52040-080", "Telefone: (81) 3127-0069", "Instagram: @jgf_distribuidora"])}
        </div>
        <div className="jgf-footer-bottom" style={{ borderTop: "1px solid rgba(255,255,255,.1)", padding: "18px 0", display: "flex", justifyContent: "space-between", alignItems: "center", gap: 12, flexWrap: "wrap", color: "#7886a3", fontSize: 11.5 }}>
          <span>© 2026 JGF Distribuidora · Protótipo de demonstração</span>
          <div style={{ display: "flex", alignItems: "center", gap: 16 }}>
            <a href="admin.html" style={{ color: "#7886a3", fontSize: 11.5, fontWeight: 600, display: "flex", alignItems: "center", gap: 5, transition: "color .15s" }}
              onMouseEnter={(e) => (e.currentTarget.style.color = "var(--yellow)")}
              onMouseLeave={(e) => (e.currentTarget.style.color = "#7886a3")}>
              <IconUser size={13} stroke={1.8} />Área restrita
            </a>
            <span>Todos os direitos reservados</span>
          </div>
        </div>
      </div>
    </footer>
  );
}

// ====================== CART DRAWER → ORÇAMENTO VIA WHATSAPP ======================
function fmtPhoneBR(v) {
  const d = (v || "").replace(/\D/g, "").slice(0, 11);
  if (d.length <= 2) return d.length ? "(" + d : "";
  if (d.length <= 6) return "(" + d.slice(0, 2) + ") " + d.slice(2);
  if (d.length <= 10) return "(" + d.slice(0, 2) + ") " + d.slice(2, 6) + "-" + d.slice(6);
  return "(" + d.slice(0, 2) + ") " + d.slice(2, 7) + "-" + d.slice(7);
}

function fmtCNPJ(v) {
  const d = (v || "").replace(/\D/g, "").slice(0, 14);
  let out = d;
  if (d.length > 2) out = d.slice(0, 2) + "." + d.slice(2);
  if (d.length > 5) out = d.slice(0, 2) + "." + d.slice(2, 5) + "." + d.slice(5);
  if (d.length > 8) out = d.slice(0, 2) + "." + d.slice(2, 5) + "." + d.slice(5, 8) + "/" + d.slice(8);
  if (d.length > 12) out = d.slice(0, 2) + "." + d.slice(2, 5) + "." + d.slice(5, 8) + "/" + d.slice(8, 12) + "-" + d.slice(12);
  return out;
}

function CartDrawer({ open, onClose, items, onRemove, onClear }) {
  const [step, setStep] = React.useState("cart"); // cart | form | sent
  const [cnpj, setCnpj] = React.useState("");
  const [razao, setRazao] = React.useState("");
  const [email, setEmail] = React.useState("");
  const [phone, setPhone] = React.useState("");
  const [lookup, setLookup] = React.useState(""); // "" | loading | ok | fail
  const [captcha, setCaptcha] = React.useState({ a: 3, b: 4 });
  const [answer, setAnswer] = React.useState("");
  const [err, setErr] = React.useState("");

  const newCaptcha = () => setCaptcha({ a: 2 + Math.floor(Math.random() * 7), b: 1 + Math.floor(Math.random() * 8) });

  const buscarCNPJ = async (raw) => {
    const digits = (raw || "").replace(/\D/g, "");
    if (digits.length !== 14) return;
    setLookup("loading"); setErr("");
    try {
      const r = await fetch("https://brasilapi.com.br/api/cnpj/v1/" + digits);
      if (!r.ok) throw new Error("not found");
      const d = await r.json();
      setRazao(d.razao_social || d.nome_fantasia || "");
      const tel = d.ddd_telefone_1 || d.ddd_telefone_2 || "";
      if (tel && tel.replace(/\D/g, "").length >= 10) setPhone(fmtPhoneBR(tel));
      if (d.email) setEmail((d.email || "").toLowerCase());
      setLookup("ok");
    } catch (_) {
      setLookup("fail");
    }
  };

  // reset whenever the drawer opens
  React.useEffect(() => {
    if (open) { setStep("cart"); setCnpj(""); setRazao(""); setEmail(""); setPhone(""); setLookup(""); setAnswer(""); setErr(""); newCaptcha(); }
  }, [open]);

  const total = items.reduce((a, b) => a + (b.price || 0) * b.qty, 0);
  const count = items.reduce((a, b) => a + b.qty, 0);

  // group items by category, preserving first-seen order
  const groups = [];
  const gmap = {};
  items.forEach((it) => {
    const cat = it.cat || "Outros produtos";
    if (!gmap[cat]) { gmap[cat] = []; groups.push(cat); }
    gmap[cat].push(it);
  });

  const buildMessage = () => {
    const L = [];
    L.push("*Novo pedido de orçamento — JGF Distribuidora*");
    L.push("");
    L.push("*CNPJ:* " + cnpj.trim());
    L.push("*Razão social:* " + razao.trim());
    if (email.trim()) L.push("*E-mail:* " + email.trim());
    L.push("*Telefone:* " + phone.trim());
    L.push("");
    L.push("*Itens solicitados:*");
    groups.forEach((cat) => {
      L.push("");
      L.push("*" + cat.toUpperCase() + "*");
      gmap[cat].forEach((it) => L.push("• " + it.name + " — " + it.qty + "un"));
    });
    L.push("");
    L.push("Aguardo retorno com disponibilidade e condições. Obrigado!");
    return L.join("\n");
  };

  const submit = (e) => {
    e.preventDefault();
    if (cnpj.replace(/\D/g, "").length !== 14) { setErr("Informe um CNPJ válido com 14 dígitos."); return; }
    if (razao.trim().length < 2) { setErr("Informe a razão social."); return; }
    if (email.trim() && !email.includes("@")) { setErr("Informe um e-mail válido."); return; }
    if (phone.replace(/\D/g, "").length < 10) { setErr("Informe um telefone válido com DDD."); return; }
    if (parseInt(answer, 10) !== captcha.a + captcha.b) { setErr("Resposta da verificação incorreta."); newCaptcha(); setAnswer(""); return; }
    setErr("");
    const url = "https://wa.me/" + WHATSAPP_NUMBER + "?text=" + encodeURIComponent(buildMessage());
    window.open(url, "_blank");
    setStep("sent");
    onClear && onClear();
  };

  const inp = { width: "100%", padding: "13px 14px", border: "2px solid var(--line)", borderRadius: 9, fontSize: 14, fontWeight: 600, color: "var(--navy)", outline: "none", transition: "border-color .15s" };
  const focusOn = (e) => (e.target.style.borderColor = "var(--navy)");
  const focusOff = (e) => (e.target.style.borderColor = "var(--line)");

  return (
    <>
      <div onClick={onClose} style={{ position: "fixed", inset: 0, background: "rgba(15,29,57,.42)", opacity: open ? 1 : 0, pointerEvents: open ? "auto" : "none", transition: "opacity .25s", zIndex: 200 }} />
      <div style={{ position: "fixed", top: 0, right: 0, bottom: 0, width: 408, maxWidth: "94vw", background: "#fff", boxShadow: "-12px 0 40px rgba(16,30,60,.2)", transform: open ? "translateX(0)" : "translateX(100%)", transition: "transform .3s cubic-bezier(.4,0,.2,1)", zIndex: 210, display: "flex", flexDirection: "column" }}>
        {/* header */}
        <div style={{ background: "var(--navy)", color: "#fff", padding: "20px 22px", display: "flex", alignItems: "center", justifyContent: "space-between" }}>
          <div style={{ display: "flex", alignItems: "center", gap: 10, fontWeight: 700, fontSize: 16 }}>
            {step === "form"
              ? (<><button onClick={() => { setStep("cart"); setErr(""); }} style={{ color: "#fff", display: "flex", marginRight: 2 }} aria-label="Voltar"><IconChevronL size={22} /></button>Seus dados</>)
              : (<><IconCart size={22} />{step === "sent" ? "Pedido enviado" : "Meu orçamento"}{count > 0 && step === "cart" && <span style={{ background: "var(--yellow)", color: "var(--navy)", fontSize: 12, fontWeight: 800, borderRadius: 20, padding: "2px 9px" }}>{count}</span>}</>)}
          </div>
          <button onClick={onClose} style={{ color: "#fff", display: "flex" }} aria-label="Fechar"><IconClose size={22} /></button>
        </div>

        {/* ---------- STEP: CART ---------- */}
        {step === "cart" && (
          <>
            <div className="scroll-thin" style={{ flex: 1, overflowY: "auto", padding: 18 }}>
              {items.length === 0 ? (
                <div style={{ textAlign: "center", padding: "60px 20px", color: "#9aa3b5" }}>
                  <div style={{ display: "flex", justifyContent: "center", marginBottom: 14, opacity: .5 }}><IconCart size={54} stroke={1.3} /></div>
                  <div style={{ fontWeight: 700, color: "var(--navy)", fontSize: 15 }}>Sua lista está vazia</div>
                  <div style={{ fontSize: 13, marginTop: 6 }}>Adicione produtos navegando pelas categorias.</div>
                </div>
              ) : groups.map((cat) => (
                <div key={cat} style={{ marginBottom: 6 }}>
                  <div style={{ display: "flex", alignItems: "center", gap: 8, margin: "10px 0 2px", color: "var(--navy)", fontWeight: 800, fontSize: 11.5, letterSpacing: ".06em", textTransform: "uppercase" }}>
                    {cat}
                    <span style={{ flex: 1, height: 1, background: "var(--line)" }} />
                  </div>
                  {gmap[cat].map((it) => (
                    <div key={it.id} style={{ display: "flex", gap: 12, padding: "13px 0", borderBottom: "1px solid var(--line)" }}>
                      <div style={{ width: 52, height: 52, flexShrink: 0 }}><ImgSlot compact iconSize={18} radius={8} /></div>
                      <div style={{ flex: 1 }}>
                        <div style={{ fontWeight: 600, fontSize: 13, color: "var(--navy)", lineHeight: 1.3 }}>{it.name}</div>
                        <div style={{ fontSize: 12, color: "#8a93a6", marginTop: 4 }}>Qtd: <strong style={{ color: "var(--navy)" }}>{it.qty}</strong></div>
                      </div>
                      <button onClick={() => onRemove(it.id)} style={{ color: "#c0566a", alignSelf: "flex-start", display: "flex" }} aria-label="Remover"><IconClose size={17} /></button>
                    </div>
                  ))}
                </div>
              ))}
            </div>
            {items.length > 0 && (
              <div style={{ padding: 18, borderTop: "1px solid var(--line)" }}>
                <button onClick={() => { setStep("form"); setErr(""); }} style={{ width: "100%", background: "#25D366", color: "#fff", fontWeight: 800, fontSize: 14.5, padding: "15px", borderRadius: 10, display: "flex", alignItems: "center", justifyContent: "center", gap: 10, boxShadow: "0 8px 20px rgba(37,211,102,.32)", transition: "filter .15s" }}
                  onMouseEnter={(e) => (e.currentTarget.style.filter = "brightness(1.06)")}
                  onMouseLeave={(e) => (e.currentTarget.style.filter = "none")}>
                  <IconWhatsApp size={20} />Enviar pedido pelo WhatsApp
                </button>
                <div style={{ textAlign: "center", fontSize: 11.5, color: "#9aa3b5", marginTop: 9, fontWeight: 500 }}>Pedido de orçamento — sem compromisso de compra.</div>
              </div>
            )}
          </>
        )}

        {/* ---------- STEP: FORM ---------- */}
        {step === "form" && (
          <form onSubmit={submit} style={{ flex: 1, display: "flex", flexDirection: "column" }}>
            <div className="scroll-thin" style={{ flex: 1, overflowY: "auto", padding: 22 }}>
              <p style={{ margin: "0 0 18px", color: "#6b7280", fontSize: 13, fontWeight: 500, lineHeight: 1.55 }}>Digite o CNPJ para preenchermos os dados da empresa automaticamente e enviarmos o pedido ({count} {count === 1 ? "item" : "itens"}) pelo WhatsApp.</p>

              <label style={{ fontSize: 12.5, fontWeight: 700, color: "var(--navy)" }}>CNPJ</label>
              <div style={{ position: "relative", margin: "6px 0 16px" }}>
                <span style={{ position: "absolute", left: 13, top: "50%", transform: "translateY(-50%)", color: "#9aa3b5" }}><IconBox size={17} /></span>
                <input value={cnpj}
                  onChange={(e) => { const v = fmtCNPJ(e.target.value); setCnpj(v); if (v.replace(/\D/g, "").length === 14) buscarCNPJ(v); }}
                  onBlur={(e) => { buscarCNPJ(e.target.value); focusOff(e); }}
                  onFocus={focusOn}
                  inputMode="numeric" placeholder="00.000.000/0000-00" style={{ ...inp, paddingLeft: 40, paddingRight: 44 }} />
                {lookup === "loading" && <span style={{ position: "absolute", right: 13, top: "50%", transform: "translateY(-50%)", fontSize: 11.5, fontWeight: 700, color: "#9aa3b5" }}>buscando…</span>}
                {lookup === "ok" && <span style={{ position: "absolute", right: 13, top: "50%", transform: "translateY(-50%)", color: "#1f9d57", display: "flex" }}><IconCheck size={18} stroke={2.2} /></span>}
              </div>
              {lookup === "fail" && <div style={{ fontSize: 11.5, color: "#c0566a", fontWeight: 600, margin: "-8px 0 14px" }}>Não encontramos esse CNPJ automaticamente. Preencha os campos manualmente.</div>}

              <label style={{ fontSize: 12.5, fontWeight: 700, color: "var(--navy)" }}>Razão social</label>
              <div style={{ position: "relative", margin: "6px 0 16px" }}>
                <span style={{ position: "absolute", left: 13, top: "50%", transform: "translateY(-50%)", color: "#9aa3b5" }}><IconUser size={17} /></span>
                <input value={razao} onChange={(e) => setRazao(e.target.value)} placeholder="Nome da empresa" style={{ ...inp, paddingLeft: 40 }} onFocus={focusOn} onBlur={focusOff} />
              </div>

              <label style={{ fontSize: 12.5, fontWeight: 700, color: "var(--navy)" }}>E-mail</label>
              <div style={{ position: "relative", margin: "6px 0 16px" }}>
                <span style={{ position: "absolute", left: 13, top: "50%", transform: "translateY(-50%)", color: "#9aa3b5" }}><IconMail size={17} /></span>
                <input value={email} onChange={(e) => setEmail(e.target.value)} type="email" placeholder="contato@empresa.com.br" style={{ ...inp, paddingLeft: 40 }} onFocus={focusOn} onBlur={focusOff} />
              </div>

              <label style={{ fontSize: 12.5, fontWeight: 700, color: "var(--navy)" }}>Telefone</label>
              <div style={{ position: "relative", margin: "6px 0 16px" }}>
                <span style={{ position: "absolute", left: 13, top: "50%", transform: "translateY(-50%)", color: "#9aa3b5" }}><IconPhone size={17} /></span>
                <input value={phone} onChange={(e) => setPhone(fmtPhoneBR(e.target.value))} inputMode="numeric" placeholder="(81) 99999-9999" style={{ ...inp, paddingLeft: 40 }} onFocus={focusOn} onBlur={focusOff} />
              </div>

              {/* simple anti-bot captcha */}
              <label style={{ fontSize: 12.5, fontWeight: 700, color: "var(--navy)" }}>Verificação de segurança</label>
              <div style={{ display: "flex", alignItems: "center", gap: 12, margin: "8px 0 4px" }}>
                <div style={{ display: "flex", alignItems: "center", gap: 8, background: "var(--soft)", border: "1.5px solid var(--line)", borderRadius: 9, padding: "12px 14px", fontWeight: 800, fontSize: 16, color: "var(--navy)", userSelect: "none", whiteSpace: "nowrap" }}>
                  {captcha.a} <span style={{ color: "var(--yellow-dk)" }}>+</span> {captcha.b} <span style={{ color: "#9aa3b5" }}>=</span>
                </div>
                <input value={answer} onChange={(e) => setAnswer(e.target.value.replace(/\D/g, "").slice(0, 2))} inputMode="numeric" placeholder="?" style={{ ...inp, width: 72, textAlign: "center" }} onFocus={focusOn} onBlur={focusOff} />
                <button type="button" onClick={() => { newCaptcha(); setAnswer(""); }} style={{ color: "#8a93a6", fontSize: 12, fontWeight: 700 }}>Trocar</button>
              </div>
              <div style={{ fontSize: 11.5, color: "#9aa3b5", marginTop: 6, fontWeight: 500 }}>Confirme que você não é um robô resolvendo a conta.</div>

              {err && <div style={{ color: "#c0566a", fontSize: 12.5, fontWeight: 700, marginTop: 14, background: "rgba(192,86,106,.08)", padding: "10px 12px", borderRadius: 8 }}>{err}</div>}
            </div>
            <div style={{ padding: 18, borderTop: "1px solid var(--line)" }}>
              <button type="submit" style={{ width: "100%", background: "#25D366", color: "#fff", fontWeight: 800, fontSize: 14.5, padding: "15px", borderRadius: 10, display: "flex", alignItems: "center", justifyContent: "center", gap: 10, boxShadow: "0 8px 20px rgba(37,211,102,.32)", transition: "filter .15s" }}
                onMouseEnter={(e) => (e.currentTarget.style.filter = "brightness(1.06)")}
                onMouseLeave={(e) => (e.currentTarget.style.filter = "none")}>
                <IconWhatsApp size={20} />Enviar pedido
              </button>
            </div>
          </form>
        )}

        {/* ---------- STEP: SENT ---------- */}
        {step === "sent" && (
          <div style={{ flex: 1, display: "flex", flexDirection: "column", alignItems: "center", justifyContent: "center", textAlign: "center", padding: "40px 30px" }}>
            <div style={{ width: 76, height: 76, borderRadius: "50%", background: "rgba(37,211,102,.14)", display: "flex", alignItems: "center", justifyContent: "center", color: "#25D366", marginBottom: 20, animation: "pop .4s ease both" }}>
              <IconWhatsApp size={40} />
            </div>
            <div style={{ fontWeight: 800, fontSize: 19, color: "var(--navy)" }}>Pedido encaminhado!</div>
            <p style={{ color: "#6b7280", fontSize: 13.5, fontWeight: 500, lineHeight: 1.6, margin: "10px 0 24px", maxWidth: 280 }}>Abrimos o WhatsApp com seu pedido pronto. Toque em <strong style={{ color: "var(--navy)" }}>enviar</strong> na conversa para concluir com a JGF.</p>
            <button onClick={onClose} style={{ background: "var(--navy)", color: "#fff", fontWeight: 700, fontSize: 13.5, padding: "13px 26px", borderRadius: 9, transition: "background .15s" }}
              onMouseEnter={(e) => (e.currentTarget.style.background = "var(--navy-2)")}
              onMouseLeave={(e) => (e.currentTarget.style.background = "var(--navy)")}>Continuar navegando</button>
            <div style={{ marginTop: 12, fontSize: 12, color: "#9aa3b5", fontWeight: 500 }}>Não abriu? <a href={"https://wa.me/" + WHATSAPP_NUMBER} target="_blank" rel="noopener noreferrer" style={{ color: "#25D366", fontWeight: 700 }}>Falar no WhatsApp</a></div>
          </div>
        )}
      </div>
    </>
  );
}

// ====================== LOGIN MODAL ======================
function LoginModal({ open, onClose, onLogin }) {
  const [name, setName] = React.useState("");
  const [email, setEmail] = React.useState("");
  const [err, setErr] = React.useState("");
  React.useEffect(() => { if (open) { setName(""); setEmail(""); setErr(""); } }, [open]);
  if (!open) return null;
  const submit = (e) => {
    e.preventDefault();
    if (!email.includes("@") || name.trim().length < 2) { setErr("Preencha nome e um e-mail válido."); return; }
    onLogin(name.trim());
  };
  const inp = { width: "100%", padding: "13px 14px", border: "2px solid var(--line)", borderRadius: 9, fontSize: 14, fontWeight: 500, outline: "none", transition: "border-color .15s" };
  return (
    <div onClick={onClose} style={{ position: "fixed", inset: 0, background: "rgba(15,29,57,.5)", display: "flex", alignItems: "center", justifyContent: "center", zIndex: 300, animation: "fadeUp .2s ease both" }}>
      <div onClick={(e) => e.stopPropagation()} style={{ background: "#fff", borderRadius: 16, width: 400, maxWidth: "92vw", overflow: "hidden", boxShadow: "0 24px 60px rgba(16,30,60,.35)" }}>
        <div style={{ background: "var(--navy)", padding: "26px 26px 22px", display: "flex", flexDirection: "column", alignItems: "center", position: "relative" }}>
          <button onClick={onClose} style={{ position: "absolute", top: 16, right: 16, color: "#fff" }}><IconClose size={20} /></button>
          <Logo scale={0.62} white />
        </div>
        <form onSubmit={submit} style={{ padding: 26 }}>
          <h3 style={{ margin: "0 0 4px", color: "var(--navy)", fontSize: 19, fontWeight: 800 }}>Entrar ou cadastrar</h3>
          <p style={{ margin: "0 0 20px", color: "#8a93a6", fontSize: 13 }}>Acesse sua conta empresarial JGF.</p>
          <label style={{ fontSize: 12.5, fontWeight: 700, color: "var(--navy)" }}>Nome</label>
          <input value={name} onChange={(e) => setName(e.target.value)} placeholder="Seu nome" style={{ ...inp, margin: "6px 0 14px" }}
            onFocus={(e) => (e.target.style.borderColor = "var(--navy)")} onBlur={(e) => (e.target.style.borderColor = "var(--line)")} />
          <label style={{ fontSize: 12.5, fontWeight: 700, color: "var(--navy)" }}>E-mail</label>
          <input value={email} onChange={(e) => setEmail(e.target.value)} placeholder="voce@empresa.com.br" style={{ ...inp, margin: "6px 0 6px" }}
            onFocus={(e) => (e.target.style.borderColor = "var(--navy)")} onBlur={(e) => (e.target.style.borderColor = "var(--line)")} />
          {err && <div style={{ color: "#c0566a", fontSize: 12.5, fontWeight: 600, marginBottom: 6 }}>{err}</div>}
          <button type="submit" style={{ width: "100%", background: "var(--navy)", color: "#fff", fontWeight: 800, fontSize: 14.5, padding: "14px", borderRadius: 10, marginTop: 14, transition: "background .15s" }}
            onMouseEnter={(e) => (e.currentTarget.style.background = "var(--navy-2)")}
            onMouseLeave={(e) => (e.currentTarget.style.background = "var(--navy)")}>ENTRAR</button>
        </form>
      </div>
    </div>
  );
}

// ====================== LOCATION MAP (full-bleed) ======================
function LocationMap() {
  const query = "Rua Marques de Baipendi 85 Recife PE 52040-080";
  const src = `https://maps.google.com/maps?q=${encodeURIComponent(query)}&z=13&output=embed`;
  return (
    <section className="jgf-map-sec" style={{ position: "relative", width: "100%", height: 420, background: "var(--soft)", overflow: "hidden" }}>
      {/* styled map fallback (shows if external embed is blocked) */}
      <div aria-hidden="true" style={{ position: "absolute", inset: 0, background: "linear-gradient(135deg,#eef2f8 0%,#e3e9f3 100%)" }}>
        <div style={{ position: "absolute", inset: 0, opacity: .55, background: "repeating-linear-gradient(0deg, transparent 0 58px, rgba(22,41,77,.05) 58px 59px), repeating-linear-gradient(90deg, transparent 0 58px, rgba(22,41,77,.05) 58px 59px)" }} />
        <div style={{ position: "absolute", top: "38%", left: "8%", width: "46%", height: 14, background: "rgba(245,168,0,.35)", borderRadius: 8, transform: "rotate(-8deg)" }} />
        <div style={{ position: "absolute", top: "60%", left: "30%", width: "55%", height: 11, background: "rgba(22,41,77,.10)", borderRadius: 8, transform: "rotate(6deg)" }} />
        <div style={{ position: "absolute", top: "50%", left: "62%", transform: "translate(-50%,-100%)", display: "flex", flexDirection: "column", alignItems: "center" }}>
          <span style={{ color: "var(--navy)" }}><IconPin size={48} stroke={1.6} /></span>
          <span style={{ marginTop: 4, background: "#fff", color: "var(--navy)", fontWeight: 700, fontSize: 12.5, padding: "5px 12px", borderRadius: 20, boxShadow: "var(--shadow-soft)" }}>JGF Distribuidora · Recife-PE</span>
        </div>
      </div>
      <iframe title="Localização JGF Distribuidora" src={src}
        style={{ position: "absolute", inset: 0, width: "100%", height: "100%", border: "none", filter: "grayscale(.15)" }}
        loading="lazy" referrerPolicy="no-referrer-when-downgrade" />
      {/* floating address card */}
      <div className="jgf-map-card" style={{ position: "absolute", top: "50%", left: "max(26px, calc((100% - 1320px) / 2 + 26px))", transform: "translateY(-50%)", width: 320, maxWidth: "calc(100% - 52px)", background: "#fff", borderRadius: 14, boxShadow: "0 16px 40px rgba(16,30,60,.22)", padding: "26px 26px 24px", zIndex: 2 }}>
        <div style={{ display: "flex", alignItems: "center", gap: 11, marginBottom: 14 }}>
          <span style={{ color: "var(--yellow)", display: "flex" }}><IconPin size={26} stroke={1.8} /></span>
          <div style={{ fontWeight: 800, fontSize: 17, color: "var(--navy)", letterSpacing: ".01em" }}>Nossa Localização</div>
        </div>
        <div style={{ display: "flex", flexDirection: "column", gap: 12, fontSize: 13.5, color: "#4a5266", fontWeight: 500, lineHeight: 1.5 }}>
          <div style={{ display: "flex", gap: 10 }}>
            <span style={{ color: "var(--navy)", flexShrink: 0, marginTop: 1 }}><IconPin size={17} /></span>
            <span>Rua Marques de Baipendi, 85<br />Recife - PE · CEP 52040-080</span>
          </div>
          <div style={{ display: "flex", gap: 10, alignItems: "center" }}>
            <span style={{ color: "var(--navy)", flexShrink: 0 }}><IconPhone size={17} /></span>
            <span>(81) 3127-0069</span>
          </div>
          <div style={{ display: "flex", gap: 10, alignItems: "center" }}>
            <span style={{ color: "var(--navy)", flexShrink: 0 }}><IconHeadset size={17} /></span>
            <span>Seg a Sex · 8h às 18h</span>
          </div>
        </div>
        <a href={`https://maps.google.com/maps?q=${encodeURIComponent(query)}`} target="_blank" rel="noopener noreferrer"
          style={{ display: "flex", alignItems: "center", justifyContent: "center", gap: 9, marginTop: 18, background: "var(--navy)", color: "#fff", fontWeight: 700, fontSize: 13.5, padding: "12px", borderRadius: 9, transition: "background .15s" }}
          onMouseEnter={(e) => { e.currentTarget.style.background = "var(--yellow)"; e.currentTarget.style.color = "var(--navy)"; }}
          onMouseLeave={(e) => { e.currentTarget.style.background = "var(--navy)"; e.currentTarget.style.color = "#fff"; }}>
          <IconPin size={17} stroke={2} />Como chegar
        </a>
      </div>
    </section>
  );
}

// ====================== CART FLOATING BUTTON ======================
function CartFAB({ count = 0, onClick }) {
  const [hov, setHov] = React.useState(false);
  return (
    <button onClick={onClick} aria-label="Abrir carrinho" className="jgf-cart-fab"
      onMouseEnter={() => setHov(true)} onMouseLeave={() => setHov(false)}
      style={{ position: "fixed", right: 24, bottom: 100, zIndex: 180, width: 58, height: 58, borderRadius: "50%", background: "var(--navy)", color: "#fff", display: "flex", alignItems: "center", justifyContent: "center", boxShadow: "0 10px 26px rgba(16,30,60,.4)", transition: "transform .18s, background .18s", transform: hov ? "scale(1.08)" : "scale(1)" }}>
      <IconCart size={28} stroke={1.8} />
      {count > 0 && (
        <span key={count} style={{ position: "absolute", top: -4, right: -4, minWidth: 22, height: 22, padding: "0 5px", borderRadius: 12, background: "var(--yellow)", color: "var(--navy)", fontSize: 12, fontWeight: 800, display: "flex", alignItems: "center", justifyContent: "center", border: "2px solid #fff", animation: "pop .3s ease both" }}>{count}</span>
      )}
    </button>
  );
}

// ====================== WHATSAPP FLOATING BUTTON ======================
function WhatsAppFAB() {
  const [hov, setHov] = React.useState(false);
  return (
    <React.Fragment>
      <style>{`
        @keyframes waPulse { 0%{box-shadow:0 0 0 0 rgba(37,211,102,.5)} 70%{box-shadow:0 0 0 16px rgba(37,211,102,0)} 100%{box-shadow:0 0 0 0 rgba(37,211,102,0)} }
        @keyframes waBob { 0%,100%{transform:translateY(0)} 50%{transform:translateY(-5px)} }
      `}</style>
      <a href={"https://wa.me/" + WHATSAPP_NUMBER} target="_blank" rel="noopener noreferrer" aria-label="Falar no WhatsApp" className="jgf-wa-fab"
        onMouseEnter={() => setHov(true)} onMouseLeave={() => setHov(false)}
        style={{ position: "fixed", right: 24, bottom: 24, zIndex: 180, display: "flex", alignItems: "center", gap: 12, textDecoration: "none" }}>
        {/* label that slides in on hover */}
        <span style={{ background: "#fff", color: "var(--navy)", fontWeight: 700, fontSize: 13.5, padding: "10px 16px", borderRadius: 24, boxShadow: "0 8px 22px rgba(16,30,60,.18)", whiteSpace: "nowrap", transition: "opacity .2s, transform .2s", opacity: hov ? 1 : 0, transform: hov ? "translateX(0)" : "translateX(10px)", pointerEvents: "none" }}>
          Fale conosco no WhatsApp
        </span>
        {/* button */}
        <span style={{ position: "relative", width: 62, height: 62, borderRadius: "50%", background: "#25D366", display: "flex", alignItems: "center", justifyContent: "center", color: "#fff", boxShadow: "0 10px 26px rgba(37,211,102,.45)", animation: "waBob 3s ease-in-out infinite", transition: "transform .18s", transform: hov ? "scale(1.08)" : "scale(1)" }}>
          <span aria-hidden="true" style={{ position: "absolute", inset: 0, borderRadius: "50%", animation: "waPulse 2.2s infinite" }} />
          <IconWhatsApp size={34} />
        </span>
      </a>
    </React.Fragment>
  );
}

// ====================== MOBILE BOTTOM ACTION BAR ======================
// Barra fixa no rodapé (só no mobile). Ação principal = ver/enviar pedido;
// ação secundária = falar direto no WhatsApp. Substitui os dois FABs empilhados.
function MobileOrderBar({ count = 0, onCart }) {
  return (
    <div className="jgf-orderbar" style={{ position: "fixed", left: 0, right: 0, bottom: 0, zIndex: 185, display: "none", alignItems: "stretch", gap: 10, padding: "10px 12px calc(10px + env(safe-area-inset-bottom))", background: "#fff", borderTop: "1px solid var(--line)", boxShadow: "0 -6px 22px rgba(16,30,60,.12)" }}>
      <a href={"https://wa.me/" + WHATSAPP_NUMBER} target="_blank" rel="noopener noreferrer" aria-label="Falar no WhatsApp"
        style={{ flex: "0 0 auto", width: 56, display: "flex", alignItems: "center", justifyContent: "center", background: "#25D366", color: "#fff", borderRadius: 12 }}>
        <IconWhatsApp size={26} />
      </a>
      <button onClick={onCart} aria-label="Abrir meu pedido"
        style={{ flex: 1, display: "flex", alignItems: "center", justifyContent: "center", gap: 11, background: "var(--navy)", color: "#fff", fontWeight: 800, fontSize: 15.5, borderRadius: 12, padding: "15px" }}>
        <span style={{ position: "relative", display: "flex" }}>
          <IconCart size={22} stroke={1.9} />
          {count > 0 && (
            <span key={count} style={{ position: "absolute", top: -9, right: -11, minWidth: 19, height: 19, padding: "0 4px", borderRadius: 11, background: "var(--yellow)", color: "var(--navy)", fontSize: 11, fontWeight: 800, display: "flex", alignItems: "center", justifyContent: "center", border: "2px solid var(--navy)", animation: "pop .3s ease both" }}>{count}</span>
          )}
        </span>
        {count > 0 ? "Ver meu pedido" : "Meu orçamento"}
      </button>
    </div>
  );
}

Object.assign(window, { TrustBar, CategoryGrid, InstitutionalCards, Footer, CartDrawer, LoginModal, LocationMap, WhatsAppFAB, CartFAB, MobileOrderBar });