// Recursive MLS — Screen 2: Add / edit listing (form + live preview).
function ListingEditor({ go }) {
  const D = window.RC_DATA;
  const [f, setF] = useState({
    addr: "1408 Westover Rd", unit: "", city: "Austin", state: "TX", zip: "78703",
    type: "Single family", status: "Coming soon",
    price: 1875000, beds: 4, baths: 3.5, sqft: 3420, lot: 0.31, year: 2019, hoa: 0,
    desc: "Architect-designed modern home in Old Enfield with white-oak floors, a chef's kitchen, and a wall of glass opening to a level backyard with a heated pool.",
    photos: D.gallery(0),
  });
  const set = (k) => (e) => setF({ ...f, [k]: e.target.value });
  const setNum = (k) => (e) => setF({ ...f, [k]: e.target.value === "" ? "" : Number(e.target.value) });
  const features = ["Pool", "Chef's kitchen", "Hardwood floors", "Smart home", "EV charger", "Solar", "Guest suite", "Home office"];
  const [picked, setPicked] = useState(["Pool", "Chef's kitchen", "Hardwood floors", "Smart home"]);
  const toggle = (x) => setPicked(picked.includes(x) ? picked.filter((p) => p !== x) : [...picked, x]);

  // agent & brokerage (drive the required-field compliance rules)
  const [agent, setAgent] = useState({ name: "Alex Morgan", office: "Recursive Realty", phone: "(512) 555-0148", email: "alex@recursiverealty.com" });
  const setA = (k) => (e) => setAgent({ ...agent, [k]: e.target.value });
  const [certified, setCertified] = useState(false);

  // open houses scheduled on this listing
  const [ohDraft, setOhDraft] = useState({ date: "Sat, Jun 28", start: "1:00 PM", end: "4:00 PM", type: "Public" });
  const setOh = (k) => (e) => setOhDraft({ ...ohDraft, [k]: e.target.value });
  const [opens, setOpens] = useState([]);
  const scheduleOh = () => setOpens([...opens, { ...ohDraft, id: Date.now() }]);
  const removeOh = (id) => setOpens(opens.filter((o) => o.id !== id));
  const advertiseOh = (o) => window.location.assign("../../Recursive%20MLS%20-%20Marketing%20Kit.dc.html?mode=quick&event=openhouse");
  const nextOpen = opens[0];

  // ---- build the flat-RESO listing the compliance engine understands ----
  const C = window.RC_COMPLIANCE;
  const listing = {
    PublicRemarks: f.desc,
    Media: f.photos.map(() => ({ MediaCategory: "Photo" })),
    LivingArea: f.sqft, YearBuilt: f.year, LotSizeAcres: f.lot,
    ListOfficeName: agent.office, ListAgentFullName: agent.name,
    ListAgentDirectPhone: agent.phone, ListAgentEmail: agent.email,
  };
  const violations = C.getViolations(listing);
  const tips = C.getTips(listing);
  const sqft = C.verifySqft(`${f.addr} ${f.city} ${f.state}`, f.sqft);
  const highVios = violations.filter((v) => v.severity === "high").length;
  const sqftBlocks = sqft.state === "done" && sqft.sources.length > 0 && sqft.score < C.SQFT_MIN && !certified;
  const canPublish = highVios === 0 && !sqftBlocks;
  // count compliance items per section for inline flags
  const flagFor = (id) => {
    const v = violations.filter((x) => x.step === id).length;
    const t = tips.filter((x) => x.step === id).length;
    return { v, t };
  };

  const sections = [
    { id: "sec-details", label: "Property details", icon: "home" },
    { id: "sec-pricing", label: "Pricing & terms", icon: "tag" },
    { id: "sec-desc", label: "Description", icon: "align-left" },
    { id: "sec-photos", label: "Photos", icon: "image" },
    { id: "sec-features", label: "Features", icon: "sparkles" },
    { id: "sec-openhouse", label: "Open house", icon: "calendar-clock" },
    { id: "sec-agent", label: "Agent & brokerage", icon: "user-round" },
  ];
  const [active, setActive] = useState("sec-details");
  const jump = (id) => {
    setActive(id);
    const el = document.getElementById(id);
    if (!el) return;
    let sc = el.parentElement;
    while (sc && sc.scrollHeight <= sc.clientHeight) sc = sc.parentElement;
    if (sc) sc.scrollTo({ top: sc.scrollTop + el.getBoundingClientRect().top - sc.getBoundingClientRect().top - 16, behavior: "smooth" });
  };

  return (
    <div style={{ padding: "20px 30px 60px" }}>
      {/* header */}
      <div style={{ display: "flex", alignItems: "center", justifyContent: "space-between", flexWrap: "wrap", gap: 14, marginBottom: 18 }}>
        <div style={{ display: "flex", alignItems: "center", gap: 12 }}>
          <button onClick={() => go("dashboard")} style={{ border: "1px solid #e2e0d8", background: "#fff", borderRadius: 7, width: 36, height: 36, display: "flex", alignItems: "center", justifyContent: "center", cursor: "pointer" }}>
            <Icon name="arrow-left" size={17} color="#4a504a" />
          </button>
          <div>
            <h1 style={{ margin: 0, fontSize: 22, fontWeight: 600, letterSpacing: "-0.5px", color: "#1d241f" }}>New listing</h1>
            <p style={{ margin: "3px 0 0", fontSize: 13, color: "#8a8e88" }}>Draft · last saved 2 min ago</p>
          </div>
        </div>
        <div style={{ display: "flex", alignItems: "center", gap: 12 }}>
          <div style={{ display: "flex", alignItems: "center", gap: 8, padding: "7px 12px", borderRadius: 999,
            background: violations.length ? "#fbe9e7" : tips.length ? "#faf0e8" : "#e8f4ee" }}>
            <Icon name={violations.length ? "shield-alert" : tips.length ? "lightbulb" : "shield-check"} size={15}
              color={violations.length ? "#b3261e" : tips.length ? "#c0612f" : "#1f8a5b"} />
            <span style={{ fontSize: 12.5, fontWeight: 600, color: violations.length ? "#b3261e" : tips.length ? "#c0612f" : "#1f8a5b" }}>
              {violations.length ? `${violations.length} to fix` : tips.length ? `${tips.length} tips` : "Compliant"}
            </span>
          </div>
          <button style={btnOutline}>Save Draft</button>
          <button onClick={() => { if (canPublish) window.location.assign("../../Recursive%20MLS%20-%20Marketing%20Kit.dc.html?mode=quick"); }}
            style={{ ...btnPrimary, opacity: canPublish ? 1 : 0.45, cursor: canPublish ? "pointer" : "not-allowed" }} disabled={!canPublish}
            title={canPublish ? "Publish — then share it on social" : highVios ? "Resolve compliance violations before publishing" : "Verify or certify square footage before publishing"}>
            <Icon name={canPublish ? "check" : "lock"} size={15} color="#fff" /> Publish
          </button>
        </div>
      </div>

      {/* layout: nav | form | preview */}
      <div className="le-grid" style={{ display: "grid", gridTemplateColumns: "186px 1fr", gap: 22, alignItems: "start" }}>
        {/* section nav */}
        <div className="le-nav" style={{ position: "sticky", top: 20, display: "flex", flexDirection: "column", gap: 2 }}>
          {sections.map((s) => {
            const fl = flagFor(s.id);
            return (
            <a key={s.id} href={`#${s.id}`} onClick={(e) => { e.preventDefault(); jump(s.id); }}
              style={{ display: "flex", alignItems: "center", gap: 10, padding: "9px 11px", borderRadius: 7, textDecoration: "none",
                fontSize: 13.5, fontWeight: active === s.id ? 600 : 400, color: active === s.id ? "#006747" : "#4a504a", background: active === s.id ? "#eef4f1" : "transparent" }}>
              <Icon name={s.icon} size={16} color={active === s.id ? "#006747" : "#a8aca6"} /> <span style={{ flex: 1 }}>{s.label}</span>
              {fl.v > 0 && <span style={{ width: 7, height: 7, borderRadius: "50%", background: "#b3261e", flex: "none" }} />}
              {fl.v === 0 && fl.t > 0 && <span style={{ width: 7, height: 7, borderRadius: "50%", background: "#d97757", flex: "none" }} />}
            </a>
            );
          })}
        </div>

        <div className="le-split" style={{ display: "grid", gridTemplateColumns: "minmax(0,1fr) 400px", gap: 22, alignItems: "start", minWidth: 0 }}>
        {/* FORM */}
        <div style={{ display: "flex", flexDirection: "column", gap: 16, minWidth: 0 }}>
          <FormCard id="sec-details" title="Property details" flag={flagFor("sec-details")}>
            <Field label="Street address" wide><input style={inp} value={f.addr} onChange={set("addr")} /></Field>
            <div style={row}>
              <Field label="Unit / Apt"><input style={inp} value={f.unit} onChange={set("unit")} placeholder="—" /></Field>
              <Field label="City"><input style={inp} value={f.city} onChange={set("city")} /></Field>
              <Field label="State"><input style={inp} value={f.state} onChange={set("state")} /></Field>
              <Field label="ZIP"><input style={inp} value={f.zip} onChange={set("zip")} /></Field>
            </div>
            <div style={row}>
              <Field label="Property type"><Select value={f.type} onChange={set("type")} opts={["Single family", "Condo", "Townhome", "Multi-family", "Land"]} /></Field>
              <Field label="Status"><Select value={f.status} onChange={set("status")} opts={["Coming soon", "Active", "Pending", "Sold"]} /></Field>
              <Field label="Year built"><input style={inp} type="number" value={f.year} onChange={setNum("year")} /></Field>
            </div>
            <div style={row}>
              <Field label="Beds"><input style={inp} type="number" value={f.beds} onChange={setNum("beds")} /></Field>
              <Field label="Baths"><input style={inp} type="number" step="0.5" value={f.baths} onChange={setNum("baths")} /></Field>
              <Field label="Interior (sqft)"><input style={inp} type="number" value={f.sqft} onChange={setNum("sqft")} /></Field>
              <Field label="Lot (acres)"><input style={inp} type="number" step="0.01" value={f.lot} onChange={setNum("lot")} /></Field>
            </div>
            <SqftConfidence result={sqft} certified={certified} onCertify={setCertified} />
          </FormCard>

          <FormCard id="sec-pricing" title="Pricing & terms" flag={flagFor("sec-pricing")}>
            <div style={row}>
              <Field label="List price"><div style={{ position: "relative" }}><span style={inpAffix}>$</span><input style={{ ...inp, paddingLeft: 24, fontFamily: "'Space Mono', monospace", fontWeight: 700 }} type="number" value={f.price} onChange={setNum("price")} /></div></Field>
              <Field label="HOA / mo"><div style={{ position: "relative" }}><span style={inpAffix}>$</span><input style={{ ...inp, paddingLeft: 24 }} type="number" value={f.hoa} onChange={setNum("hoa")} /></div></Field>
            </div>
            <div style={{ fontSize: 12.5, color: "#8a8e88" }}>
              {f.sqft ? <>≈ <strong style={{ color: "#4a504a", fontFamily: "'Space Mono', monospace" }}>${Math.round(f.price / f.sqft)}</strong> / sqft</> : "Enter sqft to see price per foot"}
            </div>
          </FormCard>

          <FormCard id="sec-desc" title="Description" flag={flagFor("sec-desc")}>
            <textarea style={{ ...inp, height: 120, resize: "vertical", lineHeight: 1.55, fontFamily: "inherit" }} value={f.desc} onChange={set("desc")} />
            <div style={{ display: "flex", justifyContent: "space-between", fontSize: 12, color: "#a8aca6" }}>
              <span>{f.desc.trim().split(/\s+/).filter(Boolean).length} words · {f.desc.length} characters</span>
              <span style={{ display: "inline-flex", alignItems: "center", gap: 5, color: "#006747", fontWeight: 600, cursor: "pointer" }}><Icon name="sparkles" size={13} color="#006747" /> Improve with AI</span>
            </div>
          </FormCard>

          <FormCard id="sec-photos" title="Photos" flag={flagFor("sec-photos")}>
            <div style={{ display: "grid", gridTemplateColumns: "repeat(4, 1fr)", gap: 8 }}>
              {f.photos.map((p, i) => (
                <div key={i} style={{ position: "relative", aspectRatio: "4/3", borderRadius: 4, backgroundImage: `url(${p})`, backgroundSize: "cover", backgroundPosition: "center" }}>
                  {i === 0 && <span style={{ position: "absolute", top: 6, left: 6, fontSize: 9.5, fontWeight: 600, textTransform: "uppercase", letterSpacing: ".5px", background: "rgba(0,0,0,.6)", color: "#fff", padding: "2px 6px", borderRadius: 3 }}>Cover</span>}
                </div>
              ))}
              <div style={{ aspectRatio: "4/3", borderRadius: 4, border: "1.5px dashed #d9d7cd", display: "flex", flexDirection: "column", alignItems: "center", justifyContent: "center", gap: 5, color: "#8a8e88", cursor: "pointer" }}>
                <Icon name="upload" size={18} color="#8a8e88" />
                <span style={{ fontSize: 11.5 }}>Add</span>
              </div>
            </div>
            <div style={{ fontSize: 12, color: "#a8aca6", marginTop: 2 }}>Drag to reorder · first photo is the cover. JPG/PNG up to 25MB.</div>
          </FormCard>

          <FormCard id="sec-features" title="Features" flag={flagFor("sec-features")}>
            <div style={{ display: "flex", flexWrap: "wrap", gap: 8 }}>
              {features.map((x) => {
                const on = picked.includes(x);
                return (
                  <button key={x} onClick={() => toggle(x)} style={{ display: "inline-flex", alignItems: "center", gap: 6, fontFamily: "inherit", fontSize: 13, fontWeight: 500, cursor: "pointer",
                    padding: "7px 12px", borderRadius: 999, border: on ? "1px solid #006747" : "1px solid #e2e0d8", background: on ? "#eef4f1" : "#fff", color: on ? "#006747" : "#4a504a" }}>
                    {on && <Icon name="check" size={13} color="#006747" />}{x}
                  </button>
                );
              })}
            </div>
          </FormCard>

          <FormCard id="sec-openhouse" title="Open house">
            <div style={row}>
              <Field label="Date"><Select value={ohDraft.date} onChange={setOh("date")} opts={["Sat, Jun 28", "Sun, Jun 29", "Sat, Jul 5", "Sun, Jul 6", "Sat, Jul 12"]} /></Field>
              <Field label="Start"><Select value={ohDraft.start} onChange={setOh("start")} opts={["10:00 AM", "11:00 AM", "12:00 PM", "1:00 PM", "2:00 PM"]} /></Field>
              <Field label="End"><Select value={ohDraft.end} onChange={setOh("end")} opts={["1:00 PM", "2:00 PM", "3:00 PM", "4:00 PM", "5:00 PM"]} /></Field>
              <Field label="Type"><Select value={ohDraft.type} onChange={setOh("type")} opts={["Public", "Broker / agent", "By appointment"]} /></Field>
            </div>
            <div>
              <button onClick={scheduleOh} style={btnOutline}><Icon name="plus" size={15} color="#006747" /> Schedule open house</button>
            </div>
            {opens.length === 0 ? (
              <div style={{ fontSize: 12, color: "#a8aca6" }}>Scheduled open houses appear on the listing and the consumer property site. After scheduling, advertise it in one click.</div>
            ) : (
              <div style={{ display: "flex", flexDirection: "column", gap: 8 }}>
                {opens.map((o) => (
                  <div key={o.id} style={{ display: "flex", alignItems: "center", gap: 12, border: "1px solid #d6e7de", background: "#eef4f1", borderRadius: 8, padding: "11px 13px" }}>
                    <div style={{ width: 38, height: 38, borderRadius: 8, background: "#fff", display: "flex", alignItems: "center", justifyContent: "center", flex: "none" }}>
                      <Icon name="calendar-check" size={18} color="#006747" />
                    </div>
                    <div style={{ flex: 1, minWidth: 0 }}>
                      <div style={{ fontSize: 13.5, fontWeight: 600, color: "#1d241f" }}>{o.date} · {o.start}–{o.end}</div>
                      <div style={{ fontSize: 12, color: "#6b706a", marginTop: 1 }}>{o.type} open house · live on the listing &amp; property site</div>
                    </div>
                    <button onClick={() => advertiseOh(o)} title="Create social posts &amp; flyers for this open house" style={{ ...btnPrimary, padding: "8px 13px", fontSize: 12.5 }}>
                      <Icon name="megaphone" size={14} color="#fff" /> Advertise
                    </button>
                    <button onClick={() => removeOh(o.id)} title="Remove" style={{ border: "1px solid #d9d7cd", background: "#fff", borderRadius: 7, width: 34, height: 34, display: "flex", alignItems: "center", justifyContent: "center", cursor: "pointer", flex: "none" }}>
                      <Icon name="trash-2" size={15} color="#8a8e88" />
                    </button>
                  </div>
                ))}
              </div>
            )}
          </FormCard>

          <FormCard id="sec-agent" title="Agent & brokerage" flag={flagFor("sec-agent")}>
            <div style={row}>
              <Field label="Listing agent"><input style={inp} value={agent.name} onChange={setA("name")} placeholder="Full name" /></Field>
              <Field label="Brokerage"><input style={inp} value={agent.office} onChange={setA("office")} placeholder="Office name" /></Field>
            </div>
            <div style={row}>
              <Field label="Direct phone"><input style={inp} value={agent.phone} onChange={setA("phone")} placeholder="(000) 000-0000" /></Field>
              <Field label="Email"><input style={inp} value={agent.email} onChange={setA("email")} placeholder="name@brokerage.com" /></Field>
            </div>
            <div style={{ fontSize: 12, color: "#a8aca6" }}>Brokerage and agent name are required by MLS rules and must appear on the listing.</div>
          </FormCard>
        </div>

        {/* LIVE PREVIEW + COMPLIANCE */}
        <div className="le-preview" style={{ position: "sticky", top: 20, display: "flex", flexDirection: "column", gap: 16 }}>
          <CompliancePanel violations={violations} tips={tips} onJump={jump} />
          <div>
          <div style={{ fontSize: 10.5, fontWeight: 600, textTransform: "uppercase", letterSpacing: "1.2px", color: "#a8aca6", marginBottom: 9, display: "flex", alignItems: "center", gap: 6 }}>
            <Icon name="eye" size={13} color="#a8aca6" /> Live preview — buyer view
          </div>
          <div style={{ background: "#fff", borderRadius: 4, boxShadow: "0 2px 12px rgba(0,0,0,.08), inset 0 0 0 1px rgba(0,0,0,.06)", overflow: "hidden" }}>
            <div style={{ position: "relative", aspectRatio: "3/2", backgroundImage: `url(${f.photos[0]})`, backgroundSize: "cover", backgroundPosition: "center" }}>
              <span style={{ position: "absolute", top: 10, left: 10 }}><Pill tone={f.status === "Active" ? "active" : f.status === "Pending" ? "pending" : "new"}>{f.status}</Pill></span>
              <span style={{ position: "absolute", top: 10, right: 10, width: 30, height: 30, borderRadius: "50%", background: "rgba(255,255,255,.92)", display: "flex", alignItems: "center", justifyContent: "center" }}><Icon name="heart" size={15} color="#4a504a" /></span>
              <span style={{ position: "absolute", bottom: 10, right: 10, fontSize: 11, color: "#fff", background: "rgba(0,0,0,.55)", padding: "2px 8px", borderRadius: 3 }}>1 / {f.photos.length}</span>
            </div>
            <div style={{ padding: 16 }}>
              <div style={{ fontFamily: "'Space Mono', monospace", fontSize: 22, fontWeight: 700, color: "#1d241f", letterSpacing: "-0.5px" }}>{f.price ? D.usd(f.price) : "$—"}</div>
              <div style={{ display: "flex", gap: 14, fontSize: 13, color: "#4a504a", margin: "8px 0 10px" }}>
                <span><strong>{f.beds || "—"}</strong> bd</span><span style={{ color: "#e0ded6" }}>·</span>
                <span><strong>{f.baths || "—"}</strong> ba</span><span style={{ color: "#e0ded6" }}>·</span>
                <span><strong>{f.sqft ? f.sqft.toLocaleString() : "—"}</strong> sqft</span>
              </div>
              {nextOpen && (
                <div style={{ display: "flex", alignItems: "center", gap: 8, background: "#eef4f1", border: "1px solid #d6e7de", borderRadius: 6, padding: "7px 10px", margin: "0 0 10px" }}>
                  <Icon name="calendar-clock" size={14} color="#006747" />
                  <span style={{ fontSize: 12, fontWeight: 600, color: "#006747" }}>Open {nextOpen.date} · {nextOpen.start}–{nextOpen.end}</span>
                </div>
              )}
              <div style={{ fontSize: 14, fontWeight: 600, color: "#1d241f" }}>{f.addr || "Street address"}{f.unit ? ` #${f.unit}` : ""}</div>
              <div style={{ fontSize: 13, color: "#8a8e88", marginTop: 2 }}>{f.city}, {f.state} {f.zip}</div>
              <p style={{ fontSize: 12.5, color: "#6b706a", lineHeight: 1.55, margin: "11px 0 0", display: "-webkit-box", WebkitLineClamp: 3, WebkitBoxOrient: "vertical", overflow: "hidden" }}>{f.desc}</p>
              {picked.length > 0 && (
                <div style={{ display: "flex", flexWrap: "wrap", gap: 6, marginTop: 12 }}>
                  {picked.slice(0, 4).map((x) => (
                    <span key={x} style={{ fontSize: 11.5, color: "#4a504a", background: "#f4f3ef", border: "1px solid #ececec", borderRadius: 3, padding: "3px 8px" }}>{x}</span>
                  ))}
                  {picked.length > 4 && <span style={{ fontSize: 11.5, color: "#8a8e88", padding: "3px 4px" }}>+{picked.length - 4}</span>}
                </div>
              )}
              <div style={{ borderTop: "1px solid #f1f0ea", marginTop: 14, paddingTop: 11, display: "flex", alignItems: "center", gap: 9 }}>
                <div style={{ width: 26, height: 26, borderRadius: "50%", background: "#e7e1d4", color: "#006747", display: "flex", alignItems: "center", justifyContent: "center", fontSize: 11, fontWeight: 600 }}>AM</div>
                <span style={{ fontSize: 12, color: "#8a8e88" }}>Listed by Alex Morgan · Recursive Realty</span>
              </div>
            </div>
          </div>
          <div style={{ fontSize: 11.5, color: "#a8aca6", textAlign: "center", marginTop: 9 }}>Updates live as you edit the form</div>
          </div>
        </div>
        </div>
      </div>
    </div>
  );
}

// ---- form atoms ----
const inp = { width: "100%", boxSizing: "border-box", border: "1px solid #e2e0d8", borderRadius: 7, padding: "9px 11px", fontFamily: "inherit", fontSize: 13.5, color: "#1d241f", background: "#fff", outline: "none" };
const inpAffix = { position: "absolute", left: 11, top: "50%", transform: "translateY(-50%)", fontSize: 13.5, color: "#8a8e88", fontFamily: "'Space Mono', monospace" };
const row = { display: "flex", gap: 12, flexWrap: "wrap" };

function Field({ label, children, wide }) {
  return (
    <label style={{ display: "flex", flexDirection: "column", gap: 6, flex: wide ? "1 1 100%" : "1 1 0", minWidth: 90 }}>
      <span style={{ fontSize: 11.5, fontWeight: 600, color: "#6b706a", letterSpacing: ".2px" }}>{label}</span>
      {children}
    </label>
  );
}
function Select({ value, onChange, opts }) {
  return (
    <div style={{ position: "relative" }}>
      <select value={value} onChange={onChange} style={{ ...inp, appearance: "none", paddingRight: 30, cursor: "pointer" }}>
        {opts.map((o) => <option key={o}>{o}</option>)}
      </select>
      <span style={{ position: "absolute", right: 10, top: "50%", transform: "translateY(-50%)", pointerEvents: "none" }}><Icon name="chevron-down" size={15} color="#8a8e88" /></span>
    </div>
  );
}
function FormCard({ id, title, children, flag }) {
  const f = flag || { v: 0, t: 0 };
  return (
    <section id={id} style={{ background: "#fff", borderRadius: 3, boxShadow: "inset 0 0 0 1px rgba(0,0,0,.07)", scrollMarginTop: 16 }}>
      <div style={{ padding: "14px 18px", borderBottom: "1px solid #f1f0ea", display: "flex", alignItems: "center", justifyContent: "space-between", gap: 10 }}>
        <h2 style={{ margin: 0, fontSize: 15, fontWeight: 600, color: "#1d241f" }}>{title}</h2>
        <div style={{ display: "flex", gap: 7 }}>
          {f.v > 0 && (
            <span style={{ display: "inline-flex", alignItems: "center", gap: 5, fontSize: 11, fontWeight: 600, color: "#b3261e", background: "#fbe9e7", borderRadius: 999, padding: "3px 9px" }}>
              <Icon name="shield-alert" size={12} color="#b3261e" /> {f.v}
            </span>
          )}
          {f.t > 0 && (
            <span style={{ display: "inline-flex", alignItems: "center", gap: 5, fontSize: 11, fontWeight: 600, color: "#c0612f", background: "#faf0e8", borderRadius: 999, padding: "3px 9px" }}>
              <Icon name="lightbulb" size={12} color="#c0612f" /> {f.t}
            </span>
          )}
          {f.v === 0 && f.t === 0 && (
            <Icon name="circle-check" size={16} color="#1f8a5b" />
          )}
        </div>
      </div>
      <div style={{ padding: 18, display: "flex", flexDirection: "column", gap: 14 }}>{children}</div>
    </section>
  );
}

window.ListingEditor = ListingEditor;