/* ============================================================
   AfricaMart — Dashboard sub-panes
   ============================================================ */

/* ---------- Messaging / chat ---------- */
function ChatPane({ supplier, showToast }) {
  const threads = supplier
    ? [
        { id: 1, who: "Rift Valley Construction", country: "KE", subj: "Y16 rebar — 80 MT", status: "New", last: "Can you confirm mill cert availability?", time: "2h" },
        { id: 2, who: "Coastal Builders", country: "KE", subj: "IBR roofing — 4,000 m", status: "Replied", last: "Thanks, the quote looks good. Lead time?", time: "5h" },
        { id: 3, who: "Kampala Infra Group", country: "UG", subj: "Galvanized sheet pricing", status: "Closed", last: "Order placed — thank you!", time: "3d" },
      ]
    : [
        { id: 1, who: "Savannah Steel Works", country: "KE", subj: "Y12 rebar inquiry", status: "Replied", last: "We can offer $635/MT for 10+ MT. Lead time 2 weeks.", time: "1h" },
        { id: 2, who: "Addis Agro Exports", country: "ET", subj: "Yirgacheffe samples", status: "New", last: "Samples shipped — tracking attached.", time: "6h" },
        { id: 3, who: "Lagos Polymer", country: "NG", subj: "HDPE PN16 quote", status: "Closed", last: "Great, we'll proceed with the PO.", time: "2d" },
      ];
  const [active, setActive] = useState(threads[0].id);
  const [msg, setMsg] = useState("");
  const t = threads.find(x => x.id === active);
  const stColor = s => s === "New" ? "badge-blue" : s === "Replied" ? "badge-amber" : "badge-gray";

  return (
    <>
      <DashHead title={supplier ? "Inquiry inbox" : "Inquiries & chat"} sub="Thread-based messaging · email notifications on" />
      <div className="card chat-grid" style={{ display: "grid", gridTemplateColumns: "300px 1fr", overflow: "hidden", height: 520, padding: 0 }}>
        <div style={{ borderRight: "1px solid var(--border)", overflow: "auto" }} className="thin-scroll">
          {threads.map(th => (
            <button key={th.id} onClick={() => setActive(th.id)} style={{ display: "block", width: "100%", textAlign: "left", padding: "14px 16px", borderBottom: "1px solid var(--border)", background: active === th.id ? "var(--navy-50)" : "#fff" }}>
              <div style={{ display: "flex", alignItems: "center", gap: 7 }}>
                <Flag code={th.country} size={13} />
                <span style={{ fontWeight: 700, fontSize: 13.5, flex: 1, whiteSpace: "nowrap", overflow: "hidden", textOverflow: "ellipsis" }}>{th.who}</span>
                <span className="muted" style={{ fontSize: 11 }}>{th.time}</span>
              </div>
              <div style={{ fontSize: 13, fontWeight: 600, marginTop: 4, color: "var(--ink-700)" }}>{th.subj}</div>
              <div className="muted" style={{ fontSize: 12, marginTop: 3, whiteSpace: "nowrap", overflow: "hidden", textOverflow: "ellipsis" }}>{th.last}</div>
              <span className={"badge " + stColor(th.status)} style={{ marginTop: 7 }}>{th.status}</span>
            </button>
          ))}
        </div>
        <div style={{ display: "flex", flexDirection: "column" }}>
          <div style={{ padding: "14px 18px", borderBottom: "1px solid var(--border)", display: "flex", alignItems: "center", gap: 10 }}>
            <Flag code={t.country} size={15} />
            <div><div style={{ fontWeight: 700, fontSize: 14.5 }}>{t.who}</div><div className="muted" style={{ fontSize: 12.5 }}>{t.subj}</div></div>
            <span className={"badge " + stColor(t.status)} style={{ marginLeft: "auto" }}>{t.status}</span>
          </div>
          <div style={{ flex: 1, overflow: "auto", padding: 18, display: "flex", flexDirection: "column", gap: 12, background: "var(--paper)" }} className="thin-scroll">
            <Bubble side="them">Hi, we're interested in your products. {t.last}</Bubble>
            <Bubble side="me">{supplier ? "Thanks for reaching out — happy to help. Let me pull together the details for you." : "Hello, thanks for the quick reply. Could you confirm the delivery terms?"}</Bubble>
            <Bubble side="them">Sure — we deliver DAP to most East-African destinations. I'll attach the spec sheet and certs.</Bubble>
          </div>
          <div style={{ padding: 14, borderTop: "1px solid var(--border)", display: "flex", gap: 10 }}>
            <input className="input" value={msg} onChange={e => setMsg(e.target.value)} placeholder="Type a message…" onKeyDown={e => { if (e.key === "Enter" && msg) { setMsg(""); showToast("Message sent"); } }} />
            <button className="btn btn-gold" onClick={() => { if (msg) { setMsg(""); showToast("Message sent"); } }}><Icon name="send" size={16} /></button>
          </div>
        </div>
      </div>
    </>
  );
}
function Bubble({ side, children }) {
  const me = side === "me";
  return (
    <div style={{ alignSelf: me ? "flex-end" : "flex-start", maxWidth: "72%", background: me ? "var(--navy-800)" : "#fff", color: me ? "#fff" : "var(--ink-900)", padding: "10px 14px", borderRadius: me ? "14px 14px 4px 14px" : "14px 14px 14px 4px", fontSize: 14, lineHeight: 1.5, border: me ? "none" : "1px solid var(--border)", boxShadow: "var(--sh-sm)" }}>
      {children}
    </div>
  );
}

/* ---------- Product manager (supplier) ---------- */
function ProductManager({ products, showToast }) {
  const [adding, setAdding] = useState(false);
  return (
    <>
      <DashHead title="Products" sub={products.length + " products listed"} action={<button className="btn btn-gold" onClick={() => setAdding(true)}><Icon name="plus" size={16} /> Add product</button>} />
      <div className="card" style={{ overflow: "hidden" }}>
        <table style={{ width: "100%", borderCollapse: "collapse", fontSize: 14 }}>
          <thead><tr style={{ background: "var(--navy-50)", textAlign: "left" }}>{["Product", "SKU", "Price", "MOQ", "Views", "Status", ""].map(h => <th key={h} style={{ padding: "12px 16px", fontSize: 12.5, fontWeight: 700, color: "var(--ink-500)" }}>{h}</th>)}</tr></thead>
          <tbody>
            {products.map(p => (
              <tr key={p.id} style={{ borderTop: "1px solid var(--border)" }}>
                <td style={{ padding: "12px 16px", fontWeight: 600, maxWidth: 240 }}>{p.name}</td>
                <td style={{ padding: "12px 16px" }} className="mono muted">{p.sku}</td>
                <td style={{ padding: "12px 16px", fontWeight: 600 }}>{fmtPrice(p.priceUSD)}/{p.unit}</td>
                <td style={{ padding: "12px 16px" }}>{p.moq} {p.moqUnit}</td>
                <td style={{ padding: "12px 16px" }}>{p.views.toLocaleString()}</td>
                <td style={{ padding: "12px 16px" }}><span className="badge badge-green">Active</span></td>
                <td style={{ padding: "12px 16px", textAlign: "right" }}>
                  <button style={{ padding: 6 }} onClick={() => showToast("Edit product")}><Icon name="pencil" size={16} style={{ color: "var(--ink-500)" }} /></button>
                  <button style={{ padding: 6 }} onClick={() => showToast("Product removed")}><Icon name="trash-2" size={16} style={{ color: "var(--ink-500)" }} /></button>
                </td>
              </tr>
            ))}
          </tbody>
        </table>
      </div>
      {adding && <AddProductModal onClose={() => setAdding(false)} showToast={showToast} />}
    </>
  );
}

function AddProductModal({ onClose, showToast }) {
  const [f, setF] = useState({ name: "", sku: "", category: "", price: "", unitmoq: "" });
  const set = k => e => setF(prev => ({ ...prev, [k]: e.target.value }));
  const [desc, setDesc] = useState("");
  const [generating, setGenerating] = useState(false);
  const [tags, setTags] = useState([]);
  const [tagging, setTagging] = useState(false);
  const canAI = window.AMAI && AMAI.available();

  const genDesc = async () => {
    if (!f.name) { showToast("Add a product name first"); return; }
    setGenerating(true);
    try {
      const text = await AMAI.generateDescription({ name: f.name, category: f.category, price: f.price, unit: f.unitmoq, moq: f.unitmoq });
      setDesc(text);
      showToast("AI description generated");
    } catch (e) { showToast("AI is unavailable right now — please try again"); }
    setGenerating(false);
  };
  const genTags = async () => {
    if (!f.name) { showToast("Add a product name first"); return; }
    setTagging(true);
    try {
      const t = await AMAI.suggestTags({ name: f.name, category: f.category });
      setTags(t);
      showToast("AI suggested " + t.length + " tags");
    } catch (e) { showToast("AI is unavailable right now — please try again"); }
    setTagging(false);
  };

  return (
    <div onClick={onClose} style={{ position: "fixed", inset: 0, zIndex: 80, background: "rgba(13,27,42,.55)", backdropFilter: "blur(3px)", display: "flex", alignItems: "center", justifyContent: "center", padding: 20 }}>
      <form onClick={e => e.stopPropagation()} onSubmit={e => { e.preventDefault(); onClose(); showToast("Product published"); }} style={{ background: "#fff", borderRadius: 16, width: "min(620px,100%)", maxHeight: "92vh", overflow: "auto", boxShadow: "var(--sh-lg)" }} className="route-anim thin-scroll">
        <div style={{ padding: "20px 24px", borderBottom: "1px solid var(--border)", display: "flex", alignItems: "center", position: "sticky", top: 0, background: "#fff", zIndex: 1 }}>
          <h3 style={{ fontSize: 19 }}>Add product</h3>
          <button type="button" onClick={onClose} style={{ marginLeft: "auto" }}><Icon name="x" size={22} style={{ color: "var(--ink-500)" }} /></button>
        </div>
        <div style={{ padding: 24, display: "flex", flexDirection: "column", gap: 16 }}>
          <ImageEnhancer onApply={() => {}} />
          <div style={{ display: "grid", gridTemplateColumns: "2fr 1fr", gap: 14 }}>
            <div><label className="field-label">Product name</label><input className="input" value={f.name} onChange={set("name")} required placeholder="e.g. Deformed steel rebar Y12" /></div>
            <div><label className="field-label">SKU</label><input className="input" value={f.sku} onChange={set("sku")} placeholder="SSW-RB-Y12" /></div>
          </div>
          <div style={{ display: "grid", gridTemplateColumns: "1fr 1fr 1fr", gap: 14 }}>
            <div><label className="field-label">Category</label><select className="select" value={f.category} onChange={set("category")} required><option value="" disabled>Select…</option>{AM.CATEGORIES.map(c => <option key={c.id} value={c.name}>{c.name}</option>)}</select></div>
            <div><label className="field-label">Price (USD)</label><input className="input" type="number" value={f.price} onChange={set("price")} placeholder="640" /></div>
            <div><label className="field-label">Unit / MOQ</label><input className="input" value={f.unitmoq} onChange={set("unitmoq")} placeholder="MT / 5" /></div>
          </div>
          <div>
            <div style={{ display: "flex", alignItems: "center", justifyContent: "space-between", marginBottom: 6 }}>
              <label className="field-label" style={{ margin: 0 }}>Description</label>
              {canAI && (
                <button type="button" onClick={genDesc} disabled={generating} className="ai-chip" style={{ cursor: "pointer", border: "none" }}>
                  <Icon name={generating ? "loader-circle" : "sparkles"} size={12} className={generating ? "spin" : ""} /> {generating ? "Generating…" : "Generate with AI"}
                </button>
              )}
            </div>
            <textarea className="textarea" rows="5" value={desc} onChange={e => setDesc(e.target.value)} placeholder="Describe your product, or let AI write SEO-optimized copy for you…" />
            <div className="muted" style={{ fontSize: 12, marginTop: 5, display: "flex", alignItems: "center", gap: 5 }}><Icon name="info" size={13} /> AI writes keyword-rich, SEO-friendly descriptions to help buyers find you.</div>
          </div>
          <div>
            <div style={{ display: "flex", alignItems: "center", justifyContent: "space-between", marginBottom: 6 }}>
              <label className="field-label" style={{ margin: 0 }}>Search tags</label>
              {canAI && (
                <button type="button" onClick={genTags} disabled={tagging} className="ai-chip" style={{ cursor: "pointer", border: "none" }}>
                  <Icon name={tagging ? "loader-circle" : "sparkles"} size={12} className={tagging ? "spin" : ""} /> {tagging ? "Suggesting…" : "Suggest tags with AI"}
                </button>
              )}
            </div>
            <div style={{ display: "flex", gap: 8, flexWrap: "wrap", minHeight: 30, alignItems: "center" }}>
              {tags.length === 0 && <span className="muted" style={{ fontSize: 12.5 }}>No tags yet — let AI suggest keywords buyers search for.</span>}
              {tags.map(t => (
                <span key={t} className="badge badge-gray" style={{ display: "inline-flex", alignItems: "center", gap: 5 }}>{t}
                  <button type="button" onClick={() => setTags(tags.filter(x => x !== t))} style={{ display: "inline-flex" }}><Icon name="x" size={11} style={{ color: "var(--ink-400)" }} /></button>
                </span>
              ))}
            </div>
          </div>
        </div>
        <div style={{ padding: "16px 24px", borderTop: "1px solid var(--border)", display: "flex", gap: 12, justifyContent: "flex-end", position: "sticky", bottom: 0, background: "#fff" }}>
          <button type="button" className="btn btn-ghost" onClick={onClose}>Cancel</button>
          <button type="submit" className="btn btn-gold"><Icon name="check" size={16} /> Publish product</button>
        </div>
      </form>
    </div>
  );
}

/* ---------- Premium storefront upsell ---------- */
function PremiumUpsell({ nav, showToast, compact }) {
  const [showPlans, setShowPlans] = useState(false);
  const s = AM.supplierById.s1;
  const benefits = ["Your own brand & domain — no AfricaMart branding", "Editorial, premium design that converts", "Priority placement in search & category pages", "Advanced analytics & lead insights"];
  return (
    <>
      <div className="card prem-upsell" style={{ padding: 0, overflow: "hidden", marginBottom: compact ? 18 : 24, display: "grid", gridTemplateColumns: compact ? "1fr" : "1.5fr 1fr" }}>
        <div style={{ background: "linear-gradient(125deg, var(--navy-800), var(--navy-600))", color: "#fff", padding: 26, position: "relative", overflow: "hidden" }}>
          <div style={{ position: "absolute", top: -50, right: -30, width: 200, height: 200, borderRadius: "50%", background: "radial-gradient(circle, rgba(232,184,75,.22), transparent 70%)" }} />
          <span className="badge badge-premium" style={{ position: "relative" }}><Icon name="crown" size={12} /> Premium storefront</span>
          <h3 style={{ fontSize: 22, marginTop: 14, color: "#fff", lineHeight: 1.2, position: "relative" }}>Turn your store into a standalone brand site</h3>
          <p style={{ color: "var(--navy-200)", fontSize: 14, marginTop: 8, lineHeight: 1.55, maxWidth: 440, position: "relative" }}>Upgrade from your Verified storefront to a white-label Premium site — your branding, your domain, zero marketplace chrome.</p>
          <div style={{ display: "flex", gap: 10, marginTop: 20, flexWrap: "wrap", position: "relative" }}>
            <button className="btn btn-gold" onClick={() => nav("store", { slug: s.slug, variant: "premium" })}><Icon name="eye" size={16} /> Preview premium store</button>
            <button className="btn btn-ghost-light" onClick={() => setShowPlans(true)}>Compare plans</button>
          </div>
        </div>
        <div style={{ padding: 26, display: "flex", flexDirection: "column", justifyContent: "center" }}>
          <div style={{ display: "flex", flexDirection: "column", gap: 11 }}>
            {benefits.map(b => (
              <div key={b} style={{ display: "flex", gap: 10, alignItems: "flex-start" }}>
                <Icon name="check-circle-2" size={17} style={{ color: "var(--green-600)", flexShrink: 0, marginTop: 1 }} />
                <span style={{ fontSize: 13.5, color: "var(--ink-700)", lineHeight: 1.4 }}>{b}</span>
              </div>
            ))}
          </div>
          <div style={{ marginTop: 18, paddingTop: 16, borderTop: "1px solid var(--border)", display: "flex", alignItems: "center", gap: 10 }}>
            <div><span style={{ fontSize: 26, fontWeight: 800, color: "var(--navy-800)" }}>$149</span><span className="muted" style={{ fontSize: 13 }}>/ month</span></div>
            <button className="btn btn-navy" style={{ marginLeft: "auto" }} onClick={() => showToast("Upgrade flow — premium storefront")}>Upgrade now</button>
          </div>
        </div>
      </div>
      {showPlans && <PlanComparison onClose={() => setShowPlans(false)} nav={nav} showToast={showToast} />}
    </>
  );
}

function PlanComparison({ onClose, nav, showToast }) {
  const s = AM.supplierById.s1;
  const rows = [
    ["Marketplace listing & search", true, true, true],
    ["Product / service catalog", "Up to 10", "Unlimited", "Unlimited"],
    ["Inquiry inbox & messaging", true, true, true],
    ["Verified badge", false, true, true],
    ["AfricaMart-branded storefront", false, true, true],
    ["White-label storefront (own brand)", false, false, true],
    ["Custom domain", false, false, true],
    ["Editorial premium design", false, false, true],
    ["Priority search placement", false, false, true],
    ["Advanced analytics", false, true, "Advanced"],
    ["Dedicated account manager", false, false, true],
  ];
  const plans = [["Free", "$0"], ["Verified", "$39/mo"], ["Premium", "$149/mo"]];
  const cell = v => v === true ? <Icon name="check" size={16} style={{ color: "var(--green-600)" }} /> : v === false ? <Icon name="minus" size={15} style={{ color: "var(--ink-300)" }} /> : <span style={{ fontSize: 12.5, fontWeight: 600 }}>{v}</span>;
  return (
    <div onClick={onClose} style={{ position: "fixed", inset: 0, zIndex: 80, background: "rgba(13,27,42,.55)", backdropFilter: "blur(3px)", display: "flex", alignItems: "center", justifyContent: "center", padding: 20 }}>
      <div onClick={e => e.stopPropagation()} className="route-anim thin-scroll" style={{ background: "#fff", borderRadius: 16, width: "min(680px,100%)", maxHeight: "90vh", overflow: "auto", boxShadow: "var(--sh-lg)" }}>
        <div style={{ padding: "20px 24px", borderBottom: "1px solid var(--border)", display: "flex", alignItems: "center", position: "sticky", top: 0, background: "#fff", zIndex: 1 }}>
          <h3 style={{ fontSize: 19 }}>Storefront plans</h3>
          <button onClick={onClose} style={{ marginLeft: "auto" }}><Icon name="x" size={22} style={{ color: "var(--ink-500)" }} /></button>
        </div>
        <table style={{ width: "100%", borderCollapse: "collapse", fontSize: 13.5 }}>
          <thead>
            <tr>
              <th style={{ textAlign: "left", padding: "14px 16px" }} />
              {plans.map(([name, price], i) => (
                <th key={name} style={{ padding: "14px 12px", textAlign: "center", background: i === 2 ? "var(--gold-50)" : "transparent", borderTopLeftRadius: i === 2 ? 10 : 0, borderTopRightRadius: i === 2 ? 10 : 0 }}>
                  <div style={{ fontSize: 14.5, fontWeight: 700, display: "flex", alignItems: "center", justifyContent: "center", gap: 5 }}>{i === 2 && <Icon name="crown" size={13} style={{ color: "var(--gold-600)" }} />}{name}</div>
                  <div className="muted" style={{ fontSize: 12, fontWeight: 600, marginTop: 2 }}>{price}</div>
                </th>
              ))}
            </tr>
          </thead>
          <tbody>
            {rows.map((r, ri) => (
              <tr key={ri} style={{ borderTop: "1px solid var(--border)" }}>
                <td style={{ padding: "11px 16px", color: "var(--ink-700)" }}>{r[0]}</td>
                {[1, 2, 3].map(ci => <td key={ci} style={{ padding: "11px 12px", textAlign: "center", background: ci === 3 ? "var(--gold-50)" : "transparent" }}>{cell(r[ci])}</td>)}
              </tr>
            ))}
          </tbody>
        </table>
        <div style={{ padding: "18px 24px", borderTop: "1px solid var(--border)", display: "flex", gap: 12, justifyContent: "flex-end", flexWrap: "wrap" }}>
          <button className="btn btn-ghost" onClick={() => { onClose(); nav("store", { slug: s.slug, variant: "premium" }); }}><Icon name="eye" size={16} /> Preview premium</button>
          <button className="btn btn-gold" onClick={() => { onClose(); showToast("Upgrade flow — premium storefront"); }}><Icon name="crown" size={16} /> Upgrade to Premium</button>
        </div>
      </div>
    </div>
  );
}

/* ---------- Store manager (supplier) ---------- */
function StoreManager({ nav, showToast }) {
  const s = AM.supplierById.s1;
  return (
    <>
      <DashHead title="Store page" sub={"africamart.com/store/" + s.slug} action={<button className="btn btn-ghost" onClick={() => nav("store", { slug: s.slug })}><Icon name="external-link" size={16} /> View store</button>} />
      {/* current plan + upgrade */}
      <div className="card" style={{ padding: 18, marginBottom: 18, display: "flex", alignItems: "center", gap: 14, flexWrap: "wrap" }}>
        <div style={{ width: 42, height: 42, borderRadius: 10, background: "var(--gold-100)", color: "var(--gold-700)", display: "flex", alignItems: "center", justifyContent: "center", flexShrink: 0 }}><Icon name="badge-check" size={22} /></div>
        <div style={{ flex: 1, minWidth: 200 }}>
          <div style={{ fontWeight: 700, fontSize: 15 }}>Your storefront plan: <span style={{ color: "var(--gold-700)" }}>Verified</span></div>
          <div className="muted" style={{ fontSize: 13 }}>AfricaMart-branded storefront · upgrade to Premium for a white-label brand site.</div>
        </div>
        <button className="btn btn-navy" onClick={() => nav("store", { slug: s.slug, variant: "premium" })}><Icon name="eye" size={15} /> Preview premium</button>
      </div>
      <PremiumUpsell nav={nav} showToast={showToast} />
      <div className="card" style={{ overflow: "hidden", marginBottom: 18 }}>
        <div style={{ height: 130, background: "linear-gradient(120deg, " + s.color + "dd, var(--navy-800))", position: "relative" }}>
          <button className="btn btn-ghost-light btn-sm" style={{ position: "absolute", right: 14, bottom: 14 }} onClick={() => showToast("Banner upload")}><Icon name="image" size={14} /> Change banner</button>
        </div>
        <div style={{ padding: 20, display: "flex", gap: 16, alignItems: "center" }}>
          <div style={{ width: 64, height: 64, borderRadius: 14, background: s.color + "22", color: s.color, display: "flex", alignItems: "center", justifyContent: "center", fontWeight: 800, fontSize: 22, marginTop: -44, border: "3px solid #fff" }}>SW</div>
          <div style={{ flex: 1 }}><div style={{ fontWeight: 700, fontSize: 16 }}>{s.name}</div><div className="muted" style={{ fontSize: 13 }}>Logo · 512×512 recommended</div></div>
          <button className="btn btn-ghost btn-sm" onClick={() => showToast("Logo upload")}><Icon name="upload" size={14} /> Change logo</button>
        </div>
      </div>
      <div className="card" style={{ padding: 22, display: "flex", flexDirection: "column", gap: 16 }}>
        <div><label className="field-label">Company description</label><textarea className="textarea" rows="3" defaultValue={s.bio} /></div>
        <div style={{ display: "grid", gridTemplateColumns: "1fr 1fr", gap: 14 }}>
          <div><label className="field-label">Payment terms</label><input className="input" defaultValue="T/T 30% advance, 70% on B/L" /></div>
          <div><label className="field-label">Shipping / delivery</label><input className="input" defaultValue="FOB Mombasa · DAP East Africa" /></div>
        </div>
        <div><label className="field-label">Certifications</label>
          <div style={{ display: "flex", gap: 8, flexWrap: "wrap" }}>
            {s.certs.map(c => <span key={c} className="badge badge-green"><Icon name="award" size={12} /> {c}</span>)}
            <button type="button" className="badge badge-gray" style={{ cursor: "pointer", border: "1px dashed var(--border-strong)" }}><Icon name="plus" size={12} /> Add</button>
          </div>
        </div>
        <div style={{ display: "flex", justifyContent: "flex-end" }}><button className="btn btn-gold" onClick={() => showToast("Store page saved")}>Save changes</button></div>
      </div>
    </>
  );
}

/* ---------- Settings ---------- */
function SettingsPane({ role, showToast }) {
  return (
    <>
      <DashHead title="Profile settings" sub="Manage your account and preferences" />
      <div style={{ display: "grid", gridTemplateColumns: "1fr 1fr", gap: 18, maxWidth: 880 }}>
        <div className="card" style={{ padding: 22 }}>
          <h3 style={{ fontSize: 16, marginBottom: 16 }}>Company info</h3>
          <div style={{ display: "flex", flexDirection: "column", gap: 14 }}>
            <div><label className="field-label">Company name</label><input className="input" defaultValue={role === "supplier" ? "Savannah Steel Works" : "Rift Valley Construction Ltd"} /></div>
            <div><label className="field-label">Country</label><select className="select" defaultValue="Kenya">{AM.COUNTRIES.map(c => <option key={c.code}>{c.name}</option>)}</select></div>
            <div><label className="field-label">Phone</label><input className="input" defaultValue="+254 712 000 000" /></div>
          </div>
        </div>
        <div className="card" style={{ padding: 22 }}>
          <h3 style={{ fontSize: 16, marginBottom: 16 }}>{role === "buyer" ? "Shipping address" : "Preferences"}</h3>
          <div style={{ display: "flex", flexDirection: "column", gap: 14 }}>
            {role === "buyer"
              ? <><div><label className="field-label">Address line</label><input className="input" defaultValue="Industrial Area, Nakuru" /></div>
                  <div><label className="field-label">Default delivery country</label><select className="select" defaultValue="Kenya">{AM.COUNTRIES.map(c => <option key={c.code}>{c.name}</option>)}</select></div></>
              : <><div><label className="field-label">Default currency</label><select className="select" defaultValue="USD">{Object.keys(AM.CURRENCIES).map(c => <option key={c}>{c}</option>)}</select></div>
                  <div><label className="field-label">Subscription plan</label><div style={{ display: "flex", alignItems: "center", gap: 10, marginTop: 4 }}><TierBadge tier="premium" /><a style={{ cursor: "pointer", fontSize: 13, color: "var(--navy-600)", fontWeight: 600 }}>Manage plan</a></div></div></>}
            <label style={{ display: "flex", alignItems: "center", gap: 9, fontSize: 14, marginTop: 4 }}><input type="checkbox" defaultChecked style={{ width: 15, height: 15, accentColor: "var(--navy-700)" }} /> Email notifications on new messages</label>
          </div>
        </div>
      </div>
      <div style={{ marginTop: 18 }}><button className="btn btn-gold" onClick={() => showToast("Settings saved")}>Save changes</button></div>
    </>
  );
}

Object.assign(window, { ChatPane, Bubble, ProductManager, AddProductModal, StoreManager, SettingsPane });