/* =========================================================
   screens-a.jsx — Today, Estimate, Quotes, Bills, Field
   ========================================================= */

/* =========================================================
   SCREEN 1 — Office Today (restyled: your AI staff)
   ========================================================= */
/* =========================================================
   OFFICE TODAY — simplified to the owner loop:
   the Office Manager says what happened, then the owner sees
   only the items that need attention.
   ========================================================= */

const DECISIONS = [
  { type:"quotes", from:"ES", who:"Estimator",          tone:"green",
    title:"Approve & send 4 trade quote asks",
    sub:"St Leonards budget needs windows, roofing, plumbing, and electrical numbers. Sends from your Gmail.",
    age:"14 min", primary:"Review", bucket:"approve", goto:"quotes" },
  { type:"bills", from:"BK", who:"Bookkeeper",         tone:"ink",
    title:"Push 6 bills to QuickBooks · $24,318.42",
    sub:"Matched to vendor + project + cost code across 3 houses. 1 duplicate caught. 3 mapping questions held for you.",
    age:"38 min", primary:"Review", bucket:"approve", goto:"bills" },
  { type:"field", from:"FI", who:"Field Intake",       tone:"amber",
    title:"Publish Tuesday daily log · Glenrose",
    sub:"From Marco's 1:24 voice note + 5 photos. Schedule variance flagged for the Trade Coordinator.",
    age:"1 hr",  primary:"Review", bucket:"approve", goto:"field" },
  { type:"hours", from:"TK", who:"Timekeeper",         tone:"navy",
    title:"12 hours staged · Jay Patel OT exception",
    sub:"Frank Park missing-hours reply folded in 7:42 AM. Jay Patel 4.5h OT needs your call.",
    age:"1 hr",  primary:"Answer", bucket:"question", goto:"bills" },
  { type:"client", from:"CL", who:"Client Liaison",     tone:"rust",
    title:"Thursday update for the Glenroses",
    sub:"Plain language, 4 selected photos, one-paragraph budget summary. Vendor notes filtered out.",
    age:"2 hr",  primary:"Review", bucket:"approve", goto:"client" },
  { type:"trade", from:"TC", who:"Trade Coordinator",  tone:"amber",
    title:"Pella reply missing 2 model numbers",
    sub:"Follow-up drafted to Sarah at Pella. One click to send and reopen the quote thread.",
    age:"3 hr",  primary:"Answer", bucket:"question", goto:"quotes" },
];

const BILL_PACKET_READY = [
  { vendor:"Northern Lumber Co.", invoice:"INV-NL-0566", project:"Glenrose", code:"06-100 framing lumber", amount:"$8,440.66", due:"May 31", confidence:"98%", source:"Gmail attachment" },
  { vendor:"Hartman Roofing", invoice:"INV-9921", project:"Glenrose", code:"07-300 roofing", amount:"$6,210.00", due:"Jun 14", confidence:"97%", source:"Gmail attachment" },
  { vendor:"Madsen Bros Plumbing", invoice:"INV-44218", project:"Glenrose", code:"15-200 rough-in plumbing", amount:"$4,820.00", due:"Jun 13", confidence:"95%", source:"Drive inbox" },
  { vendor:"Apex Mechanical", invoice:"AM-1884", project:"Glenrose", code:"15-500 HVAC rough-in", amount:"$2,150.00", due:"Jun 10", confidence:"96%", source:"Gmail attachment" },
  { vendor:"Sherwin-Williams", invoice:"SW-7741", project:"Glenrose", code:"09-900 paint supplies", amount:"$1,284.12", due:"Jun 02", confidence:"99%", source:"Drive inbox" },
  { vendor:"Wickham Cabinets", invoice:"WC-2198", project:"Glenrose", code:"06-600 cabinet allowance", amount:"$1,413.64", due:"Jun 07", confidence:"94%", source:"Gmail attachment" },
];

const BILL_PACKET_UNSURE = [
  { tone:"amber", vendor:"Patel Excavation", invoice:"PE-1038", amount:"$3,400.00", issue:"Cost code unsure", question:"Could be site prep or foundation backfill. Bookkeeper held it for mapping." },
  { tone:"amber", vendor:"Acme Rental", invoice:"AR-4480", amount:"$640.00", issue:"Split needed", question:"Rental appears to cover Glenrose and Oakwood. Needs a project split before posting." },
  { tone:"amber", vendor:"Boulevard Drywall", invoice:"BD-2381", amount:"$980.00", issue:"Project missing", question:"No project named on invoice. Last matching PO was Oakwood, not Glenrose." },
  { tone:"rust", vendor:"Sherwin-Williams", invoice:"SW-7741 copy", amount:"$1,284.12", issue:"Duplicate risk", question:"Same amount, vendor, and invoice number as a ready bill. Held automatically." },
];

const COCKPIT_ALERTS = [
  { tone:"rust", project:"St Leonards", title:"No daily log in 2 days", body:"Field Intake drafted a follow-up to the site super. No schedule update will be pushed until they reply.", action:"Send follow-up" },
  { tone:"amber", project:"Oakwood", title:"No new bills in 9 days", body:"Bookkeeper is watching the job because framing work continued but no vendor bills have landed.", action:"Ask Bookkeeper" },
  { tone:"amber", project:"St Leonards", title:"Roofing quote overdue", body:"Trade Coordinator has a reminder ready. Roofing and window dates stay as placeholders.", action:"Send reminder" },
  { tone:"navy", project:"Humber", title:"Schedule risk flagged", body:"Field photos show site clearing ahead of underpinning sign-off. Scheduler is holding the date.", action:"Review risk" },
];

const COMPLETED_TODAY = [
  { who:"Mailroom", title:"14 incoming items sorted", detail:"Email, WhatsApp, Drive, and QuickBooks notices assigned to projects." },
  { who:"Estimator", title:"Budget workbook prepared", detail:"St Leonards takeoff, assumptions, quote-needed lines, and Excel export ready." },
  { who:"Field Intake", title:"22 photos filed", detail:"Glenrose and Oakwood photos tagged, named, and saved to Drive." },
  { who:"Bookkeeper", title:"14 bills reviewed", detail:"6 ready, 4 held, 4 already matched to existing packets." },
  { who:"Timekeeper", title:"12 hours staged", detail:"Frank Park reply folded in; Jay Patel OT held for your call." },
  { who:"Client Liaison", title:"Weekly update drafted", detail:"Client-safe Glenrose note with selected photos and no internal issues." },
];

const PROJECT_WATCH = [
  { project:"St Leonards", phase:"Preconstruction", tone:"amber", action:"4 approvals", alert:"Daily log missing · roofing quote overdue", done:"Budget packet ready", next:"Approve trade asks" },
  { project:"Glenrose", phase:"Active build", tone:"green", action:"2 approvals", alert:"On track today", done:"Daily log + photos drafted", next:"Approve log and bills" },
  { project:"Oakwood", phase:"Framing", tone:"amber", action:"1 question", alert:"No bills in 9 days · Carlos hours missing", done:"Frank hours reply folded in", next:"Answer hours exception" },
  { project:"Humber", phase:"Site prep", tone:"rust", action:"1 alert", alert:"Schedule risk before sign-off", done:"Site photos filed", next:"Review Scheduler hold" },
];

const DecisionRow = ({ d, onGo, onOpen }) => (
  <div
    className={"d-row t-" + d.tone}
    role="button"
    tabIndex="0"
    onClick={() => onOpen(d)}
    onKeyDown={(e) => {
      if (e.key === "Enter" || e.key === " ") {
        e.preventDefault();
        onOpen(d);
      }
    }}
  >
    <span className={"d-badge t-" + d.tone}>{d.from}</span>
    <div className="d-main">
      <div className="d-title">{d.title}</div>
      <div className="d-sub">
        <span className="d-who">{d.who}</span>
        <span className="d-dot">·</span>
        <span className="d-age">{d.age} ago</span>
        <span className="d-dot">·</span>
        <span>{d.sub}</span>
      </div>
    </div>
    <div className="d-actions">
      <button className="d-approve" onClick={(e) => { e.stopPropagation(); onOpen(d); }}>{d.primary}</button>
      <button className="d-ghost" title="Ask the employee" onClick={(e) => { e.stopPropagation(); onOpen(d); }}>Ask</button>
      <button className="d-ghost" title="Hold for later" onClick={(e) => e.stopPropagation()}>Hold</button>
    </div>
  </div>
);

const OwnerDeskCard = ({ d, onOpen, onGo }) => (
  <div className={"owner-desk-card t-" + d.tone}>
    <div className="owner-desk-main" role="button" tabIndex="0"
      onClick={() => onOpen(d)}
      onKeyDown={(e) => {
        if (e.key === "Enter" || e.key === " ") {
          e.preventDefault();
          onOpen(d);
        }
      }}
    >
      <span className={"d-badge t-" + d.tone}>{d.from}</span>
      <div>
        <b>{d.title}</b>
        <span>{d.who} · {d.age} ago · {d.sub}</span>
      </div>
    </div>
    <div className="owner-desk-actions">
      <button className="owner-primary" type="button" onClick={() => onOpen(d)}>{d.primary}</button>
      <button className="owner-secondary" type="button" onClick={() => onGo(d.goto)}>Open desk</button>
    </div>
  </div>
);

const CockpitStat = ({ label, value, note, tone = "ink" }) => (
  <div className={"cockpit-stat t-" + tone}>
    <span>{label}</span>
    <b>{value}</b>
    <small>{note}</small>
  </div>
);

const AlertCard = ({ alert }) => (
  <div className={"alert-card t-" + alert.tone}>
    <div className="alert-project">{alert.project}</div>
    <b>{alert.title}</b>
    <span>{alert.body}</span>
    <button type="button">{alert.action}</button>
  </div>
);

const ProjectWatchCard = ({ item }) => (
  <div className={"project-watch-card t-" + item.tone}>
    <div className="watch-top">
      <div>
        <b>{item.project}</b>
        <span>{item.phase}</span>
      </div>
      <em>{item.action}</em>
    </div>
    <div className="watch-alert">{item.alert}</div>
    <div className="watch-bottom">
      <span>{item.done}</span>
      <button type="button">{item.next}</button>
    </div>
  </div>
);

const CompletedItem = ({ item }) => (
  <div className="completed-item">
    <span>{item.who}</span>
    <b>{item.title}</b>
    <small>{item.detail}</small>
  </div>
);

const OfficeChatPanel = ({ title = "Ask the office", placeholder, quick = [] }) => (
  <section className="simple-chat-panel">
    <div className="screen-eyebrow">{title}</div>
    <div className="simple-chat-box">
      <input placeholder={placeholder} />
      <button type="button">Ask</button>
    </div>
    {quick.length > 0 && (
      <div className="simple-quick-asks">
        {quick.map((ask) => <button key={ask} type="button">{ask}</button>)}
      </div>
    )}
  </section>
);

const SimpleActionRow = ({ tone = "ink", badge, title, body, meta, primary = "Review", onPrimary, onOpenDesk }) => (
  <div className={"simple-action-row " + (badge ? "has-badge " : "no-badge ") + "t-" + tone}>
    {badge && <span className={"d-badge t-" + tone}>{badge}</span>}
    <div>
      <b>{title}</b>
      <span>{meta ? `${meta} · ${body}` : body}</span>
    </div>
    <button className="simple-primary" type="button" onClick={onPrimary}>{primary}</button>
    {onOpenDesk && <button className="simple-secondary" type="button" onClick={onOpenDesk}>Open desk</button>}
  </div>
);

const SimpleDoneStrip = ({ items }) => (
  <section className="simple-done-strip">
    <div className="simple-section-head">
      <div>
        <div className="screen-eyebrow">Done today</div>
        <h3>Already handled</h3>
      </div>
    </div>
    <div className="simple-done-list">
      {items.map((item) => (
        <div className="simple-done-item" key={item.title}>
          <span>{item.who}</span>
          <b>{item.title}</b>
        </div>
      ))}
    </div>
  </section>
);

const ScreenToday = ({ onGo }) => {
  const [openDecision, setOpenDecision] = React.useState(null);

  return (
  <div className="screen today3 simple-office-page">
    <div className="simple-office-hero">
      <div>
        <div className="screen-eyebrow">Office Today</div>
        <h1 className="screen-title">Good morning. Six things need you.</h1>
        <p>The office is handling the rest across St Leonards, Glenrose, Oakwood, and Humber.</p>
      </div>
      <div className="simple-hero-counts">
        <span><b>4</b> approvals</span>
        <span><b>2</b> questions</span>
        <span><b>4</b> alerts</span>
      </div>
    </div>

    <div className="simple-office-grid" id="decision-queue">
      <section className="simple-main-panel">
        <div className="simple-section-head">
          <div>
            <div className="screen-eyebrow">Needs you</div>
            <h2>Approve or answer</h2>
          </div>
        </div>
        <div className="simple-action-list">
          {DECISIONS.map((d) => (
            <SimpleActionRow
              key={d.title}
              tone={d.tone}
              badge={d.from}
              title={d.title}
              meta={`${d.who} · ${d.age} ago`}
              body={d.sub}
              primary={d.primary}
              onPrimary={() => setOpenDecision(d)}
              onOpenDesk={() => onGo(d.goto)}
            />
          ))}
        </div>
      </section>

      <aside className="simple-side-stack">
        <OfficeChatPanel
          placeholder='e.g. "What is blocking St Leonards?"'
          quick={[
            "Show missing daily logs",
            "Chase overdue quotes",
            "Explain Glenrose costs",
          ]}
        />
        <section className="simple-watch-panel">
          <div className="simple-section-head">
            <div>
              <div className="screen-eyebrow">Watching</div>
              <h3>Alerts</h3>
            </div>
          </div>
          <div className="simple-watch-list">
            {COCKPIT_ALERTS.map((alert) => <AlertCard key={alert.title} alert={alert} />)}
          </div>
        </section>
      </aside>
    </div>

    <SimpleDoneStrip items={COMPLETED_TODAY} />

    <div className="trust-line">
      <div>
        <b>Every action is receipted.</b>{" "}
        Drawings filed, bills posted, hours pushed, emails sent, each with source evidence attached.
      </div>
      <a className="link" href="#" onClick={(e)=>{e.preventDefault(); onGo("receipts");}}>
        Open receipt ledger →
      </a>
    </div>
    {openDecision && (
      <DecisionReviewModal
        decision={openDecision}
        onClose={() => setOpenDecision(null)}
        onGo={(screen) => { setOpenDecision(null); onGo(screen); }}
      />
    )}
  </div>
  );
};

const DecisionReviewModal = ({ decision, onClose, onGo }) => {
  React.useEffect(() => {
    const onKey = (e) => {
      if (e.key === "Escape") onClose();
    };
    window.addEventListener("keydown", onKey);
    return () => window.removeEventListener("keydown", onKey);
  }, [onClose]);

  return (
    <div className="packet-modal-backdrop" onClick={onClose}>
      <div className="packet-modal" role="dialog" aria-modal="true" aria-label={decision.title} onClick={(e) => e.stopPropagation()}>
        <div className="packet-modal-head">
          <div>
            <div className="packet-kicker">{decision.who} work packet</div>
            <h2>{decision.title}</h2>
            <p>{decision.sub}</p>
          </div>
          <button className="packet-close" type="button" onClick={onClose} aria-label="Close packet">
            <Icon name="x" size={15} />
          </button>
        </div>
        {decision.type === "bills" ? (
          <BillDecisionReview onClose={onClose} onGo={onGo} />
        ) : (
          <GenericDecisionReview decision={decision} onGo={onGo} />
        )}
      </div>
    </div>
  );
};

const BillDecisionReview = ({ onClose, onGo }) => (
  <>
    <div className="packet-summary">
      <div><b>6</b><span>ready to push</span></div>
      <div><b>$24,318.42</b><span>matched total</span></div>
      <div className="is-warn"><b>4</b><span>held for your call</span></div>
      <div><b>0</b><span>payments created</span></div>
    </div>

    <div className="bill-review-grid">
      <section className="bill-ready">
        <div className="packet-section-head">
          <h3>Ready to write to QuickBooks</h3>
          <span>Vendor, project, cost code, amount, due date, and source matched.</span>
        </div>
        <div className="bill-table">
          <div className="bill-table-head">
            <span>Vendor</span><span>Project / cost code</span><span>Amount</span><span>Confidence</span>
          </div>
          {BILL_PACKET_READY.map((bill) => (
            <div className="bill-row is-ready" key={bill.invoice}>
              <div>
                <b>{bill.vendor}</b>
                <small>{bill.invoice} · {bill.source}</small>
              </div>
              <div>
                <span>{bill.project}</span>
                <small>{bill.code} · due {bill.due}</small>
              </div>
              <div className="mono tnum">{bill.amount}</div>
              <Pill tone="green" dot>{bill.confidence}</Pill>
            </div>
          ))}
        </div>
      </section>

      <aside className="bill-uncertain">
        <div className="packet-section-head">
          <h3>Held / unsure</h3>
          <span>These are highlighted because the office is not confident enough to write them.</span>
        </div>
        <div className="bill-issue-list">
          {BILL_PACKET_UNSURE.map((bill) => (
            <div className={"bill-issue-card t-" + bill.tone} key={bill.invoice}>
              <div className="row between" style={{gap:10}}>
                <b>{bill.vendor}</b>
                <span className="mono tnum">{bill.amount}</span>
              </div>
              <div className="bill-issue-meta">{bill.invoice} · {bill.issue}</div>
              <p>{bill.question}</p>
            </div>
          ))}
        </div>
      </aside>
    </div>

    <div className="packet-safety">
      Nothing posts until Aaron approves. The 4 unsure bills stay held and receipted.
    </div>

    <div className="packet-actions">
      <button className="packet-secondary" type="button" onClick={() => onGo("bills")}>Open full bookkeeping desk</button>
      <button className="packet-secondary" type="button" onClick={onClose}>Hold packet</button>
      <button className="packet-primary" type="button" onClick={onClose}>Approve 6 ready bills</button>
    </div>
  </>
);

const GenericDecisionReview = ({ decision, onGo }) => (
  <>
    <div className="generic-packet">
      <div className="generic-packet-card">
        <div className="packet-kicker">Prepared by</div>
        <h3>{decision.who}</h3>
        <p>{decision.sub}</p>
      </div>
      <div className="generic-packet-card">
        <div className="packet-kicker">Your move</div>
        <h3>{decision.primary}</h3>
        <p>Review the packet, ask the employee a question, or open the desk for the full context.</p>
      </div>
      <div className="generic-packet-card">
        <div className="packet-kicker">Receipt</div>
        <h3>Evidence stays attached</h3>
        <p>The source message, files, draft, and final action are saved to the receipt ledger.</p>
      </div>
    </div>
    <div className="packet-actions">
      <button className="packet-secondary" type="button">Ask {decision.who}</button>
      <button className="packet-primary" type="button" onClick={() => onGo(decision.goto)}>Open packet</button>
    </div>
  </>
);

const DecisionPacket = ({ accent="ink", dept, title, subtitle, lines, primary, onPrimary }) => {
  const accentMap = {
    amber: "var(--amber-2)",
    green: "var(--green-2)",
    rust:  "var(--rust)",
    ink:   "var(--ink)"
  };
  return (
    <div className="card" style={{
      padding:0,
      borderLeft:`3px solid ${accentMap[accent]}`,
      display:"grid", gridTemplateColumns:"1fr 220px"
    }}>
      <div style={{padding:"18px 22px"}}>
        <div className="screen-eyebrow">{dept}</div>
        <div style={{fontSize:17, fontWeight:500, letterSpacing:"-0.01em", color:"var(--ink)", marginTop:6}}>
          {title}
        </div>
        <div className="muted" style={{fontSize:13.5, marginTop:4}}>{subtitle}</div>
        <ul style={{listStyle:"none", padding:0, margin:"12px 0 0", fontSize:13, color:"var(--ink-2)", display:"flex", flexDirection:"column", gap:5}}>
          {lines.map((l,i) => (
            <li key={i} style={{position:"relative", paddingLeft:14}}>
              <span style={{position:"absolute", left:0, top:9, width:4, height:4, borderRadius:"50%", background:"var(--ink-4)"}}/>
              {l}
            </li>
          ))}
        </ul>
      </div>
      <div style={{
        borderLeft:"1px solid var(--line)",
        padding:"18px 18px",
        display:"flex", flexDirection:"column", justifyContent:"center", gap:8
      }}>
        <Btn variant="primary" icon="check" onClick={onPrimary}>{primary}</Btn>
        <div className="row" style={{gap:0, justifyContent:"space-between", marginTop:2}}>
          <Btn variant="ghost" size="sm">Edit</Btn>
          <Btn variant="ghost" size="sm">Ask</Btn>
          <Btn variant="ghost" size="sm">Hold</Btn>
        </div>
      </div>
    </div>
  );
};

const OfficePulse = () => (
  <aside className="col" style={{gap:16, position:"sticky", top:24, alignSelf:"start"}}>
    <div className="card" style={{padding:"20px 22px"}}>
      <div className="row between">
        <div>
          <div className="screen-eyebrow">Office Pulse</div>
          <div className="serif" style={{fontSize:26, fontStyle:"italic", color:"var(--ink)", lineHeight:1.1, marginTop:4, whiteSpace:"nowrap"}}>
            4 agents on shift
          </div>
        </div>
        <span className="row" style={{gap:6, fontFamily:"var(--f-mono)", fontSize:10, color:"var(--green)"}}>
          <span style={{display:"inline-block", width:6, height:6, borderRadius:"50%", background:"var(--green-2)", boxShadow:"0 0 0 3px rgba(94,128,73,.18)"}}/> LIVE
        </span>
      </div>

      <hr className="hr-soft" style={{margin:"18px 0 14px"}} />

      <div className="screen-eyebrow">Running now</div>
      <div style={{marginTop:8}}>
        <PulseRow agent="EA" tone="green" name="Estimator Agent"
                  task="Finished 7 AM sweep · worksheet ready"
                  next="on call for supplier replies" />
        <PulseRow agent="BA" tone="ink" name="Bookkeeper Agent"
                  task="Staging bills to QuickBooks"
                  next="next sweep 11:00 AM" />
        <PulseRow agent="FA" tone="amber" name="Field Agent"
                  task="Filing WhatsApp photos"
                  next="EOD log 5:00 PM" />
        <PulseRow agent="FC" tone="navy" name="File Clerk"
                  task="Organising Drive — Oakwood"
                  next="mid-day tidy 12:00 PM" />
      </div>

      <hr className="hr-soft" style={{margin:"18px 0 14px"}} />

      <div className="screen-eyebrow">Held items</div>
      <div style={{marginTop:8, fontSize:12.5, color:"var(--ink-2)", display:"flex", flexDirection:"column", gap:8}}>
        <div>
          Window schedule from Pella <span className="muted">· missing model #s · 2d</span>
        </div>
        <div>
          Madsen Bros invoice <span className="muted">· no project tag · 4h</span>
        </div>
      </div>
    </div>
  </aside>
);

const PulseRow = ({ agent, tone, name, task, next }) => (
  <div className="row" style={{gap:10, padding:"8px 0"}}>
    <span style={{
      width:24, height:24, borderRadius:"50%",
      background: tone === "green" ? "var(--green)" :
                  tone === "amber" ? "var(--amber)" :
                  tone === "navy"  ? "var(--navy)"  : "var(--ink)",
      color:"var(--paper)",
      display:"grid", placeItems:"center",
      fontFamily:"var(--f-mono)", fontSize:9.5, fontWeight:600, letterSpacing:"0.02em",
      flex:"0 0 auto"
    }}>{agent}</span>
    <div style={{flex:1, minWidth:0}}>
      <div style={{fontSize:13, color:"var(--ink)"}}>{name}</div>
      <div className="muted" style={{fontSize:12, whiteSpace:"nowrap", overflow:"hidden", textOverflow:"ellipsis"}}>{task}</div>
      {next && <div className="mono" style={{fontSize:10, color:"var(--ink-4)", marginTop:2, letterSpacing:"0.04em"}}>→ {next}</div>}
    </div>
    <span style={{width:6, height:6, borderRadius:"50%", background:"var(--green-2)", boxShadow:"0 0 0 3px rgba(94,128,73,.18)", flex:"0 0 auto"}}/>
  </div>
);

const CompletedLine = ({ count, label }) => (
  <div className="row" style={{gap:14, alignItems:"baseline", whiteSpace:"nowrap"}}>
    <span className="serif" style={{fontSize:22, fontStyle:"italic", color:"var(--ink)", lineHeight:1, minWidth:34}}>{count}</span>
    <span style={{fontSize:13, color:"var(--ink-2)"}}>{label}</span>
  </div>
);

/* =========================================================
   SCREEN 2 — Estimating Desk / Takeoff Worksheet
   (Marcel's Friday workflow: drawings → 7 AM sweep → worksheet → rules → quotes)
   ========================================================= */
const EST_STAGES = [
  { k:"plan",     label:"Plan uploaded",      meta:"R4 · 28 sheets",       state:"done"   },
  { k:"takeoff",  label:"Takeoff",            meta:"142 items extracted",  state:"done"   },
  { k:"budget",   label:"Budget v1",          meta:"$634,710 · for review",state:"active" },
  { k:"quotes",   label:"Trade quotes",       meta:"3 out · 1 replied",    state:"active" },
  { k:"living",   label:"Living budget + schedule", meta:"unlocks at approval", state:"locked" },
];

const EST_ACTIVE_PROJECTS = [
  { name:"St Leonards Custom Home", source:"Architect set uploaded", state:"Budget workbook ready", note:"4 trade asks waiting", tone:"green" },
  { name:"Glenrose Custom Home", source:"Drawing R4 from Drive", state:"Quote chase", note:"2 replies missing", tone:"amber" },
  { name:"Oakwood Renovation", source:"Email from architect", state:"Schedule draft", note:"dummy dates need review", tone:"navy" },
  { name:"Humber Station", source:"Site revision uploaded", state:"Rules pass", note:"basement scope unclear", tone:"rust" },
];

const EST_OFFICE_FLOW = [
  { title:"Plans arrive", body:"Forward an architect email, upload a PDF, or let Drive intake catch a revision." },
  { title:"Estimator prepares packet", body:"Takeoff, allowance rules, assumptions, and uncertainty are put in one work packet." },
  { title:"Budget workbook", body:"Budget, Scheduler, Bills, and Reconciliation tabs follow Marcel's workbook shape." },
  { title:"Trade quote queue", body:"Emails go to trades, replies are tracked, missing replies are chased, and numbers fold back into budget." },
  { title:"Portal push", body:"Approved budget lines create schedule draft, client milestones, bill mapping, and a receipt trail." },
];

const MARCEL_BUDGET_ROWS = [
  { group:"PERSONNEL", code:"0102", desc:"Structural Engineer", budget:"$2,500", contract:"engineering", actual:"$1,500", variance:"$1,000", source:"rule + workbook" },
  { group:"SERVICE CONNECTIONS", code:"0401", desc:"Water Service - City", budget:"allowance", contract:"city fee", actual:"$13,562", variance:"needs owner note", source:"existing workbook" },
  { group:"CARPENTRY", code:"2001", desc:"Lumber", budget:"$132,560", contract:"trade quote pending", actual:"-", variance:"open", source:"takeoff + rule" },
  { group:"CARPENTRY", code:"2004", desc:"Carpenter - Labour", budget:"$183,783", contract:"internal crew", actual:"hours feed", variance:"tracked daily", source:"hours + schedule" },
  { group:"ROOFING", code:"2401", desc:"Shingles", budget:"$94,629", contract:"quote requested", actual:"-", variance:"waiting", source:"roof plan" },
  { group:"MEP", code:"4001", desc:"Plumbing - Rough-in + Finish", budget:"$91,050", contract:"reply received", actual:"$51,150", variance:"folded", source:"trade reply" },
  { group:"MEP", code:"4101", desc:"Electrical - Rough-in + Finish", budget:"$84,213", contract:"quote requested", actual:"-", variance:"waiting", source:"trade queue" },
];

const EST_TRADE_QUEUE = [
  { trade:"Windows", recipient:"Window supplier", scope:"Aluminium windows · schedule from drawings", status:"waiting", sent:"sent 2d ago", budget:"3002", next:"Send follow-up" },
  { trade:"Roofing", recipient:"Roofing trade", scope:"Shingles · roof plan + flashing scope", status:"draft", sent:"needs approval", budget:"2401", next:"Approve email" },
  { trade:"Plumbing", recipient:"Plumbing trade", scope:"Rough-in + finish · fixture schedule separate", status:"replied", sent:"reply in Mailroom", budget:"4001", next:"Fold into budget" },
  { trade:"Electrical", recipient:"Electrical trade", scope:"Rough-in + finish · panel + lighting notes", status:"waiting", sent:"sent yesterday", budget:"4101", next:"Nudge if no reply" },
  { trade:"Carpentry labour", recipient:"Internal crew / trade lead", scope:"Labour assumptions from scheduler tab", status:"held", sent:"missing hours rule", budget:"2004", next:"Ask Timekeeper" },
];

const TRADE_BUDGET_LINES = [
  { code:"0102", item:"Structural Engineer", budget:"$2,500", current:"$1,500", status:"actual", trade:"Engineering", detail:"Actual number is in from engineering and already sits below original budget.", action:"View receipt" },
  { code:"2001", item:"Lumber", budget:"$132,560", current:"$132,560 est.", status:"estimated", trade:"Lumber supplier", detail:"Estimator used workbook/scheduler allowance. Supplier quote still needed before budget is firm.", action:"Send quote ask" },
  { code:"2004", item:"Carpenter - Labour", budget:"$183,783", current:"hours rule", status:"question", trade:"Internal crew", detail:"Needs confirmation that the labour rule still matches the crew plan and timeline.", action:"Ask Timekeeper" },
  { code:"2401", item:"Shingles", budget:"$94,629", current:"missing", status:"missing", trade:"Roofing trade", detail:"No trade number yet. Draft email is ready with roof plan and schedule window attached.", action:"Send roofing ask" },
  { code:"3002", item:"Aluminium Windows", budget:"$190,443", current:"missing models", status:"missing", trade:"Window supplier", detail:"Supplier needs model numbers before price and lead time are reliable.", action:"Ask supplier" },
  { code:"4001", item:"Plumbing - Rough-in + Finish", budget:"$91,050", current:"$51,150", status:"actual", trade:"Plumbing trade", detail:"Trade replied with price and date. Number can update the workbook and schedule.", action:"Approve update" },
  { code:"4101", item:"Electrical - Rough-in + Finish", budget:"$84,213", current:"$40,000 est.", status:"estimated", trade:"Electrical trade", detail:"Old budget placeholder exists. Electrical reply is still missing.", action:"Send reminder" },
];

const EST_SCHEDULE_DRAFT = [
  { task:"Demolition - Selective/Interior", code:"1102", trade:"Demo", start:"known · Apr 8", source:"Scheduler tab", state:"known" },
  { task:"Underpinning", code:"1105", trade:"Foundation", start:"known · May 1", source:"Scheduler tab", state:"known" },
  { task:"Lumber + framing", code:"2001 / 2004", trade:"Framing crew", start:"placeholder · Aug 1", source:"budget + crew rules", state:"placeholder" },
  { task:"Roof shingles", code:"2401", trade:"Roofing", start:"placeholder · Oct 1", source:"quote lead time", state:"placeholder" },
  { task:"Plumbing rough-in", code:"4001", trade:"Plumbing", start:"known · Oct 2", source:"trade reply", state:"known" },
  { task:"Electrical rough-in", code:"4101", trade:"Electrical", start:"placeholder · Nov 18", source:"trade queue", state:"placeholder" },
];

const DecisionDesk = ({ eyebrow, title, intro, primary, secondary, approvals = [], questions = [], handled = [], children }) => {
  return (
    <div className="decision-desk">
      <div className="decision-hero">
        <div>
          <div className="screen-eyebrow">{eyebrow}</div>
          <h1 className="screen-title" style={{marginTop:6}}>{title}</h1>
          {intro && <p>{intro}</p>}
          <div className="drilldown-note">
            You usually handle this from Office Today. This desk is for checking evidence, editing assumptions, or asking this employee directly.
          </div>
        </div>
        <div className="decision-hero-actions">
          {secondary && <Btn variant="ghost" icon={secondary.icon || "clock"}>{secondary.label}</Btn>}
          {primary && <Btn variant="primary" icon={primary.icon || "check"}>{primary.label}</Btn>}
        </div>
      </div>

      <div className="decision-columns">
        <div className="decision-panel is-approve">
          <div className="decision-panel-title">Approve</div>
          {approvals.map((item) => <DecisionAction key={item.title} item={item} kind="approve" />)}
        </div>
        <div className="decision-panel is-questions">
          <div className="decision-panel-title">Answer questions</div>
          {questions.length
            ? questions.map((item) => <DecisionAction key={item.title} item={item} kind="question" />)
            : <div className="decision-empty">No questions right now.</div>}
        </div>
      </div>

      {handled.length > 0 && (
        <div className="decision-handled">
          <div className="screen-eyebrow">Already handled</div>
          <div>
            {handled.map((item) => <span key={item}>{item}</span>)}
          </div>
        </div>
      )}

      {children}
    </div>
  );
};

const DecisionAction = ({ item, kind }) => (
  <div className={"decision-action is-" + kind}>
    <div>
      <b>{item.title}</b>
      <span>{item.body}</span>
    </div>
    {item.meta && <em>{item.meta}</em>}
    <button type="button">{item.action || (kind === "approve" ? "Approve" : "Answer")}</button>
  </div>
);

const ScreenEstimate = () => (
  <div className="screen est est2">
    <DecisionDesk
      eyebrow="Estimator · St Leonards"
      title="Estimator Work Packet"
      intro="Plans came in. The Estimator made the budget workbook, drafted trade asks, and prepared a first schedule. You only need to approve what is ready or answer what is unclear."
      flow={[
        { label:"Came from", title:"Architect plans", body:"Upload, email, or Drive revision." },
        { label:"Estimator did", title:"Takeoff + budget", body:"Workbook and assumptions prepared." },
        { label:"Your move", title:"Approve asks", body:"Send quotes or answer gaps." },
        { label:"Next", title:"Trade Coordinator", body:"Trades return real numbers." },
      ]}
      primary={{ label:"Approve ready estimate work", icon:"check" }}
      secondary={{ label:"Upload new plan", icon:"doc" }}
      approvals={[
        { title:"Send 4 trade quote asks", body:"Windows, roofing, plumbing, and electrical emails are drafted with plan attachments.", meta:"5 attachments", action:"Approve sends" },
        { title:"Export budget workbook", body:"Budget, Scheduler, Bills, and Reconciliation tabs are ready for Excel.", meta:"pre-quote", action:"Export Excel" },
        { title:"Use draft schedule dates", body:"Known dates are filled in. Unknown trade dates are clearly marked as placeholders.", meta:"6 rows", action:"Approve draft" },
      ]}
      questions={[
        { title:"Window models missing", body:"The plan set does not list model numbers for several windows.", action:"Ask supplier" },
        { title:"Roofing start date unknown", body:"Estimator used a placeholder until the roofer confirms lead time.", action:"Leave placeholder" },
        { title:"Carpentry labour assumption", body:"Crew hours came from old scheduler rules. Confirm before final budget.", action:"Confirm rule" },
      ]}
      handled={[
        "Architect set read",
        "Takeoff complete",
        "Budget workbook prepared",
        "Plumbing reply folded in",
      ]}
    >
      <div className="simple-support-grid">
        <Card head="Active estimate work" eyebrow="MULTIPLE HOUSES">
          <div className="compact-list">
            {EST_ACTIVE_PROJECTS.map((p, i) => (
              <div className="compact-row" key={p.name}>
                <b>{p.name}</b>
                <span>{p.state} · {p.note}</span>
                {i === 0 && <em>open</em>}
              </div>
            ))}
          </div>
        </Card>
        <Card head="Budget snapshot" eyebrow="WHAT THE GC NEEDS">
          <div className="compact-list">
            <div className="compact-row"><b>Lumber</b><span>Budget line 2001 · quote still pending</span><em>open</em></div>
            <div className="compact-row"><b>Plumbing</b><span>Budget line 4001 · reply folded into workbook</span><em>done</em></div>
            <div className="compact-row"><b>Electrical</b><span>Budget line 4101 · trade response missing</span><em>ask</em></div>
          </div>
        </Card>
      </div>
    </DecisionDesk>
  </div>
);

const TradeQueueCompactRow = ({ t }) => (
  <div className={"est-trade-row is-" + t.status}>
    <div>
      <div className="est-trade-title">{t.trade}</div>
      <div className="est-trade-sub">{t.recipient} · budget {t.budget}</div>
    </div>
    <span>{t.status}</span>
  </div>
);

/* ---- Stage: Plan uploaded ---- */
const EstStagePlan = () => (
  <div className="stage-panel">
    <div className="stage-panel-head">
      <div>
        <div className="title">Source files Estimator is working from</div>
        <div className="sub">Drag any new revision in — Estimator diffs and re-runs</div>
      </div>
      <div className="right">
        <button className="stage-btn ghost">Open in Drive</button>
        <button className="stage-btn">Upload revision</button>
      </div>
    </div>
    <div className="stage-panel-body">
      <div className="est-sources">
        <div className="est-source">
          <div className="kind k-pdf">PDF</div>
          <div>
            <div className="title">Glenrose_Arch_Set_R4.pdf</div>
            <div className="meta">28 sheets · BCA Studio · uploaded Mon · diffed vs R3 (14 changes)</div>
          </div>
          <div className="pages">28 pp</div>
        </div>
        <div className="est-source">
          <div className="kind k-doc">DOC</div>
          <div>
            <div className="title">Glenrose_Specs_v3.docx</div>
            <div className="meta">18 pp · client supplied · finishes &amp; allowances</div>
          </div>
          <div className="pages">18 pp</div>
        </div>
        <div className="est-source">
          <div className="kind k-img">IMG</div>
          <div>
            <div className="title">Site photos — 12 images</div>
            <div className="meta">WhatsApp · Marco · site conditions for excavation</div>
          </div>
          <div className="pages">12</div>
        </div>
        <div className="est-source">
          <div className="kind k-rules">RULES</div>
          <div>
            <div className="title">Regency rule book v3</div>
            <div className="meta">your pricing rules · last edited 6 Apr · 42 rules</div>
          </div>
          <div className="pages">42</div>
        </div>
      </div>
    </div>
  </div>
);

/* ---- Stage: Takeoff ---- */
const EstStageTakeoff = () => (
  <div className="stage-panel">
    <div className="stage-panel-head">
      <div>
        <div className="title">Takeoff — 142 items extracted from the drawings</div>
        <div className="sub">Counted by Estimator · click any item to see the sheet it came from</div>
      </div>
      <div className="right">
        <button className="stage-btn ghost">Export CSV</button>
        <button className="stage-btn">Re-run takeoff</button>
      </div>
    </div>
    <div className="stage-panel-body">
      <div className="budget-table">
        <div className="bh">Scope</div>
        <div className="bh" style={{textAlign:"right"}}>Qty</div>
        <div className="bh">Source</div>
        <div className="bh" style={{textAlign:"right"}}>Unit</div>
        <div className="bh" style={{textAlign:"right"}}>Confidence</div>

        {[
          ["Excavation",            "510 cy",  "A-101, A-102",   "$8 / cy",  "high"],
          ["Foundation concrete",   "94 cy",   "S-201, S-202",   "$420 / cy","high"],
          ["Framing lumber",        "38,400 bf","A-301 → A-308", "$1.10/bf", "high"],
          ["Roof shingles",         "42 sq",   "A-401",          "quote",    "med"],
          ["Windows",               "27 units","A-602 (5 TBD)",  "quote",    "low"],
          ["Drywall",               "11,200 sf","A-501",         "quote",    "high"],
          ["Hardwood flooring",     "3,100 sf","A-701",          "$6–9/sf",  "med"],
        ].map((r,i) => (
          <React.Fragment key={i}>
            <div className="br name">{r[0]}</div>
            <div className="br num">{r[1]}</div>
            <div className="br src">{r[2]}</div>
            <div className="br num">{r[3]}</div>
            <div className="br" style={{justifyContent:"flex-end"}}>
              <span className={"tag " + (r[4]==="high"?"is-firm":r[4]==="med"?"is-allow":"is-quote")}
                style={{padding:"2px 8px", borderRadius:999, fontSize:10, letterSpacing:"0.1em", textTransform:"uppercase"}}>
                {r[4]}
              </span>
            </div>
          </React.Fragment>
        ))}
      </div>
    </div>
  </div>
);

/* ---- Stage: Budget v1 ---- */
const EstStageBudget = () => (
  <div className="stage-panel">
    <div className="stage-panel-head">
      <div>
        <div className="title">Budget v1 · ready for your review</div>
        <div className="sub">Built from the takeoff + your rule book · 4 scopes still pending supplier quotes</div>
      </div>
      <div className="right">
        <button className="stage-btn ghost">Hold</button>
        <button className="stage-btn">Approve budget v1</button>
      </div>
    </div>
    <div className="stage-panel-body">
      <div className="budget-table">
        <div className="bh">Division</div>
        <div className="bh" style={{textAlign:"right"}}>Qty</div>
        <div className="bh">Priced from</div>
        <div className="bh" style={{textAlign:"right"}}>Amount</div>
        <div className="bh" style={{textAlign:"right"}}>Δ vs rule</div>

        {[
          ["Site & foundation",  "510 cy",   ["RULE",  "is-firm"], "$58,400",  ["—",     ""]],
          ["Framing & lumber",   "38,400 bf",["RULE",  "is-firm"], "$84,200",  ["+8%",   "is-up"]],
          ["Roofing",            "42 sq",    ["QUOTE", "is-quote"],"~$28,500", ["est.",  ""]],
          ["Windows & doors",    "27 units", ["QUOTE", "is-quote"],"~$72,000", ["est.",  ""]],
          ["Drywall",            "11,200 sf",["QUOTE", "is-quote"],"~$31,500", ["est.",  ""]],
          ["Finish carpentry",   "lot",      ["RULE",  "is-firm"], "$41,800",  ["—",     ""]],
          ["Flooring",           "3,100 sf", ["RULE",  "is-firm"], "$23,100",  ["—",     ""]],
          ["MEP rough-ins",      "lot",      ["QUOTE", "is-quote"],"~$68,000", ["est.",  ""]],
          ["Allowances",         "—",        ["SPEC",  "is-allow"],"$84,500",  ["—",     ""]],
          ["GC fee + overhead",  "—",        ["RULE",  "is-firm"], "$142,710", ["—",     ""]],
        ].map((r,i,a) => (
          <React.Fragment key={i}>
            <div className={"br name " + (i===a.length-1?"row-end":"")}>{r[0]}</div>
            <div className={"br num " + (i===a.length-1?"row-end":"")}>{r[1]}</div>
            <div className={"br src " + (i===a.length-1?"row-end":"")}>
              <span className={"tag " + r[2][1]}>{r[2][0]}</span>
            </div>
            <div className={"br num " + (i===a.length-1?"row-end":"")}>{r[3]}</div>
            <div className={"br delta " + (i===a.length-1?"row-end ":"") + (r[4][1] || "")}>{r[4][0]}</div>
          </React.Fragment>
        ))}
      </div>
      <div className="budget-total">
        <div className="label">
          PRE-QUOTE TOTAL
          <b>Glenrose Custom Home · 4,200 sf</b>
        </div>
        <div className="amt">
          $634,710
          <small>$151 / SF · firms when quotes land</small>
        </div>
      </div>
    </div>
  </div>
);

/* ---- Stage: Trade quotes ---- */
const EstStageQuotes = () => (
  <div className="stage-panel">
    <div className="stage-panel-head">
      <div>
        <div className="title">Quotes out to your trades</div>
        <div className="sub">Estimator drafted the RFQs · sends from your Gmail when you approve</div>
      </div>
      <div className="right">
        <button className="stage-btn ghost">Add trade</button>
        <button className="stage-btn">Approve &amp; send all</button>
      </div>
    </div>
    <div className="stage-panel-body">
      <div className="trades">
        {[
          { v:"Pella Windows",     s:"27 windows + 4 exterior doors",     a:"~$72,000", n:"est.",        st:"draft",   stl:"Draft",       act:"Approve & send" },
          { v:"Hartman Roofing",   s:"42 sq architectural shingle + flash",a:"~$28,500", n:"est.",       st:"draft",   stl:"Draft",       act:"Approve & send" },
          { v:"Boulevard Drywall", s:"11,200 sf board + tape + texture",   a:"~$31,500", n:"est.",       st:"draft",   stl:"Draft",       act:"Approve & send" },
          { v:"Apex Mechanical",   s:"HVAC rough-in (2-stage, 5-ton)",     a:"$24,180",  n:"replied 6:14 AM", st:"replied", stl:"Replied", act:"Fold into budget" },
          { v:"Northern Lumber",   s:"Framing package — 38.4k bf",         a:"sent Mon", n:"5 d ago",    st:"sent",    stl:"Sent",        act:"Nudge" },
          { v:"Cole Plumbing",     s:"Whole-house plumbing rough-in",      a:"sent Fri", n:"8 d ago",    st:"late",    stl:"Late",        act:"Send reminder" },
        ].map((t,i) => (
          <div className="trade" key={i}>
            <div>
              <div className="vendor">{t.v}</div>
              <div className="scope">{t.s}</div>
            </div>
            <div className="amt">{t.a}<small>{t.n}</small></div>
            <span className={"status is-" + t.st}>{t.stl}</span>
            <div className="act">
              <button className={t.st==="replied"||t.st==="draft" ? "primary" : ""}>{t.act}</button>
            </div>
          </div>
        ))}
      </div>
    </div>
  </div>
);

/* ---- Stage: Living budget + schedule (locked until budget approved) ---- */
const EstStageLiving = () => (
  <div className="stage-panel">
    <div className="stage-panel-head">
      <div>
        <div className="title">Living budget &amp; schedule</div>
        <div className="sub">Unlocks the moment you approve budget v1</div>
      </div>
    </div>
    <div className="stage-panel-body" style={{textAlign:"center", padding:"60px 22px"}}>
      <div style={{
        width:56, height:56, borderRadius:14, background:"var(--paper-2)",
        border:"1px dashed var(--line-3)", margin:"0 auto 16px",
        display:"grid", placeItems:"center", color:"var(--ink-3)", fontSize:20,
      }}>○</div>
      <div style={{fontSize:17, fontWeight:500, color:"var(--ink)", letterSpacing:"-0.012em"}}>
        Once budget v1 is approved, this room starts tracking.
      </div>
      <div style={{fontSize:13.5, color:"var(--ink-3)", maxWidth:520, margin:"10px auto 0", lineHeight:1.55}}>
        Scheduler drafts a 29-week Gantt from the approved scope. Every bill, hour, and
        change order flows in. You'll see committed vs spent vs forecast on the same line —
        and you can ask the office "why?" on any number.
      </div>
    </div>
  </div>
);

/* --- Pipeline (Plan0-lesson, in office voice) ------------- */
const PreconPipeline = () => {
  const steps = [
    { k:"drawings", label:"Drawings in",        state:"done",    sub:"R4 · received Mon" },
    { k:"sweep",    label:"7 AM sweep",         state:"done",    sub:"finished 14 min ago" },
    { k:"worksheet",label:"Takeoff worksheet",  state:"current", sub:"5 rule-priced rows" },
    { k:"rules",    label:"Rules applied",      state:"done",    sub:"rule book v3" },
    { k:"quotes",   label:"Supplier quotes",    state:"awaiting",sub:"4 drafts ready" },
    { k:"budget",   label:"Draft budget",       state:"done",    sub:"$634,710 pre-quote" },
    { k:"approval", label:"Your approval",      state:"awaiting",sub:"4 items" },
  ];
  return (
    <div className="card" style={{padding:"14px 18px"}}>
      <div className="row between" style={{marginBottom:10}}>
        <div className="screen-eyebrow">Preconstruction pipeline</div>
        <span className="muted" style={{fontSize:11.5}}>drawings → worksheet → quotes → budget → approval</span>
      </div>
      <div style={{display:"grid", gridTemplateColumns:"repeat(7, 1fr)", gap:0, alignItems:"stretch"}}>
        {steps.map((s,i) => (
          <React.Fragment key={s.k}>
            <PipelineStep step={s} />
            {i < steps.length-1 && (
              <span style={{
                alignSelf:"center", justifySelf:"center",
                display:"none"
              }}/>
            )}
          </React.Fragment>
        ))}
      </div>
    </div>
  );
};

const PipelineStep = ({ step }) => {
  const tone =
    step.state === "done"     ? "var(--green)" :
    step.state === "current"  ? "var(--amber)" :
    step.state === "awaiting" ? "var(--amber-2)" :
                                "var(--ink-4)";
  return (
    <div style={{
      padding:"8px 10px",
      borderRadius:8,
      background: step.state === "current" ? "var(--paper-2)" : "transparent",
      border: step.state === "current" ? "1px solid var(--line-2)" : "1px solid transparent",
      position:"relative"
    }}>
      <div className="row" style={{gap:6, alignItems:"center"}}>
        <span style={{
          width:14, height:14, borderRadius:"50%",
          display:"grid", placeItems:"center",
          flex:"0 0 auto",
          background: step.state === "done" ? tone : "transparent",
          border: step.state === "done" ? "0" : `1.5px ${step.state === "awaiting" ? "dashed" : "solid"} ${tone}`,
          color:"var(--paper)"
        }}>
          {step.state === "done" && <Icon name="check" size={9} color="var(--paper)" />}
        </span>
        <span style={{fontSize:12.5, fontWeight:500, color:"var(--ink)", letterSpacing:"-0.005em"}}>{step.label}</span>
      </div>
      <div className="muted" style={{fontSize:11, marginTop:3, marginLeft:20}}>{step.sub}</div>
    </div>
  );
};

/* --- Estimator's worksheet ------------------------------- */
const Worksheet = () => (
  <div className="card" style={{padding:0}}>
    <div className="card-head">
      <div className="heading-stack">
        <span className="eyebrow">ESTIMATOR'S WORKSHEET · DIGITISED FROM HER FRIDAY NOTEBOOK</span>
        <h3>Glenrose · takeoff &amp; pricing</h3>
      </div>
      <div className="right">
        <span className="muted" style={{fontSize:11.5}}>rule book v3 · last edited 6 Apr</span>
      </div>
    </div>

    {/* Group A: priced from rules */}
    <div style={{padding:"0 20px"}}>
      <div className="row between" style={{padding:"6px 0"}}>
        <div className="row" style={{gap:8}}>
          <span style={{width:6, height:6, borderRadius:"50%", background:"var(--green)"}}/>
          <span className="screen-eyebrow" style={{color:"var(--green)"}}>Priced from your rules</span>
        </div>
        <span className="muted" style={{fontSize:11.5}}>5 line items · firm</span>
      </div>
      <WorksheetTable
        rows={[
          { item:"Exterior brick",                  qty:"8,420 sf",
            calc:"× $14/sf allowance",              rule:"Brick · sq ft allowance",      total:"$117,880" },
          { item:"Hardwood · plank (main level)",   qty:"2,400 sf",
            calc:"× ($15 mat + $6 install)",        rule:"Hardwood · plank install",     total:"$50,400" },
          { item:"Hardwood · herringbone (foyer)",  qty:"700 sf",
            calc:"× ($15 mat + $9 install)",        rule:"Hardwood · herringbone install", total:"$16,800" },
          { item:"Interior doors (slabs + casing)", qty:"42 ea",
            calc:"× ($300/slab incl. casing)",      rule:"Doors · slab + casing",        total:"$14,860" },
          { item:"Interior trim (base + casing)",   qty:"1,180 lf",
            calc:"× $6.50/lf",                      rule:"Trim · per linear foot",       total:"$7,670" },
        ]}
        sub="Sub-total · priced from rules"
        subValue="$207,610"
      />
    </div>

    <hr className="hr-soft" style={{margin:"6px 20px"}}/>

    {/* Group B: needs supplier quote */}
    <div style={{padding:"0 20px 20px"}}>
      <div className="row between" style={{padding:"10px 0 6px"}}>
        <div className="row" style={{gap:8}}>
          <span style={{width:6, height:6, borderRadius:"50%", background:"var(--amber)"}}/>
          <span className="screen-eyebrow" style={{color:"var(--amber)"}}>Needs supplier quote</span>
        </div>
        <span className="muted" style={{fontSize:11.5}}>4 line items · drafts ready</span>
      </div>
      <QuoteNeededTable
        rows={[
          { item:"Windows", scope:"24 units · W-01–W-24 · energy pkg per spec §6", vendor:"Pella Windows",      status:"Draft ready" },
          { item:"Roofing", scope:"36 sq architectural · 4/12 pitch · ridge vent", vendor:"Hartman Roofing",    status:"Draft ready" },
          { item:"Drywall", scope:"12,200 sf wall · 5,800 sf clg · L4 finish",     vendor:"Boulevard Drywall",  status:"Draft ready" },
          { item:"HVAC",    scope:"3 zones · 4-ton + 2-ton condensers",            vendor:"Apex Mechanical",    status:"Quote queued" },
        ]}
        sub="Estimated range · pending quotes"
        subValue="~$200,000"
      />
    </div>
  </div>
);

const WorksheetTable = ({ rows, sub, subValue }) => (
  <div>
    <div style={{
      display:"grid",
      gridTemplateColumns:"1.8fr 1fr 1.5fr 100px",
      gap:14, padding:"8px 0",
      borderBottom:"1px solid var(--line-2)",
      fontFamily:"var(--f-mono)", fontSize:9.5, letterSpacing:"0.14em",
      textTransform:"uppercase", color:"var(--ink-4)"
    }}>
      <div>Item</div>
      <div>Qty</div>
      <div>Rule applied</div>
      <div style={{textAlign:"right"}}>Total</div>
    </div>
    {rows.map((r,i) => (
      <div key={i} style={{
        display:"grid",
        gridTemplateColumns:"1.8fr 1fr 1.5fr 100px",
        gap:14, padding:"10px 0",
        borderBottom:"1px dashed var(--line)",
        alignItems:"baseline",
        fontSize:13
      }}>
        <div style={{color:"var(--ink)", fontWeight:500}}>{r.item}</div>
        <div className="mono" style={{color:"var(--ink-2)", fontSize:12.5}}>{r.qty}</div>
        <div className="muted" style={{fontSize:12.5}}>
          {r.calc}
          <div style={{marginTop:2, fontSize:11, color:"var(--ink-4)"}}>{r.rule}</div>
        </div>
        <div className="mono tnum" style={{textAlign:"right", color:"var(--ink)", fontWeight:500, fontSize:13.5}}>{r.total}</div>
      </div>
    ))}
    <div style={{
      display:"grid",
      gridTemplateColumns:"1fr 100px",
      gap:14, padding:"12px 0 4px",
      alignItems:"baseline"
    }}>
      <div className="muted" style={{fontSize:12}}>{sub}</div>
      <div className="serif" style={{fontSize:22, fontStyle:"italic", textAlign:"right", color:"var(--ink)", lineHeight:1}}>{subValue}</div>
    </div>
  </div>
);

const QuoteNeededTable = ({ rows, sub, subValue }) => (
  <div>
    <div style={{
      display:"grid",
      gridTemplateColumns:"110px 1fr 160px 110px",
      gap:14, padding:"8px 0",
      borderBottom:"1px solid var(--line-2)",
      fontFamily:"var(--f-mono)", fontSize:9.5, letterSpacing:"0.14em",
      textTransform:"uppercase", color:"var(--ink-4)"
    }}>
      <div>Item</div>
      <div>Scope from worksheet</div>
      <div>Supplier</div>
      <div style={{textAlign:"right"}}>Status</div>
    </div>
    {rows.map((r,i) => (
      <div key={i} style={{
        display:"grid",
        gridTemplateColumns:"110px 1fr 160px 110px",
        gap:14, padding:"10px 0",
        borderBottom:"1px dashed var(--line)",
        alignItems:"baseline",
        fontSize:13
      }}>
        <div style={{color:"var(--ink)", fontWeight:500}}>{r.item}</div>
        <div className="muted" style={{fontSize:12.5}}>{r.scope}</div>
        <div style={{color:"var(--ink-2)", fontSize:12.5}}>{r.vendor}</div>
        <div style={{textAlign:"right"}}>
          <Pill tone={r.status === "Quote queued" ? "ghost" : "amber"} dot={r.status !== "Quote queued"}>{r.status}</Pill>
        </div>
      </div>
    ))}
    <div style={{
      display:"grid",
      gridTemplateColumns:"1fr 110px",
      gap:14, padding:"12px 0 4px",
      alignItems:"baseline"
    }}>
      <div className="muted" style={{fontSize:12}}>{sub}</div>
      <div className="serif" style={{fontSize:20, fontStyle:"italic", textAlign:"right", color:"var(--amber)", lineHeight:1}}>{subValue}</div>
    </div>
  </div>
);

/* --- Pricing rules card --------------------------------- */
const PricingRulesCard = () => (
  <Card head="Pricing rules the Estimator used" eyebrow="REGENCY RULE BOOK V3"
        right={<Btn size="sm" variant="ghost" icon="pen">Open rule book</Btn>}>
    <div className="col" style={{gap:12}}>
      <RuleRow name="Hardwood"
               lines={["Material · $15/sf", "Install · $6/sf plank · $9/sf herringbone"]}/>
      <RuleRow name="Interior doors"
               lines={["$300 per slab · casing rolled in"]}/>
      <RuleRow name="Exterior brick"
               lines={["Allowance · $14/sf · taken from elevation sq ft"]}/>
      <RuleRow name="Interior trim"
               lines={["$6.50/lf · base + casing combined · from room dimensions"]}/>
      <RuleRow name="Allowances"
               lines={["Tile $12/sf · lighting $8,500 · plumb fix $14,000"]}/>
    </div>
  </Card>
);

const RuleRow = ({ name, lines }) => (
  <div className="row" style={{gap:14, alignItems:"flex-start"}}>
    <div style={{
      width:90,
      fontSize:12,
      color:"var(--ink)",
      fontWeight:500,
      paddingTop:2
    }}>{name}</div>
    <div style={{flex:1}}>
      {lines.map((l,i) => (
        <div key={i} className="muted" style={{fontSize:12.5, marginTop:i===0?0:3}}>{l}</div>
      ))}
    </div>
  </div>
);

/* --- Office Question (renamed Uncertainty) -------------- */
const OfficeQuestion = ({ q, context, actions }) => (
  <div>
    <div className="row" style={{gap:10, alignItems:"flex-start"}}>
      <span style={{
        width:18, height:18, borderRadius:"50%",
        background:"var(--amber-soft)", color:"var(--amber)",
        display:"grid", placeItems:"center",
        fontFamily:"var(--f-mono)", fontSize:10, fontWeight:600,
        flex:"0 0 auto", marginTop:1
      }}>?</span>
      <div style={{flex:1, fontSize:13.5, color:"var(--ink)", textWrap:"pretty"}}>{q}</div>
    </div>
    {context && <div className="muted" style={{fontSize:12.5, marginTop:6, marginLeft:28, textWrap:"pretty"}}>{context}</div>}
    <div className="row" style={{gap:6, marginTop:8, marginLeft:28}}>
      {actions.map(([label, variant],i) => (
        <Btn key={i} size="sm" variant={variant === "primary" ? "default" : variant}>{label}</Btn>
      ))}
    </div>
  </div>
);

/* =========================================================
   SCREEN 3 — Supplier Quote Packet (derived from worksheet)
   ========================================================= */
const ScreenQuotes = ({ project = "all" }) => {
  const selectedProject = project === "all" ? "st-leonards" : project;
  const projectLabel = selectedProject === "st-leonards" ? "St Leonards" :
                       selectedProject === "glenrose" ? "Glenrose" :
                       selectedProject === "oakwood" ? "Oakwood" :
                       selectedProject === "humber" ? "Humber" : "St Leonards";
  const [selectedLine, setSelectedLine] = React.useState(TRADE_BUDGET_LINES.find((l) => l.status === "missing") || TRADE_BUDGET_LINES[0]);
  const actualCount = TRADE_BUDGET_LINES.filter((l) => l.status === "actual").length;
  const estimatedCount = TRADE_BUDGET_LINES.filter((l) => l.status === "estimated").length;
  const missingCount = TRADE_BUDGET_LINES.filter((l) => l.status === "missing").length;
  const questionCount = TRADE_BUDGET_LINES.filter((l) => l.status === "question").length;

  return (
    <div className="screen quotes2">
      <DecisionDesk
        eyebrow={`Trade Coordinator · ${projectLabel}`}
        title="Trade Quote Queue"
        intro="For this project, the Trade Coordinator shows which budget lines have real trade numbers, which are still estimates, and which trades still need chasing."
        flow={[
          { label:"Came from", title:"Estimator budget", body:"Quote-needed lines and drawings." },
          { label:"Coordinator did", title:"Drafted trade asks", body:"Attachments and scope ready." },
          { label:"Your move", title:"Send or answer", body:"Approve emails and supplier questions." },
          { label:"Next", title:"Budget + schedule", body:"Replies firm up dollars and dates." },
        ]}
        primary={{ label:"Approve pending sends", icon:"send" }}
        secondary={{ label:"Hold all", icon:"clock" }}
        approvals={[
          { title:"Send roofing quote request", body:"Roof plan, shingle scope, and schedule window are attached.", meta:"draft", action:"Send" },
          { title:"Send electrical follow-up", body:"Electrical quote is still missing. Reminder is written and ready.", meta:"waiting", action:"Send reminder" },
          { title:"Fold plumbing quote into budget", body:"Plumbing replied with price and start window.", meta:"reply in", action:"Approve update" },
        ]}
        questions={[
          { title:"Windows need model numbers", body:"Supplier cannot finalize without missing window models.", action:"Ask supplier" },
          { title:"Carpentry labour assumption", body:"Budget still uses an internal crew rule instead of a confirmed labour plan.", action:"Ask Timekeeper" },
        ]}
        handled={[
          "Trade list chosen",
          "Attachments gathered",
          "Draft emails written",
          "No email sent without approval",
        ]}
      >
        <Card pad={false} className="trade-budget-card">
          <div className="trade-budget-head">
            <div>
              <div className="screen-eyebrow">Budget snapshot · {projectLabel}</div>
              <h3>What still needs a real number?</h3>
            </div>
            <div className="trade-budget-counts">
              <span><b>{actualCount}</b> actual</span>
              <span><b>{estimatedCount}</b> estimated</span>
              <span><b>{missingCount}</b> missing</span>
              <span><b>{questionCount}</b> question</span>
            </div>
          </div>
          <div className="trade-budget-layout">
            <div className="trade-budget-table">
              <div className="trade-budget-row is-head">
                <span>Code</span><span>Budget line</span><span>Trade number</span><span>Status</span>
              </div>
              {TRADE_BUDGET_LINES.map((line) => (
                <button
                  type="button"
                  className={"trade-budget-row is-" + line.status + (selectedLine.code === line.code ? " is-selected" : "")}
                  key={line.code}
                  onClick={() => setSelectedLine(line)}
                >
                  <span className="mono">{line.code}</span>
                  <span><b>{line.item}</b><small>{line.trade}</small></span>
                  <span>{line.current}</span>
                  <span>{line.status}</span>
                </button>
              ))}
            </div>
            <div className={"trade-budget-detail is-" + selectedLine.status}>
              <div className="screen-eyebrow">Selected line</div>
              <h4>{selectedLine.code} · {selectedLine.item}</h4>
              <div className="trade-detail-money">
                <div><span>Budget</span><b>{selectedLine.budget}</b></div>
                <div><span>Current number</span><b>{selectedLine.current}</b></div>
              </div>
              <p>{selectedLine.detail}</p>
              <button type="button">{selectedLine.action}</button>
            </div>
          </div>
        </Card>

        <Card head="Trade status" eyebrow="WHO REPLIED / WHO DIDN'T">
          <div className="compact-list">
            {EST_TRADE_QUEUE.map((t) => (
              <div className="compact-row" key={t.trade}>
                <b>{t.trade}</b>
                <span>{t.recipient} · {t.scope}</span>
                <em>{t.status}</em>
              </div>
            ))}
          </div>
        </Card>
      </DecisionDesk>
    </div>
  );
};

const QuoteQueueRow = ({ t }) => (
  <React.Fragment>
    <div className="quote-td main"><b>{t.trade}</b><small>{t.recipient}</small></div>
    <div className="quote-td">{t.scope}</div>
    <div className="quote-td"><span className={"quote-status is-" + t.status}>{t.status}</span><small>{t.sent}</small></div>
    <div className="quote-td code">{t.budget}</div>
    <div className="quote-td action">{t.next}</div>
  </React.Fragment>
);

const QuoteCard = ({ vendor, contact, relationship, worksheetRows, attachments, subject, question, body }) => (
  <div className="card" style={{padding:0, display:"grid", gridTemplateColumns:"260px 1fr 180px"}}>
    {/* Recipient + worksheet provenance */}
    <div style={{padding:"20px 22px", borderRight:"1px solid var(--line)"}}>
      <div className="screen-eyebrow">Recipient</div>
      <div style={{fontSize:15.5, fontWeight:500, marginTop:6, letterSpacing:"-0.005em"}}>{vendor}</div>
      <div className="muted" style={{fontSize:12.5, marginTop:3}}>{contact}</div>
      <div className="muted" style={{fontSize:12, marginTop:10}}>{relationship}</div>

      <hr className="hr-dashed" style={{margin:"16px 0 12px"}} />

      <div className="screen-eyebrow">From your worksheet</div>
      <ul style={{listStyle:"none", padding:0, margin:"6px 0 0", fontSize:12.5, color:"var(--ink-2)", display:"flex", flexDirection:"column", gap:4}}>
        {worksheetRows.map((r,i) => (
          <li key={i} style={{position:"relative", paddingLeft:14}}>
            <span style={{position:"absolute", left:0, top:7, width:4, height:4, borderRadius:"50%", background:"var(--amber)"}}/>
            {r}
          </li>
        ))}
      </ul>
    </div>

    {/* Draft email + supplier question + what will be sent */}
    <div style={{padding:"20px 22px", borderRight:"1px solid var(--line)"}}>
      <div className="screen-eyebrow">Draft email · from aaron@regencyhomes.com</div>
      <div style={{fontSize:14, fontWeight:500, letterSpacing:"-0.005em", marginTop:6}}>{subject}</div>
      <div style={{fontSize:13, color:"var(--ink-2)", marginTop:8, textWrap:"pretty", lineHeight:1.6}}>{body}</div>

      <div style={{
        marginTop:12,
        padding:"10px 12px",
        background:"var(--amber-soft)",
        border:"1px solid #E5CFA3",
        borderRadius:7
      }}>
        <div className="screen-eyebrow" style={{color:"var(--amber)"}}>Supplier question</div>
        <div style={{fontSize:13, color:"var(--ink)", marginTop:4, textWrap:"pretty", lineHeight:1.5}}>{question}</div>
      </div>

      <div style={{marginTop:12}}>
        <div className="screen-eyebrow">Attached</div>
        <div className="row" style={{gap:14, marginTop:6, flexWrap:"wrap", color:"var(--ink-3)", fontSize:12}}>
          {attachments.map((a,i) => (
            <span key={i} className="row" style={{gap:6}}>
              <Icon name="paperclip" size={12} color="var(--ink-3)" />
              <span>{a}</span>
            </span>
          ))}
        </div>
      </div>
    </div>

    {/* What will be sent + actions */}
    <div style={{padding:"20px 18px", display:"flex", flexDirection:"column", gap:10, background:"var(--paper-2)"}}>
      <div className="screen-eyebrow">What will be sent</div>
      <ul style={{listStyle:"none", padding:0, margin:0, fontSize:11.5, color:"var(--ink-2)", display:"flex", flexDirection:"column", gap:4}}>
        <li>· Email + subject + body</li>
        <li>· {attachments.length} attachment{attachments.length>1?"s":""}</li>
        <li>· From your Gmail</li>
        <li>· Reply-to · Mailroom</li>
      </ul>
      <div style={{flex:1}}/>
      <Btn variant="green" icon="send">Approve & send</Btn>
      <Btn variant="ghost" size="sm" icon="pen">Edit draft</Btn>
    </div>
  </div>
);

/* =========================================================
   SCREEN 4 — Bookkeeping Desk / Bill Approval Packet
   ========================================================= */
const ScreenBills = () => (
  <div className="screen books2">
    <DecisionDesk
      eyebrow="Bookkeeper · bills and hours"
      title="Bookkeeper Work Packet"
      intro="Ready items can go to QuickBooks. Unclear items stay held until you answer. No guessing."
      flow={[
        { label:"Came from", title:"Bills + time", body:"Gmail, Drive, WhatsApp, field logs." },
        { label:"Bookkeeper did", title:"Matched codes", body:"Vendor, project, amount, hours." },
        { label:"Your move", title:"Approve ready items", body:"Answer duplicate and split questions." },
        { label:"Next", title:"QuickBooks + ledger", body:"Writes happen only after approval." },
      ]}
      primary={{ label:"Approve ready items", icon:"check" }}
      secondary={{ label:"Hold unclear items", icon:"clock" }}
      approvals={[
        { title:"Push 6 ready bills", body:"Vendor, project, cost code, amount, and due date are matched.", meta:"$24,318.42", action:"Approve bills" },
        { title:"Push 12 employee hours", body:"Hours were staged from WhatsApp, timesheet photos, and replies.", meta:"12 ready", action:"Approve hours" },
        { title:"Send Carlos missing-hours follow-up", body:"Message is drafted. No hours will be entered until he replies.", meta:"Oakwood", action:"Send follow-up" },
      ]}
      questions={[
        { title:"Duplicate bill risk", body:"Same vendor, invoice number, and amount as a bill already in the batch.", action:"Keep held" },
        { title:"Rental split", body:"One rental bill appears to cover two houses. Needs a project split.", action:"Split bill" },
        { title:"Jay overtime exception", body:"Overtime is outside the normal rule. Needs your call before QBO.", action:"Approve OT" },
      ]}
      handled={[
        "10 bills scanned",
        "13 time entries reviewed",
        "4 unclear items held",
        "No payments created",
      ]}
    >
      <div className="books-main-grid">
      <Card head="Ready bills" eyebrow="APPROVE AS A BATCH OR OPEN ONE">
        <div className="simple-table">
          {[
            ["Northern Lumber", "Glenrose", "2001 Lumber", "$8,440.66", "ready"],
            ["SAV Electric", "St Leonards", "4101 Electrical rough-in", "$1,106.72", "ready"],
            ["Access Storage", "St Leonards", "0201 Rental", "$416.95", "ready"],
            ["JMO Plumbing", "St Leonards", "4001 Plumbing rough-in", "$395.50", "ready"],
            ["Toronto Workshop", "St Leonards", "2004 Carpenter labour", "$2,404.37", "ready"],
            ["Hartman Roofing", "Glenrose", "2401 Shingles", "$6,210.00", "ready"],
          ].map((r) => (
            <SimpleMoneyRow key={r.join("-")} row={r} />
          ))}
        </div>
      </Card>

      <Card head="Held questions" eyebrow="BOOKKEEPER STOPPED INSTEAD OF GUESSING">
        <div className="held-list">
          <HeldItem title="Duplicate risk" body="Same vendor, invoice number, and amount as a bill already in the batch." />
          <HeldItem title="Project unclear" body="Invoice has no project name. Bookkeeper suggests Glenrose, but needs approval." />
          <HeldItem title="Split bill" body="Rental appears to cover two houses. Needs project split before posting." />
          <HeldItem title="Cost code unsure" body="Could be site prep or foundation backfill. Held for mapping." />
        </div>
      </Card>

      <Card head="Employee hours" eyebrow="TIMEKEEPER PACKET · QUICKBOOKS AFTER APPROVAL">
        <div className="simple-table">
          {[
            ["Marco Rivera", "Glenrose", "9.5 reg", "ready"],
            ["Diego Vargas", "Glenrose", "9.0 reg + 1.0 OT", "ready"],
            ["Frank Park", "Oakwood", "8.0 reg + 2.0 OT", "reply folded in"],
            ["Carlos Diaz", "Oakwood", "missing", "follow-up drafted"],
          ].map((r) => (
            <SimpleHoursRow key={r.join("-")} row={r} />
          ))}
        </div>
      </Card>

      <Card head="Ask accounting" eyebrow="ANSWERS COME BACK WITH RECEIPTS">
        <div className="accounting-answer">
          <div className="ask-bubble">Why is Glenrose framing labor running over?</div>
          <div className="answer-bubble">
            <b>Short answer: Saturday overtime and lumber pricing.</b>
            <span>Northern Lumber came in $640 over the rule estimate. Approved Saturday overtime added about $1,500. Receipts are attached to both reasons.</span>
          </div>
        </div>
      </Card>
      </div>
    </DecisionDesk>
  </div>
);

const BookPacketCard = ({ tone, title, count, body, action }) => (
  <div className={"book-packet t-" + tone}>
    <div><span>{count}</span><b>{title}</b></div>
    <p>{body}</p>
    <button type="button">{action}</button>
  </div>
);

const SimpleMoneyRow = ({ row }) => (
  <div className="simple-money-row">
    <div><b>{row[0]}</b><small>{row[1]} · {row[2]}</small></div>
    <span>{row[3]}</span>
    <Pill tone="green" dot>{row[4]}</Pill>
  </div>
);

const SimpleHoursRow = ({ row }) => (
  <div className="simple-hours-row">
    <div><b>{row[0]}</b><small>{row[1]}</small></div>
    <span>{row[2]}</span>
    <Pill tone={row[3] === "ready" || row[3] === "reply folded in" ? "green" : "amber"} dot>{row[3]}</Pill>
  </div>
);

const HeldItem = ({ title, body }) => (
  <div className="held-item">
    <b>{title}</b>
    <span>{body}</span>
  </div>
);

const BillStackRow = ({ vendor, amount, status, tag, active }) => {
  const dotColor = status==="green"?"var(--green-2)":status==="amber"?"var(--amber-2)":"var(--rust)";
  return (
    <div className="card" style={{
      padding:"12px 14px",
      borderLeft: `3px solid ${dotColor}`,
      background: active ? "var(--white)" : "var(--paper)",
      boxShadow: active ? "var(--shadow-2)" : "none"
    }}>
      <div className="row between">
        <div style={{fontSize:13, fontWeight:500, color:"var(--ink)"}}>{vendor}</div>
        <span className="mono tnum" style={{fontSize:12.2, color:"var(--ink)"}}>{amount}</span>
      </div>
      <div className="muted" style={{fontSize:11.5, marginTop:3}}>{tag}</div>
    </div>
  );
};

/* =========================================================
   Hours Approval Packet — labor batch, ready for QuickBooks Time
   ========================================================= */
const HoursPacket = () => {
  const rows = [
    /* GLENROSE */
    { proj:"Glenrose", who:"Marco Rivera",   role:"site super", code:"06-100 framing", reg:"9.5", ot:"0",
      src:"WhatsApp voice 6:48 AM", status:"ready" },
    { proj:"Glenrose", who:"Diego Vargas",   role:"framer",     code:"06-100 framing", reg:"9.0", ot:"1.0",
      src:"Marco WA · timesheet photo", status:"ready" },
    { proj:"Glenrose", who:"Beto Hernandez", role:"framer",     code:"06-100 framing", reg:"9.0", ot:"1.0",
      src:"Marco WA · timesheet photo", status:"ready" },
    { proj:"Glenrose", who:"Jay Patel",      role:"framer",     code:"06-100 framing", reg:"9.0", ot:"0.5",
      src:"Marco WA · timesheet photo", status:"ot-exception",
      note:"Over your 8 OT hr / wk rule (Jay at 8.5)" },
    { proj:"Glenrose", who:"Mateo Ortiz",    role:"framer",     code:"—",              reg:"OFF", ot:"—",
      src:"Marco WA · sick day", status:"off" },
    /* OAKWOOD */
    { proj:"Oakwood",  who:"Hugo Martinez",  role:"lead carp.", code:"06-200 framing", reg:"8.0", ot:"0",
      src:"emailed timesheet PDF", status:"ready" },
    { proj:"Oakwood",  who:"Tom Patel",      role:"carp.",      code:"08-100 windows", reg:"7.5", ot:"0",
      src:"Hugo WA voice note", status:"ready" },
    { proj:"Oakwood",  who:"Sam Chen",       role:"carp.",      code:"06-200 framing", reg:"8.0", ot:"0",
      src:"Hugo WA voice note", status:"ready" },
    { proj:"Oakwood",  who:"Ramon Reyes",    role:"carp.",      code:"06-200 framing", reg:"8.0", ot:"0",
      src:"Hugo WA voice note", status:"ready" },
    { proj:"Oakwood",  who:"Eli Brooks",     role:"helper",     code:"06-200 framing", reg:"7.0", ot:"0",
      src:"Hugo WA voice note", status:"ready" },
    { proj:"Oakwood",  who:"Pete Munoz",     role:"helper",     code:"06-200 framing", reg:"6.5", ot:"0",
      src:"Hugo WA voice note", status:"ready" },
    /* CHASE RESOLVED */
    { proj:"Oakwood",  who:"Frank Park",     role:"framer",     code:"06-200 framing", reg:"8.0", ot:"2.0",
      src:"reply to follow-up · WhatsApp 7:42 AM", status:"chase-resolved" },
    /* CHASE OPEN */
    { proj:"Oakwood",  who:"Carlos Diaz",    role:"helper",     code:"—", reg:"—", ot:"—",
      src:"follow-up drafted, awaiting your send", status:"chase-open" },
  ];

  const totals = rows.reduce((acc, r) => {
    if (r.status === "ready" || r.status === "ot-exception" || r.status === "chase-resolved") {
      acc.reg += parseFloat(r.reg) || 0;
      acc.ot  += parseFloat(r.ot)  || 0;
    }
    return acc;
  }, {reg: 0, ot: 0});

  const statusToTone = {
    ready: "green",
    "chase-resolved": "green",
    "ot-exception": "amber",
    "chase-open": "amber",
    missing: "rust",
    off: "ghost",
  };

  return (
    <div className="card" style={{padding:0, marginTop:8}}>
      <div className="card-head">
        <div className="heading-stack">
          <span className="eyebrow">HOURS APPROVAL PACKET · QUICKBOOKS TIME</span>
          <h3>Today's labor batch — Tuesday, 17 May</h3>
        </div>
        <div className="right row" style={{gap:8}}>
          <Btn icon="clock" variant="ghost" size="md">Hold exceptions</Btn>
          <Btn icon="check" variant="primary" size="md">Approve 11 to QuickBooks</Btn>
        </div>
      </div>

      {/* summary band */}
      <div className="row" style={{
        padding:"6px 20px 14px",
        gap:24, alignItems:"baseline",
        fontSize:13, color:"var(--ink-2)"
      }}>
        <span><b style={{color:"var(--ink)"}}>13</b> entries</span>
        <span><b style={{color:"var(--green)"}}>12 ready</b></span>
        <span><b style={{color:"var(--amber)"}}>1 OT exception</b></span>
        <span><b style={{color:"var(--green)"}}>1 chase resolved this morning</b></span>
        <span><b style={{color:"var(--amber)"}}>1 follow-up to send</b></span>
        <span className="muted" style={{marginLeft:"auto"}}>
          Total: <b className="mono">{totals.reg.toFixed(1)}</b> reg + <b className="mono">{totals.ot.toFixed(1)}</b> OT
        </span>
      </div>

      <div style={{display:"grid", gridTemplateColumns:"1.6fr 1fr", gap:0, borderTop:"1px solid var(--line)"}}>
        {/* LEFT — entries grouped by project */}
        <div style={{padding:"14px 20px", borderRight:"1px solid var(--line)"}}>
          <HoursGroup
            label="Glenrose Custom Home · framing"
            rows={rows.filter(r => r.proj === "Glenrose")}
            tone="green"
            statusToTone={statusToTone}
          />
          <hr className="hr-soft" style={{margin:"14px 0"}}/>
          <HoursGroup
            label="Oakwood Kitchen · framing + windows"
            rows={rows.filter(r => r.proj === "Oakwood")}
            tone="navy"
            statusToTone={statusToTone}
          />
        </div>

        {/* RIGHT — exceptions + follow-ups + receipt preview */}
        <div style={{padding:"14px 20px", display:"flex", flexDirection:"column", gap:14}}>
          {/* OT exception */}
          <div style={{padding:"12px 14px", background:"var(--amber-soft)", border:"1px solid #E5CFA3", borderRadius:8}}>
            <div className="screen-eyebrow" style={{color:"var(--amber)"}}>OT exception · waiting on you</div>
            <div style={{fontSize:13.5, color:"var(--ink)", marginTop:6, textWrap:"pretty", lineHeight:1.5}}>
              <b>Jay Patel</b> at <span className="mono">8.5 OT hr</span> this week — over your <span className="mono">8 hr/wk</span> rule. Half-hour is from Tue framing push.
            </div>
            <div className="row" style={{gap:6, marginTop:10}}>
              <Btn size="sm">Approve once · keep rule</Btn>
              <Btn size="sm" variant="ghost">Raise Jay's cap</Btn>
              <Btn size="sm" variant="ghost">Hold</Btn>
            </div>
          </div>

          {/* Missing-hours chase moved out to its own full-width section below */}

          {/* On-approve receipt preview */}
          <div style={{padding:"12px 14px", background:"var(--green-soft)", border:"1px solid #C7D4B3", borderRadius:8}}>
            <div className="screen-eyebrow" style={{color:"var(--green)"}}>On approve</div>
            <ul style={{listStyle:"none", padding:0, margin:"6px 0 0", fontSize:12.5, color:"var(--ink-2)", display:"flex", flexDirection:"column", gap:4}}>
              <li>· 12 time entries posted to QuickBooks Time, job-costed by project + cost code</li>
              <li>· Carlos Diaz follow-up sent via WhatsApp (held until you approve send)</li>
              <li>· Jay's OT held until you approve · 1 receipt row per entry</li>
              <li>· No payments. No payroll. Approved time only.</li>
            </ul>
          </div>
        </div>
      </div>

      {/* ============ MISSING-HOURS CHASE — visible loop ============ */}
      <MissingHoursChase />
    </div>
  );
};

const HoursGroup = ({ label, rows, tone, statusToTone }) => (
  <div>
    <div className="row between" style={{alignItems:"baseline"}}>
      <div className="row" style={{gap:8, alignItems:"center"}}>
        <span style={{width:6, height:6, borderRadius:"50%",
          background: tone === "green" ? "var(--green)" : tone === "navy" ? "var(--navy)" : "var(--ink)"
        }}/>
        <span className="screen-eyebrow" style={{
          color: tone === "green" ? "var(--green)" : tone === "navy" ? "var(--navy)" : "var(--ink)"
        }}>{label}</span>
      </div>
      <span className="muted" style={{fontSize:11.5}}>{rows.length} on the schedule</span>
    </div>
    <div style={{marginTop:8}}>
      <div style={{
        display:"grid",
        gridTemplateColumns:"1.4fr 1.3fr 110px 1.1fr 90px",
        gap:10, padding:"6px 0",
        borderBottom:"1px solid var(--line-2)",
        fontFamily:"var(--f-mono)", fontSize:9.5, letterSpacing:"0.14em",
        textTransform:"uppercase", color:"var(--ink-4)"
      }}>
        <div>Employee</div>
        <div>Cost code</div>
        <div>Hours</div>
        <div>Source</div>
        <div style={{textAlign:"right"}}>Status</div>
      </div>
      {rows.map((r,i) => (
        <div key={i} style={{
          display:"grid",
          gridTemplateColumns:"1.4fr 1.3fr 110px 1.1fr 90px",
          gap:10, padding:"7px 0",
          borderBottom: i<rows.length-1 ? "1px dashed var(--line)" : "none",
          alignItems:"baseline", fontSize:12.5
        }}>
          <div>
            <span style={{color:"var(--ink)", fontWeight:500}}>{r.who}</span>
            <span className="muted" style={{fontSize:11, marginLeft:6}}>{r.role}</span>
          </div>
          <div className="mono" style={{color:"var(--ink-3)", fontSize:11.5}}>{r.code}</div>
          <div className="mono" style={{color: r.status === "chase-open" ? "var(--amber)" : r.status === "off" ? "var(--ink-4)" : "var(--ink-2)", fontSize:12}}>
            {r.status === "chase-open" ? "—" :
             r.status === "off" ? "OFF" :
             <>{r.reg} reg{parseFloat(r.ot) > 0 ? <> · {r.ot} OT</> : ""}</>}
          </div>
          <div className="muted" style={{fontSize:11.5}}>{r.src}</div>
          <div style={{textAlign:"right"}}>
            <Pill tone={statusToTone[r.status]} dot={r.status !== "off"}>
              {r.status === "ready"           ? "Ready" :
               r.status === "chase-resolved"  ? "Reply in" :
               r.status === "ot-exception"    ? "OT over rule" :
               r.status === "chase-open"      ? "Chasing" :
               r.status === "missing"         ? "Missing" :
                                                "Off"}
            </Pill>
          </div>
        </div>
      ))}
    </div>
  </div>
);

const FollowUp = ({ who, text }) => (
  <div style={{padding:"10px 0", borderBottom:"1px dashed var(--line)"}}>
    <div className="row" style={{gap:8, alignItems:"center", marginBottom:6}}>
      <Icon name="wa" size={12} color="var(--green)" />
      <span style={{fontSize:12.5, fontWeight:500, color:"var(--ink)"}}>To {who}</span>
      <span className="muted" style={{fontSize:11, marginLeft:"auto"}}>drafted</span>
    </div>
    <div style={{fontSize:12.5, color:"var(--ink-2)", fontStyle:"italic", textWrap:"pretty", lineHeight:1.5}}>
      “{text}”
    </div>
    <div className="row" style={{gap:6, marginTop:8}}>
      <Btn size="sm" variant="green" icon="send">Send</Btn>
      <Btn size="sm" variant="ghost" icon="pen">Edit</Btn>
    </div>
  </div>
);

/* =========================================================
   Missing-Hours Chase — the office actively chasing time cards
   ========================================================= */
const MissingHoursChase = () => (
  <div className="card" style={{padding:0, marginTop:8}}>
    <div className="card-head">
      <div className="heading-stack">
        <span className="eyebrow">MISSING-HOURS CHASE · BOOKKEEPER + FIELD INTAKE</span>
        <h3>The office is actively chasing time cards</h3>
      </div>
      <div className="right">
        <span className="muted" style={{fontSize:11.5}}>routes through Aaron's WhatsApp · replies fold back into the packet</span>
      </div>
    </div>

    <div style={{padding:"4px 20px 20px"}}>
      <ChaseRow
        who="Frank Park"
        role="framer"
        proj="Oakwood · 06-200 framing"
        stages={[
          { k:"drafted", t:"6:54 AM",  done:true,  active:false },
          { k:"sent",    t:"6:55 AM",  done:true,  active:false, note:"you approved send" },
          { k:"reply",   t:"7:42 AM",  done:true,  active:false, note:"\u201C8 reg 2 OT for framing\u201D" },
          { k:"folded",  t:"7:42 AM",  done:true,  active:false, note:"into today's batch" },
        ]}
        statusLabel="Chase complete"
        statusTone="green"
        message={`Frank — I have you on Oakwood framing today but no hours yet. Reply with regular/OT hours? Gracias —`}
        reply={`8 reg 2 OT for framing 👍`}
        replyWho="Frank · WhatsApp 7:42 AM"
        actions={[
          ["Open receipt","ghost","receipt"]
        ]}
      />

      <ChaseRow
        who="Carlos Diaz"
        role="helper"
        proj="Oakwood · 06-200 framing"
        stages={[
          { k:"drafted", t:"6:54 AM",  done:true,  active:false },
          { k:"sent",    t:"—",        done:false, active:true,  note:"awaiting your approve" },
          { k:"reply",   t:"—",        done:false, active:false },
          { k:"folded",  t:"—",        done:false, active:false },
        ]}
        statusLabel="Awaiting your send"
        statusTone="amber"
        message={`Carlos, te tengo en Oakwood framing hoy pero sin horas. Mándame las horas regulares + extra cuando puedas. — Aaron`}
        actions={[
          ["Send to Carlos","green","send"],
          ["Edit draft","ghost","pen"],
          ["Skip — I'll text him","ghost",null]
        ]}
      />

      <ChaseRow
        who="Mike Lee"
        role="helper"
        proj="Glenrose · 06-100 framing · yesterday"
        stages={[
          { k:"drafted", t:"Mon 4:18 PM", done:true,  active:false },
          { k:"sent",    t:"Mon 4:20 PM", done:true,  active:false, note:"you approved send" },
          { k:"reply",   t:"—",            done:false, active:true,  note:"no reply yet · auto-nudge 4 PM today" },
          { k:"folded",  t:"—",            done:false, active:false },
        ]}
        statusLabel="Sent · no reply yet"
        statusTone="amber"
        message={`Mike, I have you on Glenrose framing yesterday but no hours. Reply with regular/OT hours.`}
        actions={[
          ["Re-nudge now","green","send"],
          ["Mark resolved","ghost","check"],
          ["Hold","ghost","clock"]
        ]}
        lastBorder
      />
    </div>
  </div>
);

const ChaseRow = ({ who, role, proj, stages, statusLabel, statusTone, message, reply, replyWho, actions, lastBorder }) => (
  <div style={{
    padding:"16px 0",
    borderBottom: lastBorder ? "none" : "1px solid var(--line)",
    display:"grid",
    gridTemplateColumns:"220px 1fr 240px",
    gap:24,
    alignItems:"flex-start"
  }}>
    {/* identity */}
    <div>
      <div style={{fontSize:14, fontWeight:500, color:"var(--ink)"}}>{who}</div>
      <div className="muted" style={{fontSize:12, marginTop:2}}>{role}</div>
      <div className="mono" style={{fontSize:11, color:"var(--ink-4)", marginTop:6, letterSpacing:"0.04em"}}>{proj}</div>
      <div style={{marginTop:10}}>
        <Pill tone={statusTone} dot>{statusLabel}</Pill>
      </div>
    </div>

    {/* stages + message + reply */}
    <div>
      <ChaseStages stages={stages} statusTone={statusTone}/>
      <div style={{
        marginTop:12,
        padding:"10px 12px",
        background:"var(--paper-2)",
        border:"1px solid var(--line)",
        borderRadius:7
      }}>
        <div className="row" style={{gap:8, alignItems:"center", marginBottom:4}}>
          <Icon name="wa" size={12} color="var(--green)" />
          <span className="screen-eyebrow">Outgoing · drafted by Bookkeeper</span>
        </div>
        <div style={{fontSize:13, color:"var(--ink-2)", fontStyle:"italic", textWrap:"pretty", lineHeight:1.5}}>
          “{message}”
        </div>
        {reply && (
          <div style={{marginTop:10, paddingTop:10, borderTop:"1px dashed var(--line)"}}>
            <div className="row" style={{gap:8, alignItems:"center", marginBottom:4}}>
              <Icon name="wa" size={12} color="var(--green)" />
              <span className="screen-eyebrow" style={{color:"var(--green)"}}>Reply in · {replyWho}</span>
            </div>
            <div style={{fontSize:13, color:"var(--ink)", fontStyle:"italic"}}>
              “{reply}”
            </div>
          </div>
        )}
      </div>
    </div>

    {/* actions */}
    <div className="col" style={{gap:6, alignItems:"stretch"}}>
      {actions.map(([label, variant, icon], i) => (
        <Btn key={i} size="sm" variant={variant} icon={icon || undefined}>{label}</Btn>
      ))}
    </div>
  </div>
);

const ChaseStages = ({ stages, statusTone }) => {
  const accent = statusTone === "green" ? "var(--green-2)" :
                 statusTone === "amber" ? "var(--amber-2)" :
                                          "var(--ink)";
  return (
    <div style={{position:"relative", paddingLeft:0}}>
      <div style={{
        display:"grid",
        gridTemplateColumns:"repeat(4, 1fr)",
        gap:0,
        position:"relative"
      }}>
        {/* connector line behind dots */}
        <div style={{
          position:"absolute", top:9, left:"12.5%", right:"12.5%", height:1.5,
          background:"var(--line-2)"
        }}/>
        {stages.map((s,i) => (
          <div key={i} style={{
            display:"flex",
            flexDirection:"column",
            alignItems:"center",
            position:"relative",
            zIndex:1
          }}>
            <span style={{
              width:18, height:18, borderRadius:"50%",
              display:"grid", placeItems:"center",
              background: s.done ? accent : "var(--paper)",
              border: s.done ? `1.5px solid ${accent}` :
                      s.active ? `1.5px dashed ${accent}` :
                                 "1.5px solid var(--line-2)",
              color: "var(--paper)"
            }}>
              {s.done && <Icon name="check" size={10} color="var(--paper)"/>}
              {!s.done && s.active && <span style={{width:5, height:5, borderRadius:"50%", background:accent}}/>}
            </span>
            <span style={{
              marginTop:6,
              fontFamily:"var(--f-mono)", fontSize:9.5, letterSpacing:"0.1em",
              textTransform:"uppercase", color: s.done ? "var(--ink-2)" : "var(--ink-4)"
            }}>{s.k}</span>
            <span style={{
              marginTop:2,
              fontFamily:"var(--f-mono)", fontSize:10, color: s.done ? "var(--ink-3)" : "var(--ink-4)",
              letterSpacing:"0.04em"
            }}>{s.t}</span>
            {s.note && (
              <span style={{
                marginTop:3,
                fontSize:11, color: s.done ? "var(--ink-2)" : s.active ? accent : "var(--ink-4)",
                textAlign:"center", fontStyle: s.note.startsWith("\u201C") ? "italic" : "normal",
                maxWidth:130, lineHeight:1.35
              }}>{s.note}</span>
            )}
          </div>
        ))}
      </div>
    </div>
  );
};

/* =========================================================
   Ask Accounting — owner's question, agent's plain answer
   ========================================================= */
const AskAccounting = () => (
  <div className="card" style={{padding:0}}>
    <div className="card-head">
      <div className="heading-stack">
        <span className="eyebrow">ASK ACCOUNTING · ANYTIME</span>
        <h3>Ad-hoc questions for your Bookkeeper</h3>
      </div>
      <div className="right">
        <span className="muted" style={{fontSize:11.5}}>answers pull from quotes · bills · receipts · approved hours</span>
      </div>
    </div>

    <div style={{padding:"0 20px 20px"}}>
      {/* Owner question */}
      <div className="row" style={{gap:12, alignItems:"flex-start", marginTop:4}}>
        <div style={{
          width:32, height:32, borderRadius:"50%",
          background:"var(--amber-soft)", border:"1px solid var(--line-2)",
          display:"grid", placeItems:"center", color:"var(--ink)",
          fontFamily:"var(--f-mono)", fontSize:11, fontWeight:600, flex:"0 0 auto"
        }}>AB</div>
        <div style={{flex:1}}>
          <div className="row" style={{gap:8, alignItems:"baseline"}}>
            <span style={{fontSize:13, fontWeight:500}}>Aaron</span>
            <span className="muted" style={{fontSize:11.5}}>6:48 AM · sent from your phone</span>
          </div>
          <div style={{
            marginTop:4,
            padding:"10px 14px",
            background:"var(--white)",
            border:"1px solid var(--line)",
            borderRadius:8,
            fontSize:14,
            color:"var(--ink)",
            fontStyle:"italic"
          }}>
            “Why is framing labor running over on Glenrose? And is drywall on Oakwood headed the same way?”
          </div>
        </div>
      </div>

      {/* Bookkeeper answer */}
      <div className="row" style={{gap:12, alignItems:"flex-start", marginTop:14}}>
        <div style={{
          width:32, height:32, borderRadius:"50%",
          background:"var(--ink)",
          display:"grid", placeItems:"center", color:"var(--paper)",
          fontFamily:"var(--f-mono)", fontSize:11, fontWeight:600, flex:"0 0 auto"
        }}>BA</div>
        <div style={{flex:1}}>
          <div className="row" style={{gap:8, alignItems:"baseline"}}>
            <span style={{fontSize:13, fontWeight:500}}>Bookkeeper</span>
            <span className="muted" style={{fontSize:11.5}}>answered 6:49 AM · pulling from QuickBooks, approved hours, budget</span>
          </div>

          <div style={{
            marginTop:6,
            padding:"14px 18px",
            background:"var(--paper-2)",
            border:"1px solid var(--line)",
            borderRadius:8,
          }}>
            <div style={{fontSize:13.5, color:"var(--ink)", textWrap:"pretty", lineHeight:1.6}}>
              Quick read: Glenrose framing is <b style={{color:"var(--amber)"}}>$2,140 over</b> (budget $84,200, spent + committed $86,340). Two reasons. Oakwood drywall hasn't started, so no over yet — but the quote came back 4% higher than the rule estimate. Watch that one.
            </div>

            {/* Reason rows */}
            <div style={{marginTop:14, display:"grid", gridTemplateColumns:"1fr", gap:10}}>
              <ReasonRow
                num="1"
                title="Lumber delivery was 8% higher than rule"
                detail="Northern Lumber INV-NL-0566 came in $8,440 vs the $7,800 worksheet estimate. Northern's prices are up across the board this spring."
                evidence={["Bill INV-NL-0566 · Drive", "Worksheet · 06-100 lumber line"]}
                impact="+$640"
              />
              <ReasonRow
                num="2"
                title="Approved framing OT — your call last Friday"
                detail="Crane day rain delay pushed Friday's frame work into Saturday OT. Diego + Beto + Jay logged 1.5 OT each ($1,500 burden)."
                evidence={["Time receipt #TR-1488 · QuickBooks", "Daily log · Fri 13 May"]}
                impact="+$1,500"
              />
              <ReasonRow
                num="3"
                title="Mateo absences absorbed by the crew"
                detail="Mateo's two sick days this week shifted hours to the other framers. Net cost is small but it's the third week in a row."
                evidence={["Time receipts · 12, 17 May"]}
                impact="±$0"
              />
            </div>

            <div className="row" style={{gap:8, marginTop:14}}>
              <Btn size="sm" icon="receipt">See all receipts</Btn>
              <Btn size="sm" variant="ghost" icon="pen">Flag Oakwood drywall on dashboard</Btn>
              <Btn size="sm" variant="ghost">Reply</Btn>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
);

const ReasonRow = ({ num, title, detail, evidence, impact }) => (
  <div style={{
    display:"grid",
    gridTemplateColumns:"24px 1fr 100px",
    gap:12, padding:"10px 0",
    borderTop:"1px dashed var(--line)"
  }}>
    <div className="serif" style={{fontSize:22, fontStyle:"italic", color:"var(--ink-3)", lineHeight:1}}>{num}</div>
    <div>
      <div style={{fontSize:13, fontWeight:500, color:"var(--ink)"}}>{title}</div>
      <div className="muted" style={{fontSize:12.5, marginTop:3, textWrap:"pretty", lineHeight:1.5}}>{detail}</div>
      <div className="row" style={{gap:14, marginTop:6, fontSize:11.5, color:"var(--ink-3)", flexWrap:"wrap"}}>
        {evidence.map((e,i) => (
          <span key={i} className="row" style={{gap:5}}>
            <Icon name="paperclip" size={11} color="var(--ink-4)" />
            <span>{e}</span>
          </span>
        ))}
      </div>
    </div>
    <div className="mono tnum" style={{textAlign:"right", color:"var(--amber)", fontSize:13, fontWeight:500}}>{impact}</div>
  </div>
);

/* =========================================================
   SCREEN 5 — Field Desk / WhatsApp to Daily Log
   ========================================================= */
const ScreenField = () => (
  <div className="screen">
    <DecisionDesk
      eyebrow="Field Intake · active sites"
      title="Field Work Packet"
      intro="Site messages came in. Field Intake turned them into daily logs, photo filing, schedule flags, and hours. You approve or answer the exceptions."
      flow={[
        { label:"Came from", title:"Site WhatsApp", body:"Voice notes, photos, receipts." },
        { label:"Field Intake did", title:"Daily log draft", body:"Photos, issues, materials, hours." },
        { label:"Your move", title:"Approve or follow up", body:"Publish logs and answer exceptions." },
        { label:"Next", title:"Project + Scheduler", body:"Portal updates and delay flags." },
      ]}
      primary={{ label:"Approve field updates", icon:"check" }}
      secondary={{ label:"Ask site super", icon:"mail" }}
      approvals={[
        { title:"Publish Glenrose daily log", body:"Marco's voice note and 5 photos are summarized and ready.", meta:"today", action:"Approve log" },
        { title:"File 5 photos to Drive", body:"Photos are tagged to Glenrose, today, framing, delivery, and stair detail.", meta:"5 photos", action:"File photos" },
        { title:"Stage crew hours", body:"5 employee hour entries are ready for Bookkeeper review.", meta:"hours packet", action:"Stage hours" },
      ]}
      questions={[
        { title:"St Leonards daily log missing", body:"Site super usually reports by 7:30 AM. Follow-up is drafted.", action:"Send follow-up" },
        { title:"Stair detail looks off", body:"Marco flagged a stair detail issue. RFI is drafted for architect approval.", action:"Send RFI" },
        { title:"Humber schedule risk", body:"Photos show site clearing ahead of underpinning sign-off.", action:"Flag schedule" },
      ]}
      handled={[
        "WhatsApp voice transcribed",
        "Photos sorted",
        "Materials noted",
        "Client-safe update prepared",
      ]}
    >
      <div className="field-lane-grid">
        {[
          { project:"Glenrose", title:"Ready to approve", body:"Daily log, photos, and hours are staged.", tone:"green" },
          { project:"St Leonards", title:"Question", body:"No daily log received yet.", tone:"amber" },
          { project:"Oakwood", title:"Handled", body:"Frank's missing hours reply folded into Bookkeeper packet.", tone:"green" },
          { project:"Humber", title:"Question", body:"Possible schedule risk needs Trade Coordinator review.", tone:"rust" },
        ].map((lane) => (
          <div className={"field-lane-card t-" + lane.tone} key={lane.project}>
            <div className="screen-eyebrow">{lane.project}</div>
            <b>{lane.title}</b>
            <span>{lane.body}</span>
          </div>
        ))}
      </div>
    </DecisionDesk>
  </div>
);

window.ScreenToday = ScreenToday;
window.ScreenEstimate = ScreenEstimate;
window.ScreenQuotes = ScreenQuotes;
window.ScreenBills = ScreenBills;
window.ScreenField = ScreenField;