// Quotes — list view + detail view (Send Now vs Add to SmartSend)

const QUOTES = [
  { id: "Q-982712", customer: "Acme Industrial",     contact: "Jenna Park",   opp: "Spare Parts Restock",     stage: "Finalized",   amount: 4280,   lines: 6,  created: "May 12, 2026", expires: "Jun 11, 2026", owner: { initials: "NM", color: "#76ADFF" }, sentVia: null,         hasJourney: false },
  { id: "Q-982705", customer: "Helix Manufacturing", contact: "Devon Cruz",   opp: "Press Line Service",      stage: "Finalized",   amount: 18900,  lines: 12, created: "May 12, 2026", expires: "Jun 11, 2026", owner: { initials: "DC", color: "#22863A" }, sentVia: null,         hasJourney: false },
  { id: "Q-982698", customer: "Northwave Logistics", contact: "Marcus Lee",   opp: "Yard Cameras Phase 2",    stage: "Finalized",   amount: 31200,  lines: 18, created: "May 11, 2026", expires: "Jun 10, 2026", owner: { initials: "NM", color: "#76ADFF" }, sentVia: null,         hasJourney: false },
  { id: "Q-982601", customer: "Acme Industrial",     contact: "Jenna Park",   opp: "Annual Lubricant Supply", stage: "Needs Review",amount: 9400,   lines: 18, created: "May 10, 2026", expires: "Jun 09, 2026", owner: { initials: "NM", color: "#76ADFF" }, sentVia: null,         hasJourney: false, flag: "Pricing approval pending" },
  { id: "Q-982544", customer: "Acme Industrial",     contact: "Jenna Park",   opp: "Warehouse 2 Lift Upgrade",stage: "In SmartSend",amount: 56200,  lines: 8,  created: "May 09, 2026", expires: "Jun 08, 2026", owner: { initials: "NM", color: "#76ADFF" }, sentVia: "batch:ss-acme", hasJourney: false },
  { id: "Q-982511", customer: "Acme Industrial",     contact: "Jenna Park",   opp: "Plant 4 Conveyor Refit",  stage: "In SmartSend",amount: 12700,  lines: 4,  created: "May 09, 2026", expires: "Jun 08, 2026", owner: { initials: "NM", color: "#76ADFF" }, sentVia: "batch:ss-acme", hasJourney: false },
  { id: "Q-982510", customer: "Acme Industrial",     contact: "Jenna Park",   opp: "Plant 4 Conveyor Refit",  stage: "In SmartSend",amount: 84500,  lines: 12, created: "May 09, 2026", expires: "Jun 08, 2026", owner: { initials: "NM", color: "#76ADFF" }, sentVia: "batch:ss-acme", hasJourney: false },
  { id: "Q-982488", customer: "Northwave Logistics", contact: "Marcus Lee",   opp: "Fleet Telematics Rollout",stage: "Sent",        amount: 138200, lines: 22, created: "May 08, 2026", expires: "Jun 07, 2026", owner: { initials: "NM", color: "#76ADFF" }, sentVia: "individual", hasJourney: true,  sentAt: "May 09, 9:14 am" },
  { id: "Q-982010", customer: "Orbital Foods",       contact: "Priya Shah",   opp: "Sanitation Supplies Q3",  stage: "Accepted",    amount: 14750,  lines: 22, created: "Apr 27, 2026", expires: "May 27, 2026", owner: { initials: "KN", color: "#7B3DCC" }, sentVia: "batch:ss-orbital", hasJourney: false, sentAt: "Apr 28, 4:11 pm" },
  { id: "Q-981995", customer: "Orbital Foods",       contact: "Priya Shah",   opp: "Cold Storage Retrofit",   stage: "Accepted",    amount: 38400,  lines: 5,  created: "Apr 27, 2026", expires: "May 27, 2026", owner: { initials: "KN", color: "#7B3DCC" }, sentVia: "batch:ss-orbital", hasJourney: false, sentAt: "Apr 28, 4:11 pm" },
  { id: "Q-981990", customer: "Orbital Foods",       contact: "Priya Shah",   opp: "Cold Storage Retrofit",   stage: "Accepted",    amount: 212000, lines: 14, created: "Apr 27, 2026", expires: "May 27, 2026", owner: { initials: "KN", color: "#7B3DCC" }, sentVia: "batch:ss-orbital", hasJourney: false, sentAt: "Apr 28, 4:11 pm" },
  { id: "Q-981820", customer: "Tannin Brewing",      contact: "Sam Ortega",   opp: "Compressor Replacement",  stage: "Declined",    amount: 78000,  lines: 6,  created: "Apr 02, 2026", expires: "May 02, 2026", owner: { initials: "DC", color: "#22863A" }, sentVia: "individual", hasJourney: false, sentAt: "Apr 03, 2:30 pm" },
];

// Canonical lifecycle — drives the lifecycle widget on the quote detail page.
const LIFECYCLE = [
  { id: "Draft",              label: "Draft",              icon: "pen",     terminal: false },
  { id: "Queued to SmartSend",label: "Queued to SmartSend",icon: "layers",  terminal: false },
  { id: "Sent to Customer",   label: "Sent to Customer",   icon: "send",    terminal: false },
  { id: "Customer Accepted",  label: "Customer Accepted",  icon: "check",   terminal: true, success: true },
  { id: "Closed - Won",       label: "Closed — Won",       icon: "trophy",  terminal: true, success: true },
  { id: "Customer Rejected",  label: "Customer Rejected",  icon: "cross",   terminal: true },
  { id: "Expired",            label: "Expired",            icon: "clock",   terminal: true },
  { id: "Cancelled",          label: "Cancelled",          icon: "archive", terminal: true },
];

// Map legacy seed stages → lifecycle status
const LEGACY_TO_LIFECYCLE = {
  "Draft":         "Draft",
  "Needs Review":  "Draft",
  "Finalized":     "Draft",
  "In SmartSend":  "Queued to SmartSend",
  "Sent":          "Sent to Customer",
  "Accepted":      "Customer Accepted",
  "Declined":      "Customer Rejected",
};

const QUOTE_STAGE_META = {
  "Draft":         { tone: "neutral", dot: true,  color: "#A3ACBA" },
  "Needs Review":  { tone: "warning", dot: true,  color: "#C0691A" },
  "Finalized":     { tone: "success", dot: true,  color: "#22863A" },
  "In SmartSend":  { tone: "info",    dot: true,  color: "#534AFF" },
  "Sent":          { tone: "info",    dot: false, color: "#3B7FFF" },
  "Accepted":      { tone: "success", dot: false, color: "#22863A" },
  "Declined":      { tone: "neutral", dot: false, color: "#6A7383" },
};

const fmt$ = (n) => "$" + n.toLocaleString("en-US");

// --------------------- LIST ---------------------

const QuotesListPage = ({ onOpen }) => {
  const [stage, setStage] = React.useState("all");
  const [search, setSearch] = React.useState("");

  let filtered = QUOTES;
  if (stage !== "all") filtered = filtered.filter((q) => q.stage === stage);
  if (search) {
    const s = search.toLowerCase();
    filtered = filtered.filter((q) =>
      q.id.toLowerCase().includes(s) ||
      q.customer.toLowerCase().includes(s) ||
      q.opp.toLowerCase().includes(s)
    );
  }

  const totals = {
    finalized: QUOTES.filter((q) => q.stage === "Finalized" || q.stage === "Needs Review").length,
    inBatch:   QUOTES.filter((q) => q.stage === "In SmartSend").length,
    sent30:    QUOTES.filter((q) => q.stage === "Sent" || q.stage === "Accepted" || q.stage === "Declined").length,
    openValue: QUOTES.filter((q) => q.stage !== "Declined").reduce((s, q) => s + q.amount, 0),
  };

  const stages = ["all", "Needs Review", "Finalized", "In SmartSend", "Sent", "Accepted", "Declined"];

  return (
    <div data-screen-label="04 Quotes" style={{ padding: "24px 28px" }}>
      <div style={{ display: "flex", alignItems: "flex-start", justifyContent: "space-between", gap: 16, marginBottom: 18 }}>
        <div>
          <div style={{ fontSize: 12, color: "var(--mw-text-tertiary)", display: "flex", alignItems: "center", gap: 6 }}>
            <span>Sales</span>
            <Icon name="chevronRight" size={12} opacity={0.5} />
            <span>Quotes</span>
          </div>
          <div style={{ display: "flex", alignItems: "center", gap: 10, marginTop: 6 }}>
            <h1 className="mw-h1" style={{ fontSize: 26, margin: 0 }}>Quotes</h1>
            <Chip tone="info">{QUOTES.length} total</Chip>
          </div>
          <div style={{ fontSize: 13, color: "var(--mw-text-tertiary)", marginTop: 6 }}>
            Finalize a quote, then send it directly to the customer or add it to a SmartSend package for consolidated delivery.
          </div>
        </div>
        <div style={{ display: "flex", gap: 8 }}>
          <Button kind="secondary" icon="download">Export</Button>
          <Button kind="primary" icon="plus">New Quote</Button>
        </div>
      </div>

      <div style={{ display: "grid", gridTemplateColumns: "repeat(4, 1fr)", gap: 12, marginBottom: 18 }}>
        {[
          { l: "Ready to Send",   v: totals.finalized,         icon: "check", tone: "success" },
          { l: "In SmartSend",    v: totals.inBatch,           icon: "layers", tone: "info" },
          { l: "Sent (30d)",      v: totals.sent30,            icon: "send", tone: "info" },
          { l: "Open Quote Value",v: "$" + (totals.openValue / 1000).toFixed(0) + "k", icon: "calculator", tone: "warning" },
        ].map((s, i) => (
          <div key={i} className="mw-card" style={{ padding: 14, display: "flex", alignItems: "center", gap: 12 }}>
            <span style={{
              width: 32, height: 32, borderRadius: 8, flexShrink: 0,
              background: s.tone === "success" ? "#DAF0E0" : s.tone === "warning" ? "#FFF9E0" : "#E8E9F6",
              display: "inline-flex", alignItems: "center", justifyContent: "center",
            }}>
              <Icon name={s.icon} size={16} opacity={0.7} />
            </span>
            <div>
              <div style={{ fontSize: 22, fontWeight: 600, lineHeight: 1, fontVariantNumeric: "tabular-nums" }}>{s.v}</div>
              <div style={{ fontSize: 11, color: "var(--mw-text-tertiary)", marginTop: 4, textTransform: "uppercase", letterSpacing: 0.5, fontWeight: 600 }}>{s.l}</div>
            </div>
          </div>
        ))}
      </div>

      <div style={{ display: "flex", alignItems: "center", gap: 10, marginBottom: 14, flexWrap: "wrap" }}>
        <div style={{ position: "relative", width: 280 }}>
          <Icon name="search" size={14} style={{ position: "absolute", left: 10, top: 8, opacity: 0.5 }} />
          <input className="mw-input" placeholder="Search quotes, customers, opportunities…"
                 value={search} onChange={(e) => setSearch(e.target.value)}
                 style={{ width: "100%", paddingLeft: 32, height: 30 }} />
        </div>
        {stages.map((s) => (
          <button key={s} onClick={() => setStage(s)} style={{
            padding: "5px 10px", fontSize: 12, borderRadius: 9999,
            border: stage === s ? "1px solid var(--mw-brand-500)" : "1px solid var(--mw-border)",
            background: stage === s ? "var(--mw-brand-50)" : "#fff",
            color: stage === s ? "var(--mw-brand-500)" : "var(--mw-text-secondary)",
            cursor: "pointer", fontWeight: 500,
          }}>{s === "all" ? `All (${QUOTES.length})` : `${s} (${QUOTES.filter((q) => q.stage === s).length})`}</button>
        ))}
      </div>

      <div className="mw-card" style={{ padding: 0, overflow: "hidden" }}>
        <table className="mw-table">
          <thead>
            <tr>
              <th style={{ width: 28 }}><input type="checkbox" /></th>
              <th>Quote #</th>
              <th>Customer / Contact</th>
              <th>Opportunity</th>
              <th>Stage</th>
              <th style={{ textAlign: "right" }}>Amount</th>
              <th>Created</th>
              <th>Expires</th>
              <th>Delivery</th>
              <th>Owner</th>
              <th style={{ width: 32 }}></th>
            </tr>
          </thead>
          <tbody>
            {filtered.map((q, i) => {
              const m = QUOTE_STAGE_META[q.stage];
              return (
                <tr key={q.id} onClick={() => onOpen && onOpen(q)} style={{ animation: `mw-row-in 240ms ${i * 25}ms var(--mw-ease) both`, cursor: "pointer" }}>
                  <td><input type="checkbox" onClick={(e) => e.stopPropagation()} /></td>
                  <td>
                    <div style={{ display: "flex", alignItems: "center", gap: 10 }}>
                      <span style={{ width: 28, height: 28, borderRadius: 6, background: "#FCE2E2", color: "#C02F32", display: "inline-flex", alignItems: "center", justifyContent: "center", fontSize: 9, fontWeight: 700, flexShrink: 0 }}>PDF</span>
                      <div>
                        <div style={{ fontSize: 13, fontWeight: 600, fontFamily: "var(--mw-font-mono)" }}>{q.id}</div>
                        <div style={{ fontSize: 11, color: "var(--mw-text-tertiary)" }}>{q.lines} line item{q.lines !== 1 ? "s" : ""}</div>
                      </div>
                    </div>
                  </td>
                  <td>
                    <div style={{ fontSize: 13, color: "var(--mw-text-secondary)" }}>{q.customer}</div>
                    <div style={{ fontSize: 11, color: "var(--mw-text-tertiary)" }}>{q.contact}</div>
                  </td>
                  <td>
                    <span style={{
                      display: "inline-flex", alignItems: "center", gap: 4,
                      padding: "2px 8px", borderRadius: 6, fontSize: 12,
                      background: "var(--mw-bg)", color: "var(--mw-text-secondary)",
                    }}>
                      <Icon name="branch" size={10} opacity={0.5} />
                      {q.opp}
                    </span>
                  </td>
                  <td><Chip tone={m.tone} dot={m.dot}>{q.stage}</Chip></td>
                  <td style={{ textAlign: "right", fontVariantNumeric: "tabular-nums", fontWeight: 600 }}>{fmt$(q.amount)}</td>
                  <td><span style={{ fontSize: 12, color: "var(--mw-text-secondary)" }}>{q.created}</span></td>
                  <td><span style={{ fontSize: 12, color: "var(--mw-text-tertiary)" }}>{q.expires}</span></td>
                  <td>
                    {q.sentVia === "individual" && <span style={{ fontSize: 11, color: "var(--mw-text-secondary)", display: "inline-flex", alignItems: "center", gap: 4 }}><Icon name="send" size={10} opacity={0.6} /> Individual</span>}
                    {q.sentVia && q.sentVia.startsWith("batch") && <span style={{ fontSize: 11, color: "var(--mw-brand-500)", display: "inline-flex", alignItems: "center", gap: 4 }}><Icon name="layers" size={10} color="brand" /> SmartSend</span>}
                    {!q.sentVia && <span style={{ fontSize: 11, color: "var(--mw-text-quaternary)" }}>—</span>}
                  </td>
                  <td><Avatar initials={q.owner.initials} color={q.owner.color} size={24} /></td>
                  <td><Icon name="more" size={14} opacity={0.5} /></td>
                </tr>
              );
            })}
          </tbody>
        </table>
      </div>
    </div>
  );
};

// --------------------- DETAIL ---------------------

const SAMPLE_LINES = [
  { sku: "CNV-2400", desc: "Belt conveyor section, 24\" × 10ft, stainless", qty: 4,  unit: 5800, total: 23200 },
  { sku: "MTR-150",  desc: "Drive motor, 1.5HP TEFC, with VFD pre-wire",    qty: 2,  unit: 1820, total: 3640  },
  { sku: "SVC-INST", desc: "Onsite installation labor (4 day estimate)",     qty: 32, unit: 165,  total: 5280  },
  { sku: "PKG-OPT",  desc: "Optional optical package, vision-guided",        qty: 1,  unit: 4900, total: 4900  },
  { sku: "WAR-EXT",  desc: "Extended warranty, 3-year, full parts & labor",  qty: 1,  unit: 2900, total: 2900  },
];

const QuoteDetailPage = ({ quote, onBack, onOpenPackage, onAddToBatch, onSentDirect }) => {
  const q = quote;
  const [sendOpen, setSendOpen] = React.useState(false);
  const [sendMode, setSendMode] = React.useState(null); // null | 'individual' | 'batch'
  const [status, setStatus] = React.useState(LEGACY_TO_LIFECYCLE[q.stage] || "Draft");
  const individualSent = status === "Sent to Customer" || status === "Customer Accepted" || status === "Closed - Won" || status === "Customer Rejected" || status === "Expired";
  const addedToBatch = status === "Queued to SmartSend";
  const m = QUOTE_STAGE_META[q.stage];

  // Find existing SmartSend package for this contact (if any)
  const existingPkg = (typeof SS_PACKAGES !== "undefined")
    ? SS_PACKAGES.find((p) => p.customer === q.customer)
    : null;

  const lines = SAMPLE_LINES;
  const subtotal = lines.reduce((s, l) => s + l.total, 0);
  const tax = Math.round(subtotal * 0.08);
  const total = subtotal + tax;

  const handleAddBatch = () => {
    setStatus("Queued to SmartSend");
    setSendOpen(false);
    setSendMode("batch");
  };
  const handleSendIndividual = () => {
    setStatus("Sent to Customer");
    setSendOpen(false);
    setSendMode("individual");
  };

  return (
    <div data-screen-label="04b Quote Detail" style={{ padding: "24px 28px" }}>
      {/* Header */}
      <div style={{ display: "flex", alignItems: "flex-start", justifyContent: "space-between", gap: 16, marginBottom: 18 }}>
        <div style={{ minWidth: 0 }}>
          <div style={{ fontSize: 12, color: "var(--mw-text-tertiary)", display: "flex", alignItems: "center", gap: 6 }}>
            <span style={{ cursor: "pointer" }} onClick={onBack}>Quotes</span>
            <Icon name="chevronRight" size={12} opacity={0.5} />
            <span style={{ fontFamily: "var(--mw-font-mono)" }}>{q.id}</span>
          </div>
          <div style={{ display: "flex", alignItems: "center", gap: 10, marginTop: 6 }}>
            <button onClick={onBack} style={{ width: 28, height: 28, borderRadius: 8, border: "1px solid var(--mw-border)", background: "#fff", cursor: "pointer", display: "inline-flex", alignItems: "center", justifyContent: "center" }}>
              <Icon name="chevronRight" size={14} style={{ transform: "rotate(180deg)" }} opacity={0.7} />
            </button>
            <h1 className="mw-h1" style={{ fontSize: 24, margin: 0, fontFamily: "var(--mw-font-mono)" }}>{q.id}</h1>
            <LifecycleChip status={status} />
            {q.flag && !individualSent && !addedToBatch && (
              <Chip tone="warning"><Icon name="infoCircle" size={10} /> <span style={{ marginLeft: 3 }}>{q.flag}</span></Chip>
            )}
          </div>
          <div style={{ fontSize: 13, color: "var(--mw-text-tertiary)", marginTop: 6 }}>
            {q.opp} · {q.customer} · {q.contact}
          </div>
        </div>
        <div style={{ display: "flex", gap: 8, alignItems: "center" }}>
          <Button kind="secondary" icon="pen">Edit</Button>
          <Button kind="secondary" icon="download">Download PDF</Button>
          {individualSent ? (
            <Button kind="secondary" icon="check" disabled>Sent</Button>
          ) : addedToBatch ? (
            <Button kind="secondary" icon="layers" disabled>In SmartSend Queue</Button>
          ) : (
            <Button kind="primary" icon="send" onClick={() => setSendOpen(true)}>Send Quote</Button>
          )}
        </div>
      </div>

      {/* Confirmation banners */}
      {individualSent && (
        <div style={{
          marginBottom: 14, padding: "10px 14px", borderRadius: 10,
          background: "#DAF0E0", border: "1px solid rgba(34, 134, 58, .25)",
          display: "flex", alignItems: "center", gap: 10,
        }}>
          <Icon name="check" size={16} color="brand" />
          <span style={{ fontSize: 13, color: "#22863A", fontWeight: 500 }}>
            Sent directly to {q.contact} ({q.customer}) · {q.sentAt || "just now"} · A "Quote Follow-Up" journey was activated for this quote.
          </span>
        </div>
      )}
      {addedToBatch && !individualSent && (
        <div style={{
          marginBottom: 14, padding: "10px 14px", borderRadius: 10,
          background: "rgba(83,74,255,.06)", border: "1px solid rgba(83,74,255,.25)",
          display: "flex", alignItems: "center", gap: 10,
        }}>
          <Icon name="layers" size={16} color="brand" />
          <span style={{ fontSize: 13, color: "var(--mw-brand-500)", fontWeight: 500 }}>
            Added to SmartSend package for {q.customer}. The quote will be sent with other finalized quotes for {q.contact}.
          </span>
          <div style={{ flex: 1 }} />
          <button onClick={() => existingPkg && onOpenPackage && onOpenPackage(existingPkg.id)} style={{
            fontSize: 12, fontWeight: 500, padding: "4px 10px", borderRadius: 6,
            border: "1px solid var(--mw-brand-500)", background: "#fff", color: "var(--mw-brand-500)", cursor: "pointer",
          }}>Open SmartSend Package</button>
        </div>
      )}

      {/* Lifecycle widget */}
      <LifecycleWidget status={status} onChange={setStatus} />

      <div style={{ display: "grid", gridTemplateColumns: "1.6fr 1fr", gap: 20 }}>
        {/* LEFT: Quote document preview */}
        <div className="mw-card" style={{ padding: 0, alignSelf: "flex-start", overflow: "hidden" }}>
          <div style={{ padding: "14px 18px", borderBottom: "1px solid var(--mw-border-soft)", display: "flex", alignItems: "center", justifyContent: "space-between" }}>
            <div style={{ display: "flex", alignItems: "center", gap: 10 }}>
              <span style={{ width: 24, height: 24, background: "#FCE2E2", color: "#C02F32", borderRadius: 5, display: "inline-flex", alignItems: "center", justifyContent: "center", fontSize: 9, fontWeight: 700 }}>PDF</span>
              <div>
                <div style={{ fontSize: 13, fontWeight: 600 }}>Quote Document</div>
                <div style={{ fontSize: 11, color: "var(--mw-text-tertiary)" }}>{q.id}.pdf · {lines.length} line items</div>
              </div>
            </div>
            <div style={{ display: "flex", gap: 6 }}>
              <Button kind="secondary" size="sm" icon="files">Preview</Button>
            </div>
          </div>

          <div style={{ padding: 22, background: "#fff" }}>
            <div style={{ display: "flex", justifyContent: "space-between", alignItems: "flex-start", marginBottom: 22 }}>
              <div>
                <div style={{ fontSize: 20, fontWeight: 700, letterSpacing: -0.3 }}>Quote</div>
                <div style={{ fontSize: 11, color: "var(--mw-text-tertiary)", marginTop: 2, fontFamily: "var(--mw-font-mono)" }}>{q.id}</div>
              </div>
              <div style={{ textAlign: "right" }}>
                <img src="assets/logo-mindworks-black.png" alt="Mindworks" style={{ height: 18 }} />
                <div style={{ fontSize: 10, color: "var(--mw-text-tertiary)", marginTop: 4 }}>Mindworks Industrial</div>
                <div style={{ fontSize: 10, color: "var(--mw-text-tertiary)" }}>240 Wharf St, Portland OR</div>
              </div>
            </div>

            <div style={{ display: "grid", gridTemplateColumns: "1fr 1fr 1fr", gap: 16, marginBottom: 18, fontSize: 11 }}>
              <div>
                <div style={{ color: "var(--mw-text-tertiary)", textTransform: "uppercase", letterSpacing: 0.5, fontWeight: 600, marginBottom: 4 }}>Bill To</div>
                <div style={{ fontSize: 12, fontWeight: 600 }}>{q.customer}</div>
                <div style={{ color: "var(--mw-text-secondary)" }}>{q.contact}</div>
              </div>
              <div>
                <div style={{ color: "var(--mw-text-tertiary)", textTransform: "uppercase", letterSpacing: 0.5, fontWeight: 600, marginBottom: 4 }}>Quote Date</div>
                <div style={{ fontSize: 12, color: "var(--mw-text-secondary)" }}>{q.created}</div>
                <div style={{ color: "var(--mw-text-tertiary)", textTransform: "uppercase", letterSpacing: 0.5, fontWeight: 600, marginTop: 8, marginBottom: 4 }}>Expires</div>
                <div style={{ fontSize: 12, color: "var(--mw-text-secondary)" }}>{q.expires}</div>
              </div>
              <div>
                <div style={{ color: "var(--mw-text-tertiary)", textTransform: "uppercase", letterSpacing: 0.5, fontWeight: 600, marginBottom: 4 }}>Opportunity</div>
                <div style={{ fontSize: 12, color: "var(--mw-text-secondary)" }}>{q.opp}</div>
                <div style={{ color: "var(--mw-text-tertiary)", textTransform: "uppercase", letterSpacing: 0.5, fontWeight: 600, marginTop: 8, marginBottom: 4 }}>Prepared By</div>
                <div style={{ fontSize: 12, color: "var(--mw-text-secondary)" }}>{q.owner.initials === "NM" ? "Nicole Maddox" : q.owner.initials === "DC" ? "Devon Cruz" : "Karim Nasser"}</div>
              </div>
            </div>

            <table style={{ width: "100%", borderCollapse: "collapse", fontSize: 12 }}>
              <thead>
                <tr style={{ background: "var(--mw-bg)" }}>
                  <th style={{ textAlign: "left", padding: "8px 10px", fontSize: 10, textTransform: "uppercase", letterSpacing: 0.5, color: "var(--mw-text-tertiary)", fontWeight: 600 }}>SKU</th>
                  <th style={{ textAlign: "left", padding: "8px 10px", fontSize: 10, textTransform: "uppercase", letterSpacing: 0.5, color: "var(--mw-text-tertiary)", fontWeight: 600 }}>Description</th>
                  <th style={{ textAlign: "right", padding: "8px 10px", fontSize: 10, textTransform: "uppercase", letterSpacing: 0.5, color: "var(--mw-text-tertiary)", fontWeight: 600 }}>Qty</th>
                  <th style={{ textAlign: "right", padding: "8px 10px", fontSize: 10, textTransform: "uppercase", letterSpacing: 0.5, color: "var(--mw-text-tertiary)", fontWeight: 600 }}>Unit</th>
                  <th style={{ textAlign: "right", padding: "8px 10px", fontSize: 10, textTransform: "uppercase", letterSpacing: 0.5, color: "var(--mw-text-tertiary)", fontWeight: 600 }}>Total</th>
                </tr>
              </thead>
              <tbody>
                {lines.map((l) => (
                  <tr key={l.sku} style={{ borderBottom: "1px solid var(--mw-border-soft)" }}>
                    <td style={{ padding: "10px", fontFamily: "var(--mw-font-mono)", fontSize: 11, color: "var(--mw-text-secondary)" }}>{l.sku}</td>
                    <td style={{ padding: "10px", color: "var(--mw-text-primary)" }}>{l.desc}</td>
                    <td style={{ padding: "10px", textAlign: "right", fontVariantNumeric: "tabular-nums" }}>{l.qty}</td>
                    <td style={{ padding: "10px", textAlign: "right", fontVariantNumeric: "tabular-nums" }}>{fmt$(l.unit)}</td>
                    <td style={{ padding: "10px", textAlign: "right", fontVariantNumeric: "tabular-nums", fontWeight: 600 }}>{fmt$(l.total)}</td>
                  </tr>
                ))}
              </tbody>
            </table>

            <div style={{ display: "flex", justifyContent: "flex-end", marginTop: 14 }}>
              <div style={{ width: 240, fontSize: 12 }}>
                <div style={{ display: "flex", justifyContent: "space-between", padding: "4px 0" }}>
                  <span style={{ color: "var(--mw-text-tertiary)" }}>Subtotal</span>
                  <span style={{ fontVariantNumeric: "tabular-nums" }}>{fmt$(subtotal)}</span>
                </div>
                <div style={{ display: "flex", justifyContent: "space-between", padding: "4px 0" }}>
                  <span style={{ color: "var(--mw-text-tertiary)" }}>Tax (8%)</span>
                  <span style={{ fontVariantNumeric: "tabular-nums" }}>{fmt$(tax)}</span>
                </div>
                <div style={{ display: "flex", justifyContent: "space-between", padding: "8px 0", borderTop: "1px solid var(--mw-border)", fontSize: 14, fontWeight: 600 }}>
                  <span>Total</span>
                  <span style={{ fontVariantNumeric: "tabular-nums" }}>{fmt$(total)}</span>
                </div>
              </div>
            </div>
          </div>
        </div>

        {/* RIGHT: Side rail */}
        <div style={{ display: "flex", flexDirection: "column", gap: 14 }}>
          {/* Delivery card */}
          <div className="mw-card" style={{ padding: 16 }}>
            <div style={{ display: "flex", alignItems: "center", gap: 6, marginBottom: 10 }}>
              <Icon name="send" size={14} opacity={0.7} />
              <span style={{ fontSize: 12, fontWeight: 600, color: "var(--mw-text-secondary)", textTransform: "uppercase", letterSpacing: 0.5 }}>Delivery</span>
            </div>
            {!individualSent && !addedToBatch && (
              <>
                <div style={{ fontSize: 13, color: "var(--mw-text-secondary)", marginBottom: 12, lineHeight: 1.5 }}>
                  This quote is finalized and ready to deliver. Choose how it goes out:
                </div>
                <div style={{ display: "flex", flexDirection: "column", gap: 10 }}>
                  <button onClick={() => { setSendMode("individual"); setSendOpen(true); }} style={{
                    textAlign: "left", padding: 12, border: "1px solid var(--mw-border)", borderRadius: 10, background: "#fff", cursor: "pointer",
                  }}>
                    <div style={{ display: "flex", alignItems: "center", gap: 8, marginBottom: 4 }}>
                      <Icon name="send" size={14} opacity={0.8} />
                      <span style={{ fontSize: 13, fontWeight: 600 }}>Send Directly</span>
                    </div>
                    <div style={{ fontSize: 12, color: "var(--mw-text-tertiary)", lineHeight: 1.4 }}>
                      Email this single quote to {q.contact} now. A follow-up journey will activate.
                    </div>
                  </button>
                  <button onClick={() => { setSendMode("batch"); setSendOpen(true); }} style={{
                    textAlign: "left", padding: 12, border: "1px solid rgba(83,74,255,.25)", borderRadius: 10,
                    background: "rgba(83,74,255,.04)", cursor: "pointer", position: "relative",
                  }}>
                    <div style={{ display: "flex", alignItems: "center", gap: 8, marginBottom: 4 }}>
                      <Icon name="layers" size={14} color="brand" />
                      <span style={{ fontSize: 13, fontWeight: 600, color: "var(--mw-brand-500)" }}>Add to SmartSend Queue</span>
                      {existingPkg && (
                        <Chip tone="info">existing package</Chip>
                      )}
                    </div>
                    <div style={{ fontSize: 12, color: "var(--mw-text-secondary)", lineHeight: 1.4 }}>
                      {existingPkg
                        ? `Bundle with ${existingPkg.quotes.length} other finalized quote${existingPkg.quotes.length !== 1 ? "s" : ""} for ${q.contact}.`
                        : `Hold this quote and send it bundled with other quotes for ${q.contact}.`}
                    </div>
                  </button>
                </div>
              </>
            )}
            {individualSent && (
              <div>
                <div style={{ fontSize: 13, color: "var(--mw-text-secondary)", marginBottom: 8 }}>Sent individually to {q.contact}.</div>
                <div style={{ fontSize: 12, color: "var(--mw-text-tertiary)" }}>{q.sentAt || "Just now"} · open tracking active</div>
              </div>
            )}
            {addedToBatch && !individualSent && (
              <div>
                <div style={{ fontSize: 13, color: "var(--mw-text-secondary)", marginBottom: 8 }}>In SmartSend package for {q.customer}.</div>
                <div style={{ fontSize: 12, color: "var(--mw-text-tertiary)" }}>Will release when the full package is sent.</div>
              </div>
            )}
          </div>

          {/* Customer card */}
          <div className="mw-card" style={{ padding: 16 }}>
            <div style={{ fontSize: 12, fontWeight: 600, color: "var(--mw-text-secondary)", textTransform: "uppercase", letterSpacing: 0.5, marginBottom: 10 }}>Customer</div>
            <div style={{ display: "flex", alignItems: "center", gap: 10 }}>
              <Avatar initials={q.contact.split(" ").map(w=>w[0]).join("")} color="#76ADFF" size={38} />
              <div>
                <div style={{ fontSize: 14, fontWeight: 600 }}>{q.contact}</div>
                <div style={{ fontSize: 12, color: "var(--mw-text-tertiary)" }}>{q.customer}</div>
              </div>
            </div>
          </div>

          {/* Activity */}
          <div className="mw-card" style={{ padding: 16 }}>
            <div style={{ fontSize: 12, fontWeight: 600, color: "var(--mw-text-secondary)", textTransform: "uppercase", letterSpacing: 0.5, marginBottom: 12 }}>Activity</div>
            <div style={{ display: "flex", flexDirection: "column", gap: 10, fontSize: 12 }}>
              {[
                addedToBatch  && { at: "Just now",      txt: `Added to SmartSend package`, icon: "layers", color: "var(--mw-brand-500)" },
                individualSent&& { at: q.sentAt||"Just now", txt: `Quote emailed to ${q.contact}`, icon: "send", color: "var(--mw-success)" },
                { at: q.created, txt: `Finalized by ${q.owner.initials === "NM" ? "Nicole Maddox" : "Owner"}`, icon: "check", color: "var(--mw-text-tertiary)" },
                { at: q.created, txt: "Quote drafted from opportunity", icon: "pen", color: "var(--mw-text-tertiary)" },
              ].filter(Boolean).map((a, i) => (
                <div key={i} style={{ display: "flex", gap: 10, alignItems: "flex-start" }}>
                  <span style={{ width: 22, height: 22, borderRadius: "50%", background: "var(--mw-bg)", display: "inline-flex", alignItems: "center", justifyContent: "center", flexShrink: 0 }}>
                    <Icon name={a.icon} size={11} opacity={0.7} />
                  </span>
                  <div style={{ flex: 1, minWidth: 0 }}>
                    <div style={{ color: "var(--mw-text-primary)" }}>{a.txt}</div>
                    <div style={{ fontSize: 11, color: "var(--mw-text-tertiary)", marginTop: 1 }}>{a.at}</div>
                  </div>
                </div>
              ))}
            </div>
          </div>
        </div>
      </div>

      {/* Send Modal */}
      {sendOpen && (
        <SendQuoteModal
          quote={q} mode={sendMode} existingPkg={existingPkg}
          onClose={() => setSendOpen(false)}
          onConfirmIndividual={handleSendIndividual}
          onConfirmBatch={handleAddBatch}
          onSwitchMode={(m) => setSendMode(m)}
        />
      )}
    </div>
  );
};

// --------------------- SEND MODAL ---------------------

const SendQuoteModal = ({ quote, mode, existingPkg, onClose, onConfirmIndividual, onConfirmBatch, onSwitchMode }) => {
  return (
    <div onClick={onClose} style={{
      position: "fixed", inset: 0, background: "rgba(20, 23, 30, .42)",
      display: "flex", alignItems: "center", justifyContent: "center", zIndex: 50,
      animation: "mw-row-in 200ms var(--mw-ease) both",
    }}>
      <div onClick={(e) => e.stopPropagation()} style={{
        width: 560, background: "#fff", borderRadius: 16, overflow: "hidden",
        boxShadow: "0 24px 48px rgba(20,23,30,.32)",
      }}>
        <div style={{ padding: "16px 20px", borderBottom: "1px solid var(--mw-border-soft)", display: "flex", alignItems: "center", gap: 10 }}>
          <Icon name={mode === "batch" ? "layers" : "send"} size={16} color={mode === "batch" ? "brand" : null} />
          <div style={{ flex: 1 }}>
            <div style={{ fontSize: 14, fontWeight: 600 }}>{mode === "batch" ? "Add to SmartSend Queue" : "Send Quote Directly"}</div>
            <div style={{ fontSize: 12, color: "var(--mw-text-tertiary)" }}>{quote.id} · {fmt$(quote.amount)} · {quote.contact}</div>
          </div>
          <button onClick={onClose} style={{ width: 28, height: 28, borderRadius: 8, border: 0, background: "transparent", cursor: "pointer" }}>
            <Icon name="cross" size={14} opacity={0.6} />
          </button>
        </div>

        <div style={{ padding: 20 }}>
          {/* Mode switcher */}
          <div style={{ display: "flex", border: "1px solid var(--mw-border)", borderRadius: 10, padding: 3, marginBottom: 18, background: "var(--mw-bg)" }}>
            {[
              { id: "individual", label: "Send Directly", icon: "send" },
              { id: "batch", label: "Add to SmartSend", icon: "layers" },
            ].map((o) => (
              <button key={o.id} onClick={() => onSwitchMode(o.id)} style={{
                flex: 1, padding: "8px 10px", borderRadius: 7, border: 0,
                background: mode === o.id ? "#fff" : "transparent",
                boxShadow: mode === o.id ? "0 1px 2px rgba(0,0,0,.06)" : "none",
                fontSize: 12, fontWeight: 600, cursor: "pointer",
                color: mode === o.id ? "var(--mw-text-primary)" : "var(--mw-text-tertiary)",
                display: "inline-flex", alignItems: "center", justifyContent: "center", gap: 6,
              }}>
                <Icon name={o.icon} size={12} opacity={mode === o.id ? 0.9 : 0.6} />
                {o.label}
              </button>
            ))}
          </div>

          {mode === "individual" && (
            <div>
              <div style={{ fontSize: 13, color: "var(--mw-text-secondary)", lineHeight: 1.55, marginBottom: 14 }}>
                A single email containing <strong>{quote.id}</strong> will be sent to <strong>{quote.contact}</strong> at <span style={{ fontFamily: "var(--mw-font-mono)" }}>{quote.contact.split(" ")[0].toLowerCase()}@{quote.customer.toLowerCase().replace(/[^a-z]/g,"")}.com</span>. A <em>Quote Follow-Up</em> journey will automatically activate.
              </div>
              <div style={{ padding: 12, background: "var(--mw-bg)", borderRadius: 10, marginBottom: 14 }}>
                <div style={{ fontSize: 11, fontWeight: 600, color: "var(--mw-text-tertiary)", textTransform: "uppercase", letterSpacing: 0.5, marginBottom: 6 }}>Email Preview</div>
                <div style={{ fontSize: 12, lineHeight: 1.6 }}>
                  <div><span style={{ color: "var(--mw-text-tertiary)" }}>Subject:</span> Your quote from Mindworks — {quote.opp}</div>
                  <div style={{ marginTop: 8, color: "var(--mw-text-primary)" }}>Hi {quote.contact.split(" ")[0]}, please find your quote attached. Total: {fmt$(quote.amount)}. Valid through {quote.expires}.</div>
                </div>
              </div>
              {existingPkg && (
                <div style={{ padding: "8px 12px", borderRadius: 8, background: "#FFF9E0", border: "1px solid rgba(178,121,26,.25)", display: "flex", alignItems: "flex-start", gap: 8, marginBottom: 14 }}>
                  <Icon name="infoCircle" size={14} opacity={0.7} style={{ marginTop: 1 }} />
                  <div style={{ fontSize: 12, color: "#7a5212" }}>
                    Heads up — {quote.contact} has <strong>{existingPkg.quotes.length} other finalized quote{existingPkg.quotes.length !== 1 ? "s" : ""}</strong> already in a SmartSend package. Sending now would send this one separately.
                    <button onClick={() => onSwitchMode("batch")} style={{ marginLeft: 6, border: 0, background: "transparent", color: "var(--mw-brand-500)", fontWeight: 600, cursor: "pointer", padding: 0 }}>Switch to SmartSend →</button>
                  </div>
                </div>
              )}
            </div>
          )}

          {mode === "batch" && (
            <div>
              <div style={{ fontSize: 13, color: "var(--mw-text-secondary)", lineHeight: 1.55, marginBottom: 14 }}>
                {existingPkg
                  ? <>Bundle <strong>{quote.id}</strong> with the existing SmartSend package for <strong>{quote.contact}</strong>. The package will be reviewed and sent as a single consolidated email.</>
                  : <>Hold <strong>{quote.id}</strong> in a new SmartSend package for <strong>{quote.contact}</strong>. It will be sent when the package is reviewed and released.</>}
              </div>
              {existingPkg && (
                <div style={{ border: "1px solid var(--mw-border)", borderRadius: 10, overflow: "hidden", marginBottom: 14 }}>
                  <div style={{ padding: "10px 14px", background: "var(--mw-bg)", display: "flex", alignItems: "center", gap: 8 }}>
                    <Avatar initials={existingPkg.contact.initials} color={existingPkg.contact.color} size={28} />
                    <div style={{ flex: 1, minWidth: 0 }}>
                      <div style={{ fontSize: 13, fontWeight: 600 }}>{existingPkg.customer}</div>
                      <div style={{ fontSize: 11, color: "var(--mw-text-tertiary)" }}>{existingPkg.contact.name} · {existingPkg.quotes.length} quotes queued</div>
                    </div>
                    <Chip tone="info">existing</Chip>
                  </div>
                  <div style={{ padding: "10px 14px", display: "flex", flexDirection: "column", gap: 6 }}>
                    {existingPkg.quotes.slice(0, 3).map((qq) => (
                      <div key={qq.id} style={{ display: "flex", alignItems: "center", justifyContent: "space-between", fontSize: 12, color: "var(--mw-text-secondary)" }}>
                        <span style={{ fontFamily: "var(--mw-font-mono)" }}>{qq.id} <span style={{ color: "var(--mw-text-tertiary)" }}>· {qq.opp}</span></span>
                        <span style={{ fontVariantNumeric: "tabular-nums" }}>{fmt$(qq.amount)}</span>
                      </div>
                    ))}
                    {existingPkg.quotes.length > 3 && (
                      <div style={{ fontSize: 11, color: "var(--mw-text-tertiary)" }}>+ {existingPkg.quotes.length - 3} more</div>
                    )}
                    <div style={{ padding: "8px 0 0", borderTop: "1px dashed var(--mw-border)", marginTop: 4, display: "flex", justifyContent: "space-between", fontSize: 13, fontWeight: 600 }}>
                      <span>+ {quote.id} (this quote)</span>
                      <span style={{ color: "var(--mw-brand-500)", fontVariantNumeric: "tabular-nums" }}>{fmt$(quote.amount)}</span>
                    </div>
                  </div>
                </div>
              )}
              <div style={{ padding: "8px 12px", borderRadius: 8, background: "rgba(83,74,255,.06)", border: "1px solid rgba(83,74,255,.18)", display: "flex", alignItems: "flex-start", gap: 8 }}>
                <Icon name="infoCircle" size={14} color="brand" style={{ marginTop: 1 }} />
                <div style={{ fontSize: 12, color: "var(--mw-text-secondary)" }}>
                  The quote stays unsent until the SmartSend package is reviewed. You'll see it in the queue under <strong>{quote.customer}</strong>.
                </div>
              </div>
            </div>
          )}
        </div>

        <div style={{ padding: "14px 20px", borderTop: "1px solid var(--mw-border-soft)", display: "flex", justifyContent: "flex-end", gap: 8 }}>
          <Button kind="secondary" onClick={onClose}>Cancel</Button>
          {mode === "individual"
            ? <Button kind="primary" icon="send" onClick={onConfirmIndividual}>Send to {quote.contact.split(" ")[0]}</Button>
            : <Button kind="primary" icon="layers" onClick={onConfirmBatch}>{existingPkg ? "Add to Package" : "Start New Package"}</Button>}
        </div>
      </div>
    </div>
  );
};

// --------------------- LIFECYCLE WIDGET ---------------------

const lifecycleTone = (id) => {
  const stage = LIFECYCLE.find((s) => s.id === id);
  if (!stage) return { bg: "#E8E9F6", fg: "#534AFF", dotBg: "#534AFF" };
  if (stage.id === "Customer Rejected") return { bg: "#FCE2E2", fg: "#C02F32", dotBg: "#C02F32" };
  if (stage.id === "Expired")           return { bg: "#FFF9E0", fg: "#B2791A", dotBg: "#B2791A" };
  if (stage.id === "Cancelled")         return { bg: "#EEF0F4", fg: "#6A7383", dotBg: "#6A7383" };
  if (stage.success)                    return { bg: "#DAF0E0", fg: "#22863A", dotBg: "#22863A" };
  return { bg: "#E8E9F6", fg: "#534AFF", dotBg: "#534AFF" };
};

const LifecycleChip = ({ status }) => {
  const t = lifecycleTone(status);
  const s = LIFECYCLE.find((x) => x.id === status);
  return (
    <span style={{
      display: "inline-flex", alignItems: "center", gap: 6,
      padding: "3px 10px", borderRadius: 9999,
      background: t.bg, color: t.fg, fontSize: 12, fontWeight: 600,
    }}>
      <span style={{ width: 6, height: 6, borderRadius: "50%", background: t.dotBg }} />
      {s ? s.label : status}
    </span>
  );
};

const LifecycleWidget = ({ status, onChange }) => {
  const activeIdx = LIFECYCLE.findIndex((s) => s.id === status);
  // The happy-path spine: Draft → Queued to SmartSend → Sent to Customer → Customer Accepted → Closed - Won
  const HAPPY = ["Draft", "Queued to SmartSend", "Sent to Customer", "Customer Accepted", "Closed - Won"];
  const TERMINAL_OFF_PATH = ["Customer Rejected", "Expired", "Cancelled"];
  const onPath = HAPPY.includes(status);
  const happyIdx = HAPPY.indexOf(status);

  return (
    <div className="mw-card" style={{ padding: "16px 20px", marginBottom: 16 }}>
      <div style={{ display: "flex", alignItems: "center", justifyContent: "space-between", marginBottom: 14 }}>
        <div style={{ display: "flex", alignItems: "center", gap: 10 }}>
          <span style={{ fontSize: 11, fontWeight: 600, color: "var(--mw-text-tertiary)", textTransform: "uppercase", letterSpacing: 0.5 }}>Lifecycle</span>
          <LifecycleChip status={status} />
        </div>
        <div style={{ display: "flex", alignItems: "center", gap: 6 }}>
          <span style={{ fontSize: 11, color: "var(--mw-text-tertiary)" }}>Change status:</span>
          <select value={status} onChange={(e) => onChange(e.target.value)} style={{
            fontSize: 12, padding: "5px 10px", borderRadius: 8, border: "1px solid var(--mw-border)",
            background: "#fff", color: "var(--mw-text-primary)", cursor: "pointer",
          }}>
            {LIFECYCLE.map((s) => (
              <option key={s.id} value={s.id}>{s.label}</option>
            ))}
          </select>
        </div>
      </div>

      {/* Stepper */}
      <div style={{ display: "flex", alignItems: "stretch", gap: 0 }}>
        {HAPPY.map((id, i) => {
          const stage = LIFECYCLE.find((s) => s.id === id);
          const isActive = id === status;
          const isDone = onPath && i < happyIdx;
          const t = lifecycleTone(id);
          return (
            <React.Fragment key={id}>
              <button onClick={() => onChange(id)} style={{
                flex: 1, display: "flex", flexDirection: "column", alignItems: "center", gap: 6,
                padding: "4px 6px", border: 0, background: "transparent", cursor: "pointer",
              }}>
                <div style={{
                  width: 32, height: 32, borderRadius: "50%",
                  background: isActive ? t.dotBg : isDone ? "#DAF0E0" : "#fff",
                  border: isActive ? "none" : isDone ? "none" : "2px solid var(--mw-border-strong)",
                  color: isActive ? "#fff" : isDone ? "#22863A" : "var(--mw-text-tertiary)",
                  display: "inline-flex", alignItems: "center", justifyContent: "center",
                  boxShadow: isActive ? `0 4px 12px ${t.dotBg}33` : "none",
                  transition: "all 200ms var(--mw-ease)",
                }}>
                  {isDone ? <Icon name="check" size={14} /> : <Icon name={stage.icon} size={14} />}
                </div>
                <div style={{
                  fontSize: 11, fontWeight: isActive ? 600 : 500,
                  color: isActive ? "var(--mw-text-primary)" : isDone ? "var(--mw-text-secondary)" : "var(--mw-text-tertiary)",
                  textAlign: "center", lineHeight: 1.25, maxWidth: 110,
                }}>{stage.label}</div>
              </button>
              {i < HAPPY.length - 1 && (
                <div style={{ flex: "0 0 auto", display: "flex", alignItems: "center", paddingTop: 14, minWidth: 20 }}>
                  <div style={{
                    flex: 1, height: 2, borderRadius: 2,
                    background: isDone ? "#9FD7AC" : "var(--mw-border-strong)",
                  }} />
                </div>
              )}
            </React.Fragment>
          );
        })}
      </div>

      {/* Off-path terminal states */}
      <div style={{ display: "flex", alignItems: "center", gap: 8, marginTop: 14, paddingTop: 12, borderTop: "1px dashed var(--mw-border)" }}>
        <span style={{ fontSize: 11, color: "var(--mw-text-tertiary)", textTransform: "uppercase", letterSpacing: 0.5, fontWeight: 600 }}>Off-path</span>
        {TERMINAL_OFF_PATH.map((id) => {
          const stage = LIFECYCLE.find((s) => s.id === id);
          const isActive = id === status;
          const t = lifecycleTone(id);
          return (
            <button key={id} onClick={() => onChange(id)} style={{
              display: "inline-flex", alignItems: "center", gap: 6,
              padding: "4px 10px", borderRadius: 9999,
              background: isActive ? t.bg : "#fff",
              border: `1px solid ${isActive ? "transparent" : "var(--mw-border)"}`,
              color: isActive ? t.fg : "var(--mw-text-secondary)",
              fontSize: 12, fontWeight: isActive ? 600 : 500, cursor: "pointer",
            }}>
              <Icon name={stage.icon} size={11} opacity={isActive ? 0.9 : 0.6} />
              {stage.label}
            </button>
          );
        })}
      </div>
    </div>
  );
};

Object.assign(window, { QuotesListPage, QuoteDetailPage, QUOTES, LifecycleWidget, LifecycleChip });