// GuestMaker CRM B2B · deal side drawer (stage rail + six tabs).

function Field({ label, value, mono, tone, wide, children, hint }) {
  return (
    <div style={{ gridColumn: wide ? "span 2" : "auto" }}>
      <Mono size={9} color={FAINT} style={{ letterSpacing: "0.16em", fontWeight: 700 }}>{label.toUpperCase()}</Mono>
      <div style={{ marginTop: 3, fontSize: 12.5, fontWeight: 500, color: tone || INK, fontFamily: mono ? MONO : SANS, lineHeight: 1.4 }}>
        {children || (value ?? <span style={{ color: FAINT }}>,  not set , </span>)}
      </div>
      {hint && <div style={{ fontSize: 10.5, color: FAINT, marginTop: 2, lineHeight: 1.4 }}>{hint}</div>}
    </div>
  );
}
function MiniInput({ value, onChange, placeholder, width = "100%", mono = true }) {
  return <input value={value || ""} onChange={e => onChange(e.target.value)} placeholder={placeholder} style={{
    width, height: 27, borderRadius: 6, border: `1px solid ${RULE}`, background: SURFACE, padding: "0 8px",
    fontFamily: mono ? MONO : SANS, fontSize: 11.5, color: INK,
  }} />;
}
function MiniToggle({ on, onChange, label }) {
  return (
    <label style={{ display: "inline-flex", alignItems: "center", gap: 8, cursor: "pointer" }}>
      <span onClick={() => onChange(!on)} style={{ width: 32, height: 18, borderRadius: 999, background: on ? GREEN : "#ddd6cc", position: "relative", transition: "background .15s", flexShrink: 0 }}>
        <span style={{ position: "absolute", top: 2, left: on ? 16 : 2, width: 14, height: 14, borderRadius: "50%", background: "#fff", transition: "left .15s" }} />
      </span>
      <span style={{ fontSize: 11.5, color: on ? INK : DIM, fontWeight: 500 }}>{label}</span>
    </label>
  );
}
function SectionRule({ children }) {
  return (
    <div style={{ display: "flex", alignItems: "center", gap: 9, margin: "18px 0 12px" }}>
      <Mono size={9.5} color={FUCHSIA} style={{ letterSpacing: "0.18em", fontWeight: 700 }}>{children}</Mono>
      <span style={{ flex: 1, height: 1, background: RULE }} />
    </div>
  );
}

function StageRail({ deal, cfg, onMove }) {
  const pipeline = PIPE_BY_ID[deal.pid];
  const cur = stageIndex(deal.pid, deal.stage);
  return (
    <div style={{ display: "flex", alignItems: "stretch", gap: 3 }}>
      {pipeline.stages.map((s, i) => {
        const c = cfg[s.id];
        const done = i < cur, active = i === cur;
        return (
          <button key={s.id} onClick={() => onMove({ ...s, ...c })} title={`Move to ${s.name}`} style={{
            flex: s.cat === "lost" ? 0.7 : 1, minWidth: 0, cursor: "pointer", textAlign: "left",
            border: "none", padding: "7px 9px 7px 11px", position: "relative",
            background: active ? c.color : done ? c.color + "22" : PAPER,
            color: active ? "#fff" : done ? INK : DIM,
            clipPath: "polygon(0 0, calc(100% - 8px) 0, 100% 50%, calc(100% - 8px) 100%, 0 100%, 8px 50%)",
          }}>
            <div style={{ display: "flex", alignItems: "center", gap: 5 }}>
              <Mono size={9} color={active ? "#fff" : done ? c.color : FAINT} style={{ fontWeight: 700, letterSpacing: "0.1em", whiteSpace: "nowrap", overflow: "hidden", textOverflow: "ellipsis" }}>
                {s.name.split(", ")[0].trim().toUpperCase()}
              </Mono>
              {c.approval && <Icon name="lock" size={9} color={active ? "#fff" : FUCHSIA} />}
            </div>
            <Mono size={8.5} color={active ? "#ffffffcc" : FAINT}>{c.prob}%</Mono>
          </button>
        );
      })}
    </div>
  );
}

function TimelineItem({ tone, icon, title, meta, body, children }) {
  return (
    <div style={{ display: "flex", gap: 10 }}>
      <div style={{ display: "flex", flexDirection: "column", alignItems: "center", flexShrink: 0 }}>
        <span style={{ width: 22, height: 22, borderRadius: "50%", background: tone + "18", border: `1px solid ${tone}55`, display: "grid", placeItems: "center" }}>
          <Icon name={icon} size={11} color={tone} />
        </span>
        <span style={{ flex: 1, width: 1, background: RULE, marginTop: 3 }} />
      </div>
      <div style={{ paddingBottom: 14, flex: 1, minWidth: 0 }}>
        <div style={{ display: "flex", alignItems: "baseline", gap: 8, flexWrap: "wrap" }}>
          <span style={{ fontSize: 12.5, fontWeight: 600 }}>{title}</span>
          <Mono size={9.5} color={FAINT}>{meta}</Mono>
        </div>
        {body && <p style={{ fontSize: 12, color: DIM, lineHeight: 1.5, margin: "4px 0 0" }}>{body}</p>}
        {children}
      </div>
    </div>
  );
}

function DealDrawer({ deal, cfg, onClose, onMove, onPatch }) {
  const [tab, setTab] = useState("details");
  const [composer, setComposer] = useState(false);
  const [noteDraft, setNoteDraft] = useState("");
  const acc = ACC_BY_ID[deal.acc];
  const ct = deal.contact ? CT_BY_ID[deal.contact] : null;
  const stage = { ...PIPE_BY_ID[deal.pid].stages.find(s => s.id === deal.stage), ...cfg[deal.stage] };
  const mice = deal.pid === "mice";
  const f = deal.f || {};
  const notes = DEAL_NOTES[deal.id] || [];
  const emails = DEAL_EMAILS[deal.id] || [];
  const docs = DEAL_DOCS[deal.id] || [];
  const prop = DEAL_PROPOSAL[deal.id];
  const hist = DEAL_HISTORY[deal.id] || [
    { when: `${longDate(deal.created)} · 10:12`, who: deal.owner, what: `Deal created in ${PIPE_BY_ID[deal.pid].label}`, tone: DIM },
  ];
  const TABS = [["details", "Details", "list"], ["notes", "Notes & activity", "pin"], ["emails", "Emails", "mail"], ["proposal", "Proposal", "sign"], ["docs", "Documents", "file"], ["history", "History", "clock"]];

  return (
    <div style={{ position: "absolute", inset: 0, zIndex: 45, display: "flex", justifyContent: "flex-end" }}>
      <div onClick={onClose} style={{ position: "absolute", inset: 0, background: "rgba(26,20,26,0.28)" }} />
      <div style={{
        position: "relative", width: 560, maxWidth: "94%", background: SURFACE, borderLeft: `1px solid ${RULE}`,
        boxShadow: "-30px 0 70px -40px rgba(0,0,0,0.55)", display: "flex", flexDirection: "column",
        animation: "gm-slide-left .22s cubic-bezier(.22,.8,.3,1)",
      }}>
        {/* header */}
        <div style={{ padding: "14px 18px 0" }}>
          <div style={{ display: "flex", alignItems: "flex-start", gap: 10, marginBottom: 12 }}>
            <AccountBadge id={deal.acc} size={30} />
            <div style={{ flex: 1, minWidth: 0 }}>
              <h3 style={{ fontFamily: SERIF, fontSize: 19, fontWeight: 500, margin: 0, letterSpacing: "-0.015em", lineHeight: 1.2 }}>{deal.title}</h3>
              <div style={{ display: "flex", alignItems: "center", gap: 8, marginTop: 4, flexWrap: "wrap" }}>
                <Mono size={10} color={DIM}>{acc.name}</Mono>
                <Dot color={RULE} size={3} />
                <Mono size={10} color={DIM}>{PIPE_BY_ID[deal.pid].label}</Mono>
                {deal.tags?.map(t => (
                  <span key={t} style={{ background: PAPER, border: `1px solid ${RULE}`, borderRadius: 4, padding: "1px 6px" }}>
                    <Mono size={9} color={DIM}>{t}</Mono>
                  </span>
                ))}
              </div>
            </div>
            <button onClick={onClose} style={{ background: "none", border: "none", cursor: "pointer", padding: 4 }}><Icon name="x" size={15} color={FAINT} /></button>
          </div>
          <div style={{ display: "flex", alignItems: "baseline", gap: 14, marginBottom: 12 }}>
            <span style={{ fontFamily: MONO, fontSize: 25, fontWeight: 700, letterSpacing: "-0.03em" }}>{eurFull(deal.value)}</span>
            <span><Mono size={10} color={DIM}>WEIGHTED </Mono><Mono size={12} color={FUCHSIA_DARK} style={{ fontWeight: 700 }}>{eur(deal.value * stage.prob / 100)}</Mono></span>
            <span><Mono size={10} color={DIM}>CLOSE </Mono><Mono size={12} color={INK} style={{ fontWeight: 600 }}>{shortDate(deal.close)}</Mono></span>
            <div style={{ flex: 1 }} />
            <Avatar who={deal.owner} size={24} />
          </div>
          <StageRail deal={deal} cfg={cfg} onMove={onMove} />
          {deal.approval?.state === "pending" && (
            <div style={{ marginTop: 10, display: "flex", alignItems: "center", gap: 8, background: FUCHSIA_PALE + "50", border: `1px solid ${FUCHSIA_PALE}`, borderRadius: 7, padding: "8px 10px" }}>
              <Icon name="shield" size={12} color={FUCHSIA_DARK} />
              <span style={{ fontSize: 11.5, color: FUCHSIA_DARK, fontWeight: 600 }}>Approval pending · {USER_BY_ID[deal.approval.by].name}</span>
              <div style={{ flex: 1 }} />
              <Mono size={9.5} color={FUCHSIA_DARK}>REQUESTED {shortDate(deal.approval.requested)}</Mono>
            </div>
          )}
          {deal.lost && (
            <div style={{ marginTop: 10, background: "#FBEDED", border: "1px solid #EFD2D2", borderRadius: 7, padding: "8px 10px" }}>
              <div style={{ display: "flex", alignItems: "center", gap: 8 }}>
                <Icon name="thumb-d" size={12} color={RED} />
                <span style={{ fontSize: 11.5, color: RED, fontWeight: 600 }}>Lost · {deal.lost.reason}</span>
                {deal.lost.penalty ? <Mono size={10} color={RED}>PENALTY {eurFull(deal.lost.penalty)}</Mono> : null}
              </div>
              {deal.lost.note && <p style={{ fontSize: 11.5, color: DIM, margin: "6px 0 0", lineHeight: 1.45 }}>{deal.lost.note}</p>}
            </div>
          )}
          <div style={{ display: "flex", gap: 15, marginTop: 14, overflowX: "auto", borderBottom: `1px solid ${RULE}` }}>
            {TABS.map(([k, l, ic]) => (
              <button key={k} onClick={() => setTab(k)} style={{
                display: "inline-flex", alignItems: "center", gap: 6, padding: "0 1px 8px", background: "none", cursor: "pointer",
                border: "none", borderBottom: `2px solid ${tab === k ? FUCHSIA : "transparent"}`, whiteSpace: "nowrap",
                color: tab === k ? INK : DIM, fontFamily: SANS, fontSize: 12, fontWeight: tab === k ? 600 : 500,
              }}>
                <Icon name={ic} size={11.5} color={tab === k ? FUCHSIA : FAINT} />{l}
              </button>
            ))}
          </div>
        </div>

        {/* body */}
        <div style={{ flex: 1, overflowY: "auto", padding: "14px 18px 22px" }}>
          {tab === "details" && (
            <>
              <div style={{ display: "grid", gridTemplateColumns: "1fr 1fr", gap: "13px 16px" }}>
                <Field label="Owner">
                  <span style={{ display: "inline-flex", alignItems: "center", gap: 6 }}><Avatar who={deal.owner} size={18} />{USER_BY_ID[deal.owner].name}</span>
                </Field>
                <Field label="Primary contact">
                  {ct ? <span>{ct.name} <Mono size={10} color={DIM}>· {ct.role}</Mono></span> : null}
                </Field>
                {mice ? (
                  <>
                    <Field label="Event dates" mono value={f.from ? `${longDate(f.from)} → ${longDate(f.to)}` : null} />
                    <Field label="Alternative dates" mono value={f.altDates} />
                    <Field label="Pax" mono value={f.pax ? `${f.pax} attendees` : null} />
                    <Field label="Rooms per night" mono value={f.rooms ? `${f.rooms} rooms` : null} />
                    <Field label="Board" value={f.board} />
                    <Field label="Meeting space" value={f.space} />
                    <Field label="Accommodation budget" mono value={f.accBudget ? eurFull(f.accBudget) : null} />
                    <Field label="Meetings budget" mono value={f.meetBudget ? eurFull(f.meetBudget) : null} />
                  </>
                ) : (
                  <>
                    <Field label="Rate type" value={f.rateType} />
                    <Field label="Room-night commitment" mono value={f.roomNights ? `${num(f.roomNights)} RN` : null} />
                    <Field label="Estimated ADR" mono value={f.adr ? eurFull(f.adr) : null} />
                    <Field label="Allotment · release" mono value={f.allotment ? `${f.allotment} rooms · ${f.release}d release` : null} />
                    <Field label="Hotels included" wide value={f.hotels?.length ? f.hotels.join(" · ") : null} />
                  </>
                )}
              </div>

              <SectionRule>{mice ? "Won-stage gate" : "Booking-engine handover"}</SectionRule>
              <div style={{ background: PAPER, border: `1px solid ${RULE}`, borderRadius: 8, padding: "12px 13px", display: "grid", gap: 11 }}>
                {mice ? (
                  <>
                    <div style={{ display: "grid", gridTemplateColumns: "1fr auto", gap: 12, alignItems: "center" }}>
                      <Field label="PMS locator" hint="The group block reference. Required to win the deal.">
                        <MiniInput value={f.locator} onChange={v => onPatch({ f: { ...f, locator: v } })} placeholder="PMS-0000000" width={150} />
                      </Field>
                      <MiniToggle on={!!f.signed} onChange={v => onPatch({ f: { ...f, signed: v } })} label="Signed proposal on record" />
                    </div>
                  </>
                ) : (
                  <>
                    <div style={{ display: "grid", gridTemplateColumns: "1fr auto", gap: 12, alignItems: "center" }}>
                      <Field label="Promo code" hint="Every future reservation carrying this code attributes itself to the account.">
                        <MiniInput value={f.promo} onChange={v => onPatch({ f: { ...f, promo: v.toUpperCase() } })} placeholder="e.g. CONTCORP27" width={160} />
                      </Field>
                      <MiniToggle on={!!f.payTerms} onChange={v => onPatch({ f: { ...f, payTerms: v } })} label="Payment terms accepted" />
                    </div>
                    <div style={{ display: "flex", alignItems: "center", gap: 8, paddingTop: 10, borderTop: `1px dashed ${RULE}` }}>
                      <Icon name="flow" size={12} color={FUCHSIA} />
                      <span style={{ fontSize: 11.5, color: DIM, lineHeight: 1.45 }}>
                        On win, the code is written to <b style={{ color: INK }}>{acc.name}</b> and the reservation matcher starts attributing against it within 10 minutes.
                      </span>
                    </div>
                  </>
                )}
              </div>

              <SectionRule>Next activity</SectionRule>
              {deal.next ? (
                <div style={{ display: "flex", alignItems: "center", gap: 10, border: `1px solid ${RULE}`, borderRadius: 8, padding: "10px 12px" }}>
                  <Icon name="cal" size={13} color={nextActivityTone(deal.next).fg} />
                  <div style={{ flex: 1 }}>
                    <div style={{ fontSize: 12.5, fontWeight: 600 }}>{deal.next.type}</div>
                    <Mono size={10} color={DIM}>{longDate(deal.next.date)} · {USER_BY_ID[deal.owner].name}</Mono>
                  </div>
                  <ChromeButton icon="check" onClick={() => onPatch({ next: null, lastAct: 0 })}>Complete</ChromeButton>
                </div>
              ) : (
                <div style={{ display: "flex", alignItems: "center", gap: 10, border: `1px dashed #EBDCC2`, background: "#FBF3E7", borderRadius: 8, padding: "10px 12px" }}>
                  <Icon name="alert" size={13} color={AMBER} />
                  <span style={{ fontSize: 11.5, color: AMBER, fontWeight: 500, flex: 1 }}>No next action planned. The card says so on the board.</span>
                  <ChromeButton icon="plus" onClick={() => onPatch({ next: { type: "Call", date: "2026-08-14", state: "planned" }, lastAct: 0 })}>Plan a call</ChromeButton>
                </div>
              )}
            </>
          )}

          {tab === "notes" && (
            <>
              <div style={{ border: `1px solid ${RULE}`, borderRadius: 9, padding: "10px 11px", marginBottom: 16 }}>
                <textarea value={noteDraft} onChange={e => setNoteDraft(e.target.value)} placeholder="Write a note.  Type @ to mention a colleague. They get an email."
                  style={{ width: "100%", minHeight: 54, resize: "vertical", border: "none", outline: "none", background: "transparent", fontFamily: SANS, fontSize: 12.5, color: INK }} />
                <div style={{ display: "flex", alignItems: "center", gap: 8, paddingTop: 8, borderTop: `1px dashed ${RULE}` }}>
                  <Icon name="at" size={13} color={FAINT} /><Icon name="clip" size={13} color={FAINT} /><Icon name="pin" size={13} color={FAINT} />
                  <div style={{ flex: 1 }} />
                  <Select value="Note" width={128} onChange={() => {}} options={ACTIVITY_TYPES.map(t => ({ v: t, l: t }))} />
                  <ChromeButton kind="solid" icon="check" onClick={() => setNoteDraft("")}>Log</ChromeButton>
                </div>
              </div>
              {notes.map((n, i) => (
                <TimelineItem key={i} tone={n.pinned ? FUCHSIA : PLUM} icon={n.pinned ? "pin" : "user"}
                  title={USER_BY_ID[n.who].name} meta={`${n.when}${n.pinned ? " · pinned" : ""}`} body={n.text} />
              ))}
              <TimelineItem tone={GREEN} icon="check" title="Activity completed" meta={`${deal.lastAct}d ago · resets the rotting clock`}
                body="Logging or completing any activity updates last-activity on the deal, which is exactly what the negotiation gate checks." />
              {!notes.length && <Mono size={11} color={FAINT}>No notes yet on this deal.</Mono>}
            </>
          )}

          {tab === "emails" && (
            <>
              {composer ? (
                <div style={{ border: `1px solid ${FUCHSIA_PALE}`, borderRadius: 9, overflow: "hidden", marginBottom: 14 }}>
                  <div style={{ display: "flex", alignItems: "center", gap: 8, background: FUCHSIA_PALE + "40", padding: "8px 11px", borderBottom: `1px solid ${FUCHSIA_PALE}` }}>
                    <Icon name="mail" size={12} color={FUCHSIA_DARK} />
                    <Mono size={10} color={FUCHSIA_DARK} style={{ fontWeight: 700, letterSpacing: "0.14em" }}>ONE-TO-ONE COMPOSER</Mono>
                    <div style={{ flex: 1 }} />
                    <button onClick={() => setComposer(false)} style={{ background: "none", border: "none", cursor: "pointer" }}><Icon name="x" size={12} color={FUCHSIA_DARK} /></button>
                  </div>
                  <div style={{ padding: "11px 12px", display: "grid", gap: 9 }}>
                    {[["FROM", `groups@mareahotels.com · verified sender`, "shield"], ["TO", ct ? `${ct.name} <${ct.email}>` : ", ", "user"], ["TEMPLATE", "Corporate rate follow-up (group template)", "file"]].map(([l, v, ic]) => (
                      <div key={l} style={{ display: "flex", alignItems: "center", gap: 9 }}>
                        <Mono size={9} color={FAINT} style={{ width: 62, letterSpacing: "0.14em", fontWeight: 700 }}>{l}</Mono>
                        <Icon name={ic} size={11} color={FAINT} />
                        <span style={{ fontSize: 11.5, color: INK, flex: 1 }}>{v}</span>
                      </div>
                    ))}
                    <div style={{ background: PAPER, border: `1px solid ${RULE}`, borderRadius: 7, padding: "9px 10px", fontSize: 12, color: DIM, lineHeight: 1.55 }}>
                      Dear <span style={{ background: FUCHSIA_PALE + "80", color: FUCHSIA_DARK, borderRadius: 3, padding: "0 3px", fontFamily: MONO, fontSize: 11 }}>{"{{contact.first_name}}"}</span>,
                      thank you for the time today. Attached is the revised grid for <span style={{ background: FUCHSIA_PALE + "80", color: FUCHSIA_DARK, borderRadius: 3, padding: "0 3px", fontFamily: MONO, fontSize: 11 }}>{"{{deal.name}}"}</span> …
                    </div>
                    <div style={{ display: "flex", alignItems: "center", gap: 9, flexWrap: "wrap" }}>
                      <MiniToggle on onChange={() => {}} label="Follow-up task in 4 days" />
                      <div style={{ flex: 1 }} />
                      <Mono size={9.5} color={FAINT}>ATTACHMENTS 1 · 412 KB</Mono>
                      <ChromeButton icon="clock">Schedule</ChromeButton>
                      <ChromeButton kind="solid" icon="send" onClick={() => setComposer(false)}>Send</ChromeButton>
                    </div>
                  </div>
                </div>
              ) : (
                <div style={{ display: "flex", alignItems: "center", gap: 9, marginBottom: 14 }}>
                  <ChromeButton kind="solid" icon="pen" onClick={() => setComposer(true)}>Compose email</ChromeButton>
                  <Mono size={10} color={FAINT}>Sends from a verified sender · unsubscribed contacts are blocked</Mono>
                </div>
              )}
              {emails.map((e, i) => (
                <div key={i} style={{ display: "flex", gap: 10, padding: "10px 0", borderBottom: `1px solid ${RULE_SOFT}` }}>
                  <span style={{ width: 22, height: 22, borderRadius: 6, background: e.dir === "out" ? FUCHSIA + "18" : PAPER, border: `1px solid ${e.dir === "out" ? FUCHSIA + "55" : RULE}`, display: "grid", placeItems: "center", flexShrink: 0 }}>
                    <Icon name={e.dir === "out" ? "send" : "arrow-d"} size={11} color={e.dir === "out" ? FUCHSIA : DIM} />
                  </span>
                  <div style={{ flex: 1, minWidth: 0 }}>
                    <div style={{ fontSize: 12.5, fontWeight: 600, lineHeight: 1.35 }}>{e.subj}</div>
                    <div style={{ display: "flex", alignItems: "center", gap: 8, marginTop: 3, flexWrap: "wrap" }}>
                      <Mono size={9.5} color={DIM}>{e.dir === "out" ? USER_BY_ID[e.who].name : CT_BY_ID[e.who].name}</Mono>
                      <Mono size={9.5} color={FAINT}>{e.when}</Mono>
                      {e.opens != null && <Mono size={9.5} color={e.opens ? GREEN : FAINT}>{e.opens} opens · {e.clicks} clicks</Mono>}
                      <Pill tone={e.state === "Not opened" ? "tbc" : "soon"}>{e.state}</Pill>
                    </div>
                  </div>
                </div>
              ))}
              {!emails.length && <Mono size={11} color={FAINT}>No email on this deal yet.</Mono>}
            </>
          )}

          {tab === "proposal" && (prop ? (
            <>
              <div style={{ display: "flex", alignItems: "stretch", gap: 2, marginBottom: 14 }}>
                {["Draft", "Sent", "Viewed", "Accepted"].map((s, i) => {
                  const order = ["Draft", "Sent", "Viewed", "Accepted"];
                  const at = order.indexOf(prop.status);
                  const on = i <= at;
                  return (
                    <div key={s} style={{ flex: 1, background: on ? (i === at ? FUCHSIA : FUCHSIA_PALE + "70") : PAPER, color: on && i === at ? "#fff" : on ? FUCHSIA_DARK : FAINT, border: `1px solid ${on ? FUCHSIA_PALE : RULE}`, padding: "7px 9px", textAlign: "center" }}>
                      <Mono size={9.5} color="currentColor" style={{ fontWeight: 700, letterSpacing: "0.12em" }}>{s.toUpperCase()}</Mono>
                    </div>
                  );
                })}
              </div>
              <div style={{ display: "grid", gridTemplateColumns: "1fr 1fr", gap: "13px 16px" }}>
                <Field label="Reference" mono value={prop.ref} />
                <Field label="Template" value={prop.template} />
                <Field label="Views" mono value={`${prop.views} ${prop.views === 1 ? "view" : "views"}`} tone={prop.views ? GREEN : FAINT} />
                <Field label="Sent" mono value={prop.sent || "not sent"} />
                <Field label="Accepted" mono value={prop.accepted || ", "} tone={prop.accepted ? GREEN : FAINT} />
                <Field label="Signed by" value={prop.signer} />
              </div>
              <SectionRule>Languages generated</SectionRule>
              <div style={{ display: "flex", gap: 7, flexWrap: "wrap" }}>
                {prop.langs.map(l => (
                  <span key={l} style={{ display: "inline-flex", alignItems: "center", gap: 6, background: SURFACE, border: `1px solid ${RULE}`, borderRadius: 999, padding: "4px 10px" }}>
                    <Icon name="lang" size={11} color={FUCHSIA} /><Mono size={10} color={INK} style={{ fontWeight: 600 }}>{l}</Mono>
                  </span>
                ))}
                <span style={{ display: "inline-flex", alignItems: "center", gap: 6, border: `1px dashed ${RULE}`, borderRadius: 999, padding: "4px 10px" }}>
                  <Icon name="plus" size={10} color={FAINT} /><Mono size={10} color={FAINT}>add a language</Mono>
                </span>
              </div>
              <div style={{ marginTop: 14, display: "flex", gap: 8, flexWrap: "wrap" }}>
                <ChromeButton icon="pen">Open editor</ChromeButton>
                <ChromeButton icon="eye">Preview as client</ChromeButton>
                <ChromeButton icon="download">PDF</ChromeButton>
                <ChromeButton icon="send">Send link + PDF</ChromeButton>
              </div>
              {prop.accepted && (
                <div style={{ marginTop: 14, background: "#E9F3EC", border: "1px solid #BFDDC9", borderRadius: 8, padding: "11px 12px" }}>
                  <div style={{ display: "flex", alignItems: "center", gap: 8, marginBottom: 5 }}>
                    <Icon name="sign" size={13} color="#256B45" />
                    <span style={{ fontSize: 12.5, fontWeight: 600, color: "#256B45" }}>Accepted with audit trail</span>
                  </div>
                  <Mono size={10} color="#3d6b52" style={{ lineHeight: 1.6 }}>
                    SIGNATURE · TIMESTAMP · IP 85.62.14.203 · UA Chrome 141 macOS · CONTENT HASH sha256:9f4c…e21b · LANGUAGE DE
                  </Mono>
                </div>
              )}
            </>
          ) : (
            <div style={{ border: `1px dashed ${RULE}`, borderRadius: 9, padding: "22px 16px", textAlign: "center" }}>
              <Icon name="sign" size={18} color={FAINT} style={{ margin: "0 auto 8px" }} />
              <div style={{ fontSize: 12.5, fontWeight: 600, marginBottom: 4 }}>No proposal yet</div>
              <Mono size={10.5} color={FAINT}>Start from one of six group templates, or from a saved block library.</Mono>
              <div style={{ marginTop: 12 }}><ChromeButton kind="solid" icon="plus">Start proposal</ChromeButton></div>
            </div>
          ))}

          {tab === "docs" && (
            <>
              <div style={{ display: "flex", alignItems: "center", gap: 9, marginBottom: 13 }}>
                <ChromeButton icon="upload">Upload</ChromeButton>
                <Mono size={10} color={FAINT}>Private storage · signed, short-lived download links</Mono>
              </div>
              {docs.map((d, i) => (
                <div key={i} style={{ display: "flex", alignItems: "center", gap: 10, padding: "10px 11px", border: `1px solid ${RULE}`, borderRadius: 8, marginBottom: 8 }}>
                  <Icon name="file" size={14} color={FUCHSIA} />
                  <div style={{ flex: 1, minWidth: 0 }}>
                    <div style={{ fontSize: 12, fontWeight: 600, overflow: "hidden", textOverflow: "ellipsis", whiteSpace: "nowrap" }}>{d.name}</div>
                    <Mono size={9.5} color={FAINT}>{d.kind} · {d.size} · {USER_BY_ID[d.by].name} · {d.when}</Mono>
                  </div>
                  <Icon name="download" size={13} color={DIM} />
                </div>
              ))}
              {!docs.length && <Mono size={11} color={FAINT}>No documents attached.</Mono>}
            </>
          )}

          {tab === "history" && (
            <>
              {hist.map((h, i) => (
                <TimelineItem key={i} tone={h.tone === DIM ? PLUM : h.tone} icon={h.what.startsWith("Stage") ? "arrow-r" : h.what.includes("Approval") ? "shield" : "clock"}
                  title={h.what} meta={`${h.when}${h.who !== ", " ? ` · ${USER_BY_ID[h.who]?.name || h.who}` : " · system"}`} />
              ))}
              <div style={{ display: "flex", alignItems: "center", gap: 8, marginTop: 4, paddingTop: 12, borderTop: `1px dashed ${RULE}` }}>
                <Icon name="shield" size={12} color={FAINT} />
                <Mono size={10} color={FAINT}>Every stage move, field change, send and export is written to the audit log with user and timestamp.</Mono>
              </div>
            </>
          )}
        </div>
      </div>
    </div>
  );
}

Object.assign(window, { DealDrawer, Field, MiniInput, MiniToggle, SectionRule, StageRail, TimelineItem });