// Remaining module pages — compact but polished.
// Project detail (V3 warm), Schedule (V2), Labor (V2), Accounting (V2),
// Documents (V2), Client portal (V4 soft), Reports (V2).

// ── Project detail (V3 warm) ──────────────────────────────────
const w = {
  bg: '#f3efe7', panel: '#fbf9f4', panelSoft: '#f7f3ea',
  ink: '#1a1713', ink2: '#5a5248', ink3: '#928979', ink4: '#c5bcaa',
  line: '#e8e0cf', line2: '#efe8d7',
  clay: '#b85c3a', claySoft: '#f5e4da',
  moss: '#5a7a3e', mossSoft: '#e8efdc',
  sky: '#3f6b8f', skySoft: '#e0ebf2',
  amber: '#b87c27', amberSoft: '#f5ead0',
  sans: '"Inter Tight", -apple-system, sans-serif',
  serif: '"Instrument Serif", Georgia, serif',
  mono: '"JetBrains Mono", ui-monospace, monospace',
};

function ProjectDetailPage() {
  return (
    <div style={{
      width: '100%', height: '100%', background: w.bg,
      fontFamily: w.sans, color: w.ink, fontSize: 13,
      padding: 10, gap: 10, display: 'grid', gridTemplateColumns: '240px 1fr',
      letterSpacing: '-0.005em',
    }}>
      {/* Left rail — similar to V3 */}
      <div style={{ padding: '8px 6px', display: 'flex', flexDirection: 'column', gap: 14 }}>
        <div style={{ display: 'flex', alignItems: 'center', gap: 10, padding: '6px 8px' }}>
          <div style={{ width: 28, height: 28, borderRadius: 8, background: w.clay, color: w.panel, display: 'grid', placeItems: 'center', fontFamily: w.serif, fontSize: 18, fontStyle: 'italic' }}>C</div>
          <div style={{ flex: 1 }}>
            <div style={{ fontWeight: 600, fontSize: 13 }}>Ridgeline</div>
            <div style={{ fontSize: 11, color: w.ink3 }}>Workspace</div>
          </div>
        </div>
        <div style={{ fontSize: 10, letterSpacing: '0.08em', color: w.ink3, textTransform: 'uppercase', padding: '0 8px', fontWeight: 500 }}>Projects</div>
        {[
          { n: 'Harborview, Blk B', dot: w.clay, sub: 'Framing · Day 84', on: true },
          { n: 'Willow Heights',    dot: w.sky,  sub: 'Finishes · 92%' },
          { n: 'Cedar Creek Lofts', dot: w.moss, sub: 'Foundations' },
          { n: 'Fulton Warehouse',  dot: w.amber,sub: 'Kickoff' },
        ].map((p) => (
          <div key={p.n} style={{
            display: 'flex', alignItems: 'center', gap: 10,
            padding: '8px 10px', borderRadius: 8,
            background: p.on ? w.panel : 'transparent',
            boxShadow: p.on ? '0 0 0 1px rgba(160,140,100,0.10)' : 'none',
          }}>
            <span style={{ width: 8, height: 8, borderRadius: '50%', background: p.dot }} />
            <div style={{ flex: 1 }}>
              <div style={{ fontSize: 12, fontWeight: p.on ? 500 : 400 }}>{p.n}</div>
              <div style={{ fontSize: 10, color: w.ink3 }}>{p.sub}</div>
            </div>
          </div>
        ))}
      </div>

      {/* Main */}
      <div style={{
        background: w.panel, borderRadius: 16,
        boxShadow: '0 0 0 1px rgba(160,140,100,0.10)',
        padding: '22px 26px', overflow: 'hidden',
        display: 'flex', flexDirection: 'column', gap: 18,
      }}>
        <div>
          <div style={{ fontSize: 11, color: w.ink3, letterSpacing: '0.04em', textTransform: 'uppercase', marginBottom: 4, fontWeight: 500 }}>
            PRJ-0418 · Q2 2026 · Portland ME
          </div>
          <div style={{ fontFamily: w.serif, fontSize: 32, lineHeight: 1.05, letterSpacing: '-0.02em' }}>
            Harborview Mixed-Use, Block B
          </div>
          <div style={{ fontSize: 12, color: w.ink2, marginTop: 6 }}>
            Owner: Calloway Co · Arch: Studio North · 41 crew on site · $12.4M contract
          </div>
        </div>

        {/* Hero strip — 4 big stats */}
        <div style={{ display: 'grid', gridTemplateColumns: 'repeat(4,1fr)', gap: 0, border: `1px solid ${w.line}`, borderRadius: 12, overflow: 'hidden' }}>
          {[
            ['Progress','27%','Framing phase'],
            ['Schedule','+3d','behind plan','amber'],
            ['Spent','$5.27M','of $12.4M'],
            ['Safety','0','incidents 30d','moss'],
          ].map(([k,v,sub,tone],i) => (
            <div key={k} style={{
              padding: '18px 20px', background: w.panelSoft,
              borderLeft: i ? `1px solid ${w.line}` : 'none',
            }}>
              <div style={{ fontSize: 11, color: w.ink3, marginBottom: 6 }}>{k}</div>
              <div style={{ fontFamily: w.serif, fontSize: 30, letterSpacing: '-0.015em', color: tone === 'amber' ? w.amber : tone === 'moss' ? w.moss : w.ink }}>{v}</div>
              <div style={{ fontSize: 11, color: w.ink3, marginTop: 4 }}>{sub}</div>
            </div>
          ))}
        </div>

        {/* Two columns */}
        <div style={{ display: 'grid', gridTemplateColumns: '1.3fr 1fr', gap: 12, flex: 1, minHeight: 0 }}>
          {/* Timeline (mini gantt) */}
          <div style={{ background: w.panelSoft, border: `1px solid ${w.line}`, borderRadius: 12, padding: '14px 16px', display: 'flex', flexDirection: 'column', gap: 10 }}>
            <div style={{ display: 'flex', alignItems: 'baseline', gap: 8 }}>
              <div style={{ fontWeight: 600, fontSize: 13 }}>Phases</div>
              <div style={{ fontSize: 11, color: w.ink3 }}>Jan → Dec 2026</div>
            </div>
            {[
              ['Site prep',   0, 8,   100],
              ['Excavation',  8, 6,   100],
              ['Foundation',  14, 10, 100],
              ['Framing',     24, 18, 62],
              ['MEP rough',   38, 14, 0],
              ['Envelope',    48, 16, 0],
              ['Interior',    60, 22, 0],
              ['Finishes',    78, 20, 0],
            ].map(([n, s, l, d]) => (
              <div key={n} style={{ display: 'grid', gridTemplateColumns: '120px 1fr 44px', gap: 10, alignItems: 'center', fontSize: 12 }}>
                <span>{n}</span>
                <div style={{ position: 'relative', height: 10, background: w.line2, borderRadius: 2, overflow: 'hidden' }}>
                  <div style={{ position: 'absolute', top: 0, bottom: 0, left: `${s}%`, width: `${l}%`, background: d === 100 ? w.ink : d > 0 ? w.clay : w.line }} />
                  {d > 0 && d < 100 && (
                    <div style={{ position: 'absolute', top: 0, bottom: 0, left: `${s}%`, width: `${l * (d/100)}%`, background: w.clay, opacity: 0.4 }} />
                  )}
                </div>
                <span style={{ fontFamily: w.mono, fontSize: 10, color: w.ink3, textAlign: 'right' }}>{d}%</span>
              </div>
            ))}
          </div>

          {/* Activity column */}
          <div style={{ background: w.panelSoft, border: `1px solid ${w.line}`, borderRadius: 12, padding: '14px 16px' }}>
            <div style={{ fontWeight: 600, fontSize: 13, marginBottom: 10 }}>Today on site</div>
            {[
              ['09:42', 'RFI-228 answered — column D4',        'Arch'],
              ['09:18', 'Invoice $184K — Brannigan',            'AP'],
              ['08:55', 'AI flagged PO-0338 missing receipt',   'Copilot'],
              ['08:30', 'CO-017 opened — Low-E glazing',        'Owner'],
              ['07:50', '41 of 44 crew clocked in',              'Field'],
              ['07:12', 'Drawings rev D uploaded',               'Arch'],
            ].map(([t, x, k], i) => (
              <div key={i} style={{ display: 'flex', gap: 10, fontSize: 12, padding: '8px 0', borderTop: i ? `1px solid ${w.line2}` : 'none' }}>
                <span style={{ fontFamily: w.mono, fontSize: 10, color: w.ink3, width: 42 }}>{t}</span>
                <span style={{ flex: 1 }}>{x}</span>
                <span style={{ fontSize: 10, color: w.ink3 }}>{k}</span>
              </div>
            ))}
          </div>
        </div>

        {/* Bottom strip */}
        <div style={{ display: 'grid', gridTemplateColumns: 'repeat(3,1fr)', gap: 12 }}>
          {[
            ['Drawings', '212 sheets · rev D', 'Updated Apr 20'],
            ['RFIs', '18 open · 4 need review', 'Oldest 7d'],
            ['Contracts', '14 subs · 3 pending sig.', 'Next: Brannigan'],
          ].map(([t, s, m]) => (
            <div key={t} style={{ background: w.panelSoft, border: `1px solid ${w.line}`, borderRadius: 12, padding: '14px 16px' }}>
              <div style={{ fontSize: 11, color: w.ink3, marginBottom: 6 }}>{t}</div>
              <div style={{ fontFamily: w.serif, fontSize: 18, marginBottom: 4 }}>{s}</div>
              <div style={{ fontSize: 11, color: w.ink3 }}>{m}</div>
            </div>
          ))}
        </div>
      </div>
    </div>
  );
}

// ── Schedule / Gantt (V2) ─────────────────────────────────────
function SchedulePage() {
  const projects = [
    { n: 'Harborview Blk B', c: 'Calloway Co', s: 5, l: 78, d: 28, warn: '+3d' },
    { n: 'Willow Heights',   c: 'Arden LLC',   s: 0, l: 58, d: 92 },
    { n: 'Cedar Creek Lofts',c: 'Meridian',    s: 12,l: 54, d: 14 },
    { n: 'Fulton Warehouse', c: 'Brightline',  s: 24,l: 40, d: 6 },
    { n: 'Pier 7 Restoration',c:'Port Auth.',  s: 38,l: 52, d: 0, planning: true },
    { n: 'Elmwood Retail',   c: 'Vantage RE',  s: 48,l: 34, d: 0, planning: true },
  ];
  const months = ['APR','MAY','JUN','JUL','AUG','SEP','OCT','NOV'];
  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="Master schedule" sub="All 6 projects · Q2–Q4 2026" right={<div style={{ display: 'flex', gap: 8 }}><CButton icon="⎘">Baseline</CButton><CButton>Week</CButton><CButton primary>Month</CButton></div>} />
        <div style={{ padding: '16px 24px', background: C.panel, flex: 1, display: 'flex', flexDirection: 'column', gap: 10, overflow: 'hidden' }}>
          {/* Month header */}
          <div style={{ display: 'grid', gridTemplateColumns: '240px 1fr', fontSize: 10, color: C.ink3, letterSpacing: '0.06em', textTransform: 'uppercase' }}>
            <span></span>
            <div style={{ display: 'grid', gridTemplateColumns: `repeat(${months.length}, 1fr)`, borderLeft: `1px solid ${C.line}` }}>
              {months.map((m) => <span key={m} style={{ padding: '4px 8px', borderRight: `1px solid ${C.line2}`, fontWeight: 500 }}>{m}</span>)}
            </div>
          </div>
          {projects.map((p) => (
            <div key={p.n} style={{ display: 'grid', gridTemplateColumns: '240px 1fr', gap: 0, fontSize: 12, alignItems: 'center' }}>
              <div style={{ paddingRight: 12 }}>
                <div style={{ fontWeight: 500 }}>{p.n}</div>
                <div style={{ fontSize: 11, color: C.ink3 }}>{p.c}</div>
              </div>
              <div style={{ position: 'relative', height: 26, borderLeft: `1px solid ${C.line}`, background: `linear-gradient(to right, ${C.line2} 1px, transparent 1px) 0 0 / ${100/months.length}% 100%` }}>
                <div style={{
                  position: 'absolute', top: 4, bottom: 4, left: `${p.s}%`, width: `${p.l}%`,
                  background: p.planning ? 'transparent' : p.warn ? C.amberSoft : C.blueSoft,
                  border: p.planning ? `1.5px dashed ${C.ink4}` : `1px solid ${p.warn ? C.amber : C.blue}`,
                  borderRadius: 4, overflow: 'hidden', display: 'flex', alignItems: 'center',
                }}>
                  {!p.planning && (
                    <div style={{ height: '100%', width: `${p.d}%`, background: p.warn ? C.amber : C.blue }} />
                  )}
                  <span style={{ position: 'absolute', left: 8, top: 0, bottom: 0, display: 'flex', alignItems: 'center', fontSize: 10, color: p.planning ? C.ink3 : p.warn ? C.amber : C.blueDeep, fontFamily: C.mono }}>
                    {p.planning ? 'planning' : `${p.d}%`}
                    {p.warn && <span style={{ marginLeft: 6 }}>{p.warn}</span>}
                  </span>
                </div>
              </div>
            </div>
          ))}

          {/* AI note */}
          <div style={{ marginTop: 'auto', padding: 12, background: C.blueSoft, borderRadius: 8, fontSize: 12, display: 'flex', gap: 10, alignItems: 'center' }}>
            <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 }}>Harborview is trending 3d behind. Drafted a recovery plan that holds the Pier 7 kickoff. <b>Review →</b></span>
          </div>
        </div>
      </div>
    </div>
  );
}

// ── Labor / Crew (V2) ─────────────────────────────────────────
function LaborPage() {
  const crew = [
    { n: 'Diego Morales',   r: 'Foreman · framing', hrs: '42.0', ot: '2.0', rate: '$58', cost: '$2,436', stat: 'on-site' },
    { n: 'Taryn Wells',     r: 'Carpenter',         hrs: '40.0', ot: '0.0', rate: '$42', cost: '$1,680', stat: 'on-site' },
    { n: 'Andre Beaumont',  r: 'Carpenter',         hrs: '36.0', ot: '0.0', rate: '$42', cost: '$1,512', stat: 'sick' },
    { n: 'Priya Suresh',    r: 'Electrician · L2',  hrs: '40.0', ot: '4.0', rate: '$62', cost: '$2,728', stat: 'on-site' },
    { n: 'Jamal Overton',   r: 'Electrician',       hrs: '38.5', ot: '0.0', rate: '$54', cost: '$2,079', stat: 'on-site' },
    { n: 'Luca Rinaldi',    r: 'Plumber · lead',    hrs: '40.0', ot: '1.5', rate: '$60', cost: '$2,490', stat: 'on-site' },
    { n: 'Sven Arneson',    r: 'Concrete · op',     hrs: '40.0', ot: '0.0', rate: '$48', cost: '$1,920', stat: 'on-site' },
    { n: 'Kiera Obi',       r: 'Laborer',           hrs: '40.0', ot: '0.0', rate: '$34', cost: '$1,360', stat: 'on-site' },
    { n: 'Rashid Amari',    r: 'Laborer',           hrs: '32.0', ot: '0.0', rate: '$34', cost: '$1,088', stat: 'late' },
  ];
  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="Crew" />
      <div style={{ display: 'flex', flexDirection: 'column', overflow: 'hidden' }}>
        <CHead crumb="Field / Crew" title="Crew & timesheets" sub="Week of Apr 14 · Harborview Blk B · 41 active" right={<div style={{ display: 'flex', gap: 8 }}><CButton icon="↥">Import xlsx</CButton><CButton primary icon="+">Add crew</CButton></div>} />
        <div style={{ display: 'grid', gridTemplateColumns: 'repeat(4,1fr)', gap: 1, background: C.line, borderBottom: `1px solid ${C.line}` }}>
          {[
            ['Weekly labor','$94,280','+$2,140 vs plan','amber'],
            ['Avg hrs','40.2','per person'],
            ['Overtime','+7.5 hrs','framing & elec','amber'],
            ['Productivity','92%','vs baseline'],
          ].map(([k,v,s,tone],i) => (
            <div key={i} style={{ background: C.panel, padding: '14px 18px' }}>
              <div style={{ fontSize: 11, color: C.ink2, marginBottom: 6 }}>{k}</div>
              <div style={{ fontSize: 22, fontWeight: 600, letterSpacing: '-0.02em' }}>{v}</div>
              <div style={{ fontSize: 11, color: tone === 'amber' ? C.amber : C.ink3, marginTop: 5 }}>{s}</div>
            </div>
          ))}
        </div>
        <div style={{ flex: 1, background: C.panel, overflow: 'hidden', display: 'flex', flexDirection: 'column' }}>
          <div style={{ display: 'grid', gridTemplateColumns: '1.4fr 1fr 60px 60px 60px 80px 100px', padding: '10px 24px', fontSize: 10, color: C.ink3, letterSpacing: '0.06em', textTransform: 'uppercase', fontWeight: 500, borderBottom: `1px solid ${C.line}`, background: C.bg }}>
            <span>Crew member</span><span>Role</span>
            <span style={{ textAlign: 'right' }}>Hrs</span><span style={{ textAlign: 'right' }}>OT</span>
            <span style={{ textAlign: 'right' }}>Rate</span><span style={{ textAlign: 'right' }}>Week cost</span>
            <span>Status</span>
          </div>
          {crew.map((m, i) => (
            <div key={m.n} style={{ display: 'grid', gridTemplateColumns: '1.4fr 1fr 60px 60px 60px 80px 100px', padding: '12px 24px', fontSize: 12, borderBottom: `1px solid ${C.line2}`, alignItems: 'center' }}>
              <div style={{ display: 'flex', gap: 10, alignItems: 'center' }}>
                <div style={{ width: 24, height: 24, borderRadius: '50%', background: ['#cbb79a','#8da8c4','#b89dbf','#a4b99a','#c7a98e','#9bb0c4','#c4b59b','#a8bca4','#b5a99a'][i % 9], color: C.ink, display: 'grid', placeItems: 'center', fontSize: 10, fontWeight: 600 }}>
                  {m.n.split(' ').map(s=>s[0]).join('')}
                </div>
                <span>{m.n}</span>
              </div>
              <span style={{ color: C.ink2 }}>{m.r}</span>
              <span style={{ textAlign: 'right', fontFamily: C.mono }}>{m.hrs}</span>
              <span style={{ textAlign: 'right', fontFamily: C.mono, color: Number(m.ot) > 0 ? C.amber : C.ink3 }}>{m.ot}</span>
              <span style={{ textAlign: 'right', fontFamily: C.mono }}>{m.rate}</span>
              <span style={{ textAlign: 'right', fontFamily: C.mono, fontWeight: 500 }}>{m.cost}</span>
              <span><CPill tone={m.stat === 'on-site' ? 'mint' : m.stat === 'sick' ? 'red' : 'amber'}>{m.stat}</CPill></span>
            </div>
          ))}
        </div>
      </div>
    </div>
  );
}

// ── Accounting / Invoices (V2) ────────────────────────────────
function AccountingPage() {
  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 / Accounting" title="Accounting" sub="AR · AP · draws across 12 active projects" right={<div style={{ display: 'flex', gap: 8 }}><CButton icon="⎋">QuickBooks sync</CButton><CButton primary icon="+">Record invoice</CButton></div>} />
        <div style={{ display: 'grid', gridTemplateColumns: 'repeat(4,1fr)', gap: 1, background: C.line, borderBottom: `1px solid ${C.line}` }}>
          {[
            ['AR outstanding','$1.26M','18 invoices','amber'],
            ['AR overdue','$214K','4 over 60d','red'],
            ['AP due 7d','$412K','12 to approve'],
            ['Draws YTD','$4.80M','on 5 projects'],
          ].map(([k,v,s,t],i) => (
            <div key={i} style={{ background: C.panel, padding: '14px 18px' }}>
              <div style={{ fontSize: 11, color: C.ink2, marginBottom: 6 }}>{k}</div>
              <div style={{ fontSize: 22, fontWeight: 600, letterSpacing: '-0.02em' }}>{v}</div>
              <div style={{ fontSize: 11, color: t === 'amber' ? C.amber : t === 'red' ? C.red : C.ink3, marginTop: 5 }}>{s}</div>
            </div>
          ))}
        </div>
        <div style={{ flex: 1, background: C.panel, overflow: 'hidden', display: 'flex', flexDirection: 'column' }}>
          <div style={{ padding: '10px 24px', fontSize: 11, color: C.ink3, letterSpacing: '0.06em', textTransform: 'uppercase', fontWeight: 500, borderBottom: `1px solid ${C.line}`, display: 'flex', gap: 20, background: C.bg }}>
            <span style={{ color: C.ink, borderBottom: `2px solid ${C.blue}`, paddingBottom: 4 }}>Payable · 18</span>
            <span>Receivable · 12</span>
            <span>Change orders · 5</span>
            <span>Draws · 3</span>
          </div>
          {[
            ['INV-1142','Brannigan Concrete','Harborview Blk B','$184,220','due 4d',     'needs approval','amber'],
            ['INV-1141','Atlas Electric','Willow Heights','$42,800','due 12d',            'approved','mint'],
            ['INV-1140','Northern Roofing','Cedar Creek','$96,410','due 18d',             'approved','mint'],
            ['INV-1139','Marley Freight','Harborview Blk B','$8,215','overdue 3d',        'overdue','red'],
            ['INV-1138','Pine Ridge Lumber','Cedar Creek','$28,310','due 9d',             'approved','mint'],
            ['INV-1137','Studio North · arch','Harborview Blk B','$62,000','due today',   'review','amber'],
            ['INV-1136','Uponor PEX','Willow Heights','$14,040','paid',                  'paid','default'],
            ['INV-1135','Rockwool NE','Harborview Blk B','$18,150','due 21d',             'approved','mint'],
          ].map((r, i) => (
            <div key={i} style={{ display: 'grid', gridTemplateColumns: '100px 1.2fr 1.2fr 100px 120px 1fr 40px', padding: '12px 24px', fontSize: 12, borderBottom: `1px solid ${C.line2}`, alignItems: 'center' }}>
              <span style={{ fontFamily: C.mono, color: C.ink2 }}>{r[0]}</span>
              <span>{r[1]}</span>
              <span style={{ color: C.ink2 }}>{r[2]}</span>
              <span style={{ textAlign: 'right', fontFamily: C.mono, fontWeight: 500 }}>{r[3]}</span>
              <span style={{ fontSize: 11, color: r[6] === 'red' ? C.red : C.ink2 }}>{r[4]}</span>
              <span><CPill tone={r[6]}>{r[5]}</CPill></span>
              <span style={{ textAlign: 'right', color: C.ink3 }}>⋯</span>
            </div>
          ))}
        </div>
      </div>
    </div>
  );
}

// ── Documents & RFIs (V2) ─────────────────────────────────────
function DocumentsPage() {
  return (
    <div style={{ width: '100%', height: '100%', background: C.bg, color: C.ink, fontFamily: C.sans, fontSize: 13, display: 'grid', gridTemplateColumns: '220px 280px 1fr' }}>
      <CSidebar active="Documents" />
      {/* middle — folder tree */}
      <div style={{ background: C.panel, borderRight: `1px solid ${C.line}`, padding: '14px 14px', overflow: 'auto' }}>
        <div style={{ fontSize: 11, color: C.ink3, textTransform: 'uppercase', letterSpacing: '0.06em', fontWeight: 500, marginBottom: 10 }}>Harborview Blk B</div>
        {[
          ['Drawings', ['A-Arch (212)','S-Struct (96)','M-Mech (54)','E-Elec (41)','P-Plumb (28)']],
          ['Contracts',  ['Owner contract','Subcontracts (14)','Insurance']],
          ['RFIs',       ['Open (18)','Answered (142)']],
          ['Submittals', ['Steel','Concrete mix','Glazing (CO-017)']],
          ['Daily logs', ['This week','Apr · 21 days']],
          ['Photos',     ['Apr (312)','Mar (284)']],
        ].map(([h, items]) => (
          <div key={h} style={{ marginBottom: 10 }}>
            <div style={{ fontSize: 12, fontWeight: 500, padding: '4px 0', color: C.ink }}>▾ {h}</div>
            {items.map((it) => (
              <div key={it} style={{ fontSize: 12, padding: '4px 14px', color: C.ink2 }}>{it}</div>
            ))}
          </div>
        ))}
      </div>
      <div style={{ display: 'flex', flexDirection: 'column' }}>
        <CHead crumb="Records / Documents" title="A-201 · Level 2 plan, rev D" sub="212 sheets · rev D · uploaded Apr 20 by J. Ibarra" right={<div style={{ display: 'flex', gap: 8 }}><CButton>Compare rev C</CButton><CButton icon="⎘">Markup</CButton><CButton primary icon="✎">Ask Contro</CButton></div>} />
        <div style={{ flex: 1, padding: 24, background: C.bg, display: 'grid', gridTemplateColumns: '1fr 320px', gap: 16, overflow: 'hidden' }}>
          {/* drawing viewer */}
          <div style={{ background: C.panel, border: `1px solid ${C.line}`, borderRadius: 8, overflow: 'hidden', position: 'relative' }}>
            {/* blueprint-ish viewport */}
            <svg width="100%" height="100%" viewBox="0 0 700 400" style={{ display: 'block' }}>
              <rect width="700" height="400" fill="#f9faff" />
              {/* grid */}
              {Array.from({ length: 14 }).map((_, i) => (<line key={'v'+i} x1={i*50} y1="0" x2={i*50} y2="400" stroke="#e4e8f2" strokeWidth="1" />))}
              {Array.from({ length: 8 }).map((_, i) => (<line key={'h'+i} x1="0" y1={i*50} x2="700" y2={i*50} stroke="#e4e8f2" strokeWidth="1" />))}
              {/* walls */}
              <rect x="80" y="80" width="540" height="240" fill="none" stroke={C.blueDeep} strokeWidth="3" />
              <line x1="80" y1="200" x2="620" y2="200" stroke={C.blueDeep} strokeWidth="2" />
              <line x1="320" y1="80" x2="320" y2="320" stroke={C.blueDeep} strokeWidth="2" />
              <line x1="470" y1="80" x2="470" y2="200" stroke={C.blueDeep} strokeWidth="2" />
              {/* doors */}
              <path d="M180 200 A20 20 0 0 1 200 220" fill="none" stroke={C.blueDeep} strokeWidth="1.5" />
              <path d="M380 200 A20 20 0 0 1 400 220" fill="none" stroke={C.blueDeep} strokeWidth="1.5" />
              {/* dims */}
              <text x="350" y="70" fontSize="10" fill={C.ink3} textAnchor="middle" fontFamily="monospace">54' - 0"</text>
              <text x="70" y="205" fontSize="10" fill={C.ink3} textAnchor="end" fontFamily="monospace">24'</text>
              {/* annotation — AI flagged change */}
              <circle cx="470" cy="140" r="14" fill="none" stroke={C.amber} strokeWidth="2" strokeDasharray="3 2" />
              <line x1="484" y1="126" x2="550" y2="90" stroke={C.amber} strokeWidth="1" />
              <rect x="550" y="70" width="110" height="40" rx="4" fill="#fff" stroke={C.amber} />
              <text x="560" y="86" fontSize="10" fill={C.amber} fontFamily="monospace">CO-017</text>
              <text x="560" y="100" fontSize="10" fill={C.ink2}>Low-E glazing</text>
            </svg>
            <div style={{ position: 'absolute', bottom: 12, left: 12, display: 'flex', gap: 6, fontSize: 11, color: C.ink2 }}>
              <span style={{ padding: '4px 8px', background: C.panel, border: `1px solid ${C.line}`, borderRadius: 4, fontFamily: C.mono }}>100%</span>
              <span style={{ padding: '4px 8px', background: C.panel, border: `1px solid ${C.line}`, borderRadius: 4 }}>✎ 3 markups</span>
              <span style={{ padding: '4px 8px', background: C.panel, border: `1px solid ${C.line}`, borderRadius: 4 }}>⎚ rev C</span>
            </div>
          </div>
          {/* RFI/activity side */}
          <div style={{ background: C.panel, border: `1px solid ${C.line}`, borderRadius: 8, padding: '14px 16px', overflow: 'auto' }}>
            <div style={{ fontSize: 11, color: C.ink3, letterSpacing: '0.06em', textTransform: 'uppercase', fontWeight: 500, marginBottom: 10 }}>Related RFIs · 4</div>
            {[
              ['RFI-228','Column connection at D4','answered','mint'],
              ['RFI-227','Window header at grid F','open · 2d','amber'],
              ['RFI-225','Slab thickness @ mech room','answered','mint'],
              ['RFI-221','Stair stringer attachment','answered','mint'],
            ].map((r, i) => (
              <div key={i} style={{ padding: '10px 0', borderTop: i ? `1px solid ${C.line2}` : 'none' }}>
                <div style={{ display: 'flex', alignItems: 'center', gap: 8, fontSize: 12, marginBottom: 3 }}>
                  <span style={{ fontFamily: C.mono, fontSize: 11, color: C.ink2 }}>{r[0]}</span>
                  <CPill tone={r[3]}>{r[2]}</CPill>
                </div>
                <div style={{ fontSize: 12 }}>{r[1]}</div>
              </div>
            ))}
            <div style={{ marginTop: 14, padding: 10, background: C.blueSoft, borderRadius: 6, fontSize: 12, lineHeight: 1.5 }}>
              <b>Copilot:</b> Rev D changed 14 sheets vs rev C. Key changes touch RFI-227 — may resolve it.
            </div>
          </div>
        </div>
      </div>
    </div>
  );
}

// ── Client portal (V4 soft / studio) ──────────────────────────
function ClientPortalPage() {
  return (
    <div style={{ width: '100%', height: '100%', background: '#efeae3', fontFamily: C.sans, color: '#0f0f0f', fontSize: 13, padding: 18, letterSpacing: '-0.005em' }}>
      <div style={{ width: '100%', height: '100%', background: '#fff', borderRadius: 24, overflow: 'hidden', position: 'relative', boxShadow: '0 1px 2px rgba(0,0,0,0.04), 0 0 0 1px rgba(0,0,0,0.04)' }}>
        {/* mesh */}
        <div style={{ position: 'absolute', inset: 0, pointerEvents: 'none', background: `radial-gradient(720px 420px at 78% 8%, rgba(195,210,255,0.5), transparent 60%), radial-gradient(520px 360px at 12% 86%, rgba(230,200,240,0.38), transparent 66%)` }} />

        {/* top */}
        <div style={{ position: 'relative', zIndex: 2, display: 'flex', alignItems: 'center', padding: '22px 36px' }}>
          <div style={{ fontFamily: C.serif, fontSize: 22 }}>Contro <span style={{ color: '#8a8882', fontStyle: 'italic', fontSize: 16 }}>for Calloway Co</span></div>
          <div style={{ marginLeft: 'auto', display: 'flex', alignItems: 'center', gap: 26, fontSize: 13, color: '#4a4a46' }}>
            <span>Overview</span><span>Schedule</span><span>Documents</span><span>Invoices</span><span>Messages</span>
          </div>
          <div style={{ marginLeft: 26, padding: '6px 14px', background: '#0f0f0f', color: '#fff', borderRadius: 999, fontSize: 12 }}>R. Calloway</div>
        </div>

        <div style={{ position: 'relative', zIndex: 2, padding: '8px 36px 0', display: 'grid', gridTemplateColumns: '1.3fr 1fr', gap: 24 }}>
          <div>
            <div style={{ fontSize: 11, color: '#8a8882', letterSpacing: '0.04em', textTransform: 'uppercase', marginBottom: 6, fontWeight: 500 }}>PRJ-0418 · Week 12</div>
            <div style={{ fontFamily: C.serif, fontSize: 42, lineHeight: 1.05, letterSpacing: '-0.02em' }}>
              Harborview is <span style={{ color: '#8a8882' }}>27%</span> complete.<br/>Framing wraps mid-May.
            </div>
            <div style={{ marginTop: 16, fontSize: 14, color: '#4a4a46', lineHeight: 1.6, maxWidth: 480 }}>
              A quick summary from your GC, prepared by Contro. Crew is back at full strength after Monday's weather. Your Low-E glazing change is priced and ready for signature.
            </div>
            <div style={{ display: 'flex', gap: 10, marginTop: 20 }}>
              <div style={{ padding: '8px 14px', background: '#0f0f0f', color: '#fff', borderRadius: 999, fontSize: 12, fontWeight: 500 }}>Sign CO-017 · $42,180</div>
              <div style={{ padding: '8px 14px', background: '#fff', color: '#0f0f0f', border: '1px solid #ebe7de', borderRadius: 999, fontSize: 12 }}>Walk-through · May 2</div>
            </div>

            {/* Phase pills */}
            <div style={{ marginTop: 30, display: 'flex', gap: 8, flexWrap: 'wrap' }}>
              {[
                ['Site prep','done'], ['Excavation','done'], ['Foundation','done'],
                ['Framing','active'], ['MEP','next'], ['Envelope','next'], ['Interior','next'], ['Finishes','next'],
              ].map(([n, s]) => (
                <div key={n} style={{
                  padding: '6px 12px', borderRadius: 999, fontSize: 11,
                  background: s === 'active' ? '#0f0f0f' : s === 'done' ? 'rgba(255,255,255,0.7)' : 'transparent',
                  color: s === 'active' ? '#fff' : '#4a4a46',
                  border: s === 'next' ? '1px dashed #c9c6bf' : '1px solid #ebe7de',
                }}>
                  {s === 'done' && '✓ '}{n}
                </div>
              ))}
            </div>
          </div>

          {/* Cards */}
          <div style={{ display: 'flex', flexDirection: 'column', gap: 12 }}>
            <div style={{ background: 'rgba(255,255,255,0.7)', backdropFilter: 'blur(10px)', border: '1px solid rgba(255,255,255,0.7)', borderRadius: 16, padding: '16px 18px', boxShadow: '0 10px 30px rgba(40,40,80,0.06)' }}>
              <div style={{ fontSize: 11, color: '#8a8882', marginBottom: 6 }}>Budget to date</div>
              <div style={{ fontFamily: C.serif, fontSize: 30 }}>$5.27M <span style={{ color: '#8a8882', fontSize: 16 }}>/ $12.40M</span></div>
              <div style={{ height: 6, background: '#f0eee9', marginTop: 10, borderRadius: 3, overflow: 'hidden' }}>
                <div style={{ width: '42%', height: '100%', background: '#0f0f0f' }} />
              </div>
              <div style={{ fontSize: 11, color: '#4a4a46', marginTop: 8 }}>On plan · 42.5% drawn at 27% complete</div>
            </div>

            <div style={{ background: 'rgba(255,255,255,0.7)', backdropFilter: 'blur(10px)', border: '1px solid rgba(255,255,255,0.7)', borderRadius: 16, padding: '16px 18px', boxShadow: '0 10px 30px rgba(40,40,80,0.06)' }}>
              <div style={{ fontSize: 11, color: '#8a8882', marginBottom: 8 }}>Decisions needed</div>
              {[
                ['CO-017 · Low-E glazing','$42,180 · ready to sign'],
                ['Finish tile spec','3 options waiting · Apr 30'],
                ['Punch list · level 1','awaiting walk-through'],
              ].map(([t, s], i) => (
                <div key={i} style={{ display: 'flex', alignItems: 'center', padding: '10px 0', borderTop: i ? '1px solid #ebe7de' : 'none' }}>
                  <div style={{ flex: 1 }}>
                    <div style={{ fontSize: 13 }}>{t}</div>
                    <div style={{ fontSize: 11, color: '#8a8882' }}>{s}</div>
                  </div>
                  <div style={{ fontSize: 18, color: '#8a8882' }}>→</div>
                </div>
              ))}
            </div>

            <div style={{ background: 'rgba(15,15,15,0.92)', color: '#fff', borderRadius: 16, padding: '14px 16px', display: 'flex', gap: 12 }}>
              <div style={{ width: 26, height: 26, borderRadius: 7, background: '#b85c3a', display: 'grid', placeItems: 'center', flexShrink: 0, fontFamily: C.serif, fontSize: 16, fontStyle: 'italic' }}>C</div>
              <div style={{ flex: 1, fontSize: 12, lineHeight: 1.5 }}>
                <div style={{ fontSize: 10, color: 'rgba(255,255,255,0.6)', textTransform: 'uppercase', letterSpacing: '0.08em', marginBottom: 4, fontWeight: 500 }}>Contro summary</div>
                All decisions above are answered in the May 2 walk-through agenda. I've prepared it in your inbox.
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  );
}

// ── Reports & analytics (V2) ──────────────────────────────────
function ReportsPage() {
  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="Home" />
      <div style={{ display: 'flex', flexDirection: 'column', overflow: 'hidden' }}>
        <CHead crumb="Reports" title="Portfolio analytics" sub="12 active projects · rolling 12 months" right={<div style={{ display: 'flex', gap: 8 }}><CButton>Export pdf</CButton><CButton primary icon="↗">Share</CButton></div>} />
        <div style={{ flex: 1, overflow: 'hidden', padding: 16, display: 'grid', gridTemplateColumns: '1fr 1fr', gap: 16, gridTemplateRows: '1fr 1fr' }}>
          {/* Revenue trend */}
          <div style={{ background: C.panel, border: `1px solid ${C.line}`, borderRadius: 8, padding: '14px 16px', display: 'flex', flexDirection: 'column' }}>
            <div style={{ display: 'flex', gap: 10, alignItems: 'center' }}>
              <div style={{ fontWeight: 600, fontSize: 13 }}>Revenue vs COGS</div>
              <div style={{ fontSize: 11, color: C.ink3 }}>12mo trailing</div>
              <div style={{ marginLeft: 'auto', fontSize: 11, color: C.mint }}>+14.2% YoY</div>
            </div>
            <svg viewBox="0 0 400 160" style={{ flex: 1, marginTop: 10 }}>
              {[0.3,0.35,0.4,0.5,0.55,0.6,0.7,0.65,0.72,0.8,0.85,0.92].forEach(() => {})}
              <path d="M0 120 L33 110 L66 100 L100 90 L133 80 L166 70 L200 60 L233 65 L266 55 L300 45 L333 40 L366 30" fill="none" stroke={C.blue} strokeWidth="2" />
              <path d="M0 130 L33 125 L66 120 L100 115 L133 108 L166 100 L200 94 L233 92 L266 88 L300 82 L333 78 L366 70" fill="none" stroke={C.ink4} strokeWidth="2" strokeDasharray="3 2" />
              {Array.from({ length: 12 }).map((_, i) => (
                <text key={i} x={i*33} y="155" fontSize="9" fill={C.ink3} fontFamily="monospace">{['J','F','M','A','M','J','J','A','S','O','N','D'][i]}</text>
              ))}
            </svg>
          </div>
          {/* Margin by project */}
          <div style={{ background: C.panel, border: `1px solid ${C.line}`, borderRadius: 8, padding: '14px 16px' }}>
            <div style={{ fontWeight: 600, fontSize: 13, marginBottom: 10 }}>Margin by project</div>
            {[
              ['Willow Heights',22,'on track','mint'],
              ['Harborview Blk B',17,'slim','amber'],
              ['Cedar Creek',20,'on track','mint'],
              ['Fulton Warehouse',15,'watch','amber'],
              ['Pier 7',0,'planning','default'],
              ['Elmwood Retail',0,'planning','default'],
            ].map((r, i) => (
              <div key={i} style={{ display: 'grid', gridTemplateColumns: '1.4fr 1fr 90px', padding: '8px 0', borderTop: i ? `1px solid ${C.line2}` : 'none', fontSize: 12, alignItems: 'center', gap: 10 }}>
                <span>{r[0]}</span>
                <div style={{ height: 6, background: C.line2, borderRadius: 2, position: 'relative' }}>
                  <div style={{ position: 'absolute', inset: 0, width: `${r[1] * 4}%`, background: r[3] === 'mint' ? C.mint : r[3] === 'amber' ? C.amber : C.ink4, borderRadius: 2 }} />
                </div>
                <span style={{ fontFamily: C.mono, fontSize: 11, textAlign: 'right' }}>{r[1] > 0 ? r[1] + '%' : '—'}</span>
              </div>
            ))}
          </div>
          {/* Safety */}
          <div style={{ background: C.panel, border: `1px solid ${C.line}`, borderRadius: 8, padding: '14px 16px' }}>
            <div style={{ fontWeight: 600, fontSize: 13, marginBottom: 10 }}>Safety · incidents / 90d</div>
            <div style={{ display: 'grid', gridTemplateColumns: 'repeat(13, 1fr)', gap: 4, marginTop: 16 }}>
              {Array.from({ length: 91 }).map((_, i) => {
                const v = (i === 12 || i === 34 || i === 55) ? 2 : (i % 17 === 3 ? 1 : 0);
                return <div key={i} style={{ aspectRatio: '1/1', background: v === 2 ? C.amber : v === 1 ? C.amberSoft : C.line2, borderRadius: 2 }} />;
              })}
            </div>
            <div style={{ marginTop: 14, display: 'flex', gap: 14, fontSize: 11, color: C.ink2 }}>
              <span>0 recordable · last 30d</span>
              <span style={{ color: C.amber }}>3 near-miss · last 90d</span>
            </div>
          </div>
          {/* AI insight */}
          <div style={{ background: C.panel, border: `1px solid ${C.line}`, borderRadius: 8, padding: '14px 16px' }}>
            <div style={{ display: 'flex', alignItems: 'center', gap: 8, marginBottom: 8 }}>
              <span style={{ width: 20, height: 20, borderRadius: 5, background: `linear-gradient(135deg, ${C.blue}, ${C.indigo})`, color: '#fff', display: 'grid', placeItems: 'center', fontFamily: C.mono, fontSize: 10, fontWeight: 600 }}>C</span>
              <div style={{ fontWeight: 600, fontSize: 13 }}>Contro · portfolio insight</div>
            </div>
            <div style={{ fontSize: 12, lineHeight: 1.55, color: C.ink }}>
              Three of your projects show margin drift tied to <b>steel price volatility</b>. Locking Q3 contracts at today's vendor terms would protect an estimated <b style={{ color: C.mint }}>$184K</b> in margin.
            </div>
            <div style={{ marginTop: 10, padding: 10, background: C.blueSoft, borderRadius: 6, fontSize: 11, lineHeight: 1.5 }}>
              <b>Suggested action</b> — forward combined steel bid to Atlantic + Northfield, target decision by Apr 26.
            </div>
            <div style={{ display: 'flex', gap: 8, marginTop: 10 }}>
              <CButton primary>Draft the bid</CButton>
              <CButton>Skip</CButton>
            </div>
          </div>
        </div>
      </div>
    </div>
  );
}

Object.assign(window, { ProjectDetailPage, SchedulePage, LaborPage, AccountingPage, DocumentsPage, ClientPortalPage, ReportsPage });