// Contra · Modules 04-10 — one screen each, editorial light theme

// ═══════════════════════════════════════════════════════════
// 04 · Job Cost Tracker — purple
// ═══════════════════════════════════════════════════════════
const JC_ACCENT = K.purple;

function JobCostPage() {
  const tx = [
    ['Home Depot',  'Materials', '$342.18', '7:04 AM · 📷'],
    ['ABC Supply · invoice fwd', 'Materials', '$1,240.00', 'Yesterday · 📧'],
    ['Mike Torres · 8.5h', 'Labor', '$595.00', 'Yesterday · SMS'],
    ['Jake Alvarez · 8.0h', 'Labor', '$520.00', 'Yesterday · SMS'],
    ['Lowe\'s',     'Materials', '$89.42',  'Mon · 📷'],
    ['Delta Rent · mini-excavator day', 'Rental', '$245.00', 'Mon · 📧'],
    ['Aguilar Tile & Stone', 'Sub', '$4,800.00', 'Apr 20 · ✏️'],
    ['Shell · fuel',  'Fuel', '$72.18', 'Apr 20 · 📷'],
  ];
  return (
    <KShell accent={JC_ACCENT}>
      <KCrumb accent={JC_ACCENT}>Job cost · Johnson Kitchen</KCrumb>
      <KHeadline>
        Labor is trending <span style={{ color: JC_ACCENT }}>$1,200 over.</span>
      </KHeadline>
      <div style={{ fontSize: 14, color: K.body, marginTop: 12, maxWidth: 620, lineHeight: 1.55 }}>
        $84,200 contract · 67% complete · 42 days remaining. Receipts, invoices, and crew hours are all posting themselves to this job — you just snap or forward.
      </div>

      <div style={{ display: 'grid', gridTemplateColumns: 'repeat(4, 1fr)', gap: 16, marginTop: 26 }}>
        <Stat label="Spent to date" value="$51,840" sub="61% of contract" accent={JC_ACCENT} />
        <Stat label="Remaining" value="$32,360" sub="39% left" accent={K.ink} />
        <Stat label="Projected margin" value="22.4%" sub="target 28%" accent={K.amber} />
        <Stat label="Days out" value="42" sub="on schedule" accent={K.green} />
      </div>

      <div style={{ display: 'grid', gridTemplateColumns: '1fr 1fr 1fr', gap: 16, marginTop: 16 }}>
        {[
          ['Labor', '$28,600', '$27,400', 104, K.amber, 'OVER'],
          ['Materials', '$15,240', '$18,200', 84, JC_ACCENT, ''],
          ['Subcontractors', '$8,000', '$10,500', 76, JC_ACCENT, ''],
        ].map(([name, spent, bud, pct, c, tag]) => (
          <KCard key={name} pad={18}>
            <div style={{ display: 'flex', alignItems: 'baseline', justifyContent: 'space-between', marginBottom: 10 }}>
              <div style={{ fontFamily: K.mono, fontSize: 10, color: K.mute, letterSpacing: '0.12em' }}>{name.toUpperCase()}</div>
              {tag && <span style={{ fontFamily: K.mono, fontSize: 9, color: K.amber, letterSpacing: '0.12em' }}>{tag}</span>}
            </div>
            <div style={{ display: 'flex', alignItems: 'baseline', gap: 8 }}>
              <div style={{ fontFamily: K.serif, fontSize: 28, color: K.ink, letterSpacing: '-0.01em' }}>{spent}</div>
              <div style={{ fontSize: 12, color: K.mute }}>of {bud}</div>
            </div>
            <div style={{ height: 4, background: K.line2, borderRadius: 2, marginTop: 12, overflow: 'hidden' }}>
              <div style={{ width: Math.min(pct, 100) + '%', height: '100%', background: c }} />
            </div>
          </KCard>
        ))}
      </div>

      <div style={{ marginTop: 26 }}>
        <div style={{ display: 'flex', alignItems: 'baseline', marginBottom: 10 }}>
          <div style={{ fontFamily: K.serif, fontSize: 20, color: K.ink }}>Transactions</div>
          <div style={{ marginLeft: 'auto', fontFamily: K.mono, fontSize: 10, color: K.mute, letterSpacing: '0.12em' }}>47 ITEMS</div>
        </div>
        <div style={{ borderTop: `1px solid ${K.line}` }}>
          {tx.map((r, i) => (
            <div key={i} style={{ display: 'grid', gridTemplateColumns: '1fr 110px 110px 160px', gap: 16, padding: '11px 0', borderBottom: `1px solid ${K.line2}`, alignItems: 'center' }}>
              <span style={{ fontSize: 13, color: K.ink2 }}>{r[0]}</span>
              <span style={{ fontSize: 11, color: K.mute, fontStyle: 'italic' }}>{r[1].toLowerCase()}</span>
              <span style={{ fontFamily: K.serif, fontSize: 16, color: K.ink }}>{r[2]}</span>
              <span style={{ fontFamily: K.mono, fontSize: 10, color: K.mute, letterSpacing: '0.06em' }}>{r[3]}</span>
            </div>
          ))}
        </div>
      </div>
    </KShell>
  );
}

// ═══════════════════════════════════════════════════════════
// 05 · Daily Log — amber
// ═══════════════════════════════════════════════════════════
const DL_ACCENT = K.amber;

function DailyLogPage() {
  return (
    <KShell accent={DL_ACCENT}>
      <div style={{ display: 'grid', gridTemplateColumns: '1fr 400px', gap: 40, height: '100%' }}>
        <div style={{ overflow: 'auto', paddingRight: 8 }}>
          <KCrumb accent={DL_ACCENT}>Daily log · Johnson Kitchen · Apr 24</KCrumb>
          <KHeadline>
            Framing's done. <span style={{ color: DL_ACCENT, fontStyle: 'italic' }}>Water damage at window 3.</span>
          </KHeadline>
          <div style={{ fontSize: 14, color: K.body, marginTop: 12, maxWidth: 540, lineHeight: 1.55 }}>
            You sent 7 photos and a 32-second voice memo at 5:47 PM. Contro drafted a formal site log, a warm homeowner update, and flagged one issue before drywall goes up.
          </div>

          <div style={{ display: 'flex', gap: 8, marginTop: 22 }}>
            <KPill dark icon="↑">Send homeowner update</KPill>
            <KPill>Export PDF</KPill>
            <KPill>Share to portal</KPill>
          </div>

          <div style={{ marginTop: 24, display: 'grid', gridTemplateColumns: 'repeat(4, 1fr)', gap: 8 }}>
            {[1,2,3,4,5,6,7].map(i => (
              <div key={i} style={{
                aspectRatio: '4/3', background: `linear-gradient(135deg, ${K.line} 0%, ${K.line2} 50%, ${K.line} 100%)`,
                borderRadius: 8, border: `1px solid ${K.line}`, position: 'relative',
                overflow: 'hidden',
              }}>
                <div style={{ position: 'absolute', top: 6, left: 6, fontFamily: K.mono, fontSize: 9, color: K.mute }}>IMG {i}</div>
                {i === 3 && <div style={{ position: 'absolute', inset: 0, border: `2px solid ${DL_ACCENT}`, borderRadius: 8 }}><div style={{ position: 'absolute', bottom: 4, left: 4, right: 4, background: DL_ACCENT, color: '#fff', fontSize: 9, fontFamily: K.mono, padding: '2px 6px', borderRadius: 3, letterSpacing: '0.08em' }}>FLAG · WINDOW 3</div></div>}
              </div>
            ))}
            <div style={{ aspectRatio: '4/3', borderRadius: 8, border: `1px dashed ${K.line}`, display: 'grid', placeItems: 'center', fontSize: 20, color: K.mute }}>+</div>
          </div>

          <div style={{ marginTop: 28 }}>
            <div style={{ fontFamily: K.mono, fontSize: 10, color: K.mute, letterSpacing: '0.14em', marginBottom: 10 }}>FORMAL SITE LOG · AI-WRITTEN</div>
            <div style={{ fontFamily: K.serif, fontSize: 17, color: K.ink2, lineHeight: 1.55, fontStyle: 'italic', borderLeft: `2px solid ${DL_ACCENT}`, paddingLeft: 18 }}>
              Second-floor framing complete as of end of day. Crew on site: Mike Torres and Jake Alvarez, 8:00 AM – 4:45 PM. Weather: 68°F, overcast, no precipitation. Water damage identified at Window 3 during rough-in — staining on sheathing, approximately 2'×2' area. Recommend remediation prior to insulation. Inspector confirmed for Thursday.
            </div>
          </div>
        </div>

        {/* Side */}
        <div style={{ display: 'flex', flexDirection: 'column', gap: 16, paddingTop: 6 }}>
          <div style={{ background: `${DL_ACCENT}14`, border: `1px solid ${DL_ACCENT}55`, borderRadius: 14, padding: 18 }}>
            <div style={{ fontFamily: K.mono, fontSize: 10, color: DL_ACCENT, letterSpacing: '0.14em', marginBottom: 8 }}>● FLAG · PRE-DRYWALL</div>
            <div style={{ fontSize: 14, color: K.ink, fontFamily: K.serif, lineHeight: 1.4 }}>
              Water damage at Window 3. Document & address before drywall. I've queued a photo for the homeowner and a note for the inspector.
            </div>
          </div>

          <KCard pad={18}>
            <div style={{ fontSize: 11, color: K.mute, marginBottom: 8 }}>Homeowner update · ready to send</div>
            <div style={{ fontSize: 13.5, color: K.ink2, lineHeight: 1.55, fontStyle: 'italic' }}>
              "Great progress today — second floor framing is done! We spotted some old water damage near a window that we'll have the crew address tomorrow before moving on. Inspector confirmed for Thursday. Photos on your portal."
            </div>
            <div style={{ marginTop: 12, display: 'flex', gap: 6 }}><KPill dark>Send ↑</KPill><KPill>Edit tone</KPill></div>
          </KCard>

          <KCard pad={18}>
            <div style={{ fontSize: 11, color: K.mute, marginBottom: 10 }}>Auto-detected from voice</div>
            {[
              ['Crew on site', 'Mike Torres, Jake Alvarez'],
              ['Weather', '68°F · overcast'],
              ['Decision needed', 'Client: choose tile color'],
              ['Upcoming', 'Inspector · Thu 10 AM'],
            ].map(([k, v], i) => (
              <div key={k} style={{ padding: '9px 0', borderTop: i ? `1px solid ${K.line2}` : 'none', fontSize: 12.5 }}>
                <div style={{ fontFamily: K.mono, fontSize: 9, color: K.mute, letterSpacing: '0.12em', marginBottom: 2 }}>{k.toUpperCase()}</div>
                <div style={{ color: K.ink2 }}>{v}</div>
              </div>
            ))}
          </KCard>
        </div>
      </div>
    </KShell>
  );
}

// ═══════════════════════════════════════════════════════════
// 06 · Crew & Sub Manager — rose
// ═══════════════════════════════════════════════════════════
const CR_ACCENT = K.rose;

function CrewDashboardPage() {
  const crew = [
    { n: 'Mike Torres', r: 'Lead Carpenter', j: 'Johnson Kitchen', h: '42.5h', flag: 'CONFLICT · Tue', color: CR_ACCENT },
    { n: 'Jake Alvarez', r: 'Carpenter', j: 'Johnson Kitchen', h: '40.0h', flag: null },
    { n: 'Aguilar Tile', r: 'Sub · Tile', j: 'Smith Bath', h: '—', flag: 'CERT · expires 18d', color: K.amber },
    { n: 'Devon Shaw', r: 'Electrician', j: 'Available', h: '32.0h', flag: null, avail: true },
    { n: 'Carla Ruiz', r: 'Tile Setter', j: 'Smith Bath', h: '38.0h', flag: null },
    { n: 'Luis Romero', r: 'Laborer', j: 'Harborview', h: '40.0h', flag: null },
    { n: 'Pacific Plumb', r: 'Sub · Plumbing', j: 'Pike Bath', h: '—', flag: 'W-9 · missing', color: K.red },
    { n: 'Evan Park', r: 'Carpenter', j: 'Available', h: '16.0h', flag: null, avail: true },
  ];
  return (
    <KShell accent={CR_ACCENT}>
      <KCrumb accent={CR_ACCENT}>Crew · week of Apr 20</KCrumb>
      <KHeadline>
        6 on site, 2 available, <span style={{ color: CR_ACCENT }}>1 scheduling conflict.</span>
      </KHeadline>
      <div style={{ fontSize: 14, color: K.body, marginTop: 12, maxWidth: 620, lineHeight: 1.55 }}>
        Mike is assigned to both Johnson Kitchen and Smith Bath on Tuesday. Aguilar Tile's liability insurance expires in 18 days. Pacific Plumbing is missing a W-9.
      </div>

      <div style={{ display: 'flex', gap: 8, marginTop: 22 }}>
        <KPill dark>Resolve conflict</KPill>
        <KPill>Export timesheet to ADP</KPill>
        <KPill>+ Add crew</KPill>
      </div>

      <div style={{ display: 'grid', gridTemplateColumns: 'repeat(4, 1fr)', gap: 12, marginTop: 26 }}>
        {crew.map((p, i) => (
          <KCard key={i} pad={18}>
            <div style={{ display: 'flex', alignItems: 'center', gap: 12, marginBottom: 14 }}>
              <div style={{ width: 38, height: 38, borderRadius: '50%', background: p.avail ? K.green : K.line, color: p.avail ? '#fff' : K.ink2, display: 'grid', placeItems: 'center', fontFamily: K.serif, fontSize: 15 }}>
                {p.n.split(' ').map(s => s[0]).join('')}
              </div>
              <div>
                <div style={{ fontSize: 13, color: K.ink, fontWeight: 500 }}>{p.n}</div>
                <div style={{ fontSize: 11, color: K.mute, fontStyle: 'italic' }}>{p.r}</div>
              </div>
            </div>
            <div style={{ fontFamily: K.mono, fontSize: 9, color: K.mute, letterSpacing: '0.12em', marginBottom: 4 }}>ASSIGNED</div>
            <div style={{ fontSize: 13, color: p.avail ? K.green : K.ink2, marginBottom: 10, fontStyle: p.avail ? 'italic' : 'normal' }}>{p.j}</div>
            <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'center' }}>
              <span style={{ fontFamily: K.serif, fontSize: 18, color: K.ink }}>{p.h}</span>
              {p.flag && <span style={{ fontFamily: K.mono, fontSize: 9, color: p.color, letterSpacing: '0.1em', background: `${p.color}1a`, padding: '2px 6px', borderRadius: 3 }}>{p.flag}</span>}
            </div>
          </KCard>
        ))}
      </div>

      <KAICard accent={CR_ACCENT} style={{ marginTop: 20 }}>
        Moving Johnson's backsplash to Wednesday resolves the Tuesday conflict and keeps both clients on schedule. Draft the SMS to Sarah and Jen?
      </KAICard>
    </KShell>
  );
}

// ═══════════════════════════════════════════════════════════
// 07 · Master Schedule — cyan
// ═══════════════════════════════════════════════════════════
const SC_ACCENT = K.cyan;

function SchedulePage07() {
  const jobs = [
    { n: 'Johnson Kitchen', start: 5, len: 60, phase: 'Cabinets' },
    { n: 'Smith Bath',      start: 25, len: 40, phase: 'Tile', conflict: true },
    { n: 'Pike Bath',       start: 0, len: 30, phase: 'Rough-in' },
    { n: 'Harborview Blk B', start: 10, len: 85, phase: 'Framing' },
    { n: 'Marsh Addition',  start: 45, len: 50, phase: 'Footings' },
    { n: 'Calloway TI',     start: 0, len: 70, phase: 'MEP' },
    { n: 'Ortiz Deck',      start: 55, len: 20, phase: 'Demo' },
  ];
  const days = ['M','T','W','T','F','S','S','M','T','W','T','F','S','S','M','T','W','T','F','S'];
  return (
    <KShell accent={SC_ACCENT}>
      <KCrumb accent={SC_ACCENT}>Master schedule · 7 active jobs · 3-week view</KCrumb>
      <KHeadline>
        Tuesday's a <span style={{ color: SC_ACCENT }}>tight day</span> — Mike can't be at two jobs.
      </KHeadline>
      <div style={{ fontSize: 14, color: K.body, marginTop: 12, maxWidth: 640, lineHeight: 1.55 }}>
        Weather looks clean through next Wednesday. Two material deliveries pinned to Friday. One crew conflict flagged on Tuesday May 2.
      </div>

      <div style={{ display: 'flex', gap: 8, marginTop: 22 }}>
        <KPill dark>Send morning briefs</KPill>
        <KPill>Print week view</KPill>
        <KPill>Weather overlay · on</KPill>
      </div>

      <KCard pad={20} style={{ marginTop: 22 }}>
        <div style={{ display: 'grid', gridTemplateColumns: `160px repeat(${days.length}, 1fr)`, gap: 0, fontFamily: K.mono, fontSize: 9, color: K.mute, letterSpacing: '0.08em', marginBottom: 10 }}>
          <div />
          {days.map((d, i) => (
            <div key={i} style={{ textAlign: 'center', padding: '4px 0', borderLeft: i % 7 === 0 ? `1px solid ${K.line}` : 'none' }}>{d}</div>
          ))}
        </div>
        {jobs.map(j => (
          <div key={j.n} style={{ display: 'grid', gridTemplateColumns: `160px 1fr`, gap: 0, marginBottom: 10, alignItems: 'center' }}>
            <div>
              <div style={{ fontSize: 12.5, color: K.ink }}>{j.n}</div>
              <div style={{ fontFamily: K.mono, fontSize: 9, color: K.mute, letterSpacing: '0.08em', marginTop: 2 }}>{j.phase.toUpperCase()}</div>
            </div>
            <div style={{ position: 'relative', height: 28, background: K.line2, borderRadius: 4 }}>
              <div style={{
                position: 'absolute', left: j.start + '%', width: j.len + '%', top: 4, bottom: 4,
                background: j.conflict ? `repeating-linear-gradient(45deg, ${SC_ACCENT}, ${SC_ACCENT} 4px, ${K.rose} 4px, ${K.rose} 8px)` : SC_ACCENT,
                borderRadius: 3, display: 'flex', alignItems: 'center', paddingLeft: 10,
                fontSize: 11, color: '#fff', fontFamily: K.mono,
              }}>
                {j.conflict ? 'CONFLICT · May 2' : '◆ milestone'}
              </div>
            </div>
          </div>
        ))}
      </KCard>

      <div style={{ display: 'grid', gridTemplateColumns: '1fr 1fr 1fr', gap: 16, marginTop: 18 }}>
        <KCard pad={16}>
          <div style={{ fontSize: 11, color: K.mute, marginBottom: 6 }}>Today · Apr 24</div>
          <div style={{ fontFamily: K.serif, fontSize: 22, color: K.ink }}>4 jobs · 9 crew</div>
          <div style={{ fontSize: 12, color: K.body, marginTop: 8, lineHeight: 1.6 }}>Johnson · Harborview · Calloway · Pike</div>
        </KCard>
        <KCard pad={16}>
          <div style={{ fontSize: 11, color: K.mute, marginBottom: 6 }}>Deliveries this week</div>
          <div style={{ fontFamily: K.serif, fontSize: 22, color: SC_ACCENT }}>2 · Fri AM</div>
          <div style={{ fontSize: 12, color: K.body, marginTop: 8, lineHeight: 1.6 }}>ABC Supply · rebar<br />Johnson · tile backsplash</div>
        </KCard>
        <KCard pad={16}>
          <div style={{ fontSize: 11, color: K.mute, marginBottom: 6 }}>Weather alerts</div>
          <div style={{ fontFamily: K.serif, fontSize: 22, color: K.green }}>None</div>
          <div style={{ fontSize: 12, color: K.body, marginTop: 8, lineHeight: 1.6 }}>Clear through Wed · light rain Thu PM</div>
        </KCard>
      </div>
    </KShell>
  );
}

// ═══════════════════════════════════════════════════════════
// 08 · Estimate & Bid Builder — lime
// ═══════════════════════════════════════════════════════════
const EB_ACCENT = K.lime;

function EstimateBuilderPage() {
  const items = [
    ['Demo · existing cabinets & countertop', '1', 'lump', '$1,200', '$1,200'],
    ['Cabinets · shaker maple, full overlay', '38', 'lf', '$485', '$18,430'],
    ['Countertops · quartz, 3cm', '46', 'sqft', '$94', '$4,324'],
    ['Tile · backsplash, allowance', '28', 'sqft', '$18', '$504', true],
    ['Plumbing · rough + finish', '1', 'lump', '$3,800', '$3,800'],
    ['Electrical · 6 outlets + under-cab', '1', 'lump', '$2,400', '$2,400'],
    ['Flooring · LVP, allowance', '245', 'sqft', '$6.50', '$1,593', true],
    ['Paint · walls + trim', '1', 'lump', '$1,650', '$1,650'],
    ['Disposal · 2 dumpster pulls', '2', 'pull', '$420', '$840'],
    ['Permits · city of Tulsa', '1', 'lump', '$385', '$385'],
    ['Final clean', '1', 'lump', '$340', '$340'],
  ];
  return (
    <KShell accent={EB_ACCENT}>
      <div style={{ display: 'grid', gridTemplateColumns: '1fr 360px', gap: 40, height: '100%' }}>
        <div style={{ overflow: 'auto', paddingRight: 8 }}>
          <KCrumb accent={EB_ACCENT}>Estimate · Webb Kitchen Remodel</KCrumb>
          <KHeadline>
            Ballpark is <span style={{ color: EB_ACCENT }}>$34,466.</span> 3 lines to verify.
          </KHeadline>
          <div style={{ fontSize: 14, color: K.body, marginTop: 12, maxWidth: 560, lineHeight: 1.55 }}>
            From your 3-sentence scope, I drafted 11 line items using your cost library. Two are allowances and one (backsplash sqft) I want you to verify before sending.
          </div>

          <div style={{ display: 'flex', gap: 8, marginTop: 22 }}>
            <KPill dark icon="↑">Send proposal</KPill>
            <KPill>Preview PDF</KPill>
            <KPill>Two-option version</KPill>
          </div>

          <div style={{ marginTop: 24 }}>
            <div style={{ display: 'grid', gridTemplateColumns: '2fr 60px 60px 90px 90px', gap: 12, padding: '8px 0', borderBottom: `1px solid ${K.line}`, fontFamily: K.mono, fontSize: 9, color: K.mute, letterSpacing: '0.12em' }}>
              <div>LINE ITEM</div><div style={{ textAlign: 'right' }}>QTY</div><div>UNIT</div><div style={{ textAlign: 'right' }}>COST</div><div style={{ textAlign: 'right' }}>TOTAL</div>
            </div>
            {items.map((it, i) => (
              <div key={i} style={{ display: 'grid', gridTemplateColumns: '2fr 60px 60px 90px 90px', gap: 12, padding: '11px 0', borderBottom: `1px solid ${K.line2}`, fontSize: 13, color: K.ink2, alignItems: 'center' }}>
                <span style={{ display: 'flex', alignItems: 'center', gap: 8 }}>
                  {it[5] && <span style={{ width: 6, height: 6, borderRadius: '50%', background: EB_ACCENT }} title="verify" />}
                  {it[0]}
                </span>
                <span style={{ textAlign: 'right', fontFamily: K.mono, fontSize: 12 }}>{it[1]}</span>
                <span style={{ fontSize: 11, color: K.mute, fontStyle: 'italic' }}>{it[2]}</span>
                <span style={{ textAlign: 'right', fontFamily: K.mono, fontSize: 12, color: K.mute }}>{it[3]}</span>
                <span style={{ textAlign: 'right', fontFamily: K.serif, fontSize: 15, color: K.ink }}>{it[4]}</span>
              </div>
            ))}
          </div>

          <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'baseline', marginTop: 20 }}>
            <div>
              <div style={{ fontSize: 12, color: K.mute }}>Subtotal $29,466 + 17% markup · exclusions: appliances, window treatments</div>
            </div>
            <div style={{ fontFamily: K.serif, fontSize: 48, color: K.ink, letterSpacing: '-0.02em', lineHeight: 1 }}>$34,466</div>
          </div>
        </div>

        <div style={{ display: 'flex', flexDirection: 'column', gap: 16, paddingTop: 6 }}>
          <KCard pad={18}>
            <div style={{ fontSize: 11, color: K.mute, marginBottom: 10 }}>Pipeline</div>
            {[
              ['Draft', 2, K.mute],
              ['Sent', 4, K.ink],
              ['Viewed', 3, EB_ACCENT],
              ['Signed', 6, K.green],
            ].map(([n, c, tone], i) => (
              <div key={n} style={{ display: 'flex', justifyContent: 'space-between', padding: '9px 0', borderTop: i ? `1px solid ${K.line2}` : 'none', fontSize: 13 }}>
                <span style={{ color: K.body }}>{n}</span>
                <span style={{ fontFamily: K.serif, fontSize: 18, color: tone }}>{c}</span>
              </div>
            ))}
          </KCard>
          <KCard pad={18}>
            <div style={{ fontSize: 11, color: K.mute, marginBottom: 8 }}>Suggested adds</div>
            <div style={{ fontSize: 13, color: K.ink2, lineHeight: 1.6, fontStyle: 'italic' }}>
              "Based on past kitchens, consider adding: appliance install labor, drywall patch allowance, and touch-up paint after cabinet install."
            </div>
          </KCard>
          <KAICard accent={EB_ACCENT}>
            Your average kitchen margin is 26.4%. At $34,466 with your standard markup, you're tracking to 27% on this one.
          </KAICard>
        </div>
      </div>
    </KShell>
  );
}

// ═══════════════════════════════════════════════════════════
// 09 · Accounting — sand
// ═══════════════════════════════════════════════════════════
const AC_ACCENT = K.sand;

function AccountingPage09() {
  const bars = [48, 62, 55, 71, 68, 84]; // Nov–Apr revenue
  const months = ['Nov','Dec','Jan','Feb','Mar','Apr'];
  const jobs = [
    ['Johnson Kitchen', '$84,200', '$51,840', '18%', K.amber],
    ['Harborview Blk B', '$412,000', '$188,200', '26%', K.green],
    ['Smith Bath', '$42,800', '$28,400', '31%', K.green],
    ['Pike Bath', '$38,600', '$31,200', '14%', K.red],
    ['Marsh Addition', '$96,400', '$18,400', '29%', K.green],
    ['Calloway TI', '$218,000', '$142,000', '22%', K.amber],
    ['Ortiz Deck', '$18,200', '$4,100', '34%', K.green],
  ];
  return (
    <KShell accent={AC_ACCENT}>
      <KCrumb accent={AC_ACCENT}>Financial · week of Apr 20</KCrumb>
      <KHeadline>
        You invoiced <span style={{ color: AC_ACCENT }}>$22,400</span> last week. Collected $18,000.
      </KHeadline>
      <div style={{ fontSize: 14, color: K.body, marginTop: 12, maxWidth: 620, lineHeight: 1.55 }}>
        Johnson Kitchen is trending to 18% margin — below your 25% target. Set aside $4,800 this week for estimated quarterly taxes. Everything else looks healthy.
      </div>

      <div style={{ display: 'grid', gridTemplateColumns: 'repeat(4, 1fr)', gap: 16, marginTop: 26 }}>
        <Stat label="Revenue · April" value="$84,200" sub="↑ 24% vs March" accent={K.ink} />
        <Stat label="Cash in bank" value="$142,800" sub="operating + reserve" accent={K.green} />
        <Stat label="Outstanding A/R" value="$75,000" sub="6 invoices" accent={AC_ACCENT} />
        <Stat label="30-day projected net" value="$28,400" sub="after reserves" accent={K.ink} />
      </div>

      <div style={{ display: 'grid', gridTemplateColumns: '1fr 1fr', gap: 16, marginTop: 18 }}>
        <KCard pad={22}>
          <div style={{ fontSize: 11, color: K.mute, marginBottom: 14 }}>Revenue · 6 months</div>
          <div style={{ display: 'flex', alignItems: 'flex-end', gap: 14, height: 120 }}>
            {bars.map((h, i) => (
              <div key={i} style={{ flex: 1, display: 'flex', flexDirection: 'column', alignItems: 'center', gap: 6 }}>
                <div style={{ fontFamily: K.mono, fontSize: 10, color: K.mute }}>${h}k</div>
                <div style={{ width: '100%', height: h + 'px', background: i === bars.length - 1 ? AC_ACCENT : K.line, borderRadius: 2 }} />
                <div style={{ fontFamily: K.mono, fontSize: 10, color: K.mute, letterSpacing: '0.08em' }}>{months[i].toUpperCase()}</div>
              </div>
            ))}
          </div>
        </KCard>
        <KCard pad={22}>
          <div style={{ fontSize: 11, color: K.mute, marginBottom: 10 }}>Monday morning, in plain English</div>
            <div style={{ fontFamily: K.serif, fontSize: 17, color: K.ink2, lineHeight: 1.55, fontStyle: 'italic' }}>
              "Last week you invoiced $22,400 and collected $18,000. You paid out $9,200 — $4,800 to subs, $3,100 to materials, $1,300 in overhead. Johnson Kitchen is trending 7 points below your target margin. The culprit is labor — framing took 38 hours vs the 28 you estimated."
            </div>
        </KCard>
      </div>

      <div style={{ marginTop: 22 }}>
        <div style={{ fontFamily: K.serif, fontSize: 20, color: K.ink, marginBottom: 10 }}>Job profitability</div>
        <div style={{ borderTop: `1px solid ${K.line}` }}>
          {jobs.map((j, i) => (
            <div key={i} style={{ display: 'grid', gridTemplateColumns: '1.5fr 110px 110px 80px 1fr', gap: 16, padding: '12px 0', borderBottom: `1px solid ${K.line2}`, alignItems: 'center' }}>
              <span style={{ fontSize: 13, color: K.ink }}>{j[0]}</span>
              <span style={{ fontFamily: K.serif, fontSize: 16, color: K.ink }}>{j[1]}</span>
              <span style={{ fontFamily: K.mono, fontSize: 12, color: K.mute }}>{j[2]} spent</span>
              <span style={{ fontFamily: K.serif, fontSize: 16, color: j[4] }}>{j[3]}</span>
              <div style={{ height: 4, background: K.line2, borderRadius: 2 }}>
                <div style={{ width: parseInt(j[3]) * 2 + '%', height: '100%', background: j[4], borderRadius: 2 }} />
              </div>
            </div>
          ))}
        </div>
      </div>
    </KShell>
  );
}

// ═══════════════════════════════════════════════════════════
// 10 · Client Portal — violet (already light, so just align)
// ═══════════════════════════════════════════════════════════
const CP_ACCENT = K.violet;

function ClientPortalPage10() {
  return (
    <KShell client="Calloway Co." user="Sarah J." accent={CP_ACCENT}>
      <div style={{ display: 'grid', gridTemplateColumns: '1fr 360px', gap: 40, height: '100%' }}>
        <div style={{ overflow: 'auto', paddingRight: 8 }}>
          <KCrumb accent={CP_ACCENT}>Your project · Johnson Kitchen Remodel</KCrumb>
          <KHeadline>
            You're <span style={{ color: CP_ACCENT }}>67% of the way</span> to a finished kitchen.
          </KHeadline>
          <div style={{ fontSize: 14, color: K.body, marginTop: 12, maxWidth: 540, lineHeight: 1.55 }}>
            Rough-in is done, cabinets are in, backsplash goes up Friday. Estimated completion: <strong>June 6</strong>. Two things need your attention below.
          </div>

          <div style={{ marginTop: 22 }}>
            <KPhases items={['Design', 'Demo', 'Rough-in', 'Cabinets', 'Finish', 'Closeout']} active={3} />
          </div>

          {/* Action items */}
          <div style={{ marginTop: 26 }}>
            <div style={{ fontFamily: K.mono, fontSize: 10, color: K.mute, letterSpacing: '0.14em', marginBottom: 10 }}>NEEDS YOUR ATTENTION · 2</div>
            {[
              ['Change Order · CO-003', 'Subfloor rot repair · 40 sqft · $864', 'Review & sign', CP_ACCENT],
              ['Invoice · Rough-in milestone', '$12,400 · due May 8', 'Pay now', K.ink],
            ].map(([t, s, b, c], i) => (
              <div key={i} style={{ display: 'flex', alignItems: 'center', gap: 16, padding: '16px 0', borderTop: `1px solid ${K.line2}`, borderBottom: i === 1 ? `1px solid ${K.line2}` : 'none' }}>
                <div style={{ flex: 1 }}>
                  <div style={{ fontFamily: K.serif, fontSize: 18, color: K.ink }}>{t}</div>
                  <div style={{ fontSize: 13, color: K.body, marginTop: 3 }}>{s}</div>
                </div>
                <KPill dark>{b}</KPill>
              </div>
            ))}
          </div>

          {/* Photo timeline */}
          <div style={{ marginTop: 28 }}>
            <div style={{ display: 'flex', alignItems: 'baseline', marginBottom: 12 }}>
              <div style={{ fontFamily: K.serif, fontSize: 22, color: K.ink }}>This week on site</div>
              <div style={{ marginLeft: 'auto', fontFamily: K.mono, fontSize: 10, color: K.mute, letterSpacing: '0.12em' }}>APR 20 – APR 24</div>
            </div>
            <div style={{ display: 'grid', gridTemplateColumns: 'repeat(5, 1fr)', gap: 10 }}>
              {['Mon', 'Tue', 'Wed', 'Thu', 'Fri'].map((d, i) => (
                <div key={d}>
                  <div style={{ aspectRatio: '4/3', background: `linear-gradient(135deg, ${K.line} 0%, ${K.line2} 50%, ${K.line} 100%)`, borderRadius: 10, border: `1px solid ${K.line}`, position: 'relative' }}>
                    <div style={{ position: 'absolute', top: 6, left: 8, fontFamily: K.mono, fontSize: 9, color: K.mute }}>DAY {i+1}</div>
                  </div>
                  <div style={{ fontFamily: K.mono, fontSize: 9, color: K.mute, marginTop: 6, letterSpacing: '0.08em' }}>{d.toUpperCase()} · APR {20+i}</div>
                </div>
              ))}
            </div>
          </div>
        </div>

        {/* Side */}
        <div style={{ display: 'flex', flexDirection: 'column', gap: 16, paddingTop: 6 }}>
          <KCard pad={20}>
            <div style={{ fontSize: 11, color: K.mute, marginBottom: 6 }}>Estimated completion</div>
            <div style={{ fontFamily: K.serif, fontSize: 28, color: K.ink, letterSpacing: '-0.01em' }}>June 6, 2026</div>
            <div style={{ fontSize: 12, color: K.mute, marginTop: 4 }}>on track · 42 days out</div>
          </KCard>
          <KCard pad={18}>
            <div style={{ fontSize: 11, color: K.mute, marginBottom: 10 }}>Documents</div>
            {[
              ['Original contract', 'PDF · Mar 3'],
              ['CO-001 · Copper lines', 'PDF · Mar 18'],
              ['CO-002 · Gas relocation', 'PDF · Apr 2'],
              ['Permits · city of Tulsa', 'PDF · Mar 10'],
            ].map(([n, d], i) => (
              <div key={n} style={{ display: 'flex', justifyContent: 'space-between', padding: '9px 0', borderTop: i ? `1px solid ${K.line2}` : 'none', fontSize: 12.5 }}>
                <span style={{ color: K.ink2 }}>{n}</span>
                <span style={{ fontFamily: K.mono, fontSize: 10, color: K.mute }}>{d}</span>
              </div>
            ))}
          </KCard>
          <KCard pad={18}>
            <div style={{ fontSize: 11, color: K.mute, marginBottom: 8 }}>Ask Marcus anything</div>
            <div style={{ background: K.bg, borderRadius: 10, padding: '10px 12px', fontSize: 13, color: K.mute, fontStyle: 'italic' }}>When will the electrician be back?</div>
            <div style={{ marginTop: 10, textAlign: 'right' }}><KPill dark>Send →</KPill></div>
          </KCard>
        </div>
      </div>
    </KShell>
  );
}

Object.assign(window, {
  JobCostPage, DailyLogPage, CrewDashboardPage,
  SchedulePage07, EstimateBuilderPage, AccountingPage09, ClientPortalPage10,
});