// Alternate variations — second takes on key modules.
// Different layouts/AI postures while reusing the shared palette.

// ── Dashboard · alt (split-pane · AI chat-first) ──────────────
function DashboardSplitPage() {
  return (
    <div style={{ width: '100%', height: '100%', background: C.bg, color: C.ink, fontFamily: C.sans, fontSize: 13, display: 'grid', gridTemplateColumns: '220px 1fr 1fr' }}>
      <CSidebar active="Home" />

      {/* Left pane — chat */}
      <div style={{ background: C.panel, borderRight: `1px solid ${C.line}`, display: 'flex', flexDirection: 'column', overflow: 'hidden' }}>
        <div style={{ padding: '18px 22px', borderBottom: `1px solid ${C.line}` }}>
          <div style={{ fontSize: 11, color: C.ink3, letterSpacing: '0.05em', textTransform: 'uppercase', fontWeight: 500, marginBottom: 3 }}>Conversation</div>
          <div style={{ fontSize: 16, fontWeight: 600 }}>Morning brief · Apr 21</div>
        </div>
        <div style={{ flex: 1, padding: '18px 22px', overflow: 'auto', display: 'flex', flexDirection: 'column', gap: 14 }}>
          <ChatMsg me>Give me the morning on Harborview.</ChatMsg>
          <ChatMsg>
            Framing is <b>62%</b> — on pace. 41 of 44 crew on site (3 sick). Brannigan invoice of <b>$184K</b> needs your approval by Thu. Calloway hasn't signed <b>CO-017</b> yet — I can nudge them.
          </ChatMsg>
          <ChatMsg me>Nudge them. Also pull labor cost for the week.</ChatMsg>
          <ChatMsg typing>
            Drafting a note to Calloway with the quote + drawings attached. Opening labor for week of Apr 14…
          </ChatMsg>
          <ChatAttach title="Week 16 · Harborview labor" meta="$94,280 · +$2,140 vs plan · 7.5 OT hrs" />
        </div>
        <div style={{ padding: 14, borderTop: `1px solid ${C.line}`, background: C.bg }}>
          <div style={{ padding: '12px 14px', background: C.panel, border: `1px solid ${C.line}`, borderRadius: 10, display: 'flex', gap: 10, alignItems: 'center', fontSize: 13, color: C.ink3 }}>
            Ask across your projects…
            <span style={{ marginLeft: 'auto', fontSize: 16 }}>↵</span>
          </div>
          <div style={{ display: 'flex', gap: 6, marginTop: 8 }}>
            {['Today on site','Invoices due','Safety flags','Draft update'].map(s => (
              <span key={s} style={{ fontSize: 11, padding: '4px 10px', border: `1px solid ${C.line}`, borderRadius: 999, color: C.ink2, background: C.panel }}>{s}</span>
            ))}
          </div>
        </div>
      </div>

      {/* Right pane — contextual card */}
      <div style={{ overflow: 'auto', padding: 20, display: 'flex', flexDirection: 'column', gap: 14 }}>
        <div style={{ fontSize: 11, color: C.ink3, letterSpacing: '0.05em', textTransform: 'uppercase', fontWeight: 500 }}>Context</div>
        <div style={{ fontSize: 24, fontWeight: 600, letterSpacing: '-0.015em' }}>Harborview Blk B</div>
        <div style={{ display: 'grid', gridTemplateColumns: 'repeat(3,1fr)', gap: 10 }}>
          {[['Progress','27%'],['Budget','$5.27M'],['Schedule','+3d','amber']].map(([k,v,t],i)=>(
            <div key={i} style={{ padding: 14, background: C.panel, border: `1px solid ${C.line}`, borderRadius: 8 }}>
              <div style={{ fontSize: 11, color: C.ink3 }}>{k}</div>
              <div style={{ fontSize: 20, fontWeight: 600, color: t === 'amber' ? C.amber : C.ink, marginTop: 5 }}>{v}</div>
            </div>
          ))}
        </div>
        <div style={{ padding: 16, background: C.panel, border: `1px solid ${C.line}`, borderRadius: 10 }}>
          <div style={{ fontWeight: 600, marginBottom: 10 }}>Draft — nudge to Calloway Co</div>
          <div style={{ fontSize: 12, color: C.ink2, lineHeight: 1.6, fontFamily: C.serif, fontStyle: 'italic' }}>
            Hi Ruth — gentle reminder on CO-017 (Low-E glazing, $42,180). We need your signature to hold the May 2 install. Quote, drawings + vendor spec attached. Happy to jump on a call if helpful. — Marcus
          </div>
          <div style={{ display: 'flex', gap: 8, marginTop: 12 }}>
            <CButton primary icon="↗">Send</CButton>
            <CButton>Edit</CButton>
            <CButton>Add voice note</CButton>
          </div>
        </div>
        <div style={{ padding: 16, background: C.panel, border: `1px solid ${C.line}`, borderRadius: 10 }}>
          <div style={{ fontWeight: 600, marginBottom: 8 }}>Today · 3 things</div>
          {[
            ['Approve Brannigan invoice','$184,220 · due Thu'],
            ['Walk-through agenda · May 2','prepared, awaiting review'],
            ['Safety briefing · L3 framing','1 PPE flag today'],
          ].map(([t,s],i)=>(
            <div key={i} style={{ display: 'flex', padding: '10px 0', borderTop: i ? `1px solid ${C.line2}` : 'none', alignItems: 'center' }}>
              <div style={{ flex: 1 }}>
                <div style={{ fontSize: 13 }}>{t}</div>
                <div style={{ fontSize: 11, color: C.ink3 }}>{s}</div>
              </div>
              <span style={{ color: C.ink3 }}>→</span>
            </div>
          ))}
        </div>
      </div>
    </div>
  );
}

function ChatMsg({ me, typing, children }) {
  return (
    <div style={{ display: 'flex', gap: 10, alignItems: 'flex-start' }}>
      {!me && <div style={{ width: 24, height: 24, borderRadius: 6, background: `linear-gradient(135deg, ${C.blue}, ${C.indigo})`, color: '#fff', display: 'grid', placeItems: 'center', fontFamily: C.mono, fontSize: 11, fontWeight: 600, flexShrink: 0 }}>C</div>}
      {me && <div style={{ width: 24, height: 24, borderRadius: '50%', background: '#cbb79a', color: C.ink, display: 'grid', placeItems: 'center', fontSize: 10, fontWeight: 600, flexShrink: 0 }}>MR</div>}
      <div style={{
        maxWidth: '82%', padding: '10px 14px', borderRadius: 10,
        background: me ? '#eef3ff' : C.panel,
        border: `1px solid ${me ? '#dbe5ff' : C.line}`,
        fontSize: 13, lineHeight: 1.5,
      }}>
        {children}
        {typing && <span style={{ display: 'inline-block', marginLeft: 4, width: 6, height: 6, borderRadius: '50%', background: C.blue, animation: 'pulse 0.8s ease-in-out infinite' }} />}
      </div>
    </div>
  );
}

function ChatAttach({ title, meta }) {
  return (
    <div style={{ marginLeft: 34, padding: 10, border: `1px solid ${C.line}`, borderRadius: 8, background: C.panel, display: 'flex', alignItems: 'center', gap: 10, maxWidth: 340 }}>
      <div style={{ width: 32, height: 32, borderRadius: 6, background: C.blueSoft, color: C.blue, display: 'grid', placeItems: 'center', fontWeight: 600 }}>▦</div>
      <div style={{ flex: 1 }}>
        <div style={{ fontSize: 12, fontWeight: 500 }}>{title}</div>
        <div style={{ fontSize: 11, color: C.ink3 }}>{meta}</div>
      </div>
      <span style={{ color: C.ink3 }}>↗</span>
    </div>
  );
}

// ── Schedule · alt (calendar / week board) ────────────────────
function ScheduleCalendarPage() {
  const days = ['Mon 21','Tue 22','Wed 23','Thu 24','Fri 25','Sat 26','Sun 27'];
  const tracks = ['Framing','MEP','Inspections','Deliveries','Milestones'];
  const events = [
    { t: 0, d: 0, l: 5, n: 'L3 framing', tone: 'blue' },
    { t: 1, d: 2, l: 2, n: 'Rough elec walkthrough', tone: 'indigo' },
    { t: 1, d: 4, l: 1, n: 'Plumb L2', tone: 'indigo' },
    { t: 2, d: 3, l: 1, n: 'Framing inspection', tone: 'amber' },
    { t: 3, d: 0, l: 1, n: 'Rebar load #4', tone: 'default' },
    { t: 3, d: 2, l: 1, n: 'TPO membrane', tone: 'default' },
    { t: 4, d: 4, l: 1, n: 'CO-017 signed', tone: 'mint' },
  ];
  return (
    <div style={{ width: '100%', height: '100%', background: C.bg, color: C.ink, fontFamily: C.sans, fontSize: 13, display: 'grid', gridTemplateColumns: '220px 1fr' }}>
      <CSidebar active="Schedule" />
      <div style={{ display: 'flex', flexDirection: 'column', overflow: 'hidden' }}>
        <CHead crumb="Schedule" title="Week of Apr 21" sub="Harborview Blk B · track view" right={<div style={{ display: 'flex', gap: 8 }}><CButton>Day</CButton><CButton primary>Week</CButton><CButton>Gantt</CButton></div>} />
        <div style={{ flex: 1, background: C.panel, padding: '16px 24px', overflow: 'hidden', display: 'flex', flexDirection: 'column' }}>
          {/* header */}
          <div style={{ display: 'grid', gridTemplateColumns: '140px repeat(7, 1fr)', borderBottom: `1px solid ${C.line}` }}>
            <div></div>
            {days.map(d => <div key={d} style={{ padding: '8px 10px', fontSize: 11, color: C.ink3, letterSpacing: '0.04em', textTransform: 'uppercase', fontWeight: 500, borderLeft: `1px solid ${C.line2}` }}>{d}</div>)}
          </div>
          {/* tracks */}
          {tracks.map((tr, ti) => (
            <div key={tr} style={{ display: 'grid', gridTemplateColumns: '140px repeat(7, 1fr)', borderBottom: `1px solid ${C.line2}`, minHeight: 72, position: 'relative' }}>
              <div style={{ padding: '12px 10px', fontSize: 12, fontWeight: 500, color: C.ink2 }}>{tr}</div>
              {days.map((_, di) => <div key={di} style={{ borderLeft: `1px solid ${C.line2}`, background: di === 0 ? 'rgba(37,99,235,0.03)' : 'transparent' }} />)}
              {events.filter(e => e.t === ti).map((e, i) => {
                const tone = { blue: [C.blueSoft, C.blueDeep, C.blue], indigo: [C.blueSoft, C.indigo, C.indigo], amber: [C.amberSoft, C.amber, C.amber], mint: [C.mintSoft, C.mint, C.mint], default: [C.line2, C.ink2, C.ink3] }[e.tone];
                return (
                  <div key={i} style={{
                    position: 'absolute', left: `calc(140px + ${e.d} * ((100% - 140px) / 7) + 6px)`,
                    width: `calc(${e.l} * ((100% - 140px) / 7) - 12px)`,
                    top: 12, bottom: 12, background: tone[0],
                    border: `1px solid ${tone[2]}`, borderLeft: `3px solid ${tone[1]}`,
                    borderRadius: 6, padding: '6px 10px',
                    fontSize: 12, fontWeight: 500, color: tone[1], display: 'flex', alignItems: 'center',
                  }}>{e.n}</div>
                );
              })}
            </div>
          ))}
          <div style={{ marginTop: 'auto', padding: 12, background: C.blueSoft, borderRadius: 8, fontSize: 12, display: 'flex', alignItems: 'center', gap: 10 }}>
            <span style={{ width: 22, height: 22, borderRadius: 6, background: `linear-gradient(135deg, ${C.blue}, ${C.indigo})`, color: '#fff', display: 'grid', placeItems: 'center', fontFamily: C.mono, fontSize: 11, fontWeight: 600 }}>C</span>
            <span style={{ flex: 1 }}>Framing inspection Thu depends on Wed walkthrough. One weather day Sat would absorb the slip. <b>See conflict map →</b></span>
          </div>
        </div>
      </div>
    </div>
  );
}

// ── Materials · alt (card grid with images) ───────────────────
function MaterialsCardsPage() {
  const items = [
    { sku: 'SB-050', n: 'Rebar #5, 60ksi',  v: 'Atlantic Steel',  p: '$41,280', a: '$44,120', d: '+6.9%', t: 'amber',  s: 'delivered',  col: '#6b7785' },
    { sku: 'CM-040', n: 'Type IL cement',    v: 'Brannigan',       p: '$4,512',  a: '$4,512',  d: '0.0%',  t: 'default',s: 'on-site',    col: '#b9b3a5' },
    { sku: 'LM-210', n: '2×10 SPF #2 KD',    v: 'Pine Ridge',      p: '$4,368',  a: '$4,040',  d: '−7.5%', t: 'mint',   s: 'on-site',    col: '#c48f5e' },
    { sku: 'IN-015', n: 'Mineral wool R-23', v: 'Rockwool NE',     p: '$4,742',  a: '$4,742',  d: '0.0%',  t: 'default',s: 'delivered',  col: '#8b9aa6' },
    { sku: 'GL-220', n: 'Low-E IGU 4×6',     v: 'Clearline',       p: '$17,136', a: '—',       d: 'pending',t: 'amber', s: 'ordered',    col: '#a8c4d4' },
    { sku: 'MB-050', n: 'TPO roof 60mil',    v: 'Northern',        p: '$15,960', a: '—',       d: 'pending',t: 'amber', s: 'in transit', col: '#c5c0b4' },
    { sku: 'DW-120', n: 'Drywall 5/8 Type X',v: 'USG',             p: '$39,690', a: '$13,608', d: '−65.7%',t: 'red',   s: 'partial',    col: '#d8d1bc' },
    { sku: 'FN-410', n: 'Finish tile matte', v: 'Meridian Tile',   p: '$11,520', a: '—',       d: 'spec',  t: 'default',s: 'quote',      col: '#aa9a84' },
  ];
  return (
    <div style={{ width: '100%', height: '100%', background: C.bg, color: C.ink, fontFamily: C.sans, fontSize: 13, display: 'grid', gridTemplateColumns: '220px 1fr' }}>
      <CSidebar active="Materials" />
      <div style={{ display: 'flex', flexDirection: 'column', overflow: 'hidden' }}>
        <CHead crumb="Field / Materials" title="Materials · card view" sub="Harborview Blk B · 8 active SKUs · auto-reconciled with receipts" right={<div style={{ display: 'flex', gap: 8 }}><CButton>List view</CButton><CButton primary icon="+">Add PO</CButton></div>} />
        <div style={{ flex: 1, padding: 20, overflow: 'auto', display: 'grid', gridTemplateColumns: 'repeat(4, 1fr)', gap: 14, alignContent: 'start' }}>
          {items.map((it, i) => (
            <div key={i} style={{ background: C.panel, border: `1px solid ${C.line}`, borderRadius: 10, overflow: 'hidden' }}>
              {/* "photo" placeholder */}
              <div style={{ height: 110, background: `repeating-linear-gradient(135deg, ${it.col} 0 10px, ${it.col}cc 10px 20px)`, position: 'relative' }}>
                <div style={{ position: 'absolute', inset: 0, background: 'linear-gradient(180deg, transparent 60%, rgba(0,0,0,0.3))' }} />
                <span style={{ position: 'absolute', top: 8, left: 10, fontFamily: C.mono, fontSize: 10, padding: '2px 6px', background: 'rgba(255,255,255,0.9)', borderRadius: 3 }}>{it.sku}</span>
                <span style={{ position: 'absolute', top: 8, right: 10 }}><CPill tone={it.s === 'on-site' || it.s === 'delivered' ? 'mint' : it.s === 'partial' ? 'red' : 'amber'}>{it.s}</CPill></span>
              </div>
              <div style={{ padding: '12px 14px' }}>
                <div style={{ fontSize: 13, fontWeight: 500, marginBottom: 3 }}>{it.n}</div>
                <div style={{ fontSize: 11, color: C.ink3, marginBottom: 10 }}>{it.v}</div>
                <div style={{ display: 'flex', fontSize: 11, fontFamily: C.mono }}>
                  <div style={{ flex: 1 }}><div style={{ color: C.ink3, fontFamily: C.sans, fontSize: 10 }}>Planned</div>{it.p}</div>
                  <div style={{ flex: 1 }}><div style={{ color: C.ink3, fontFamily: C.sans, fontSize: 10 }}>Actual</div>{it.a}</div>
                  <div style={{ flex: 1, textAlign: 'right' }}><div style={{ color: C.ink3, fontFamily: C.sans, fontSize: 10, textAlign: 'right' }}>Δ</div><span style={{ color: it.t === 'amber' ? C.amber : it.t === 'red' ? C.red : it.t === 'mint' ? C.mint : C.ink2 }}>{it.d}</span></div>
                </div>
              </div>
            </div>
          ))}
        </div>
      </div>
    </div>
  );
}

// ── Payments · alt (focused approval moment) ──────────────────
function PaymentsApprovalPage() {
  return (
    <div style={{ width: '100%', height: '100%', background: C.bg, color: C.ink, fontFamily: C.sans, fontSize: 13, display: 'grid', gridTemplateColumns: '220px 1fr' }}>
      <CSidebar active="Accounting" />
      <div style={{ display: 'flex', flexDirection: 'column', overflow: 'hidden' }}>
        <CHead crumb="Operate / Payments" title="Approve payout · Brannigan Concrete" sub="Contro prepared the packet · 3 things to look at" right={<div style={{ display: 'flex', gap: 8 }}><CButton>Reject</CButton><CButton primary icon="✓">Approve $184,220</CButton></div>} />
        <div style={{ flex: 1, padding: 24, display: 'grid', gridTemplateColumns: '1fr 380px', gap: 18, overflow: 'hidden' }}>
          {/* Invoice preview */}
          <div style={{ background: '#fff', border: `1px solid ${C.line}`, borderRadius: 10, padding: '28px 32px', overflow: 'auto', fontFamily: C.serif }}>
            <div style={{ display: 'flex', marginBottom: 24 }}>
              <div>
                <div style={{ fontSize: 22, letterSpacing: '-0.01em' }}>Brannigan Concrete, LLC</div>
                <div style={{ fontSize: 12, color: C.ink3, marginTop: 4, fontFamily: C.sans }}>412 Forest Ave · Portland, ME · 04103</div>
              </div>
              <div style={{ marginLeft: 'auto', textAlign: 'right' }}>
                <div style={{ fontSize: 11, color: C.ink3, fontFamily: C.sans, letterSpacing: '0.06em', textTransform: 'uppercase' }}>Invoice</div>
                <div style={{ fontSize: 18, fontFamily: C.mono }}>INV-1142</div>
                <div style={{ fontSize: 11, color: C.ink3, fontFamily: C.sans }}>Issued Apr 18 · due Apr 25</div>
              </div>
            </div>
            <div style={{ fontSize: 11, color: C.ink3, fontFamily: C.sans, letterSpacing: '0.04em', textTransform: 'uppercase', marginBottom: 6 }}>Bill to</div>
            <div style={{ fontSize: 14, marginBottom: 22, fontFamily: C.sans }}>Ridgeline Development · Harborview Blk B (PRJ-0418)</div>

            <table style={{ width: '100%', borderCollapse: 'collapse', fontFamily: C.sans, fontSize: 12 }}>
              <thead>
                <tr style={{ fontSize: 10, letterSpacing: '0.06em', textTransform: 'uppercase', color: C.ink3 }}>
                  <th style={{ textAlign: 'left', padding: '8px 0', borderBottom: `1px solid ${C.line}` }}>Description</th>
                  <th style={{ textAlign: 'right', padding: '8px 0', borderBottom: `1px solid ${C.line}`, width: 90 }}>Qty</th>
                  <th style={{ textAlign: 'right', padding: '8px 0', borderBottom: `1px solid ${C.line}`, width: 110 }}>Rate</th>
                  <th style={{ textAlign: 'right', padding: '8px 0', borderBottom: `1px solid ${C.line}`, width: 110 }}>Amount</th>
                </tr>
              </thead>
              <tbody>
                {[
                  ['Type IL cement · Apr 10 delivery','480 bag','$9.40','$4,512'],
                  ['Concrete pour · Slab B, L1','240 cy','$184','$44,160'],
                  ['Concrete pour · Slab B, L2','220 cy','$184','$40,480'],
                  ['Concrete pour · Col. footings','114 cy','$212','$24,168'],
                  ['Labor · pump + finishing','380 hr','$82','$31,160'],
                  ['Equipment · pump truck','6 day','$1,450','$8,700'],
                  ['Rebar placement · Apr 15–19','-','-','$31,040'],
                ].map((r, i) => (
                  <tr key={i}>
                    <td style={{ padding: '10px 0', borderBottom: `1px solid ${C.line2}` }}>{r[0]}</td>
                    <td style={{ padding: '10px 0', textAlign: 'right', borderBottom: `1px solid ${C.line2}`, fontFamily: C.mono }}>{r[1]}</td>
                    <td style={{ padding: '10px 0', textAlign: 'right', borderBottom: `1px solid ${C.line2}`, fontFamily: C.mono }}>{r[2]}</td>
                    <td style={{ padding: '10px 0', textAlign: 'right', borderBottom: `1px solid ${C.line2}`, fontFamily: C.mono, fontWeight: 500, background: i === 1 ? 'rgba(217,119,6,0.08)' : 'transparent' }}>
                      {r[3]}
                      {i === 1 && <span style={{ marginLeft: 4, fontSize: 10, color: C.amber }}>●</span>}
                    </td>
                  </tr>
                ))}
              </tbody>
              <tfoot>
                <tr><td colSpan="3" style={{ textAlign: 'right', padding: '14px 0 4px', color: C.ink3 }}>Subtotal</td><td style={{ textAlign: 'right', fontFamily: C.mono }}>$184,220</td></tr>
                <tr><td colSpan="3" style={{ textAlign: 'right', padding: '4px 0', color: C.ink3 }}>Retainage (10%)</td><td style={{ textAlign: 'right', fontFamily: C.mono, color: C.ink3 }}>−$20,468</td></tr>
                <tr><td colSpan="3" style={{ textAlign: 'right', padding: '8px 0', fontSize: 14, fontWeight: 500, borderTop: `1px solid ${C.line}` }}>Due now</td><td style={{ textAlign: 'right', fontFamily: C.mono, fontSize: 16, fontWeight: 600, borderTop: `1px solid ${C.line}`, padding: '8px 0' }}>$163,752</td></tr>
              </tfoot>
            </table>
          </div>

          {/* AI review */}
          <div style={{ display: 'flex', flexDirection: 'column', gap: 12, overflow: 'auto' }}>
            <div style={{ padding: 14, background: C.panel, border: `1px solid ${C.line}`, borderRadius: 10 }}>
              <div style={{ display: 'flex', alignItems: 'center', gap: 10, marginBottom: 10 }}>
                <span style={{ width: 22, height: 22, borderRadius: 6, background: `linear-gradient(135deg, ${C.blue}, ${C.indigo})`, color: '#fff', display: 'grid', placeItems: 'center', fontFamily: C.mono, fontSize: 11, fontWeight: 600 }}>C</span>
                <div style={{ fontWeight: 600 }}>Contro review</div>
                <span style={{ marginLeft: 'auto', fontSize: 11, color: C.mint }}>● matches records</span>
              </div>
              <div style={{ fontSize: 12, color: C.ink2, lineHeight: 1.55 }}>
                Matched to <b>PO-0338</b>, <b>RFI-225</b>, and 3 daily logs (Apr 15–19). Labor hours cross-check with check-ins. Retainage held at 10% per contract.
              </div>
            </div>

            <div style={{ padding: 14, background: C.panel, border: `1px solid ${C.line}`, borderRadius: 10 }}>
              <div style={{ fontSize: 11, color: C.ink3, letterSpacing: '0.06em', textTransform: 'uppercase', fontWeight: 500, marginBottom: 10 }}>3 things to look at</div>
              {[
                ['Slab B L1 pour: 240 cy','Plan was 232 cy · 3.4% over','amber'],
                ['Rebar placement lump-sum','No detail provided · ask for breakdown','amber'],
                ['Lien waiver','Conditional partial · on file','mint'],
              ].map(([t, s, tone], i) => (
                <div key={i} style={{ padding: '10px 0', borderTop: i ? `1px solid ${C.line2}` : 'none' }}>
                  <div style={{ display: 'flex', alignItems: 'center', gap: 8, marginBottom: 2 }}>
                    <span style={{ width: 6, height: 6, borderRadius: '50%', background: tone === 'amber' ? C.amber : C.mint }} />
                    <span style={{ fontSize: 12, fontWeight: 500 }}>{t}</span>
                  </div>
                  <div style={{ fontSize: 11, color: C.ink3, marginLeft: 14 }}>{s}</div>
                </div>
              ))}
            </div>

            <div style={{ padding: 14, background: C.blueSoft, borderRadius: 10 }}>
              <div style={{ fontSize: 12, lineHeight: 1.55 }}>
                Recommend <b>approve</b> with a note to Brannigan asking for the rebar breakdown on the next invoice. I've drafted it.
              </div>
              <div style={{ display: 'flex', gap: 6, marginTop: 10 }}>
                <CButton>See draft</CButton>
                <CButton>Request revision</CButton>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  );
}

// ── Photos · alt (gallery grid + timeline) ────────────────────
function PhotosGalleryPage() {
  const photos = Array.from({ length: 24 }).map((_, i) => ({
    t: `${8 + Math.floor(i/2)}:${i%2 ? '32' : '02'}`,
    col: ['#6b7785','#7a8592','#5f6e7e','#8a7d6a','#a0927a','#6a7280','#7b8795','#605a52','#8e8276'][i % 9],
    flags: i === 4 ? ['safety'] : i === 11 ? ['progress'] : i === 17 ? ['defect'] : i === 21 ? ['safety'] : [],
  }));
  return (
    <div style={{ width: '100%', height: '100%', background: C.bg, color: C.ink, fontFamily: C.sans, fontSize: 13, display: 'grid', gridTemplateColumns: '220px 1fr' }}>
      <CSidebar active="Daily logs" />
      <div style={{ display: 'flex', flexDirection: 'column', overflow: 'hidden' }}>
        <CHead crumb="Field / Photos" title="Photo gallery" sub="Apr 21 · 24 captures across 6 crews · AI-tagged" right={<div style={{ display: 'flex', gap: 8 }}><CButton icon="⌕">Filter · all</CButton><CButton>Map</CButton><CButton primary>Compare to Apr 14</CButton></div>} />
        <div style={{ display: 'grid', gridTemplateColumns: 'repeat(4,1fr)', gap: 1, background: C.line, borderBottom: `1px solid ${C.line}` }}>
          {[['Progress','+4%','framing · L3'],['Safety flags','2','PPE'],['Defects','1','tile spec'],['Auto-tagged','24/24','all photos']].map(([k,v,s],i)=>(
            <div key={i} style={{ background: C.panel, padding: '12px 16px' }}>
              <div style={{ fontSize: 11, color: C.ink2 }}>{k}</div>
              <div style={{ fontSize: 20, fontWeight: 600, marginTop: 4 }}>{v}</div>
              <div style={{ fontSize: 11, color: C.ink3, marginTop: 2 }}>{s}</div>
            </div>
          ))}
        </div>
        <div style={{ flex: 1, padding: 18, overflow: 'auto', background: C.bg }}>
          <div style={{ display: 'grid', gridTemplateColumns: 'repeat(6, 1fr)', gap: 8 }}>
            {photos.map((p, i) => (
              <div key={i} style={{ aspectRatio: '4/3', borderRadius: 6, background: `repeating-linear-gradient(135deg, ${p.col} 0 20px, ${p.col}dd 20px 40px)`, position: 'relative', overflow: 'hidden', border: `1px solid ${C.line}` }}>
                <span style={{ position: 'absolute', top: 6, left: 8, fontSize: 10, fontFamily: C.mono, color: '#fff', padding: '1px 5px', background: 'rgba(0,0,0,0.5)', borderRadius: 3 }}>{p.t}</span>
                {p.flags.map((f, fi) => (
                  <span key={fi} style={{ position: 'absolute', top: 6, right: 8, padding: '2px 6px', fontSize: 10, fontWeight: 500, borderRadius: 3,
                    background: f === 'safety' ? C.red : f === 'defect' ? C.amber : C.mint,
                    color: '#fff',
                  }}>{f}</span>
                ))}
              </div>
            ))}
          </div>
        </div>
      </div>
    </div>
  );
}

Object.assign(window, { DashboardSplitPage, ScheduleCalendarPage, MaterialsCardsPage, PaymentsApprovalPage, PhotosGalleryPage });