/* global React, PRODUCTS, STORE, brl, productGradient, Icon, STATUS, STATUS_LABEL, stockState, compressImage */
const { useState: useSo } = React;

/* ============================================================ PRODUTOS */
function ProdThumb({ p, img, onUpload }) {
  return (
    <label className="t-thumb up" style={{ background: img ? "#1b1b20" : productGradient(p) }}>
      {img ? <img src={img.dataUrl} className="t-thumb-img" alt="" /> : <div className="device" />}
      <span className="t-thumb-cam"><Icon k="image" size={12} /></span>
      <input type="file" accept="image/*" hidden onChange={(e) => { const f = e.target.files[0]; if (f) onUpload(p.id, f); }} />
    </label>
  );
}

function Produtos({ products, addProduct, delProduct, stock, setQty, setQtyVal, active, setActive, prices, setPrices, images, setImages }) {
  const [q, setQ] = useSo("");
  const [form, setForm] = useSo(false);
  const [d, setD] = useSo({ brand: "", model: "", puffs: "", price: "", estoque: "", flavors: "" });
  const list = products.filter((p) => (p.brand + " " + p.model).toLowerCase().includes(q.toLowerCase()));
  const upload = async (id, file) => { const r = await compressImage(file); setImages((m) => ({ ...m, [id]: r })); };

  const slug = (s) => s.toLowerCase().normalize("NFD").replace(/[\u0300-\u036f]/g, "").replace(/[^a-z0-9]+/g, "-").replace(/^-|-$/g, "");
  const add = () => {
    if (!d.brand.trim()) return;
    let id = slug(d.brand + "-" + d.model) || "prod";
    if (products.some((p) => p.id === id)) id += "-" + Date.now().toString().slice(-4);
    const flavors = d.flavors.split(",").map((s) => s.trim()).filter(Boolean);
    addProduct({
      id, brand: d.brand.trim().toUpperCase(), model: d.model.trim(), puffs: parseInt(d.puffs, 10) || 0,
      price: parseFloat(d.price) || 0, badge: "", featured: false,
      flavors: flavors.length ? flavors : ["Padrão"], estoqueInicial: parseInt(d.estoque, 10) || 0,
    });
    setForm(false); setD({ brand: "", model: "", puffs: "", price: "", estoque: "", flavors: "" });
  };
  const remove = (p) => { if (window.confirm("Excluir o produto " + p.brand + " " + p.model + "?")) delProduct(p.id); };

  return (
    <>
      <div className="adm-toolbar">
        <div className="adm-search"><Icon k="search2" size={18} />
          <input value={q} onChange={(e) => setQ(e.target.value)} placeholder="Buscar produto…" /></div>
        <button className="btn btn-yellow" onClick={() => setForm((f) => !f)}><Icon k="plus" size={18} /> Adicionar produto</button>
      </div>

      {form && (
        <div className="panel sale-form" style={{ marginBottom: 16 }}>
          <div className="cfg-grid" style={{ gridTemplateColumns: "1.4fr 1fr 1fr 1fr 1fr", maxWidth: "none", alignItems: "end" }}>
            <div className="field"><label>Marca</label><input value={d.brand} onChange={(e) => setD({ ...d, brand: e.target.value })} placeholder="Ex: IGNITE" /></div>
            <div className="field"><label>Modelo</label><input value={d.model} onChange={(e) => setD({ ...d, model: e.target.value })} placeholder="Ex: V90" /></div>
            <div className="field"><label>Puffs</label><input type="number" value={d.puffs} onChange={(e) => setD({ ...d, puffs: e.target.value })} placeholder="9000" /></div>
            <div className="field"><label>Preço (R$)</label><input type="number" step="0.01" value={d.price} onChange={(e) => setD({ ...d, price: e.target.value })} placeholder="129.99" /></div>
            <div className="field"><label>Estoque</label><input type="number" value={d.estoque} onChange={(e) => setD({ ...d, estoque: e.target.value })} placeholder="10" /></div>
            <div className="field full"><label>Sabores (separe por vírgula)</label><input value={d.flavors} onChange={(e) => setD({ ...d, flavors: e.target.value })} placeholder="Watermelon Ice, Grape Ice, Mint" /></div>
          </div>
          <div style={{ display: "flex", gap: 10, marginTop: 16 }}>
            <button className="btn btn-yellow" onClick={add}><Icon k="check" size={18} /> Criar produto</button>
            <button className="btn btn-ghost" onClick={() => setForm(false)}>Cancelar</button>
          </div>
        </div>
      )}

      <p style={{ color: "var(--dim)", fontSize: 13, margin: "-6px 0 16px" }}>
        <Icon k="image" size={13} /> Toque na foto pra enviar — a imagem é <b>comprimida automaticamente</b> e fica salva. Tudo é salvo no seu navegador.
      </p>
      <div className="tbl-wrap">
        <table className="tbl">
          <thead><tr><th>Produto</th><th>Puffs</th><th>Preço (R$)</th><th>Estoque</th><th>Status</th><th>Ativo</th><th></th></tr></thead>
          <tbody>
            {list.map((p) => {
              const st = stock[p.id] || 0, ss = stockState(st), img = images[p.id];
              return (
                <tr key={p.id}>
                  <td className="cell-head" data-label="Produto"><div className="t-prod">
                    <ProdThumb p={p} img={img} onUpload={upload} />
                    <div><div className="t-name">{p.brand} {p.model}</div>
                      <div className="t-sub">{img ? <span style={{ color: "var(--accent)" }}>Foto · {img.kb}KB <s style={{ color: "var(--dim-2)" }}>{img.origKb}KB</s></span> : p.flavors.length + " sabores"}</div></div>
                  </div></td>
                  <td data-label="Puffs" style={{ color: "var(--dim)", fontWeight: 700 }}>{p.puffs ? p.puffs.toLocaleString("pt-BR") : "—"}</td>
                  <td data-label="Preço (R$)"><div className="price-edit"><input type="number" value={prices[p.id] != null ? prices[p.id] : p.price} step="0.01"
                    onChange={(e) => setPrices((pr) => ({ ...pr, [p.id]: parseFloat(e.target.value || 0) }))} /></div></td>
                  <td data-label="Estoque"><div className="stock-edit"><input type="number" value={st} onChange={(e) => setQtyVal(p.id, e.target.value)} />
                    <div className="stepper"><button onClick={() => setQty(p.id, 1)}>▲</button><button onClick={() => setQty(p.id, -1)}>▼</button></div></div></td>
                  <td data-label="Status"><span className={"stock-badge " + ss}>{ss === "ok" ? "Em estoque" : ss === "low" ? "Baixo" : "Esgotado"}</span></td>
                  <td data-label="Ativo"><div className={"sw" + (active[p.id] ? " on" : "")} onClick={() => setActive((a) => ({ ...a, [p.id]: !a[p.id] }))} /></td>
                  <td data-label="Ações"><div className="row-actions"><button className="icon-btn danger" onClick={() => remove(p)} title="Excluir produto"><Icon k="trash" size={16} /></button></div></td>
                </tr>
              );
            })}
            {list.length === 0 && <tr><td colSpan="7" style={{ textAlign: "center", color: "var(--dim)", padding: 40 }}>Nenhum produto encontrado.</td></tr>}
          </tbody>
        </table>
      </div>
    </>
  );
}

/* ============================================================ PROMOÇÕES */
function Promocoes({ promos, setPromos }) {
  const [form, setForm] = useSo(false);
  const [editId, setEditId] = useSo(null);
  const [d, setD] = useSo({ nome: "", tipo: "percent", valor: 10, escopo: "Toda a loja" });
  const add = () => {
    if (!d.nome.trim()) return;
    if (editId) { setPromos((p) => p.map((x) => x.id === editId ? { ...x, ...d, valor: parseFloat(d.valor) || 0 } : x)); }
    else { setPromos((p) => [{ id: "p" + Date.now(), ...d, valor: parseFloat(d.valor) || 0, ativo: true }, ...p]); }
    setForm(false); setEditId(null); setD({ nome: "", tipo: "percent", valor: 10, escopo: "Toda a loja" });
  };
  const openNew = () => { setEditId(null); setD({ nome: "", tipo: "percent", valor: 10, escopo: "Toda a loja" }); setForm(true); };
  const openEdit = (x) => { setEditId(x.id); setD({ nome: x.nome, tipo: x.tipo, valor: x.valor, escopo: x.escopo }); setForm(true); };
  const toggle = (id) => setPromos((p) => p.map((x) => x.id === id ? { ...x, ativo: !x.ativo } : x));
  const del = (id) => setPromos((p) => p.filter((x) => x.id !== id));
  const label = (x) => x.tipo === "percent" ? x.valor + "% OFF" : x.tipo === "fixo" ? "R$ " + x.valor + " OFF" : "Combo";
  return (
    <>
      <div className="adm-toolbar"><div style={{ color: "var(--dim)", fontWeight: 700, fontSize: 14 }}>{promos.filter((p) => p.ativo).length} ativas</div>
        <button className="btn btn-yellow" style={{ marginLeft: "auto" }} onClick={() => form ? (setForm(false), setEditId(null)) : openNew()}><Icon k="plus" size={18} /> Nova promoção</button></div>
      {form && (
        <div className="panel sale-form">
          <div className="cfg-grid" style={{ gridTemplateColumns: "2fr 1fr 1fr 1.5fr", maxWidth: "none", alignItems: "end" }}>
            <div className="field"><label>Nome</label><input value={d.nome} onChange={(e) => setD({ ...d, nome: e.target.value })} placeholder="Ex: Pix 10% OFF" /></div>
            <div className="field"><label>Tipo</label><select value={d.tipo} onChange={(e) => setD({ ...d, tipo: e.target.value })}><option value="percent">% desconto</option><option value="fixo">R$ fixo</option><option value="combo">Combo</option></select></div>
            <div className="field"><label>Valor</label><input type="number" value={d.valor} onChange={(e) => setD({ ...d, valor: e.target.value })} /></div>
            <div className="field"><label>Aplicar em</label><input value={d.escopo} onChange={(e) => setD({ ...d, escopo: e.target.value })} /></div>
          </div>
          <div style={{ display: "flex", gap: 10, marginTop: 16 }}><button className="btn btn-yellow" onClick={add}><Icon k="check" size={18} /> {editId ? "Salvar" : "Criar"}</button><button className="btn btn-ghost" onClick={() => { setForm(false); setEditId(null); }}>Cancelar</button></div>
        </div>
      )}
      <div className="promo-grid">
        {promos.map((x) => (
          <div className={"promo-card" + (x.ativo ? "" : " off")} key={x.id}>
            <div className="promo-tag"><Icon k="percent" size={16} /></div>
            <div className="row-actions" style={{ position: "absolute", top: 14, right: 14 }}>
              <button className="icon-btn edit" style={{ width: 30, height: 30 }} onClick={() => openEdit(x)} title="Editar"><Icon k="edit" size={14} /></button>
              <button className="icon-btn danger" style={{ width: 30, height: 30 }} onClick={() => del(x.id)} title="Excluir"><Icon k="trash" size={14} /></button>
            </div>
            <div className="promo-val">{label(x)}</div>
            <div className="promo-name">{x.nome}</div>
            <div className="promo-scope">{x.escopo}</div>
            <div className="promo-foot">
              <span style={{ fontSize: 12, fontWeight: 800, color: x.ativo ? "#4ed98b" : "var(--dim)" }}>{x.ativo ? "Ativa" : "Pausada"}</span>
              <div className={"sw" + (x.ativo ? " on" : "")} onClick={() => toggle(x.id)} />
            </div>
          </div>
        ))}
      </div>
    </>
  );
}

/* ============================================================ FEED */
function Feed({ posts, setPosts }) {
  const [form, setForm] = useSo(false);
  const [editId, setEditId] = useSo(null);
  const [d, setD] = useSo({ legenda: "", status: "rascunho", quando: "—", img: null });
  const pickImg = async (file) => { const r = await compressImage(file, 900, 0.75); setD((x) => ({ ...x, img: r.dataUrl })); };
  const add = () => {
    if (!d.legenda.trim()) return;
    if (editId) { setPosts((p) => p.map((x) => x.id === editId ? { ...x, ...d } : x)); }
    else { setPosts((p) => [{ id: "f" + Date.now(), ...d }, ...p]); }
    setForm(false); setEditId(null); setD({ legenda: "", status: "rascunho", quando: "—", img: null });
  };
  const openNew = () => { setEditId(null); setD({ legenda: "", status: "rascunho", quando: "—", img: null }); setForm(true); };
  const openEdit = (x) => { setEditId(x.id); setD({ legenda: x.legenda, status: x.status, quando: x.quando, img: x.img }); setForm(true); };
  const del = (id) => setPosts((p) => p.filter((x) => x.id !== id));
  const cycle = (id) => { const order = ["rascunho", "agendado", "publicado"]; setPosts((p) => p.map((x) => x.id === id ? { ...x, status: order[(order.indexOf(x.status) + 1) % 3] } : x)); };
  const sLabel = { rascunho: "Rascunho", agendado: "Agendado", publicado: "Publicado" };
  return (
    <>
      <div className="adm-toolbar"><div style={{ color: "var(--dim)", fontWeight: 700, fontSize: 14 }}>{STORE.handle} · {posts.length} posts</div>
        <button className="btn btn-yellow" style={{ marginLeft: "auto" }} onClick={() => form ? (setForm(false), setEditId(null)) : openNew()}><Icon k="plus" size={18} /> Novo post</button></div>
      {form && (
        <div className="panel sale-form">
          <div style={{ display: "flex", gap: 16, flexWrap: "wrap" }}>
            <label className="post-up">{d.img ? <img src={d.img} alt="" /> : <span><Icon k="image" size={26} /><br />Enviar imagem</span>}
              <input type="file" accept="image/*" hidden onChange={(e) => { const f = e.target.files[0]; if (f) pickImg(f); }} /></label>
            <div style={{ flex: 1, minWidth: 240, display: "flex", flexDirection: "column", gap: 12 }}>
              <div className="field"><label>Legenda</label><textarea rows="3" value={d.legenda} onChange={(e) => setD({ ...d, legenda: e.target.value })} placeholder="Escreva a legenda do post…" /></div>
              <div style={{ display: "flex", gap: 12 }}>
                <div className="field" style={{ flex: 1 }}><label>Status</label><select value={d.status} onChange={(e) => setD({ ...d, status: e.target.value })}><option value="rascunho">Rascunho</option><option value="agendado">Agendado</option><option value="publicado">Publicado</option></select></div>
                <div className="field" style={{ flex: 1 }}><label>Quando</label><input value={d.quando} onChange={(e) => setD({ ...d, quando: e.target.value })} placeholder="Hoje 18:00" /></div>
              </div>
            </div>
          </div>
          <div style={{ display: "flex", gap: 10, marginTop: 16 }}><button className="btn btn-yellow" onClick={add}><Icon k="check" size={18} /> {editId ? "Salvar post" : "Salvar post"}</button><button className="btn btn-ghost" onClick={() => { setForm(false); setEditId(null); }}>Cancelar</button></div>
        </div>
      )}
      <div className="feed-grid">
        {posts.map((x) => (
          <div className="post-card" key={x.id}>
            <div className="post-img" style={{ background: x.img ? "#000" : "linear-gradient(135deg,#8B5CF6,#F76A77)" }}>
              {x.img ? <img src={x.img} alt="" /> : <Icon k="feed" size={30} />}
              <div className="row-actions" style={{ position: "absolute", top: 10, right: 10 }}>
                <button className="post-del" style={{ position: "static" }} onClick={() => openEdit(x)} title="Editar"><Icon k="edit" size={15} /></button>
                <button className="post-del" style={{ position: "static" }} onClick={() => del(x.id)} title="Excluir"><Icon k="trash" size={15} /></button>
              </div>
            </div>
            <div className="post-body">
              <p className="post-cap">{x.legenda}</p>
              <div className="post-foot">
                <span className={"feed-pill " + x.status} onClick={() => cycle(x.id)}>{sLabel[x.status]}</span>
                <span style={{ color: "var(--dim)", fontSize: 12, fontWeight: 700 }}>{x.quando}</span>
              </div>
            </div>
          </div>
        ))}
      </div>
    </>
  );
}

/* ============================================================ TAXAS */
function Taxas({ fees, setFees }) {
  const [d, setD] = useSo({ regiao: "", valor: 8, prazo: "20–30 min" });
  const add = () => { if (!d.regiao.trim()) return; setFees((f) => [...f, { id: "t" + Date.now(), ...d, valor: parseFloat(d.valor) || 0 }]); setD({ regiao: "", valor: 8, prazo: "20–30 min" }); };
  const del = (id) => setFees((f) => f.filter((x) => x.id !== id));
  const setVal = (id, v) => setFees((f) => f.map((x) => x.id === id ? { ...x, valor: parseFloat(v) || 0 } : x));
  return (
    <>
      <div className="panel" style={{ marginBottom: 16 }}>
        <div className="panel-h"><h3>Nova região</h3></div>
        <div className="cfg-grid" style={{ gridTemplateColumns: "2fr 1fr 1fr auto", maxWidth: "none", alignItems: "end" }}>
          <div className="field"><label>Bairro / região</label><input value={d.regiao} onChange={(e) => setD({ ...d, regiao: e.target.value })} placeholder="Ex: Vinhais" /></div>
          <div className="field"><label>Taxa (R$)</label><input type="number" value={d.valor} onChange={(e) => setD({ ...d, valor: e.target.value })} /></div>
          <div className="field"><label>Prazo</label><input value={d.prazo} onChange={(e) => setD({ ...d, prazo: e.target.value })} /></div>
          <button className="btn btn-yellow" onClick={add}><Icon k="plus" size={18} /> Adicionar</button>
        </div>
      </div>
      <div className="tbl-wrap">
        <table className="tbl">
          <thead><tr><th>Região</th><th>Prazo</th><th>Taxa de entrega</th><th></th></tr></thead>
          <tbody>
            {fees.map((x) => (
              <tr key={x.id}>
                <td className="t-name cell-head" data-label="Região"><Icon k="pin" size={15} /> {x.regiao}</td>
                <td data-label="Prazo" style={{ color: "var(--dim)", fontWeight: 700 }}>{x.prazo}</td>
                <td data-label="Taxa"><div className="price-edit"><span style={{ color: "var(--dim)", fontWeight: 800, paddingRight: 2 }}>R$</span>
                  <input type="number" value={x.valor} onChange={(e) => setVal(x.id, e.target.value)} /></div></td>
                <td data-label="Ações"><button className="citem-remove" onClick={() => del(x.id)}><Icon k="trash" size={16} /></button></td>
              </tr>
            ))}
          </tbody>
        </table>
      </div>
      <p style={{ color: "var(--dim)", fontSize: 13, marginTop: 14 }}>Retirada na loja é sempre grátis. Defina o frete por região pra fechar o pedido certinho no WhatsApp.</p>
    </>
  );
}

/* ============================================================ CONFIG */
function Config({ config, setConfig, onReset }) {
  const [saved, setSaved] = useSo(false);
  const set = (k, v) => { setConfig((c) => ({ ...c, [k]: v })); setSaved(false); };
  const onSave = () => { setSaved(true); setTimeout(() => setSaved(false), 2200); };
  const c = config;
  return (
    <div className="panel" style={{ maxWidth: 800 }}>
      <div className="cfg-grid">
        <div className="field"><label>Nome da loja</label><input value={c.nome} onChange={(e) => set("nome", e.target.value)} /></div>
        <div className="field"><label>Instagram</label><input value={c.instagram} onChange={(e) => set("instagram", e.target.value)} /></div>
        <div className="field"><label>WhatsApp (pedidos)</label><input value={c.whatsapp} onChange={(e) => set("whatsapp", e.target.value)} /></div>
        <div className="field"><label>Horário</label><input value={c.horario} onChange={(e) => set("horario", e.target.value)} /></div>
        <div className="field full"><label>Área de entrega</label><input value={c.entrega} onChange={(e) => set("entrega", e.target.value)} /></div>
        <div className="field full"><label>Aviso do topo da loja</label><textarea rows="2" value={c.aviso} onChange={(e) => set("aviso", e.target.value)} /></div>
        <div className="field"><label>Formas de pagamento</label><input value={c.pagamento} onChange={(e) => set("pagamento", e.target.value)} /></div>
        <div className="field"><label>Garantia</label><input value={c.garantia} onChange={(e) => set("garantia", e.target.value)} /></div>
      </div>
      <div style={{ display: "flex", gap: 12, marginTop: 24, alignItems: "center", flexWrap: "wrap" }}>
        <button className="btn btn-yellow" onClick={onSave}><Icon k="check" size={18} /> {saved ? "Salvo!" : "Salvar alterações"}</button>
        <span style={{ color: "var(--dim)", fontSize: 13, fontWeight: 600 }}>As alterações são salvas automaticamente neste navegador.</span>
        <button className="btn btn-ghost" style={{ marginLeft: "auto" }} onClick={onReset}>Restaurar dados de demonstração</button>
      </div>
    </div>
  );
}

/* ============================================================ AVALIAÇÕES */
function Avaliacoes({ reviews, setReviews }) {
  const [form, setForm] = useSo(false);
  const [editId, setEditId] = useSo(null);
  const [d, setD] = useSo({ nome: "", nota: 5, texto: "" });
  const openNew = () => { setEditId(null); setD({ nome: "", nota: 5, texto: "" }); setForm(true); };
  const openEdit = (x) => { setEditId(x.id); setD({ nome: x.nome, nota: x.nota, texto: x.texto }); setForm(true); };
  const save = () => {
    if (!d.nome.trim() || !d.texto.trim()) return;
    const nota = parseInt(d.nota, 10) || 5;
    if (editId) setReviews((r) => r.map((x) => x.id === editId ? { ...x, ...d, nota } : x));
    else setReviews((r) => [{ id: "rv" + Date.now(), ...d, nota }, ...r]);
    setForm(false); setEditId(null); setD({ nome: "", nota: 5, texto: "" });
  };
  const del = (id) => { if (window.confirm("Excluir esta avaliação?")) setReviews((r) => r.filter((x) => x.id !== id)); };
  return (
    <>
      <div className="adm-toolbar">
        <div style={{ color: "var(--dim)", fontWeight: 700, fontSize: 14 }}>{reviews.length} avaliações na loja</div>
        <button className="btn btn-yellow" style={{ marginLeft: "auto" }} onClick={() => form ? (setForm(false), setEditId(null)) : openNew()}><Icon k="plus" size={18} /> Nova avaliação</button>
      </div>
      {form && (
        <div className="panel sale-form">
          <div className="cfg-grid" style={{ gridTemplateColumns: "1.5fr 1fr", maxWidth: "none", alignItems: "end" }}>
            <div className="field"><label>Nome do cliente</label><input value={d.nome} onChange={(e) => setD({ ...d, nome: e.target.value })} placeholder="Ex: Lucas M." /></div>
            <div className="field"><label>Nota</label><select value={d.nota} onChange={(e) => setD({ ...d, nota: e.target.value })}>
              <option value="5">★★★★★ (5)</option><option value="4">★★★★ (4)</option><option value="3">★★★ (3)</option></select></div>
            <div className="field full"><label>Avaliação</label><textarea rows="3" value={d.texto} onChange={(e) => setD({ ...d, texto: e.target.value })} placeholder="O que o cliente achou…" /></div>
          </div>
          <div style={{ display: "flex", gap: 10, marginTop: 16 }}>
            <button className="btn btn-yellow" onClick={save}><Icon k="check" size={18} /> {editId ? "Salvar" : "Publicar"}</button>
            <button className="btn btn-ghost" onClick={() => { setForm(false); setEditId(null); }}>Cancelar</button>
          </div>
        </div>
      )}
      <p style={{ color: "var(--dim)", fontSize: 13, margin: "2px 0 16px" }}>Aparecem na loja deslizando no carrossel. Comece com estas e troque pelas reais quando os clientes enviarem.</p>
      <div className="promo-grid">
        {reviews.map((x) => (
          <div className="promo-card" key={x.id}>
            <div className="row-actions" style={{ position: "absolute", top: 14, right: 14 }}>
              <button className="icon-btn edit" style={{ width: 30, height: 30 }} onClick={() => openEdit(x)} title="Editar"><Icon k="edit" size={14} /></button>
              <button className="icon-btn danger" style={{ width: 30, height: 30 }} onClick={() => del(x.id)} title="Excluir"><Icon k="trash" size={14} /></button>
            </div>
            <div style={{ color: "var(--accent)", letterSpacing: 2, fontSize: 15 }}>{"★★★★★".slice(0, x.nota)}<span style={{ color: "var(--line-2)" }}>{"★★★★★".slice(x.nota)}</span></div>
            <p style={{ fontSize: 13.5, lineHeight: 1.5, margin: "10px 0", color: "var(--text)" }}>“{x.texto}”</p>
            <div style={{ fontWeight: 800, fontSize: 13.5 }}>{x.nome}</div>
          </div>
        ))}
      </div>
    </>
  );
}

Object.assign(window, { Produtos, Promocoes, Feed, Taxas, Config, Avaliacoes });