/* global React, ReactDOM */
const { useState, useEffect, useRef } = React;
const DATA = window.SOBALDES;

/* ---------- helpers ---------- */
const brl = (n) => n.toLocaleString("pt-BR", { style: "currency", currency: "BRL" });
function shade(hex, p) {
  hex = hex.replace("#", "");
  let r = parseInt(hex.slice(0, 2), 16), g = parseInt(hex.slice(2, 4), 16), b = parseInt(hex.slice(4, 6), 16);
  const f = p < 0 ? 0 : 255, t = Math.abs(p) / 100;
  r = Math.round((f - r) * t + r); g = Math.round((f - g) * t + g); b = Math.round((f - b) * t + b);
  return `rgb(${r},${g},${b})`;
}
const nameOf = (p) => (p.kit ? "Kit 10 Baldes " : "Balde ") + p.litros;

/* ---------- icons ---------- */
function Icon({ n, s = 20 }) {
  const P = { width: s, height: s, viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: 2, strokeLinecap: "round", strokeLinejoin: "round" };
  const paths = {
    wa: <g stroke="none" fill="currentColor"><path d="M12.04 2C6.58 2 2.13 6.45 2.13 11.91c0 1.75.46 3.45 1.32 4.95L2 22l5.25-1.38a9.9 9.9 0 0 0 4.79 1.22h.01c5.46 0 9.91-4.45 9.91-9.91 0-2.65-1.03-5.14-2.9-7.01A9.82 9.82 0 0 0 12.04 2Zm5.8 14.13c-.25.69-1.45 1.32-1.99 1.36-.53.04-.53.42-3.34-.69-2.81-1.11-4.55-3.99-4.69-4.17-.14-.18-1.11-1.48-1.11-2.82 0-1.34.7-2 .96-2.27.25-.28.55-.35.73-.35l.53.01c.17.01.4-.06.62.48.25.6.83 2.06.9 2.21.07.14.12.31.02.49-.09.18-.14.29-.28.45l-.42.49c-.14.14-.28.29-.12.57.17.28.74 1.22 1.59 1.97 1.09.97 2.01 1.27 2.29 1.42.28.14.45.12.62-.07.17-.18.71-.83.9-1.11.18-.28.37-.23.62-.14.25.09 1.6.76 1.88.9.28.14.46.21.53.32.07.12.07.65-.18 1.34Z"/></g>,
    copy: <g><rect x="9" y="9" width="11" height="11" rx="2"/><path d="M5 15V5a2 2 0 0 1 2-2h10"/></g>,
    check: <polyline points="20 6 9 17 4 12"/>,
    plus: <g><path d="M12 5v14M5 12h14"/></g>,
    minus: <path d="M5 12h14"/>,
    trash: <g><path d="M3 6h18M8 6V4a2 2 0 0 1 2-2h4a2 2 0 0 1 2 2v2m2 0v14a2 2 0 0 1-2 2H7a2 2 0 0 1-2-2V6"/></g>,
    truck: <g><path d="M1 3h15v13H1zM16 8h4l3 3v5h-7"/><circle cx="5.5" cy="18.5" r="2.5"/><circle cx="18.5" cy="18.5" r="2.5"/></g>,
    factory: <g><path d="M2 20h20M4 20V9l6 4V9l6 4V5h4v15"/></g>,
    pix: <path d="M12 2 2 12l10 10 10-10L12 2zM7 12l5-5 5 5-5 5-5-5z" fill="currentColor" stroke="none"/>,
    shield: <path d="M12 2 4 6v6c0 5 3.5 8 8 10 4.5-2 8-5 8-10V6l-8-4z"/>,
    x: <path d="M18 6 6 18M6 6l12 12"/>,
    chevron: <polyline points="6 9 12 15 18 9"/>,
    cart: <g><circle cx="9" cy="21" r="1.5"/><circle cx="18" cy="21" r="1.5"/><path d="M2 3h3l2.5 13h11L21 7H6"/></g>,
    bolt: <path d="M13 2 3 14h8l-1 8 10-12h-8l1-8z" fill="currentColor" stroke="none"/>,
  };
  return <svg {...P}>{paths[n]}</svg>;
}

/* ---------- bucket illustration (usado apenas no hero e logo) ---------- */
function Bucket({ lid = "#27c06a", scale = 1, w = 150 }) {
  const uid = React.useId().replace(/:/g, "");
  const g = "bg" + uid;
  return (
    <svg width={w * scale} height={w * scale * 1.13} viewBox="0 0 160 180" aria-hidden="true">
      <defs>
        <linearGradient id={g} x1="0" y1="0" x2="1" y2="0">
          <stop offset="0" stopColor="#1c1c1c" />
          <stop offset=".42" stopColor="#2e2e2e" />
          <stop offset="1" stopColor="#111111" />
        </linearGradient>
      </defs>
      <ellipse cx="80" cy="169" rx="44" ry="7.5" fill="rgba(0,0,0,.28)" />
      <path d="M34 56 C 40 10, 120 10, 126 56" fill="none" stroke="#444" strokeWidth="5.5" strokeLinecap="round" />
      <path d="M34 56 C 40 13, 120 13, 126 56" fill="none" stroke="#555" strokeWidth="2" strokeLinecap="round" />
      <path d="M28 52 L42 160 Q80 173 118 160 L132 52 Z" fill={`url(#${g})`} stroke="rgba(255,255,255,.06)" strokeWidth="1" />
      <path d="M33 80 Q80 92 127 80" fill="none" stroke="rgba(255,255,255,.07)" strokeWidth="2" />
      <path d="M37 122 Q80 133 123 122" fill="none" stroke="rgba(255,255,255,.05)" strokeWidth="2" />
      <path d="M50 60 L46 154" stroke="rgba(255,255,255,.18)" strokeWidth="5" strokeLinecap="round" opacity=".9" />
      <ellipse cx="80" cy="55" rx="54" ry="15" fill={shade(lid, -22)} />
      <ellipse cx="80" cy="49" rx="54" ry="15" fill={lid} />
      <ellipse cx="80" cy="46" rx="45" ry="11.5" fill={shade(lid, 16)} />
      <ellipse cx="80" cy="45" rx="14" ry="4.5" fill={shade(lid, -10)} />
    </svg>
  );
}

/* ---------- quantity stepper ---------- */
function Qty({ value, onChange, small }) {
  return (
    <div className="qty">
      <button onClick={() => onChange(Math.max(1, value - 1))} aria-label="menos"><Icon n="minus" s={small ? 15 : 18} /></button>
      <input type="number" min="1" value={value}
        onChange={(e) => onChange(Math.max(1, parseInt(e.target.value || "1", 10)))} />
      <button onClick={() => onChange(value + 1)} aria-label="mais"><Icon n="plus" s={small ? 15 : 18} /></button>
    </div>
  );
}

/* ---------- product card (com foto real) ---------- */
function Card({ p, onAdd, onToast, showPrices }) {
  const [q, setQ] = useState(1);
  const [copied, setCopied] = useState(false);
  const [added, setAdded] = useState(false);
  const unit = p.kit ? "kit" : "un";

  const copyCode = () => {
    navigator.clipboard?.writeText(p.id).catch(() => {});
    setCopied(true);
    onToast(`Código ${p.id} copiado`);
    setTimeout(() => setCopied(false), 1400);
  };
  const add = () => {
    onAdd(p, q);
    setAdded(true);
    setTimeout(() => setAdded(false), 1300);
  };

  return (
    <div className="card">
      <div className="card-media">
        {p.kit && <span className="kit-badge">KIT 10 UNID.</span>}
        <span className="cap-badge">{p.litros}</span>
        {/* Unitário: ilustração SVG de 1 balde. Kit: foto real */}
        {p.kit ? (
          <img
            src={p.image}
            alt={nameOf(p)}
            className="card-product-img"
            loading="lazy"
            onError={(e) => { e.target.style.display = "none"; }}
          />
        ) : (
          <Bucket lid={p.lid} scale={p.scale * 0.88} w={130} />
        )}
      </div>
      <div className="card-body">
        <div className="card-title">{nameOf(p)}</div>
        <div className="card-sub">Com tampa e alça · {p.kit ? "10 baldes" : "unitário"}</div>

        <div className="code-row">
          <button className={"code-chip" + (copied ? " copied" : "")} onClick={copyCode}>
            <Icon n={copied ? "check" : "copy"} s={14} /> {copied ? "Copiado!" : "Cód. " + p.id}
          </button>
        </div>

        {showPrices && (
          <div className="price-row">
            <span className="price">{brl(p.preco)}</span>
            <span className="price-unit">/{unit}</span>
            {p.kit && (() => {
              const s = DATA.produtos.find((x) => !x.kit && x.capacidade === p.capacidade);
              return s && s.preco * 10 > p.preco ? <span className="price-strike">{brl(s.preco * 10)}</span> : null;
            })()}
          </div>
        )}

        <div className="quick">
          {[10, 50, 100].map((n) => <button key={n} onClick={() => setQ(n)}>{n}</button>)}
        </div>
        <div className="add-row">
          <Qty value={q} onChange={setQ} />
          <button className={"add-btn" + (added ? " added" : "")} onClick={add}>
            <Icon n={added ? "check" : "cart"} s={18} /> {added ? "Add!" : "Adicionar"}
          </button>
        </div>
      </div>
    </div>
  );
}

/* ---------- order bar (barra de dados) ---------- */
function OrderBar({ cart, prods, open, setOpen, setQty, remove, clear, onCheckout, showPrices }) {
  const items = cart.map((c) => ({ ...c, p: prods.find((x) => x.id === c.id) })).filter((x) => x.p);
  const totalBaldes = items.reduce((s, i) => s + i.qty * i.p.qtd, 0);
  const totalPreco = items.reduce((s, i) => s + i.qty * i.p.preco, 0);
  const names = items.map((i) => `${i.qty}× ${i.p.litros}${i.p.kit ? " kit" : ""}`).join(" · ");
  const show = items.length > 0;

  return (
    <div className={"orderbar" + (show ? " show" : "") + (open ? " open" : "")}>
      <div className="orderbar-inner">
        <div className="orderbar-card">
          <div className="ob-summary" onClick={() => setOpen(!open)}>
            <div className="ob-count"><b>{totalBaldes}</b></div>
            <div className="ob-info">
              <div className="l1">{totalBaldes} {totalBaldes === 1 ? "balde" : "baldes"} no pedido</div>
              <div className="l2">{names}</div>
            </div>
            {showPrices && (
              <div className="ob-total">
                <small>Total</small>
                <b>{brl(totalPreco)}</b>
              </div>
            )}
            <span className="ob-chevron"><Icon n="chevron" s={22} /></span>
            <button className="ob-go" onClick={(e) => { e.stopPropagation(); onCheckout(); }}>
              <Icon n="wa" s={19} /> Finalizar no WhatsApp
            </button>
          </div>

          <div className="ob-details">
            {items.map((i) => (
              <div className="ob-line" key={i.id}>
                <div className="ob-thumb">
                  {i.p.kit ? (
                    <img src={i.p.image} alt={nameOf(i.p)} className="ob-thumb-img"
                      onError={(e) => { e.target.style.display = "none"; }} />
                  ) : (
                    <Bucket lid={i.p.lid} scale={0.42} w={86} />
                  )}
                </div>
                <div className="ob-line-info">
                  <b>{nameOf(i.p)}</b>
                  <span>Cód. {i.p.id}{showPrices ? " · " + brl(i.p.preco) + (i.p.kit ? "/kit" : "/un") : ""}</span>
                </div>
                <Qty value={i.qty} onChange={(v) => setQty(i.id, v)} small />
                {showPrices && <div className="ob-line-price">{brl(i.qty * i.p.preco)}</div>}
                <button className="ob-remove" onClick={() => remove(i.id)} aria-label="remover"><Icon n="trash" s={17} /></button>
              </div>
            ))}
            <div className="ob-foot">
              <button className="ob-clear" onClick={clear}>Limpar pedido</button>
            </div>
          </div>
        </div>
      </div>
    </div>
  );
}

/* ---------- checkout modal ---------- */
function Checkout({ open, onClose, cart, prods, cliente, setCliente, showPrices, wa }) {
  const items = cart.map((c) => ({ ...c, p: prods.find((x) => x.id === c.id) })).filter((x) => x.p);
  const totalPreco = items.reduce((s, i) => s + i.qty * i.p.preco, 0);
  const totalBaldes = items.reduce((s, i) => s + i.qty * i.p.qtd, 0);
  const [errs, setErrs] = useState({});

  const set = (k, v) => setCliente({ ...cliente, [k]: v });

  const send = () => {
    const e = {};
    if (!cliente.nome?.trim()) e.nome = "Informe seu nome";
    if (!cliente.telefone?.trim()) e.telefone = "Informe seu WhatsApp";
    setErrs(e);
    if (Object.keys(e).length) return;

    let msg = "Olá, Só Baldes! Quero fazer um pedido:\n\n";
    items.forEach((i) => {
      msg += `• ${i.qty}× ${nameOf(i.p)} (cód. ${i.p.id})`;
      if (showPrices) msg += ` — ${i.qty} × ${brl(i.p.preco)} = ${brl(i.qty * i.p.preco)}`;
      msg += "\n";
    });
    msg += `\nTotal de baldes: ${totalBaldes}`;
    if (showPrices) msg += `\nValor do pedido: ${brl(totalPreco)}`;
    msg += "\n\n— Meus dados —\n";
    msg += `Nome: ${cliente.nome}\n`;
    msg += `WhatsApp: ${cliente.telefone}\n`;
    if (cliente.cidade?.trim()) msg += `Cidade: ${cliente.cidade}\n`;
    if (cliente.cep?.trim()) msg += `CEP: ${cliente.cep}\n`;

    window.open(`https://wa.me/${wa}?text=${encodeURIComponent(msg)}`, "_blank");
  };

  return (
    <div className={"overlay" + (open ? " show" : "")} onClick={onClose}>
      <div className="modal" onClick={(e) => e.stopPropagation()}>
        <div className="modal-head">
          <h3>Quase lá!</h3>
          <p>Preencha seus dados e enviamos o pedido direto pro nosso WhatsApp.</p>
          <button className="modal-close" onClick={onClose}><Icon n="x" s={18} /></button>
        </div>
        <div className="modal-body">
          <div className={"field" + (errs.nome ? " err" : "")}>
            <label>Nome</label>
            <input value={cliente.nome || ""} onChange={(e) => set("nome", e.target.value)} placeholder="Seu nome ou empresa" />
            <div className="msg">{errs.nome}</div>
          </div>
          <div className={"field" + (errs.telefone ? " err" : "")}>
            <label>WhatsApp</label>
            <input value={cliente.telefone || ""} onChange={(e) => set("telefone", e.target.value)} placeholder="(11) 90000-0000" inputMode="tel" />
            <div className="msg">{errs.telefone}</div>
          </div>
          <div className="two">
            <div className="field">
              <label>Cidade <span className="opt">(opcional)</span></label>
              <input value={cliente.cidade || ""} onChange={(e) => set("cidade", e.target.value)} placeholder="Sua cidade" />
            </div>
            <div className="field">
              <label>CEP <span className="opt">(p/ frete)</span></label>
              <input value={cliente.cep || ""} onChange={(e) => set("cep", e.target.value)} placeholder="00000-000" inputMode="numeric" />
            </div>
          </div>

          <div className="recap">
            {items.map((i) => (
              <div className="recap-line" key={i.id}>
                <span>{i.qty}× {nameOf(i.p)}</span>
                {showPrices && <b>{brl(i.qty * i.p.preco)}</b>}
              </div>
            ))}
            <div className="recap-total">
              <span>{totalBaldes} baldes no total</span>
              {showPrices && <b>{brl(totalPreco)}</b>}
            </div>
          </div>

          <button className="send-btn" onClick={send}><Icon n="wa" s={22} /> Enviar pedido no WhatsApp</button>
          <div className="save-note"><Icon n="check" s={14} /> Seus dados ficam salvos neste aparelho.</div>
        </div>
      </div>
    </div>
  );
}

/* ---------- toast ---------- */
function Toast({ msg }) {
  return <div className={"toast" + (msg ? " show" : "")}><Icon n="check" s={16} /> {msg}</div>;
}

/* ---------- tweaks ---------- */
const TWEAK_DEFAULTS = /*EDITMODE-BEGIN*/{
  "palette": ["#1457e6", "#0e3aa6", "#eaf0ff"],
  "titleFont": "Bricolage Grotesque",
  "showPrices": true,
  "whatsapp": "5511994222769"
}/*EDITMODE-END*/;
const PALETTES = {
  "Azul":     ["#1457e6", "#0e3aa6", "#eaf0ff"],
  "Verde":    ["#11a85a", "#0a7d42", "#e7f7ee"],
  "Laranja":  ["#f2820c", "#c2660a", "#fef0db"],
  "Vermelho": ["#e23b3b", "#b02626", "#fdeaea"],
};

/* ---------- app ---------- */
function App() {
  const prods = DATA.produtos;
  const [tab, setTab] = useState("unit");
  const [cart, setCart] = useState(() => {
    try { return JSON.parse(localStorage.getItem("sb_cart_v1")) || []; } catch { return []; }
  });
  const [cliente, setCliente] = useState(() => {
    try { return JSON.parse(localStorage.getItem("sb_cliente_v1")) || {}; } catch { return {}; }
  });
  const [open, setOpen] = useState(false);
  const [checkout, setCheckout] = useState(false);
  const [toast, setToast] = useState("");
  const tref = useRef(null);
  const [t, setTweak] = useTweaks(TWEAK_DEFAULTS);
  const showPrices = t.showPrices !== false;
  const wa = String(t.whatsapp || DATA.whatsapp).replace(/\D/g, "") || DATA.whatsapp;

  useEffect(() => {
    const r = document.documentElement.style;
    const pal = t.palette || PALETTES.Azul;
    r.setProperty("--brand", pal[0]);
    r.setProperty("--brand-d", pal[1]);
    r.setProperty("--brand-soft", pal[2]);
    r.setProperty("--font-display", `"${t.titleFont}", system-ui, sans-serif`);
  }, [t.palette, t.titleFont]);

  useEffect(() => { localStorage.setItem("sb_cart_v1", JSON.stringify(cart)); }, [cart]);
  useEffect(() => { localStorage.setItem("sb_cliente_v1", JSON.stringify(cliente)); }, [cliente]);

  const showToast = (m) => {
    setToast(m); clearTimeout(tref.current);
    tref.current = setTimeout(() => setToast(""), 1800);
  };
  const addToCart = (p, qty) => {
    setCart((c) => {
      const ex = c.find((x) => x.id === p.id);
      if (ex) return c.map((x) => x.id === p.id ? { ...x, qty: x.qty + qty } : x);
      return [...c, { id: p.id, qty }];
    });
    showToast(`${qty}× ${nameOf(p)} adicionado`);
  };
  const setQty = (id, v) => setCart((c) => c.map((x) => x.id === id ? { ...x, qty: v } : x));
  const remove = (id) => setCart((c) => c.filter((x) => x.id !== id));
  const clear = () => { setCart([]); setOpen(false); };

  const list = prods.filter((p) => tab === "unit" ? !p.kit : p.kit);

  return (
    <React.Fragment>
      {/* top bar */}
      <div className="topbar">
        <div className="wrap">
          <span className="tb-tag">DIRETO DE FÁBRICA · ENTREGA PRA TODO BRASIL</span>
          <a href={`https://wa.me/${wa}`} target="_blank" rel="noreferrer"><Icon n="wa" s={15} /> Televendas: {DATA.whatsappLabel}</a>
        </div>
      </div>

      {/* header */}
      <header className="header">
        <div className="wrap">
          <a className="logo" href="#">
            <span className="logo-mark"><Bucket lid="#ffffff" scale={0.16} w={130} /></span>
            <span className="logo-text">Só Baldes<small>Atacado &amp; Varejo</small></span>
          </a>
          <span className="header-spacer"></span>
          <a className="header-cta" href={`https://wa.me/${wa}`} target="_blank" rel="noreferrer"><Icon n="wa" s={18} /><span>Fale conosco</span></a>
        </div>
      </header>

      {/* hero */}
      <section className="hero">
        <div className="wrap">
          <div>
            <span className="hero-eyebrow"><Icon n="bolt" s={14} /> Pedido em segundos</span>
            <h1>Baldes plásticos <em>direto da fábrica</em>.</h1>
            <p>Escolha o tamanho, diga quantos você quer e finalize no WhatsApp. Simples assim.</p>
            <div className="hero-actions">
              <a className="btn-primary" href="#catalogo"><Icon n="cart" s={19} /> Ver os baldes</a>
              <a className="btn-ghost" href={`https://wa.me/${wa}`} target="_blank" rel="noreferrer"><Icon n="wa" s={19} /> Pedir no WhatsApp</a>
            </div>
          </div>
          <div className="hero-art">
            <div className="b b1"><Bucket lid="#27c06a" scale={1.15} /></div>
            <div className="b b2"><Bucket lid="#f5a623" scale={1.05} /></div>
            <div className="b b3"><Bucket lid="#22b8e0" /></div>
          </div>
        </div>
      </section>

      {/* trust */}
      <section className="trust">
        <div className="wrap">
          <div className="trust-item"><span className="trust-ic"><Icon n="factory" /></span><div><b>Direto de fábrica</b><span>Sem atravessador</span></div></div>
          <div className="trust-item"><span className="trust-ic"><Icon n="truck" /></span><div><b>Frete pra sua região</b><span>Consulte no WhatsApp</span></div></div>
          <div className="trust-item"><span className="trust-ic"><Icon n="pix" /></span><div><b>Desconto no Pix</b><span>Pagamento facilitado</span></div></div>
          <div className="trust-item"><span className="trust-ic"><Icon n="shield" /></span><div><b>Compra segura</b><span>Atendimento humano</span></div></div>
        </div>
      </section>

      {/* catalog */}
      <section className="catalog" id="catalogo">
        <div className="wrap">
          <div className="cat-head">
            <div>
              <h2>Nossos baldes</h2>
              <p>Todos com tampa e alça plástica reforçada.</p>
            </div>
            <div className="tabs">
              <button className={"tab" + (tab === "unit" ? " active" : "")} onClick={() => setTab("unit")}>Unitários</button>
              <button className={"tab" + (tab === "kit" ? " active" : "")} onClick={() => setTab("kit")}>Kits de 10</button>
            </div>
          </div>
          <div className="grid">
            {list.map((p) => <Card key={p.id} p={p} onAdd={addToCart} onToast={showToast} showPrices={showPrices} />)}
          </div>
        </div>
      </section>

      {/* footer */}
      <footer className="footer">
        <div className="wrap">
          <div>
            <div className="flogo">
              <span className="logo-mark"><Bucket lid="#ffffff" scale={0.16} w={130} /></span>
              <span className="logo-text">Só Baldes</span>
            </div>
            <p className="foot-note">Baldes plásticos com tampa e alça, direto da fábrica.<br />Atacado e varejo para todo o Brasil.</p>
          </div>
          <div>
            <h4>Atendimento</h4>
            <a href={`https://wa.me/${wa}`} target="_blank" rel="noreferrer">WhatsApp {DATA.whatsappLabel}</a>
            <a href={`https://wa.me/${wa}`} target="_blank" rel="noreferrer">Fazer orçamento</a>
            <a href="#catalogo">Ver catálogo</a>
          </div>
          <div>
            <h4>Como funciona</h4>
            <a href="#catalogo">1. Escolha os baldes</a>
            <a href="#catalogo">2. Diga a quantidade</a>
            <a href="#catalogo">3. Finalize no WhatsApp</a>
          </div>
        </div>
        <div className="wrap foot-bottom">
          <span>© 2026 Só Baldes · Todos os direitos reservados</span>
          <span>Pagamento via Pix, cartão e boleto</span>
        </div>
      </footer>

      <OrderBar cart={cart} prods={prods} open={open} setOpen={setOpen}
        setQty={setQty} remove={remove} clear={clear}
        onCheckout={() => setCheckout(true)} showPrices={showPrices} />

      <Checkout open={checkout} onClose={() => setCheckout(false)}
        cart={cart} prods={prods} cliente={cliente} setCliente={setCliente} showPrices={showPrices} wa={wa} />

      <Toast msg={toast} />

      <TweaksPanel>
        <TweakSection label="Marca" />
        <TweakColor label="Cor principal" value={t.palette}
          options={Object.values(PALETTES)}
          onChange={(v) => setTweak("palette", v)} />
        <TweakSelect label="Fonte do título" value={t.titleFont}
          options={["Bricolage Grotesque", "Sora", "Archivo"]}
          onChange={(v) => setTweak("titleFont", v)} />
        <TweakSection label="Loja" />
        <TweakToggle label="Mostrar preços" value={showPrices}
          onChange={(v) => setTweak("showPrices", v)} />
        <TweakText label="WhatsApp (DDD + número)" value={t.whatsapp}
          onChange={(v) => setTweak("whatsapp", v)} />
      </TweaksPanel>
    </React.Fragment>
  );
}

ReactDOM.createRoot(document.getElementById("root")).render(<App />);