// BuildAI × Blueprint Grid — 10 feature screens
// Swiss minimalism. Mono + sans. ⌘K AI command bar.
// Same chrome on every screen; each feature fills the grid with its own content.

const B = {
  bg:     '#fafaf7',
  ink:    '#0a0a0a',
  ink2:   '#52524e',
  ink3:   '#8a8a85',
  line:   '#e5e4df',
  line2:  '#efeeea',
  panel:  '#ffffff',
  blue:   '#1e3a8a',
  blueSoft:'#eaecf4',
  amber:  '#b45309',
  green:  '#15803d',
  red:    '#9a1f2b',
  mono:   '"JetBrains Mono", ui-monospace, monospace',
  sans:   '"Inter Tight", -apple-system, sans-serif',
};

const B_NAV = ['Overview','Inbox','Change orders','Invoicing','Costs','Logs','Crew','Schedule','Estimates','Accounting'];

function BShell({ active, code, title, subtitle, stats, children }) {
  return (
    <div style={{
      width: '100%', height: '100%', background: B.bg,
      fontFamily: B.sans, color: B.ink, fontSize: 13,
      letterSpacing: '-0.005em', position: 'relative', overflow: 'hidden',
      display: 'flex', flexDirection: 'column',
    }}>
      <BTopBar active={active} />
      <BSubBar code={code} title={title} subtitle={subtitle} stats={stats} />
      <div style={{ flex: 1, borderTop: `1px solid ${B.line}`, display: 'flex', flexDirection: 'column', overflow: 'hidden' }}>
        {children}
      </div>
      <BStatusBar code={code} />
    </div>
  );
}

function BTopBar({ active }) {
  return (
    <div style={{
      height: 48, display: 'flex', alignItems: 'center',
      padding: '0 20px', borderBottom: `1px solid ${B.line}`,
      background: B.panel,
    }}>
      <div style={{ display: 'flex', alignItems: 'center', gap: 10, marginRight: 28 }}>
        <div style={{
          width: 20, height: 20, background: B.blue, borderRadius: 2,
          display: 'grid', placeItems: 'center', color: '#fff',
          fontFamily: B.mono, fontSize: 11, fontWeight: 600,
        }}>B</div>
        <div style={{ fontWeight: 600, fontSize: 14 }}>BuildAI</div>
        <div style={{ color: B.ink3, fontSize: 13 }}>/</div>
        <div style={{ fontSize: 13, color: B.ink2 }}>Calloway Construction</div>
      </div>
      <div style={{ display: 'flex' }}>
        {B_NAV.map(n => (
          <div key={n} style={{
            padding: '0 12px', height: 48, lineHeight: '48px',
            fontSize: 12.5, color: n === active ? B.ink : B.ink2,
            borderBottom: n === active ? `2px solid ${B.blue}` : '2px solid transparent',
            fontWeight: n === active ? 500 : 400,
          }}>{n}</div>
        ))}
      </div>
      <div style={{ marginLeft: 'auto', display: 'flex', alignItems: 'center', gap: 12 }}>
        <div style={{
          display: 'flex', alignItems: 'center', gap: 10,
          padding: '6px 10px', border: `1px solid ${B.line}`,
          borderRadius: 4, fontSize: 12, color: B.ink3,
          background: B.bg, width: 240,
        }}>
          <span>Ask BuildAI…</span>
          <span style={{
            marginLeft: 'auto', fontFamily: B.mono, fontSize: 11,
            background: B.panel, border: `1px solid ${B.line}`,
            padding: '1px 5px', borderRadius: 2,
          }}>⌘K</span>
        </div>
        <div style={{
          width: 26, height: 26, borderRadius: '50%',
          background: '#cbb79a', color: B.ink, fontSize: 11,
          display: 'grid', placeItems: 'center', fontWeight: 600,
        }}>MC</div>
      </div>
    </div>
  );
}

function BSubBar({ code, title, subtitle, stats = [] }) {
  return (
    <div style={{
      display: 'flex', alignItems: 'flex-end',
      padding: '24px 32px 18px', gap: 32,
      background: B.panel,
    }}>
      <div style={{ flex: 1 }}>
        <div style={{
          fontFamily: B.mono, fontSize: 10, color: B.ink3,
          textTransform: 'uppercase', letterSpacing: '0.08em', marginBottom: 10,
        }}>
          <span style={{ color: B.blue }}>●</span> &nbsp;{code}
        </div>
        <div style={{ fontSize: 32, fontWeight: 500, letterSpacing: '-0.02em', lineHeight: 1.05, marginBottom: 4 }}>
          {title}
        </div>
        <div style={{ color: B.ink2, fontSize: 13 }}>{subtitle}</div>
      </div>
      {stats.map(s => (
        <div key={s.l} style={{ minWidth: 100 }}>
          <div style={{
            fontFamily: B.mono, fontSize: 10, color: B.ink3,
            textTransform: 'uppercase', letterSpacing: '0.08em', marginBottom: 6,
          }}>{s.l}</div>
          <div style={{
            fontFamily: B.mono, fontSize: 24, fontWeight: 500,
            color: s.tone === 'amber' ? B.amber : s.tone === 'green' ? B.green : s.tone === 'red' ? B.red : s.tone === 'blue' ? B.blue : B.ink,
            letterSpacing: '-0.01em', lineHeight: 1,
          }}>{s.v}</div>
          <div style={{ fontSize: 11, color: B.ink3, marginTop: 4, fontFamily: B.mono }}>{s.sub}</div>
        </div>
      ))}
    </div>
  );
}

function BStatusBar({ code }) {
  return (
    <div style={{
      borderTop: `1px solid ${B.line}`, background: B.panel,
      padding: '8px 20px', display: 'flex', gap: 24,
      fontFamily: B.mono, fontSize: 11, color: B.ink3,
    }}>
      <span>{code}</span>
      <span>Synced 09:52 EDT · QuickBooks</span>
      <span style={{ color: B.green }}>● All systems nominal</span>
      <span style={{ marginLeft: 'auto' }}>Press <b style={{ color: B.ink }}>⌘K</b> to ask BuildAI anything</span>
    </div>
  );
}

function BCellHeader({ code, title, right }) {
  return (
    <div style={{
      display: 'flex', alignItems: 'center', gap: 10,
      padding: '12px 18px', borderBottom: `1px solid ${B.line2}`,
      background: B.panel,
    }}>
      <span style={{ fontFamily: B.mono, fontSize: 10, color: B.ink3, letterSpacing: '0.08em' }}>{code}</span>
      <span style={{ fontSize: 12.5, fontWeight: 500 }}>{title}</span>
      {right && <span style={{ marginLeft: 'auto', fontSize: 11, color: B.ink3, fontFamily: B.mono }}>{right}</span>}
    </div>
  );
}

// A compact AI card — blueprint blue soft bg, mono label, text body
function BAI({ label = 'BUILDAI · AUTO-REVIEW', children, style }) {
  return (
    <div style={{
      background: B.blueSoft, padding: 14, fontSize: 12.5, lineHeight: 1.55,
      color: B.ink, borderLeft: `2px solid ${B.blue}`, ...style,
    }}>
      <div style={{
        fontFamily: B.mono, fontSize: 9.5, color: B.blue,
        letterSpacing: '0.12em', marginBottom: 5, textTransform: 'uppercase',
      }}>{label}</div>
      {children}
    </div>
  );
}

// ═════════════════════════════════════════════════════════════
// 01 · Inbox
// ═════════════════════════════════════════════════════════════
function BComms() {
  return (
    <BShell
      active="Inbox"
      code="MOD/01 · Unified comms · 2026-04-21"
      title="Inbox · 23 threads · 6 replies drafted"
      subtitle="Auto-tagged by job, scored by intent, drafted in your tone. Drafts expire after 24h."
      stats={[
        { l: 'Unread', v: '12', sub: 'of 23 total', tone: 'blue' },
        { l: 'Drafted', v: '6', sub: 'ready to send' },
        { l: 'Response time', v: '4.2m', sub: '7d avg', tone: 'green' },
        { l: 'Scope flags', v: '1', sub: 'Johnson · pergola', tone: 'amber' },
      ]}
    >
      <div style={{ display: 'grid', gridTemplateColumns: '2fr 1fr', borderTop: `1px solid ${B.line}`, flex: 1, overflow: 'hidden' }}>
        <div style={{ borderRight: `1px solid ${B.line}`, background: B.panel, overflow: 'auto' }}>
          <BCellHeader code="01" title="Threads · today" right="12 unread" />
          {[
            ['10:42','SMS','Sarah Johnson','Johnson Kitchen','change req','Can we also add the pergola while you are here?','DRAFTED'],
            ['10:28','EMAIL','ABC Supply · Ron','Harborview Blk B','schedule','Rebar #4 order ready for pickup, 40 bundles. Confirm Fri AM window?','DRAFTED'],
            ['09:55','VOICE','David Pike','Pike Bath','question','[1:24] checking on the tile eta, guests coming Saturday','DRAFTED'],
            ['08:40','EMAIL','Calloway Co','Calloway TI','payment','Wire transfer confirmation — $28,400 · Milestone 2 · Ref #CW-2209','—'],
            ['08:12','SMS','Mike Torres · Tile','Smith Bath','schedule','Running about 20min late to Smith, on site by 7:50.','—'],
            ['07:50','SMS','Jen Marsh','Marsh Addition','question','When are you pouring the footings? Neighbor keeps asking','DRAFTED'],
            ['07:14','EMAIL','City Permits','Harborview Blk B','schedule','Permit #HB-4412 insp. scheduled Thu Apr 29 10:00. Reply Y to confirm.','DRAFTED'],
            ['06:48','SMS','Ron Bauer · Plumber','Johnson Kitchen','question','Need the riser for the island sink — can you order today?','DRAFTED'],
          ].map((r, i) => (
            <div key={i} style={{
              display: 'grid', gridTemplateColumns: '60px 70px 170px 140px 1fr 90px',
              gap: 14, padding: '12px 18px', borderBottom: `1px solid ${B.line2}`,
              fontSize: 12.5, alignItems: 'center',
            }}>
              <span style={{ fontFamily: B.mono, fontSize: 11, color: B.ink3 }}>{r[0]}</span>
              <span style={{ fontFamily: B.mono, fontSize: 9.5, color: B.ink3, letterSpacing: '0.08em' }}>{r[1]}</span>
              <span style={{ color: B.ink, fontWeight: 500 }}>{r[2]}</span>
              <span style={{ color: B.ink2, fontSize: 11.5 }}>{r[3]}</span>
              <span style={{ color: B.ink2, overflow: 'hidden', textOverflow: 'ellipsis', whiteSpace: 'nowrap' }}>
                <span style={{ fontFamily: B.mono, fontSize: 9, color: B.ink3, letterSpacing: '0.08em', marginRight: 8, textTransform: 'uppercase' }}>
                  [{r[4]}]
                </span>
                {r[5]}
              </span>
              <span style={{ fontFamily: B.mono, fontSize: 10, color: r[6] === 'DRAFTED' ? B.blue : B.ink3, textAlign: 'right', letterSpacing: '0.08em' }}>
                {r[6]}
              </span>
            </div>
          ))}
        </div>
        <div style={{ background: B.panel, overflow: 'auto' }}>
          <BCellHeader code="02" title="Selected · Sarah Johnson" right="DRAFT" />
          <div style={{ padding: '16px 18px' }}>
            <div style={{ fontFamily: B.mono, fontSize: 10, color: B.ink3, letterSpacing: '0.08em', marginBottom: 6 }}>
              JOB · JOHNSON KITCHEN · 67%
            </div>
            <div style={{ fontSize: 13, color: B.ink2, marginBottom: 14, lineHeight: 1.55 }}>
              "Can we also add the pergola while you are here? Willing to pay extra obviously."
            </div>
            <BAI label="BUILDAI · SCOPE CHANGE DETECTED">
              "Pergola" is not in the Johnson scope of work. Price range $4,200–$6,800 from 4 similar past jobs. Suggest drafting CO-003 and replying with a ballpark.
            </BAI>
            <div style={{
              marginTop: 12, border: `1px solid ${B.line}`, padding: 12,
              fontSize: 12.5, color: B.ink, lineHeight: 1.55,
            }}>
              <div style={{ fontFamily: B.mono, fontSize: 9.5, color: B.ink3, letterSpacing: '0.1em', marginBottom: 6 }}>REPLY · DRAFTED</div>
              Happy to take a look! Pergolas typically run $4,200–$6,800 depending on materials. Want me to send over a change order with a firm number by tomorrow?
              <div style={{ display: 'flex', gap: 6, marginTop: 12 }}>
                <div style={{ padding: '5px 12px', background: B.ink, color: '#fff', borderRadius: 2, fontSize: 11, fontFamily: B.mono, letterSpacing: '0.04em' }}>SEND</div>
                <div style={{ padding: '5px 12px', border: `1px solid ${B.line}`, color: B.ink2, borderRadius: 2, fontSize: 11, fontFamily: B.mono, letterSpacing: '0.04em' }}>EDIT</div>
                <div style={{ padding: '5px 12px', border: `1px solid ${B.line}`, color: B.ink2, borderRadius: 2, fontSize: 11, fontFamily: B.mono, letterSpacing: '0.04em' }}>+ CO-003</div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </BShell>
  );
}

// ═════════════════════════════════════════════════════════════
// 02 · Change Orders
// ═════════════════════════════════════════════════════════════
function BCO() {
  const rows = [
    ['CO-011','Johnson Kitchen','Subfloor replace — 40 sqft','$864','Apr 21','PENDING','5h'],
    ['CO-010','Pike Bath','Upgrade fixtures — brushed brass','$1,240','Apr 19','PENDING','2d'],
    ['CO-009','Smith Bath','Add niche + shelf','$420','Apr 18','APPROVED','—'],
    ['CO-008','Harborview Blk B','Low-E glazing upgrade','$18,400','Apr 14','APPROVED','—'],
    ['CO-007','Marsh Addition','Relocate egress window','$2,100','Apr 12','DECLINED','—'],
    ['CO-006','Calloway TI','Kitchenette plumbing rough','$3,480','Apr 08','APPROVED','—'],
    ['CO-005','Johnson Kitchen','Brushed brass outlet covers ×14','$588','Apr 05','APPROVED','—'],
  ];
  const badge = (s) => ({
    PENDING:  { c: B.amber, bg: '#fbeedd' },
    APPROVED: { c: B.green, bg: '#e1f1e5' },
    DECLINED: { c: B.red,   bg: '#f5e0e2' },
  })[s];
  return (
    <BShell
      active="Change orders"
      code="MOD/02 · Change orders · 2026-04-21"
      title="Change orders · 3 pending · +$18.2K this month"
      subtitle="Draft from voice in 40 seconds. Auto-reminders at 48h, 5d, 10d. Approvals mirror into QuickBooks."
      stats={[
        { l: 'Pending total', v: '$2,524', sub: '3 COs', tone: 'amber' },
        { l: 'Approved MTD', v: '$18,240', sub: '14 COs', tone: 'green' },
        { l: 'Auto-reminders', v: '2', sub: 'sent · 48h' },
        { l: 'Decline rate', v: '4.1%', sub: '90d avg' },
      ]}
    >
      <div style={{ display: 'grid', gridTemplateColumns: '3fr 2fr', flex: 1, overflow: 'hidden' }}>
        <div style={{ borderRight: `1px solid ${B.line}`, background: B.panel, overflow: 'auto' }}>
          <BCellHeader code="01" title="All change orders" right={`${rows.length} records`} />
          <div style={{
            display: 'grid', gridTemplateColumns: '60px 1.5fr 2fr 80px 60px 90px 50px',
            gap: 10, padding: '10px 18px', background: B.bg, borderBottom: `1px solid ${B.line2}`,
            fontFamily: B.mono, fontSize: 9.5, color: B.ink3, letterSpacing: '0.08em', textTransform: 'uppercase',
          }}>
            <span>CO #</span><span>Job</span><span>Description</span>
            <span style={{ textAlign: 'right' }}>Amount</span>
            <span>Sent</span><span>Status</span><span style={{ textAlign: 'right' }}>Age</span>
          </div>
          {rows.map((r, i) => {
            const b = badge(r[5]);
            return (
              <div key={i} style={{
                display: 'grid', gridTemplateColumns: '60px 1.5fr 2fr 80px 60px 90px 50px',
                gap: 10, padding: '12px 18px', borderBottom: `1px solid ${B.line2}`,
                fontSize: 12.5, alignItems: 'center',
              }}>
                <span style={{ fontFamily: B.mono, fontSize: 11, color: B.ink }}>{r[0]}</span>
                <span style={{ color: B.ink2 }}>{r[1]}</span>
                <span style={{ color: B.ink }}>{r[2]}</span>
                <span style={{ textAlign: 'right', fontFamily: B.mono, color: B.ink }}>{r[3]}</span>
                <span style={{ fontFamily: B.mono, fontSize: 11, color: B.ink3 }}>{r[4]}</span>
                <span style={{
                  fontFamily: B.mono, fontSize: 9.5, letterSpacing: '0.08em',
                  padding: '2px 8px', background: b.bg, color: b.c, justifySelf: 'start', borderRadius: 2,
                }}>{r[5]}</span>
                <span style={{ textAlign: 'right', fontFamily: B.mono, fontSize: 10, color: B.ink3 }}>{r[6]}</span>
              </div>
            );
          })}
        </div>
        <div style={{ background: B.panel, overflow: 'auto' }}>
          <BCellHeader code="02" title="CO-011 · Subfloor replace" right="JOHNSON" />
          <div style={{ padding: '16px 18px' }}>
            <div style={{ fontFamily: B.mono, fontSize: 9.5, color: B.ink3, letterSpacing: '0.1em', marginBottom: 6 }}>
              DRAFTED FROM VOICE · 00:34
            </div>
            <div style={{ fontSize: 13, color: B.ink2, lineHeight: 1.6, marginBottom: 16, fontStyle: 'italic' }}>
              "Found rot under the bathroom subfloor, need to replace about 40 square feet."
            </div>
            <div style={{ display: 'grid', gridTemplateColumns: 'repeat(3, 1fr)', gap: 14, marginBottom: 16 }}>
              {[['Qty','40 sqft'],['Unit','$18.00'],['Markup','20%']].map(([l,v]) => (
                <div key={l}>
                  <div style={{ fontFamily: B.mono, fontSize: 9.5, color: B.ink3, letterSpacing: '0.08em' }}>{l}</div>
                  <div style={{ fontFamily: B.mono, fontSize: 18, color: B.ink }}>{v}</div>
                </div>
              ))}
            </div>
            <BAI>
              Unit cost pulled from 3 similar past jobs ($16.50 / $18.25 / $19.25 per sqft). Confidence: 94%. Total $720 + 20% markup = <b>$864.00</b>. One-click send to Sarah for e-signature.
            </BAI>
            <div style={{ display: 'flex', gap: 6, marginTop: 14 }}>
              <div style={{ padding: '6px 14px', background: B.blue, color: '#fff', borderRadius: 2, fontSize: 11, fontFamily: B.mono, letterSpacing: '0.04em' }}>[ SEND FOR SIG ]</div>
              <div style={{ padding: '6px 14px', border: `1px solid ${B.line}`, color: B.ink2, borderRadius: 2, fontSize: 11, fontFamily: B.mono, letterSpacing: '0.04em' }}>PREVIEW PDF</div>
            </div>
          </div>
        </div>
      </div>
    </BShell>
  );
}

// ═════════════════════════════════════════════════════════════
// 03 · Invoicing + A/R
// ═════════════════════════════════════════════════════════════
function BInvoice() {
  const aging = [
    ['INV-1138','Pike Bath','David Pike','$8,420','61d','60+','final','Day 45 · approval req.', B.red],
    ['INV-1139','Marsh Addition','Jen Marsh','$14,200','38d','31-60','firmer','Apr 14 · firm reminder',B.amber],
    ['INV-1141','Smith Bath','Rachel Smith','$6,880','22d','1-30','gentle','Apr 08 · gentle nudge',B.amber],
    ['INV-1140','Harborview Blk B','Ridgeline Dev','$42,200','11d','1-30','—','—',B.ink],
    ['INV-1142','Johnson Kitchen','Sarah Johnson','$12,388','0d','current','—','Scheduled Apr 21',B.green],
  ];
  return (
    <BShell
      active="Invoicing"
      code="MOD/03 · Invoicing + A/R · 2026-04-21"
      title="A/R · $84,220 outstanding"
      subtitle="Milestone-triggered invoicing. Auto-collect on a schedule you set once. QuickBooks synced."
      stats={[
        { l: 'Current', v: '$54.6K', sub: '0–14d', tone: 'green' },
        { l: '1–30 days', v: '$21.1K', sub: '2 invoices', tone: 'amber' },
        { l: '31–60', v: '$14.2K', sub: 'Marsh · firm sent', tone: 'amber' },
        { l: '60+', v: '$8.4K', sub: 'Pike · day 45', tone: 'red' },
      ]}
    >
      <div style={{ background: B.panel, padding: '18px 32px 10px' }}>
        <div style={{ fontFamily: B.mono, fontSize: 9.5, color: B.ink3, letterSpacing: '0.1em', marginBottom: 8 }}>
          AGING · ALL INVOICES · $84.2K
        </div>
        <div style={{ display: 'flex', height: 10, borderRadius: 2, overflow: 'hidden', gap: 1 }}>
          {[[54,'#15803d'],[22,'#b45309'],[14,'#c85322'],[10,'#9a1f2b']].map(([f,c], i) => (
            <div key={i} style={{ flex: f, background: c, position: 'relative' }}>
              <span style={{ position: 'absolute', inset: 0, display: 'grid', placeItems: 'center', fontFamily: B.mono, fontSize: 10, color: '#fff', fontWeight: 600 }}>
                {f}%
              </span>
            </div>
          ))}
        </div>
      </div>
      <div style={{ display: 'grid', gridTemplateColumns: '1.2fr 1fr', flex: 1, overflow: 'hidden' }}>
        <div style={{ borderRight: `1px solid ${B.line}`, background: B.panel, overflow: 'auto' }}>
          <BCellHeader code="01" title="Invoices · open" right={`${aging.length} records`} />
          <div style={{
            display: 'grid', gridTemplateColumns: '72px 1.3fr 80px 50px 80px 1fr',
            gap: 10, padding: '10px 18px', background: B.bg, borderBottom: `1px solid ${B.line2}`,
            fontFamily: B.mono, fontSize: 9.5, color: B.ink3, letterSpacing: '0.08em', textTransform: 'uppercase',
          }}>
            <span>Invoice</span><span>Job · Client</span>
            <span style={{ textAlign: 'right' }}>Amount</span>
            <span style={{ textAlign: 'right' }}>Age</span>
            <span>Stage</span><span>Last action</span>
          </div>
          {aging.map((r, i) => (
            <div key={i} style={{
              display: 'grid', gridTemplateColumns: '72px 1.3fr 80px 50px 80px 1fr',
              gap: 10, padding: '12px 18px', borderBottom: `1px solid ${B.line2}`,
              fontSize: 12.5, alignItems: 'center',
            }}>
              <span style={{ fontFamily: B.mono, fontSize: 11 }}>{r[0]}</span>
              <span style={{ color: B.ink }}>
                <span style={{ color: B.ink }}>{r[1]}</span> <span style={{ color: B.ink3 }}>· {r[2]}</span>
              </span>
              <span style={{ textAlign: 'right', fontFamily: B.mono, color: B.ink }}>{r[3]}</span>
              <span style={{ textAlign: 'right', fontFamily: B.mono, fontSize: 11, color: r[8] }}>{r[4]}</span>
              <span style={{ fontFamily: B.mono, fontSize: 9.5, color: r[8], letterSpacing: '0.08em', textTransform: 'uppercase' }}>{r[6]}</span>
              <span style={{ color: B.ink2, fontSize: 11.5 }}>{r[7]}</span>
            </div>
          ))}
        </div>
        <div style={{ background: B.panel, overflow: 'auto' }}>
          <BCellHeader code="02" title="Auto-draft · milestone reached" right="INV-1142" />
          <div style={{ padding: '14px 18px' }}>
            <BAI label="BUILDAI · MILESTONE TRIGGERED">
              Rough-In marked complete 4 min ago. Invoice <b>INV-1142</b> drafted: $10,400 milestone + CO-002 ($588) + CO-003 deposit ($1,400) = <b>$12,388</b>. Net 14 · ACH / card / check.
            </BAI>
            <div style={{ border: `1px solid ${B.line}`, marginTop: 14 }}>
              <div style={{ padding: '10px 14px', borderBottom: `1px solid ${B.line2}`, display: 'flex', alignItems: 'baseline' }}>
                <div style={{ fontWeight: 500 }}>Calloway Construction</div>
                <div style={{ marginLeft: 'auto', fontFamily: B.mono, fontSize: 11, color: B.ink3 }}>INV-1142 · 04/21/26</div>
              </div>
              {[
                ['Rough-In milestone · contract', '1', '$10,400', '$10,400'],
                ['CO-002 · brushed brass outlets', '14', '$42.00', '$588'],
                ['CO-003 · pergola deposit', '1', '$1,400', '$1,400'],
              ].map((r, i) => (
                <div key={i} style={{
                  display: 'grid', gridTemplateColumns: '1fr 40px 70px 70px',
                  padding: '8px 14px', fontSize: 11.5, gap: 8,
                  borderBottom: `1px solid ${B.line2}`,
                }}>
                  <span>{r[0]}</span>
                  <span style={{ textAlign: 'right', fontFamily: B.mono }}>{r[1]}</span>
                  <span style={{ textAlign: 'right', fontFamily: B.mono, color: B.ink2 }}>{r[2]}</span>
                  <span style={{ textAlign: 'right', fontFamily: B.mono }}>{r[3]}</span>
                </div>
              ))}
              <div style={{ padding: '12px 14px', display: 'flex', alignItems: 'baseline' }}>
                <span style={{ fontFamily: B.mono, fontSize: 10, color: B.ink3, letterSpacing: '0.1em' }}>TOTAL DUE</span>
                <span style={{ marginLeft: 'auto', fontFamily: B.mono, fontSize: 20, color: B.ink }}>$12,388.00</span>
              </div>
            </div>
            <div style={{ display: 'flex', gap: 6, marginTop: 12 }}>
              <div style={{ padding: '6px 14px', background: B.blue, color: '#fff', borderRadius: 2, fontSize: 11, fontFamily: B.mono, letterSpacing: '0.04em' }}>[ SEND ]</div>
              <div style={{ padding: '6px 14px', border: `1px solid ${B.line}`, color: B.ink2, borderRadius: 2, fontSize: 11, fontFamily: B.mono, letterSpacing: '0.04em' }}>EDIT</div>
            </div>
          </div>
        </div>
      </div>
    </BShell>
  );
}

// ═════════════════════════════════════════════════════════════
// 04 · Job Cost Tracker
// ═════════════════════════════════════════════════════════════
function BCost() {
  return (
    <BShell
      active="Costs"
      code="MOD/04 · Job cost tracker · 2026-04-21"
      title="Johnson Kitchen · $56,820 / $84,200 contract"
      subtitle="Every receipt extracted, tagged to job, posted to QuickBooks. No manual entry."
      stats={[
        { l: 'Spent', v: '67.5%', sub: 'of contract', tone: 'blue' },
        { l: 'Labor', v: '+15%', sub: 'over plan', tone: 'amber' },
        { l: 'Materials', v: '94%', sub: 'against plan', tone: 'green' },
        { l: 'Projected', v: '+$900', sub: 'over estimate', tone: 'amber' },
      ]}
    >
      <div style={{ display: 'grid', gridTemplateColumns: '1fr 1fr 1fr', flex: 1, borderTop: `1px solid ${B.line}` }}>
        <div style={{ borderRight: `1px solid ${B.line}`, background: B.panel }}>
          <BCellHeader code="01" title="Budget · actual vs plan" right="$84.2K" />
          <div style={{ padding: '14px 18px 20px' }}>
            {[
              { k: 'Labor',     p: 28400, a: 22960, pct: 81, warn: true },
              { k: 'Materials', p: 31200, a: 22040, pct: 71 },
              { k: 'Subs',      p: 14800, a:  9180, pct: 62 },
              { k: 'Equipment', p:  4200, a:  1640, pct: 39 },
              { k: 'Permits',   p:  2600, a:  2600, pct: 100 },
              { k: 'Contingency',p: 3000, a:     0, pct: 0 },
            ].map(r => (
              <div key={r.k} style={{ paddingTop: 10, paddingBottom: 10, borderBottom: `1px solid ${B.line2}` }}>
                <div style={{ display: 'grid', gridTemplateColumns: '1fr 60px 60px 40px', fontSize: 12 }}>
                  <span>{r.k}</span>
                  <span style={{ textAlign: 'right', fontFamily: B.mono, color: B.ink3 }}>${(r.p/1000).toFixed(1)}K</span>
                  <span style={{ textAlign: 'right', fontFamily: B.mono }}>${(r.a/1000).toFixed(1)}K</span>
                  <span style={{ textAlign: 'right', fontFamily: B.mono, color: r.warn ? B.amber : B.ink }}>{r.pct}%</span>
                </div>
                <div style={{ height: 2, background: B.line2, marginTop: 6, position: 'relative' }}>
                  <div style={{ position: 'absolute', inset: 0, width: `${Math.min(r.pct,100)}%`, background: r.warn ? B.amber : B.blue }} />
                </div>
              </div>
            ))}
          </div>
        </div>
        <div style={{ borderRight: `1px solid ${B.line}`, background: B.panel }}>
          <BCellHeader code="02" title="Transaction feed" right="Today · 7 entries" />
          {[
            ['07:12','PHOTO','Home Depot','Materials','$525.66','✓'],
            ['08:04','EMAIL','ABC Supply','Materials','$1,248.00','✓'],
            ['09:18','PHOTO','Ace Hardware','Materials','$78.40','✓'],
            ['10:42','PHOTO','Shell · fuel','Fuel','$62.00','✓'],
            ['11:15','AUTO','Mike Torres · labor','Labor','$840.00','✓'],
            ['13:28','EMAIL','Ferguson · plumb','Materials','$412.18','⚠'],
            ['14:10','PHOTO','Home Depot · dup?','Materials','$78.40','⚠'],
          ].map((r, i) => (
            <div key={i} style={{
              display: 'grid', gridTemplateColumns: '50px 60px 1fr 80px 70px 24px',
              gap: 10, padding: '10px 18px', borderBottom: `1px solid ${B.line2}`,
              fontSize: 11.5, alignItems: 'center',
            }}>
              <span style={{ fontFamily: B.mono, fontSize: 10, color: B.ink3 }}>{r[0]}</span>
              <span style={{ fontFamily: B.mono, fontSize: 9, color: B.ink3, letterSpacing: '0.08em' }}>{r[1]}</span>
              <span style={{ color: B.ink }}>{r[2]}</span>
              <span style={{ fontFamily: B.mono, fontSize: 10, color: B.ink3 }}>{r[3]}</span>
              <span style={{ textAlign: 'right', fontFamily: B.mono, color: B.ink }}>{r[4]}</span>
              <span style={{ textAlign: 'center', color: r[5] === '⚠' ? B.amber : B.green, fontFamily: B.mono }}>{r[5]}</span>
            </div>
          ))}
        </div>
        <div style={{ background: B.panel, overflow: 'auto' }}>
          <BCellHeader code="03" title="Capture · 07:12" right="94% confidence" />
          <div style={{ padding: '14px 18px' }}>
            <BAI label="BUILDAI · RECEIPT EXTRACTED">
              Home Depot #4412, Portland ME. 5 line items, total <b>$525.66</b>. Auto-matched to Johnson Kitchen (GPS + vendor history). Posted to QuickBooks: Materials/Lumber · 3.1s ago.
            </BAI>
            <div style={{ marginTop: 14, fontFamily: B.mono, fontSize: 10, color: B.ink3, letterSpacing: '0.08em' }}>LINE ITEMS</div>
            {[
              ['2×4×8 SPF #2 lumber', '24','$190.80'],
              ['7/16 OSB sheathing', '8','$198.40'],
              ['Galv 16d common nails','5','$62.50'],
              ['Liquid Nails adhesive','4','$31.96'],
              ['Heavy poly 4mil','1','$42.00'],
            ].map((r, i) => (
              <div key={i} style={{
                display: 'grid', gridTemplateColumns: '1fr 30px 70px',
                padding: '8px 0', fontSize: 11.5, borderBottom: `1px solid ${B.line2}`,
              }}>
                <span>{r[0]}</span>
                <span style={{ textAlign: 'right', fontFamily: B.mono, color: B.ink3 }}>{r[1]}</span>
                <span style={{ textAlign: 'right', fontFamily: B.mono }}>{r[2]}</span>
              </div>
            ))}
            <div style={{
              marginTop: 12, padding: 10, background: '#fbeedd', borderLeft: `2px solid ${B.amber}`,
              fontSize: 11.5, color: B.ink2,
            }}>
              <span style={{ fontFamily: B.mono, fontSize: 9.5, color: B.amber, letterSpacing: '0.08em' }}>DUPLICATE? </span>
              Ace Hardware · $78.40 · 14:10 overlaps 09:18 entry. Verify before posting.
            </div>
          </div>
        </div>
      </div>
    </BShell>
  );
}

// ═════════════════════════════════════════════════════════════
// 05 · Daily Log Agent
// ═════════════════════════════════════════════════════════════
function BDaily() {
  return (
    <BShell
      active="Logs"
      code="MOD/05 · Daily log · 2026-04-21"
      title="Harborview Blk B · day 084"
      subtitle="30-second voice memo + site photos → formal log, homeowner update, and flags."
      stats={[
        { l: 'Logs · 30d', v: '28 / 28', sub: '100% coverage', tone: 'green' },
        { l: 'Flags open', v: '3', sub: 'oldest · 4d', tone: 'amber' },
        { l: 'Weather', v: '62°F', sub: 'overcast · 0"' },
        { l: 'Crew on site', v: '11 / 14', sub: '2 called out', tone: 'blue' },
      ]}
    >
      <div style={{ display: 'grid', gridTemplateColumns: '2fr 1fr', flex: 1, overflow: 'hidden' }}>
        <div style={{ borderRight: `1px solid ${B.line}`, background: B.panel, overflow: 'auto' }}>
          <BCellHeader code="01" title="Today's log · drafted from voice" right="00:34 audio" />
          <div style={{ padding: '16px 22px' }}>
            <div style={{ fontFamily: B.mono, fontSize: 10, color: B.ink3, letterSpacing: '0.08em', marginBottom: 10 }}>
              APR 21 · WED · 15:48 · MARCUS C.
            </div>
            <div style={{ fontSize: 15, color: B.ink, lineHeight: 1.6, marginBottom: 14 }}>
              <b>Framing complete on second floor.</b> Mike and Jake on site 7:04 – 3:48. Weather 62°F, light overcast. Second-floor framing finished ahead of the rev-D schedule. Inspector K. Oduya confirmed Thursday 09:00 for rough framing. Water damage discovered at window 3 (NW corner) — documented with photos, flagged for remediation before drywall.
            </div>

            <div style={{ display: 'grid', gridTemplateColumns: 'repeat(6, 1fr)', gap: 6, marginBottom: 18 }}>
              {['#8fa68c','#a89888','#7a8a99','#9e8fa8','#b8a88f','#8a9fa0'].map((c, i) => (
                <div key={i} style={{ aspectRatio: '3/2', background: c, position: 'relative' }}>
                  <div style={{ position: 'absolute', bottom: 2, left: 4, fontFamily: B.mono, fontSize: 8, color: '#fff', letterSpacing: '0.08em' }}>
                    IMG_0{32 + i}
                  </div>
                </div>
              ))}
            </div>

            <BAI label="BUILDAI · FLAGGED · 1 ITEM">
              <b style={{ color: B.red }}>Water damage at Window 3</b> (NW corner) — must be documented and addressed before drywall is hung. Photos IMG_033 and IMG_034 are GPS-stamped at the window location. Auto-filed to Issue #I-211.
            </BAI>
          </div>
        </div>
        <div style={{ background: B.panel, display: 'flex', flexDirection: 'column' }}>
          <BCellHeader code="02" title="Homeowner update · drafted" right="SMS" />
          <div style={{ padding: '14px 18px', flex: 1, overflow: 'auto' }}>
            <div style={{
              background: B.blueSoft, padding: 12, fontSize: 13, lineHeight: 1.55,
              color: B.ink, borderLeft: `2px solid ${B.blue}`, marginBottom: 10,
            }}>
              Great progress today — second floor framing is done and we found the inspector slot for Thursday. Small water issue at one window, addressing before drywall. Pictures attached.
            </div>
            <div style={{ fontFamily: B.mono, fontSize: 10, color: B.ink3, letterSpacing: '0.06em', marginBottom: 14 }}>
              Tone matches your past 12 msgs to R. Calloway · 2 photos attached
            </div>
            <div style={{ display: 'flex', gap: 6 }}>
              <div style={{ padding: '5px 12px', background: B.blue, color: '#fff', borderRadius: 2, fontSize: 11, fontFamily: B.mono, letterSpacing: '0.04em' }}>[ SEND ]</div>
              <div style={{ padding: '5px 12px', border: `1px solid ${B.line}`, color: B.ink2, borderRadius: 2, fontSize: 11, fontFamily: B.mono, letterSpacing: '0.04em' }}>EDIT</div>
              <div style={{ padding: '5px 12px', border: `1px solid ${B.line}`, color: B.ink2, borderRadius: 2, fontSize: 11, fontFamily: B.mono, letterSpacing: '0.04em' }}>INTERNAL ONLY</div>
            </div>
          </div>
          <div style={{ borderTop: `1px solid ${B.line}` }}>
            <BCellHeader code="03" title="Log history · 7d" />
            {['Apr 21 · Framing L2 · 3 crew · flag×1',
              'Apr 20 · Deck prep · 4 crew · rain 1.1"',
              'Apr 19 · Formwork · 2 crew · clear',
              'Apr 18 · Rebar tie · 5 crew · clear'].map((t, i) => (
              <div key={i} style={{
                padding: '10px 18px', borderBottom: `1px solid ${B.line2}`,
                fontSize: 12, color: B.ink2, display: 'flex',
              }}>
                <span>{t}</span>
                <span style={{ marginLeft: 'auto', fontFamily: B.mono, fontSize: 10, color: B.ink3 }}>PDF</span>
              </div>
            ))}
          </div>
        </div>
      </div>
    </BShell>
  );
}

// ═════════════════════════════════════════════════════════════
// 06 · Crew & Sub Manager
// ═════════════════════════════════════════════════════════════
function BCrew() {
  return (
    <BShell
      active="Crew"
      code="MOD/06 · Crew & subs · 2026-04-21"
      title="Crew · 11 on site, 14 scheduled"
      subtitle="SMS clock-in, GPS-verified. Conflicts and cert expirations surface automatically."
      stats={[
        { l: 'On site now', v: '11 / 14', sub: 'SMS verified', tone: 'green' },
        { l: 'Conflicts', v: '1', sub: 'Marco · Tue Apr 29', tone: 'red' },
        { l: 'Cert expiring', v: '1', sub: 'Ron · 30d', tone: 'amber' },
        { l: 'Week hours', v: '412', sub: '36 OT · $21.4K' },
      ]}
    >
      <div style={{ display: 'grid', gridTemplateColumns: '1fr 1fr', flex: 1, overflow: 'hidden' }}>
        <div style={{ borderRight: `1px solid ${B.line}`, background: B.panel, overflow: 'auto' }}>
          <BCellHeader code="01" title="Timesheet · week of Apr 21" right="BY PERSON" />
          <div style={{
            display: 'grid', gridTemplateColumns: '150px repeat(7, 1fr) 60px',
            fontFamily: B.mono, fontSize: 9, color: B.ink3, letterSpacing: '0.08em',
            padding: '10px 18px', background: B.bg, borderBottom: `1px solid ${B.line2}`,
          }}>
            <span>NAME</span>
            {['M','T','W','Th','F','Sa','Su'].map((d, i) => (
              <span key={`d-${i}`} style={{ textAlign: 'center' }}>{d}</span>
            ))}
            <span style={{ textAlign: 'right' }}>TOT</span>
          </div>
          {[
            { n: 'Mike Torres',  r: 'Tile', days: [8,8,9,8,'—','—','—'], tot: 33 },
            { n: 'Jake Ruiz',    r: 'Framer', days: [9,9,10,9,'—','—','—'], tot: 37 },
            { n: 'Dan Okafor',   r: 'Electric', days: [8,8,'—',8,'—','—','—'], tot: 24 },
            { n: 'Lea Chen',     r: 'Paint', days: [7,7,8,7,'—','—','—'], tot: 29 },
            { n: 'Ron Bauer',    r: 'Plumb', days: [8,8,8,9,'—','—','—'], tot: 33 },
            { n: 'Tim Voss',     r: 'Conc.', days: [10,10,10,11,'—','—','—'], tot: 41, ot: true },
            { n: 'Marco Silva',  r: 'Tile', days: [8,0,'—','—','—','—','—'], tot: 8, warn: true },
            { n: 'Ana Park',     r: 'Lab.', days: [8,'—',8,8,'—','—','—'], tot: 24 },
          ].map((p, i) => (
            <div key={i} style={{
              display: 'grid', gridTemplateColumns: '150px repeat(7, 1fr) 60px',
              padding: '10px 18px', borderBottom: `1px solid ${B.line2}`,
              fontSize: 12, alignItems: 'center',
            }}>
              <span>
                <div>{p.n}</div>
                <div style={{ fontFamily: B.mono, fontSize: 9, color: B.ink3, letterSpacing: '0.08em' }}>{p.r}</div>
              </span>
              {p.days.map((d, j) => (
                <span key={j} style={{
                  textAlign: 'center', fontFamily: B.mono,
                  color: d === '—' ? B.ink3 : typeof d === 'number' && d > 9 ? B.amber : B.ink2,
                  fontSize: 12,
                }}>{d}</span>
              ))}
              <span style={{
                textAlign: 'right', fontFamily: B.mono, fontSize: 13,
                color: p.ot ? B.amber : p.warn ? B.red : B.ink,
              }}>{p.tot}h</span>
            </div>
          ))}

          <div style={{
            display: 'grid', gridTemplateColumns: '150px repeat(7, 1fr) 60px',
            padding: '12px 18px', background: B.bg,
            fontFamily: B.mono, fontSize: 11.5,
          }}>
            <span style={{ color: B.ink }}>Labor cost</span>
            {[76,74,78,80,'—','—','—'].map((v, i) => (
              <span key={i} style={{ textAlign: 'center', color: B.ink3, fontSize: 10 }}>
                {v === '—' ? v : `$${v*45}`}
              </span>
            ))}
            <span style={{ textAlign: 'right', color: B.ink }}>$21.4K</span>
          </div>
        </div>
        <div style={{ background: B.panel, overflow: 'auto' }}>
          <BCellHeader code="02" title="On site · live" right="11 / 14" />
          {[
            ['Mike Torres','Johnson Kitchen','07:04','IN',B.green],
            ['Jake Ruiz','Johnson Kitchen','07:04','IN',B.green],
            ['Lea Chen','Smith Bath','07:18','IN',B.green],
            ['Tim Voss','Harborview','06:48','IN · OT',B.amber],
            ['Dan Okafor','—','—','AVAILABLE',B.ink3],
            ['Marco Silva','—','—','CONFLICT Tue',B.red],
            ['Ron Bauer','—','—','CERT EXP 30d',B.amber],
            ['Ana Park','—','—','CALLED OUT',B.ink3],
          ].map((r, i) => (
            <div key={i} style={{
              display: 'grid', gridTemplateColumns: '1fr 1fr 60px 120px',
              gap: 8, padding: '10px 18px', borderBottom: `1px solid ${B.line2}`,
              fontSize: 12, alignItems: 'center',
            }}>
              <span>{r[0]}</span>
              <span style={{ color: B.ink3 }}>{r[1]}</span>
              <span style={{ fontFamily: B.mono, fontSize: 10, color: B.ink3 }}>{r[2]}</span>
              <span style={{ fontFamily: B.mono, fontSize: 9.5, letterSpacing: '0.08em', color: r[4], textAlign: 'right' }}>● {r[3]}</span>
            </div>
          ))}
          <div style={{ padding: '14px 18px' }}>
            <BAI label="BUILDAI · CONFLICT">
              <b>Marco Silva</b> is scheduled for Tue Apr 29 at both Johnson Kitchen (7AM–3PM) and Smith Bath (8AM–4PM). Suggest splitting crew, or slipping Smith by 1 day — no downstream impact.
            </BAI>
          </div>
        </div>
      </div>
    </BShell>
  );
}

// ═════════════════════════════════════════════════════════════
// 07 · Schedule & Planning
// ═════════════════════════════════════════════════════════════
function BSchedule() {
  const rows = [
    { n: 'Johnson Kitchen', c: '#1e3a8a', bars: [[0,3,'Tile set'],[3,2,'Backsplash']] },
    { n: 'Pike Bath',       c: '#1e3a8a', bars: [[1,2,'Plumb rough'],[4,2,'Inspect']] },
    { n: 'Harborview Blk B',c: '#1e3a8a', bars: [[0,5,'Framing L2'],[5,2,'MEP coord']] },
    { n: 'Smith Bath',      c: '#1e3a8a', bars: [[2,3,'Demo + prep'],[5,2,'Rough in']] },
    { n: 'Calloway TI',     c: '#1e3a8a', bars: [[0,2,'Final walk'],[3,1,'Punch']] },
    { n: 'Marsh Addition',  c: '#1e3a8a', bars: [[4,3,'Footings pour']] },
  ];
  return (
    <BShell
      active="Schedule"
      code="MOD/07 · Master schedule · week 17"
      title="Schedule · week of Apr 27 – May 03"
      subtitle="Drag to reschedule. BuildAI checks crew, materials, weather, permits in real time."
      stats={[
        { l: 'Active jobs', v: '6', sub: '2 critical path' },
        { l: 'Milestones · wk', v: '14', sub: '12 on time', tone: 'green' },
        { l: 'Conflicts', v: '1', sub: 'Marco · Tue', tone: 'red' },
        { l: 'Weather risk', v: 'Fri', sub: '60% rain · Harborview', tone: 'amber' },
      ]}
    >
      <div style={{ padding: '16px 24px', background: B.panel, flex: 1, overflow: 'auto' }}>
        <div style={{
          display: 'grid', gridTemplateColumns: '160px repeat(7, 1fr)',
          fontFamily: B.mono, fontSize: 10, color: B.ink3, letterSpacing: '0.08em',
          padding: '6px 0', borderBottom: `1px solid ${B.line2}`,
        }}>
          <span>JOB</span>
          {['MON 27','TUE 28','WED 29','THU 30','FRI 01','SAT 02','SUN 03'].map(d => (
            <span key={d} style={{ textAlign: 'center' }}>{d}</span>
          ))}
        </div>
        {rows.map((r, ri) => (
          <div key={r.n} style={{
            display: 'grid', gridTemplateColumns: '160px repeat(7, 1fr)',
            padding: '10px 0', borderBottom: `1px solid ${B.line2}`,
            fontSize: 12, alignItems: 'center', position: 'relative',
          }}>
            <span style={{ color: B.ink }}>{r.n}</span>
            <div style={{ gridColumn: '2 / -1', position: 'relative', height: 24 }}>
              {/* day gridlines */}
              {[1,2,3,4,5,6].map(i => (
                <div key={i} style={{
                  position: 'absolute', left: `${(i/7)*100}%`, top: 0, bottom: 0, width: 1, background: B.line2,
                }} />
              ))}
              {r.bars.map((b, i) => (
                <div key={i} style={{
                  position: 'absolute',
                  left: `calc(${(b[0]/7)*100}% + 2px)`, width: `calc(${(b[1]/7)*100}% - 4px)`,
                  top: 2, bottom: 2, background: r.c,
                  fontFamily: B.mono, fontSize: 10, color: '#fff', letterSpacing: '0.04em',
                  display: 'flex', alignItems: 'center', paddingLeft: 8,
                  overflow: 'hidden', whiteSpace: 'nowrap',
                }}>{b[2]}</div>
              ))}
              {ri === 1 && (
                <div style={{
                  position: 'absolute', left: `calc(${(2/7)*100}%)`, width: `${(1/7)*100}%`,
                  top: -4, bottom: -4,
                  background: `repeating-linear-gradient(45deg, rgba(154,31,43,0.3), rgba(154,31,43,0.3) 4px, transparent 4px, transparent 8px)`,
                  border: `1px dashed ${B.red}`,
                }} />
              )}
              {ri === 2 && (
                <div style={{
                  position: 'absolute', left: `${(4/7)*100}%`, top: -8, fontSize: 10, color: B.amber, fontFamily: B.mono,
                }}>☂ rain</div>
              )}
            </div>
          </div>
        ))}
        <div style={{ marginTop: 20 }}>
          <BAI label="BUILDAI · RECOVERY SUGGESTION">
            Harborview is trending +3d on framing because of Apr 15 steel delay, Apr 17–19 sick outs, and Apr 20 rain. Add 2 framers from Portland pool for 5 days (~$4,800) and compress MEP rough start by 2 days. Net impact: <b>−3d → 0d</b>.
            &nbsp; <span style={{ color: B.blue, fontFamily: B.mono, fontSize: 11 }}>[ APPLY ]</span>
          </BAI>
        </div>
      </div>
    </BShell>
  );
}

// ═════════════════════════════════════════════════════════════
// 08 · Estimate & Bid Builder
// ═════════════════════════════════════════════════════════════
function BEstimate() {
  const items = [
    ['Demo · existing cabinets + flooring','1','$1,200','$1,200', false],
    ['Cabinets · shaker maple','22','$380','$8,360', false],
    ['Quartz counters · 3cm install','48 sqft','$88','$4,224', false],
    ['Tile · floor incl. backer + mortar','140 sqft','$14','$1,960', true],
    ['Backsplash · ceramic subway','28 sqft','$22','$616', false],
    ['Can lights · 6× LED 4" w/ dimmer','6','$190','$1,140', false],
    ['Paint · walls, trim, ceiling','1 lot','$820','$820', false],
    ['Labor · 18 working days','18','$1,050','$18,900', false],
  ];
  return (
    <BShell
      active="Estimates"
      code="MOD/08 · Estimates · 2026-04-21"
      title="Proposal · Johnson Kitchen · $31,240"
      subtitle="Drafted from 3 sentences of scope. 14 lines pulled from your cost library."
      stats={[
        { l: 'Pipeline', v: '$184K', sub: '12 active' },
        { l: 'Win rate · 90d', v: '46%', sub: 'kitchens · 52%', tone: 'green' },
        { l: 'Avg draft time', v: '0:41', sub: '14 lines', tone: 'blue' },
        { l: 'Viewed, unsigned', v: '4', sub: 'oldest · 5d', tone: 'amber' },
      ]}
    >
      <div style={{ display: 'grid', gridTemplateColumns: '1.4fr 1fr', flex: 1, overflow: 'hidden' }}>
        <div style={{ borderRight: `1px solid ${B.line}`, background: B.panel, overflow: 'auto' }}>
          <BCellHeader code="01" title="Line items" right={`${items.length} rows`} />
          <div style={{
            display: 'grid', gridTemplateColumns: '1fr 60px 60px 80px',
            padding: '10px 18px', background: B.bg, borderBottom: `1px solid ${B.line2}`,
            fontFamily: B.mono, fontSize: 9.5, color: B.ink3, letterSpacing: '0.08em',
          }}>
            <span>DESCRIPTION</span>
            <span style={{ textAlign: 'right' }}>QTY</span>
            <span style={{ textAlign: 'right' }}>UNIT</span>
            <span style={{ textAlign: 'right' }}>TOTAL</span>
          </div>
          {items.map((r, i) => (
            <div key={i} style={{
              display: 'grid', gridTemplateColumns: '1fr 60px 60px 80px',
              padding: '10px 18px', borderBottom: `1px solid ${B.line2}`,
              fontSize: 12, alignItems: 'center',
            }}>
              <span style={{ color: B.ink, display: 'flex', alignItems: 'center', gap: 8 }}>
                {r[0]}
                {r[4] && (
                  <span style={{
                    padding: '1px 6px', background: '#fbeedd', color: B.amber,
                    fontFamily: B.mono, fontSize: 8.5, letterSpacing: '0.08em', borderRadius: 2,
                  }}>VERIFY</span>
                )}
              </span>
              <span style={{ textAlign: 'right', fontFamily: B.mono, color: B.ink2 }}>{r[1]}</span>
              <span style={{ textAlign: 'right', fontFamily: B.mono, color: B.ink2 }}>{r[2]}</span>
              <span style={{ textAlign: 'right', fontFamily: B.mono, color: B.ink }}>{r[3]}</span>
            </div>
          ))}
          <div style={{ padding: '12px 18px', display: 'flex', alignItems: 'baseline' }}>
            <span style={{ fontSize: 11, color: B.ink3 }}>+22% markup · final clean · exclusions attached</span>
            <span style={{ marginLeft: 'auto', fontFamily: B.mono, fontSize: 22, color: B.ink }}>$31,240</span>
          </div>
        </div>
        <div style={{ background: B.panel, display: 'flex', flexDirection: 'column' }}>
          <BCellHeader code="02" title="Pipeline · 12 proposals" />
          <div style={{ padding: '14px 18px 4px' }}>
            {[
              { stage: 'Draft',  n: 2, v: '$42K',   w: 14 },
              { stage: 'Sent',   n: 5, v: '$86K',   w: 34 },
              { stage: 'Viewed', n: 3, v: '$38K',   w: 28 },
              { stage: 'Signed', n: 2, v: '$18K',   w: 24, win: true },
            ].map(r => (
              <div key={r.stage} style={{
                display: 'grid', gridTemplateColumns: '80px 30px 70px 1fr',
                gap: 10, padding: '8px 0', alignItems: 'center', fontSize: 12,
              }}>
                <span style={{ fontFamily: B.mono, fontSize: 10, color: B.ink3, letterSpacing: '0.08em' }}>
                  {r.stage.toUpperCase()}
                </span>
                <span style={{ fontFamily: B.mono, color: B.ink }}>{r.n}</span>
                <span style={{ fontFamily: B.mono, color: B.ink }}>{r.v}</span>
                <div style={{ height: 4, background: B.line2, position: 'relative' }}>
                  <div style={{ position: 'absolute', inset: 0, width: `${r.w*2}%`, background: r.win ? B.green : B.blue }} />
                </div>
              </div>
            ))}
          </div>
          <div style={{ padding: '14px 18px', borderTop: `1px solid ${B.line2}`, marginTop: 10 }}>
            <BAI label="BUILDAI · FOLLOWUP DUE">
              Sarah opened the $28K proposal 4 times in 5 days but hasn't signed. I drafted a warm check-in: <i>"Hi Sarah — saw you were looking at the kitchen proposal again, anything I can clarify? Happy to walk through the quartz options on a quick call."</i>
            </BAI>
            <div style={{ display: 'flex', gap: 6, marginTop: 10 }}>
              <div style={{ padding: '5px 12px', background: B.blue, color: '#fff', borderRadius: 2, fontSize: 11, fontFamily: B.mono, letterSpacing: '0.04em' }}>[ SEND NUDGE ]</div>
              <div style={{ padding: '5px 12px', border: `1px solid ${B.line}`, color: B.ink2, borderRadius: 2, fontSize: 11, fontFamily: B.mono, letterSpacing: '0.04em' }}>EDIT</div>
            </div>
          </div>
        </div>
      </div>
    </BShell>
  );
}

// ═════════════════════════════════════════════════════════════
// 09 · Accounting & Reporting
// ═════════════════════════════════════════════════════════════
function BAccounting() {
  return (
    <BShell
      active="Accounting"
      code="MOD/09 · Accounting · week 17 · 2026"
      title="Monday brief · the week in plain English"
      subtitle="QuickBooks two-way sync. Job-level profitability. Weekly summary auto-generated at 07:00."
      stats={[
        { l: 'Revenue · MTD', v: '$82.1K', sub: '+14% MoM', tone: 'green' },
        { l: 'Cash in bank', v: '$146.9K', sub: 'after payroll' },
        { l: 'Outstanding A/R', v: '$84.2K', sub: '$8.4k > 60d', tone: 'amber' },
        { l: 'Tax reserve', v: '$4.2K', sub: 'suggested this wk' },
      ]}
    >
      <div style={{ display: 'grid', gridTemplateColumns: '2fr 1fr', flex: 1, overflow: 'hidden' }}>
        <div style={{ borderRight: `1px solid ${B.line}`, background: B.panel, overflow: 'auto' }}>
          <BCellHeader code="01" title="Monday brief · Apr 21 · 07:00" />
          <div style={{ padding: '18px 24px' }}>
            <BAI label="BUILDAI · WEEKLY SUMMARY">
              Last week you invoiced <b>$22,400</b>, collected <b>$18,000</b>, and spent <b>$9,200</b>. Johnson Kitchen is trending to an <b style={{ color: B.amber }}>18% margin against a 25% target</b> — labor running 15% over because Mike and Jake put in 22 OT hours on the backsplash rework. Harborview is healthy at 24%. Set aside $4,200 toward Q2 taxes this week.
            </BAI>
          </div>
          <div style={{ padding: '0 24px 20px' }}>
            <div style={{ fontFamily: B.mono, fontSize: 10, color: B.ink3, letterSpacing: '0.08em', marginBottom: 12 }}>
              REVENUE · LAST 6 MONTHS
            </div>
            <div style={{ display: 'flex', alignItems: 'flex-end', gap: 10, height: 90, borderBottom: `1px solid ${B.line}` }}>
              {[42,52,38,61,74,82].map((v, i) => (
                <div key={i} style={{ flex: 1, display: 'flex', flexDirection: 'column', alignItems: 'center', gap: 6 }}>
                  <div style={{ width: '100%', height: v, background: i === 5 ? B.ink : B.blue, opacity: i === 5 ? 1 : 0.75 }} />
                </div>
              ))}
            </div>
            <div style={{ display: 'flex', gap: 10, marginTop: 6 }}>
              {['Nov','Dec','Jan','Feb','Mar','Apr'].map(m => (
                <div key={m} style={{ flex: 1, textAlign: 'center', fontFamily: B.mono, fontSize: 10, color: B.ink3 }}>{m}</div>
              ))}
            </div>
          </div>
          <div style={{ padding: '0 24px 20px' }}>
            <div style={{ fontFamily: B.mono, fontSize: 10, color: B.ink3, letterSpacing: '0.08em', marginBottom: 12 }}>
              JOB PROFITABILITY · ACTIVE
            </div>
            <div style={{
              display: 'grid', gridTemplateColumns: '1.4fr 80px 80px 80px 120px',
              padding: '8px 0', borderBottom: `1px solid ${B.line2}`,
              fontFamily: B.mono, fontSize: 9.5, color: B.ink3, letterSpacing: '0.08em',
            }}>
              <span>JOB</span>
              <span style={{ textAlign: 'right' }}>CONTRACT</span>
              <span style={{ textAlign: 'right' }}>SPENT</span>
              <span style={{ textAlign: 'right' }}>MARGIN</span>
              <span style={{ textAlign: 'center' }}>HEALTH</span>
            </div>
            {[
              ['Calloway Office TI','$124K','$76K','28.4%', B.green],
              ['Harborview Blk B',  '$12.4M','$5.27M','24.1%', B.green],
              ['Smith Bath',        '$38K','$24K','21.0%', B.amber],
              ['Johnson Kitchen',   '$84K','$57K','18.2%', B.red],
            ].map((r, i) => (
              <div key={i} style={{
                display: 'grid', gridTemplateColumns: '1.4fr 80px 80px 80px 120px',
                padding: '10px 0', borderBottom: `1px solid ${B.line2}`,
                fontSize: 12, alignItems: 'center',
              }}>
                <span style={{ color: B.ink }}>{r[0]}</span>
                <span style={{ textAlign: 'right', fontFamily: B.mono, color: B.ink3 }}>{r[1]}</span>
                <span style={{ textAlign: 'right', fontFamily: B.mono, color: B.ink2 }}>{r[2]}</span>
                <span style={{ textAlign: 'right', fontFamily: B.mono, color: r[4] }}>{r[3]}</span>
                <span style={{ textAlign: 'center', color: r[4], fontFamily: B.mono, fontSize: 10, letterSpacing: '0.08em' }}>
                  ● {r[4] === B.green ? 'HEALTHY' : r[4] === B.amber ? 'WATCH' : 'ALERT'}
                </span>
              </div>
            ))}
          </div>
        </div>
        <div style={{ background: B.panel, overflow: 'auto' }}>
          <BCellHeader code="02" title="30-day cash flow · projected" />
          <div style={{ padding: '14px 18px' }}>
            <div style={{ fontSize: 11.5, color: B.ink2, marginBottom: 14, lineHeight: 1.55 }}>
              Projected money in vs money out across the next 30 days. Based on scheduled invoices, known payroll, and recurring AP.
            </div>
            <div style={{ display: 'flex', alignItems: 'flex-end', gap: 3, height: 100, borderBottom: `1px solid ${B.line2}`, paddingBottom: 4 }}>
              {[8,-4,12,6,-8,18,14,10,-6,22,16,8,-4,14,10,-8,18,22,14,-6,26,14,10,8,-8,14,20,18,12,-4].map((v, i) => (
                <div key={i} style={{
                  flex: 1, height: `${Math.abs(v)*3}px`,
                  background: v > 0 ? B.green : B.red, opacity: 0.85,
                  alignSelf: v > 0 ? 'flex-end' : 'flex-start',
                }} />
              ))}
            </div>
            <div style={{ display: 'flex', fontFamily: B.mono, fontSize: 10, color: B.ink3, letterSpacing: '0.04em', marginTop: 4 }}>
              <span>Apr 21</span>
              <span style={{ marginLeft: 'auto' }}>May 20</span>
            </div>
            <div style={{ marginTop: 16, padding: 12, border: `1px solid ${B.line}`, fontSize: 12, color: B.ink2, lineHeight: 1.55 }}>
              <div style={{ fontFamily: B.mono, fontSize: 9.5, color: B.ink3, letterSpacing: '0.1em', marginBottom: 6 }}>ESTIMATED · MAY 20</div>
              Cash on hand: <b style={{ color: B.ink }}>$198,420</b> · runway 4.3 mo at current burn.
            </div>
          </div>
        </div>
      </div>
    </BShell>
  );
}

// ═════════════════════════════════════════════════════════════
// 10 · Client Portal
// ═════════════════════════════════════════════════════════════
function BPortal() {
  return (
    <BShell
      active="Inbox"
      code="MOD/10 · Client portal · 2026-04-21"
      title="Client portal · Johnson Kitchen · shared with Sarah"
      subtitle="Private link. No login. Read-only progress, approvals, payments, and messages."
      stats={[
        { l: 'Progress', v: '67%', sub: 'est. May 22', tone: 'blue' },
        { l: 'Pending approvals', v: '2', sub: 'CO + invoice', tone: 'amber' },
        { l: 'Link opens · 7d', v: '14', sub: 'last · 2h ago', tone: 'green' },
        { l: 'Last message', v: '10:42', sub: 'Sarah · drafted reply' },
      ]}
    >
      <div style={{ display: 'grid', gridTemplateColumns: '1.4fr 1fr', flex: 1, overflow: 'hidden' }}>
        <div style={{ borderRight: `1px solid ${B.line}`, background: B.panel, overflow: 'auto' }}>
          <BCellHeader code="01" title="Client view · iframe preview" right="app.buildai.com/p/j9h2" />
          <div style={{ padding: 18 }}>
            <div style={{
              background: '#fff', border: `1px solid ${B.line}`, padding: 20,
            }}>
              <div style={{ fontSize: 18, fontWeight: 500, letterSpacing: '-0.01em', marginBottom: 4 }}>
                Johnson Kitchen Remodel
              </div>
              <div style={{ fontSize: 11, color: B.ink3, marginBottom: 16 }}>Calloway Construction · 142 Oak St, Portland</div>

              <div style={{ fontSize: 11, color: B.ink3, marginBottom: 6, display: 'flex' }}>
                <span>67% complete</span>
                <span style={{ marginLeft: 'auto', fontFamily: B.mono }}>3 of 4 milestones</span>
              </div>
              <div style={{ height: 6, background: B.line2, marginBottom: 16 }}>
                <div style={{ height: '100%', width: '67%', background: B.blue }} />
              </div>

              <div style={{ display: 'grid', gridTemplateColumns: 'repeat(6, 1fr)', gap: 6, marginBottom: 18 }}>
                {['#8fa68c','#a89888','#7a8a99','#9e8fa8','#b8a88f','#8a9fa0'].map((c, i) => (
                  <div key={i} style={{ aspectRatio: '1/1', background: c }}>
                    <div style={{ fontFamily: B.mono, fontSize: 8, color: '#fff', padding: 4, letterSpacing: '0.08em' }}>
                      APR {21 - i}
                    </div>
                  </div>
                ))}
              </div>

              <div style={{ fontFamily: B.mono, fontSize: 9.5, color: B.ink3, letterSpacing: '0.08em', marginBottom: 10 }}>
                NEEDS YOUR APPROVAL · 2 ITEMS
              </div>
              {[
                ['CO-003 · Subfloor replacement · 40 sqft', '$864', 'Approve & e-sign'],
                ['INV-1142 · Rough-in milestone', '$12,400', 'Pay by ACH'],
              ].map((r, i) => (
                <div key={i} style={{
                  display: 'grid', gridTemplateColumns: '1fr 80px 110px', gap: 12, padding: '10px 0',
                  borderBottom: i === 0 ? `1px solid ${B.line2}` : 'none', fontSize: 12, alignItems: 'center',
                }}>
                  <span>{r[0]}</span>
                  <span style={{ textAlign: 'right', fontFamily: B.mono }}>{r[1]}</span>
                  <span style={{
                    padding: '4px 10px', background: B.blue, color: '#fff', borderRadius: 2,
                    fontFamily: B.mono, fontSize: 10, letterSpacing: '0.04em', textAlign: 'center',
                  }}>{r[2]}</span>
                </div>
              ))}
            </div>
          </div>
        </div>
        <div style={{ background: B.panel, overflow: 'auto' }}>
          <BCellHeader code="02" title="Portal activity · 24h" />
          {[
            ['21:02','OPENED','Sarah · session 14'],
            ['21:03','APPROVED','CO-003 · $864 · e-sig'],
            ['21:04','PAID','INV-1141 · $12,400 · ACH'],
            ['21:06','MESSAGE','"Cabinets look great!"'],
            ['09:48','OPENED','Sarah · session 15'],
            ['10:42','MESSAGE','"add the pergola while…"'],
          ].map((r, i) => (
            <div key={i} style={{
              display: 'grid', gridTemplateColumns: '60px 90px 1fr',
              gap: 10, padding: '10px 18px', borderBottom: `1px solid ${B.line2}`,
              fontSize: 12, alignItems: 'center',
            }}>
              <span style={{ fontFamily: B.mono, fontSize: 10, color: B.ink3 }}>{r[0]}</span>
              <span style={{ fontFamily: B.mono, fontSize: 9.5, letterSpacing: '0.08em', color: r[1] === 'PAID' || r[1] === 'APPROVED' ? B.green : B.ink2 }}>
                {r[1]}
              </span>
              <span style={{ color: B.ink }}>{r[2]}</span>
            </div>
          ))}
          <div style={{ padding: '14px 18px' }}>
            <BAI label="BUILDAI · CLIENT PATTERN">
              Sarah reliably checks the portal between 9–10 PM. Schedule end-of-day updates for 8:45 PM to surface while she's looking. She's paid every invoice within 12 hours of receiving it.
            </BAI>
          </div>
        </div>
      </div>
    </BShell>
  );
}

Object.assign(window, {
  BComms, BCO, BInvoice, BCost, BDaily,
  BCrew, BSchedule, BEstimate, BAccounting, BPortal,
});