/* Dashboard mockup */
const { useState: dUseState, useEffect: dUseEffect, useMemo: dUseMemo } = React;

const DASH_TABS = [
  { id: 'overview', label: 'Overview' },
  { id: 'listings', label: 'Listings' },
  { id: 'vault',    label: 'Comm Vault' },
  { id: 'tracker',  label: 'Compliance' },
  { id: 'report',   label: 'Monthly Report' },
];

function DashShell({ children, tab, setTab }) {
  return (
    <div style={{ background: 'var(--paper)', borderTop: '1px solid var(--rule)' }}>
      {/* App bar */}
      <div style={{ borderBottom: '1px solid var(--rule)', background: 'var(--paper-2)' }}>
        <div className="container m-app-bar-inner" style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'center', height: 52 }}>
          <div style={{ display: 'flex', alignItems: 'center', gap: 16, flexWrap: 'wrap' }}>
            <span className="mono" style={{ fontSize: 11, letterSpacing: '0.08em', color: 'var(--ink-3)' }}>DEALER</span>
            <span style={{ fontSize: 13, fontWeight: 500 }}>Sunrise Motors</span>
            <span className="mono m-app-bar-meta" style={{ fontSize: 11, color: 'var(--ink-3)' }}>· LC-00428 · FONTANA, CA</span>
          </div>
          <div style={{ display: 'flex', gap: 14, alignItems: 'center' }}>
            <span className="mono m-hide-mobile" style={{ fontSize: 11, color: 'var(--ink-3)' }}>NEXT SCAN · 02:00 PDT</span>
            <button className="btn btn--sm btn--ghost">Switch lot ▾</button>
            <div style={{ width: 26, height: 26, borderRadius: '50%', background: 'var(--ink)', color: 'var(--paper)', display: 'grid', placeItems: 'center', fontSize: 11, fontWeight: 600 }}>JK</div>
          </div>
        </div>
        <div className="container m-tabs-scroll" style={{ display: 'flex', gap: 0, borderTop: '1px solid var(--rule)' }}>
          {DASH_TABS.map(t => (
            <button key={t.id} onClick={() => setTab(t.id)} style={{
              padding: '12px 18px',
              fontSize: 13,
              color: tab === t.id ? 'var(--ink)' : 'var(--ink-2)',
              borderBottom: tab === t.id ? '2px solid var(--ink)' : '2px solid transparent',
              marginBottom: -1,
            }}>
              {t.label}
            </button>
          ))}
        </div>
      </div>
      <div className="container" style={{ padding: '32px 24px 80px' }}>
        {children}
      </div>
    </div>
  );
}

function StatusCard({ title, status, value, sub, foot }) {
  const statusKind = status === 'ok' ? 'ok' : status === 'warn' ? 'warn' : 'alert';
  return (
    <div className="sheet" style={{ padding: 18, display: 'flex', flexDirection: 'column', gap: 10, minHeight: 160 }}>
      <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'center' }}>
        <span className="label">{title}</span>
        <StatusPill kind={statusKind}>{status === 'ok' ? 'Compliant' : status === 'warn' ? 'Review' : 'Violation'}</StatusPill>
      </div>
      <div className="display tnum" style={{ fontSize: 36, lineHeight: 1, letterSpacing: '-0.03em', marginTop: 6 }}>{value}</div>
      <div style={{ fontSize: 13, color: 'var(--ink-2)' }}>{sub}</div>
      <div className="mono" style={{ fontSize: 10, color: 'var(--ink-3)', marginTop: 'auto', letterSpacing: '0.06em' }}>{foot}</div>
    </div>
  );
}

function OverviewTab({ goTab }) {
  return (
    <div style={{ display: 'flex', flexDirection: 'column', gap: 28 }}>
      {/* Top row — 5 status cards */}
      <div className="m-kpi-grid" style={{ display: 'grid', gridTemplateColumns: 'repeat(5, minmax(0,1fr))', gap: 12 }}>
        <StatusCard title="01 · WISP"    status="ok"    value="100%"  sub="Generated · QI signed" foot="UPDATED 2026.05.01" />
        <StatusCard title="02 · LISTINGS" status="warn" value="45/47" sub="2 listings missing CA disclosure" foot="LAST SCAN 02:00 PDT" />
        <StatusCard title="03 · VAULT"    status="ok"   value="12,481" sub="Messages archived · 4-yr retention" foot="LIVE · GMAIL + OPENPHONE" />
        <StatusCard title="04 · TRACKER"  status="warn" value="14/16"  sub="2 vendor attestations due" foot="STRIPE · DEALERTRACK" />
        <StatusCard title="05 · REPORT"   status="ok"   value="APR '26" sub="Ready to email · 11 pages" foot="GENERATED 2026.05.01" />
      </div>

      {/* Two-column main */}
      <div className="m-stack" style={{ display: 'grid', gridTemplateColumns: '1.4fr 1fr', gap: 24 }}>
        {/* Left: action items */}
        <div className="sheet">
          <div style={{ display: 'flex', justifyContent: 'space-between', padding: '14px 18px', borderBottom: '1px solid var(--rule)' }}>
            <span className="label">ACTION ITEMS · 4 OPEN</span>
            <span className="mono" style={{ fontSize: 11, color: 'var(--ink-3)' }}>SORT · PRIORITY</span>
          </div>
          {[
            { p: 'P1', t: '2 Cars.com listings missing first-contact disclosure', who: 'Listings · CA SB 766', kind: 'warn', age: '6h' },
            { p: 'P1', t: 'Stripe vendor attestation due in 4 days', who: 'Tracker · FTC §314.4', kind: 'warn', age: '1d' },
            { p: 'P2', t: 'Employee training overdue — Miguel Cruz', who: 'Tracker · FTC §314.4(e)', kind: 'alert', age: '6d' },
            { p: 'P3', t: 'Doc-fee on website footer differs from Google VLA', who: 'Listings · Google policy', kind: 'warn', age: '2d' },
          ].map((a, i) => (
            <div key={i} className="m-action-row" style={{ display: 'grid', gridTemplateColumns: '40px 1fr auto auto', gap: 14, alignItems: 'center', padding: '14px 18px', borderBottom: '1px solid var(--rule)' }}>
              <span className="mono" style={{ fontSize: 11, color: 'var(--ink-3)' }}>{a.p}</span>
              <div>
                <div style={{ fontSize: 14, color: 'var(--ink)' }}>{a.t}</div>
                <div className="mono" style={{ fontSize: 10, color: 'var(--ink-3)', letterSpacing: '0.06em', marginTop: 2 }}>{a.who.toUpperCase()}</div>
              </div>
              <span className="mono m-hide-mobile" style={{ fontSize: 11, color: 'var(--ink-3)' }}>{a.age} ago</span>
              <span className={'dot ' + (a.kind === 'warn' ? 'dot--warn' : 'dot--alert')}></span>
            </div>
          ))}
          <div style={{ padding: '12px 18px', display: 'flex', justifyContent: 'space-between', alignItems: 'center' }}>
            <button className="btn btn--ghost btn--sm" onClick={() => goTab('listings')}>Open listings →</button>
            <button className="btn btn--ghost btn--sm" onClick={() => goTab('tracker')}>Open tracker →</button>
          </div>
        </div>

        {/* Right: 30-day chart */}
        <div className="sheet" style={{ padding: 18 }}>
          <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'baseline' }}>
            <span className="label">30-DAY POSTURE</span>
            <span className="mono" style={{ fontSize: 11, color: 'var(--ink-3)' }}>04.06 → 05.05</span>
          </div>
          <div className="display tnum" style={{ fontSize: 42, lineHeight: 1, marginTop: 12 }}>96<span style={{ fontSize: 22, color: 'var(--ink-3)' }}>%</span></div>
          <div style={{ fontSize: 12, color: 'var(--ink-2)', marginTop: 4 }}>+2.4 pts vs prior 30 days</div>
          {/* tiny inline chart */}
          <div style={{ height: 110, display: 'flex', alignItems: 'flex-end', gap: 2, marginTop: 18 }}>
            {Array.from({ length: 30 }).map((_, i) => {
              const v = 70 + ((Math.sin(i * 0.7) + 1) * 14) + (i > 22 ? 8 : 0);
              const kind = v > 90 ? 'ok' : v > 78 ? 'warn' : 'alert';
              return (
                <div key={i} style={{
                  flex: 1,
                  height: `${v}%`,
                  background: kind === 'ok' ? 'var(--signal)' : kind === 'warn' ? 'var(--warn)' : 'var(--alert)',
                  opacity: 0.85,
                }}/>
              );
            })}
          </div>
          <div style={{ display: 'flex', justifyContent: 'space-between', marginTop: 8 }} className="mono">
            <span style={{ fontSize: 10, color: 'var(--ink-3)' }}>APR 06</span>
            <span style={{ fontSize: 10, color: 'var(--ink-3)' }}>TODAY</span>
          </div>
        </div>
      </div>

      {/* Activity feed */}
      <div className="sheet">
        <div style={{ padding: '14px 18px', borderBottom: '1px solid var(--rule)' }}>
          <span className="label">ACTIVITY · LIVE</span>
        </div>
        {[
          { t: 'Nightly scan complete · 47 listings · 2 flagged', when: '02:01 PDT', kind: 'ok' },
          { t: 'New SMS thread archived · customer "M. Lopez"',  when: '01:14 PDT', kind: 'ok' },
          { t: 'CarGurus listing #JM1NDAM77M missing doc-fee disclosure', when: '02:01 PDT', kind: 'warn' },
          { t: 'Vendor attestation reminder sent · stripe.com',  when: 'YESTERDAY · 09:00', kind: 'ok' },
          { t: 'WISP §3.2 updated · annual refresh',             when: 'MAY 01 · 06:00',   kind: 'ok' },
        ].map((a, i) => (
          <div key={i} className="m-activity-row" style={{ display: 'grid', gridTemplateColumns: '14px 1fr 140px', gap: 16, alignItems: 'center', padding: '12px 18px', borderBottom: i < 4 ? '1px solid var(--rule)' : 0 }}>
            <span className={'dot ' + (a.kind === 'ok' ? 'dot--ok' : a.kind === 'warn' ? 'dot--warn' : 'dot--alert')} style={{ width: 6, height: 6, boxShadow: 'none' }}/>
            <span style={{ fontSize: 13, color: 'var(--ink)' }}>{a.t}</span>
            <span className="mono m-hide-mobile" style={{ fontSize: 11, color: 'var(--ink-3)', textAlign: 'right' }}>{a.when}</span>
          </div>
        ))}
      </div>
    </div>
  );
}

function ListingsTab() {
  const [filter, setFilter] = dUseState('all');
  const all = [
    { vin: '1HGCM82633A 2018 HONDA ACCORD EX-L',     ch: 'CARS.COM',          price: 18495, status: 'ok',    issue: '—' },
    { vin: 'JM1NDAM77M 2021 MAZDA MX-5 GRAND',       ch: 'CARGURUS',          price: 26900, status: 'warn',  issue: 'Doc-fee disclosure missing' },
    { vin: '5YJ3E1EA9K 2019 TESLA MODEL 3',          ch: 'WEBSITE',           price: 24300, status: 'warn',  issue: 'CA SB 766 disclosure missing' },
    { vin: '1FTFW1ET4E 2014 FORD F-150 LARIAT',      ch: 'FB MARKETPLACE',    price: 15750, status: 'ok',    issue: '—' },
    { vin: 'WBA8E9C58H 2017 BMW 330I',               ch: 'GOOGLE VLA',        price: 19995, status: 'alert', issue: 'Advertised $19,995 / sold $21,400 — mismatch' },
    { vin: '5NPE34AF5G 2016 HYUNDAI SONATA',         ch: 'CARS.COM',          price: 10400, status: 'ok',    issue: '—' },
    { vin: '2T1BURHE4J 2018 TOYOTA COROLLA LE',      ch: 'CARGURUS',          price: 13200, status: 'ok',    issue: '—' },
    { vin: '1G1ZD5ST5J 2018 CHEVROLET MALIBU LT',    ch: 'WEBSITE',           price: 11950, status: 'ok',    issue: '—' },
    { vin: '3VWFB7AJ9DM 2013 VOLKSWAGEN JETTA',      ch: 'GOOGLE VLA',        price:  8990, status: 'ok',    issue: '—' },
    { vin: '5TFRY5F18LX 2020 TOYOTA TUNDRA SR5',     ch: 'CARS.COM',          price: 32900, status: 'ok',    issue: '—' },
    { vin: '1C4RJFAG3FC 2015 JEEP GRAND CHEROKEE',   ch: 'CARGURUS',          price: 14200, status: 'ok',    issue: '—' },
    { vin: '4T1BF1FK1HU 2017 TOYOTA CAMRY SE',       ch: 'WEBSITE',           price: 13750, status: 'ok',    issue: '—' },
  ];
  const filtered = filter === 'all' ? all : all.filter(r => r.status === filter);
  const counts = { all: all.length, ok: all.filter(r => r.status === 'ok').length, warn: all.filter(r => r.status === 'warn').length, alert: all.filter(r => r.status === 'alert').length };

  return (
    <div style={{ display: 'flex', flexDirection: 'column', gap: 20 }}>
      <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'baseline', flexWrap: 'wrap', gap: 12 }}>
        <div>
          <h2 className="display" style={{ fontSize: 36, lineHeight: 1 }}>Listing Scanner</h2>
          <p style={{ marginTop: 6, color: 'var(--ink-2)' }}>Last full pass: <span className="mono">2026.05.05 · 02:00 PDT</span> · Next: <span className="mono">02:00</span></p>
        </div>
        <div style={{ display: 'flex', gap: 8 }}>
          <button className="btn btn--ghost btn--sm">Run scan now</button>
          <button className="btn btn--sm">Export CSV</button>
        </div>
      </div>
      <div className="m-tabs-scroll" style={{ display: 'flex', gap: 8, borderBottom: '1px solid var(--rule)' }}>
        {[
          ['all', `All · ${counts.all}`],
          ['ok', `Compliant · ${counts.ok}`],
          ['warn', `Review · ${counts.warn}`],
          ['alert', `Violation · ${counts.alert}`],
        ].map(([k, l]) => (
          <button key={k} onClick={() => setFilter(k)} style={{
            padding: '10px 14px',
            fontSize: 12,
            color: filter === k ? 'var(--ink)' : 'var(--ink-3)',
            borderBottom: filter === k ? '2px solid var(--ink)' : '2px solid transparent',
            marginBottom: -1,
            fontFamily: 'var(--mono)',
            letterSpacing: '0.04em',
            textTransform: 'uppercase',
          }}>{l}</button>
        ))}
      </div>
      <div className="sheet m-table-scroll">
        <div className="mono" style={{ display: 'grid', gridTemplateColumns: '14px 2fr 1fr 100px 1.4fr 80px', gap: 16, padding: '10px 18px', borderBottom: '1px solid var(--rule)', fontSize: 10, letterSpacing: '0.08em', color: 'var(--ink-3)' }}>
          <span></span><span>VIN · VEHICLE</span><span>CHANNEL</span><span style={{ textAlign: 'right' }}>PRICE</span><span>NOTES</span><span style={{ textAlign: 'right' }}>STATUS</span>
        </div>
        {filtered.map((r, i) => (
          <div key={i} style={{ display: 'grid', gridTemplateColumns: '14px 2fr 1fr 100px 1.4fr 80px', gap: 16, padding: '12px 18px', borderBottom: i < filtered.length - 1 ? '1px solid var(--rule)' : 0, alignItems: 'center' }}>
            <span className={'dot ' + (r.status === 'ok' ? 'dot--ok' : r.status === 'warn' ? 'dot--warn' : 'dot--alert')} style={{ width: 6, height: 6, boxShadow: 'none' }}/>
            <span className="mono" style={{ fontSize: 11, color: 'var(--ink)' }}>{r.vin}</span>
            <span className="mono" style={{ fontSize: 11, color: 'var(--ink-2)' }}>{r.ch}</span>
            <span className="mono tnum" style={{ fontSize: 12, color: 'var(--ink)', textAlign: 'right' }}>${r.price.toLocaleString()}</span>
            <span style={{ fontSize: 12, color: r.status === 'ok' ? 'var(--ink-3)' : 'var(--ink-2)' }}>{r.issue}</span>
            <span className="mono" style={{ fontSize: 10, color: 'var(--ink-3)', textAlign: 'right', letterSpacing: '0.06em' }}>{r.status === 'ok' ? 'COMPLIANT' : r.status === 'warn' ? 'REVIEW' : 'VIOLATION'}</span>
          </div>
        ))}
      </div>
    </div>
  );
}

function VaultTab() {
  const threads = [
    { who: 'Maria Lopez',   ch: 'GMAIL', last: 'Out the door $20,612.40', tags: ['SB 766 §1', '4-YR'], when: 'TODAY · 11:44' },
    { who: 'Devon Pierce',  ch: 'SMS',   last: 'Will pick up Saturday',     tags: ['4-YR'],            when: 'TODAY · 09:02' },
    { who: 'Aisha Rahman',  ch: 'GMAIL', last: 'Doc fee breakdown attached', tags: ['SB 766 §1', '4-YR'], when: 'YEST · 16:28' },
    { who: 'Bob Williams',  ch: 'SMS',   last: 'Trade-in numbers',           tags: ['4-YR'],            when: 'YEST · 14:11' },
    { who: 'Carla Tovar',   ch: 'GMAIL', last: 'Financing pre-approval',     tags: ['FTC §314', '4-YR'], when: 'MAY 03' },
    { who: 'Elias Stone',   ch: 'SMS',   last: 'See you at noon',            tags: ['4-YR'],            when: 'MAY 03' },
    { who: 'Hannah Ford',   ch: 'GMAIL', last: 'Re: 2018 Accord availability', tags: ['SB 766 §1', '4-YR'], when: 'MAY 02' },
  ];
  return (
    <div className="m-vault-grid" style={{ display: 'grid', gridTemplateColumns: '1fr 1.4fr', gap: 24 }}>
      <div>
        <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'baseline' }}>
          <h2 className="display" style={{ fontSize: 32 }}>Vault</h2>
          <span className="mono" style={{ fontSize: 11, color: 'var(--ink-3)' }}>12,481 MESSAGES · 1,402 THREADS</span>
        </div>
        <div style={{ marginTop: 14, position: 'relative' }}>
          <input placeholder="Search messages, customers, VINs…" style={{ width: '100%', background: 'var(--paper-2)', border: '1px solid var(--rule)', padding: '12px 14px', fontSize: 13, outline: 'none' }}/>
          <span className="mono" style={{ position: 'absolute', right: 12, top: '50%', transform: 'translateY(-50%)', fontSize: 10, color: 'var(--ink-3)' }}>⌘ K</span>
        </div>
        <div className="sheet" style={{ marginTop: 14 }}>
          {threads.map((t, i) => (
            <div key={i} style={{ padding: '14px 16px', borderBottom: i < threads.length - 1 ? '1px solid var(--rule)' : 0, background: i === 0 ? 'var(--paper-3)' : 'transparent', cursor: 'pointer' }}>
              <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'baseline' }}>
                <span style={{ fontSize: 13, fontWeight: 500 }}>{t.who}</span>
                <span className="mono" style={{ fontSize: 10, color: 'var(--ink-3)' }}>{t.when}</span>
              </div>
              <div className="mono" style={{ fontSize: 10, color: 'var(--ink-3)', letterSpacing: '0.06em', marginTop: 2 }}>{t.ch}</div>
              <div style={{ fontSize: 12, color: 'var(--ink-2)', marginTop: 6, overflow: 'hidden', textOverflow: 'ellipsis', whiteSpace: 'nowrap' }}>{t.last}</div>
              <div style={{ display: 'flex', gap: 4, marginTop: 8 }}>
                {t.tags.map((tag, j) => (
                  <span key={j} className="mono" style={{ fontSize: 9, padding: '2px 6px', border: '1px solid var(--rule-strong)', color: 'var(--ink-3)', letterSpacing: '0.06em' }}>{tag}</span>
                ))}
              </div>
            </div>
          ))}
        </div>
      </div>
      <div className="sheet" style={{ padding: 0 }}>
        <div style={{ padding: '14px 18px', borderBottom: '1px solid var(--rule)', display: 'flex', justifyContent: 'space-between' }}>
          <div>
            <div style={{ fontSize: 14, fontWeight: 500 }}>Maria Lopez</div>
            <div className="mono" style={{ fontSize: 10, color: 'var(--ink-3)', marginTop: 2 }}>VIN 1HGCM82633A · 2018 HONDA ACCORD EX-L</div>
          </div>
          <div style={{ display: 'flex', gap: 6 }}>
            <button className="btn btn--ghost btn--sm">Export</button>
            <button className="btn btn--ghost btn--sm">Add tag</button>
          </div>
        </div>
        <div style={{ padding: 18, display: 'flex', flexDirection: 'column', gap: 12 }}>
          {[
            { who: 'Maria L.', when: 'APR 18 · 09:14 PDT', ch: 'GMAIL', t: 'Hi — saw the 2018 Accord listed on your site. Is it still available? I\'m in Riverside.', side: 'in' },
            { who: 'Sales · Jordan', when: 'APR 18 · 09:21 PDT', ch: 'GMAIL', t: 'Yes ma\'am, still here. Advertised $18,495. We add a $85 doc fee plus tax/license. CA disclosure: this is a previously-titled retail vehicle; service records on file. Can I send the inspection report?', side: 'out' },
            { who: 'Maria L.', when: 'APR 21 · 14:02 PDT', ch: 'GMAIL', t: 'Yes please. What\'s the out-the-door number with cash?', side: 'in' },
            { who: 'Sales · Jordan', when: 'APR 21 · 14:08 PDT', ch: 'GMAIL', t: 'Out-the-door $20,612.40 cash. Breakdown attached (PDF · 1pg).', side: 'out' },
            { who: 'Maria L.', when: 'MAY 02 · 11:44 PDT', ch: 'SMS', t: 'I\'ll take it. What\'s next?', side: 'in' },
          ].map((m, i) => (
            <div key={i} style={{ display: 'flex', justifyContent: m.side === 'in' ? 'flex-start' : 'flex-end' }}>
              <div style={{ maxWidth: '78%', border: '1px solid var(--rule)', background: m.side === 'in' ? 'var(--paper-2)' : 'var(--paper-3)', padding: '10px 12px' }}>
                <div className="mono" style={{ fontSize: 9.5, color: 'var(--ink-3)', letterSpacing: '0.06em', marginBottom: 4 }}>{m.who} · {m.when} · {m.ch}</div>
                <div style={{ fontSize: 13, color: 'var(--ink)', lineHeight: 1.5 }}>{m.t}</div>
              </div>
            </div>
          ))}
        </div>
        <div style={{ padding: '10px 18px', borderTop: '1px solid var(--rule)', display: 'flex', justifyContent: 'space-between' }}>
          <span className="mono" style={{ fontSize: 10, color: 'var(--ink-3)' }}>5 MESSAGES · 1 ATTACHMENT · TAGGED SB 766 §1</span>
          <span className="mono" style={{ fontSize: 10, color: 'var(--ink-3)' }}>RETAINED UNTIL 2030.05.02</span>
        </div>
      </div>
    </div>
  );
}

function TrackerTab() {
  const groups = [
    { title: 'FTC SAFEGUARDS · §314.4', rows: [
      ['Qualified Individual sign-off',     'D. Marquez',       '2026.05.01', 'ok'],
      ['Annual WISP review',                 'D. Marquez',       '2026.05.01', 'ok'],
      ['Risk assessment on file',            'Lot Copilot',      '2026.05.01', 'ok'],
      ['Incident response runbook v3',       'D. Marquez',       '2026.04.01', 'ok'],
    ]},
    { title: 'VENDOR RISK ATTESTATIONS', rows: [
      ['Carfax',           'Annual',  '2026.04.22', 'ok'],
      ['Dealertrack',      'Annual',  '2026.04.18', 'ok'],
      ['OpenPhone',        'Annual',  '2026.04.10', 'ok'],
      ['Stripe',           'Annual',  'DUE 2026.05.10', 'warn'],
      ['Plaid',            'Annual',  'DUE 2026.06.04', 'ok'],
    ]},
    { title: 'EMPLOYEE TRAINING', rows: [
      ['Janelle Kim · office mgr',  'Complete', '2026.03.30', 'ok'],
      ['Jordan Chen · sales',        'Complete', '2026.03.30', 'ok'],
      ['Adira Patel · sales',        'Complete', '2026.03.30', 'ok'],
      ['Miguel Cruz · finance',      'Overdue',  'DUE 2026.04.30', 'alert'],
      ['Tom Reilly · service',       'Complete', '2026.03.30', 'ok'],
      ['Devin Olson · detailer',     'Complete', '2026.03.30', 'ok'],
    ]},
  ];
  return (
    <div style={{ display: 'flex', flexDirection: 'column', gap: 28 }}>
      <div>
        <h2 className="display" style={{ fontSize: 36 }}>Compliance ledger</h2>
        <p style={{ color: 'var(--ink-2)' }}>Sign-offs, attestations, training. The boring stuff, finally tracked.</p>
      </div>
      {groups.map((g, gi) => (
        <div key={gi} className="sheet m-table-scroll">
          <div style={{ padding: '12px 18px', borderBottom: '1px solid var(--rule)', display: 'flex', justifyContent: 'space-between' }}>
            <span className="label">{g.title}</span>
            <span className="mono" style={{ fontSize: 11, color: 'var(--ink-3)' }}>{g.rows.length} ITEMS</span>
          </div>
          {g.rows.map(([a, b, c, s], i) => (
            <div key={i} style={{ display: 'grid', gridTemplateColumns: '14px 2fr 1fr 1fr 100px', gap: 16, padding: '12px 18px', borderBottom: i < g.rows.length - 1 ? '1px solid var(--rule)' : 0, alignItems: 'center' }}>
              <span className={'dot ' + (s === 'ok' ? 'dot--ok' : s === 'warn' ? 'dot--warn' : 'dot--alert')} style={{ width: 6, height: 6, boxShadow: 'none' }}/>
              <span style={{ fontSize: 13, color: 'var(--ink)' }}>{a}</span>
              <span className="mono" style={{ fontSize: 11, color: 'var(--ink-2)' }}>{b}</span>
              <span className="mono" style={{ fontSize: 11, color: 'var(--ink-3)' }}>{c}</span>
              <span className="mono" style={{ fontSize: 10, color: 'var(--ink-3)', textAlign: 'right', letterSpacing: '0.06em' }}>{s === 'ok' ? 'OK' : s === 'warn' ? 'DUE' : 'OVERDUE'}</span>
            </div>
          ))}
        </div>
      ))}
    </div>
  );
}

function ReportTab() {
  return (
    <div className="m-report-grid" style={{ display: 'grid', gridTemplateColumns: '1fr 380px', gap: 28 }}>
      <div className="sheet" style={{ padding: 0, background: 'var(--paper)' }}>
        {/* Mocked PDF page */}
        <div style={{ aspectRatio: '8.5 / 11', padding: 56, display: 'flex', flexDirection: 'column', position: 'relative' }}>
          <div style={{ display: 'flex', justifyContent: 'space-between', borderBottom: '1px solid var(--ink)', paddingBottom: 8 }}>
            <span className="mono" style={{ fontSize: 10, letterSpacing: '0.1em', color: 'var(--ink-3)' }}>SUNRISE MOTORS · LC-00428</span>
            <span className="mono" style={{ fontSize: 10, letterSpacing: '0.1em', color: 'var(--ink-3)' }}>CONFIDENTIAL · APR 2026</span>
          </div>
          <div style={{ marginTop: 36 }}>
            <div className="label" style={{ marginBottom: 16 }}>MONTHLY COMPLIANCE REPORT</div>
            <h1 className="display" style={{ fontSize: 64, lineHeight: 0.95, letterSpacing: '-0.035em' }}>
              April 2026
            </h1>
            <p className="serif" style={{ fontStyle: 'italic', fontSize: 22, color: 'var(--ink-2)', marginTop: 18, maxWidth: 460 }}>
              Sunrise Motors completed the month with a 96% compliance posture across all five regulated programs.
            </p>
          </div>
          <div style={{ flex: 1 }}/>
          <div style={{ display: 'grid', gridTemplateColumns: 'repeat(4, 1fr)', gap: 16, borderTop: '1px solid var(--rule)', paddingTop: 18 }}>
            {[['FTC', '100%', '0 findings'], ['CA SB 766', '96%', '2 findings'], ['GOOGLE', '100%', '0 findings'], ['VENDORS', '92%', '1 due']].map(([k, v, f], i) => (
              <div key={i}>
                <div className="mono" style={{ fontSize: 9, color: 'var(--ink-3)', letterSpacing: '0.08em' }}>{k}</div>
                <div className="display tnum" style={{ fontSize: 32, marginTop: 4 }}>{v}</div>
                <div className="mono" style={{ fontSize: 9, color: 'var(--ink-3)', marginTop: 4 }}>{f}</div>
              </div>
            ))}
          </div>
          <div style={{ marginTop: 18, display: 'flex', justifyContent: 'space-between' }}>
            <div>
              <div className="mono" style={{ fontSize: 9, color: 'var(--ink-3)', letterSpacing: '0.08em' }}>QUALIFIED INDIVIDUAL</div>
              <div className="serif" style={{ fontStyle: 'italic', fontSize: 22, marginTop: 4 }}>D. Marquez</div>
              <div className="mono" style={{ fontSize: 9, color: 'var(--ink-3)' }}>SIGNED 2026.05.01</div>
            </div>
            <div style={{ textAlign: 'right' }}>
              <div className="mono" style={{ fontSize: 9, color: 'var(--ink-3)', letterSpacing: '0.08em' }}>PAGES</div>
              <div className="display tnum" style={{ fontSize: 22, marginTop: 4 }}>11</div>
            </div>
          </div>
        </div>
      </div>
      <div style={{ display: 'flex', flexDirection: 'column', gap: 14 }}>
        <h2 className="display" style={{ fontSize: 28 }}>Hand it over.</h2>
        <p style={{ color: 'var(--ink-2)' }}>Email directly to your insurance carrier or attorney. Built from live evidence — every number on this page links back to a record in your account.</p>
        <div style={{ display: 'flex', gap: 8, flexWrap: 'wrap' }}>
          <button className="btn">Email to carrier</button>
          <button className="btn btn--ghost">Download PDF</button>
        </div>
        <div className="sheet" style={{ padding: 14, marginTop: 8 }}>
          <div className="label" style={{ marginBottom: 10 }}>RECIPIENTS</div>
          {[['Federated Insurance', 'underwriting@federatedins.com'], ['Patel & Lee LLP', 'b.patel@patelleelaw.com']].map(([n, e], i) => (
            <div key={i} style={{ display: 'flex', justifyContent: 'space-between', padding: '6px 0', borderTop: i ? '1px solid var(--rule)' : 0 }}>
              <span style={{ fontSize: 13 }}>{n}</span>
              <span className="mono" style={{ fontSize: 10, color: 'var(--ink-3)' }}>{e}</span>
            </div>
          ))}
        </div>
        <div className="sheet" style={{ padding: 14 }}>
          <div className="label" style={{ marginBottom: 10 }}>HISTORY</div>
          {['MAR 2026 · 100%', 'FEB 2026 · 94%', 'JAN 2026 · 91%'].map((h, i) => (
            <div key={i} className="mono" style={{ fontSize: 11, padding: '6px 0', borderTop: i ? '1px solid var(--rule)' : 0, color: 'var(--ink-2)', display: 'flex', justifyContent: 'space-between' }}>
              <span>{h}</span><span style={{ color: 'var(--ink-3)' }}>↗ VIEW</span>
            </div>
          ))}
        </div>
      </div>
    </div>
  );
}

function DashboardPage() {
  const [tab, setTab] = dUseState('overview');
  return (
    <div className="page-fade" data-screen-label="Dashboard">
      <DashShell tab={tab} setTab={setTab}>
        {tab === 'overview' && <OverviewTab goTab={setTab}/>}
        {tab === 'listings' && <ListingsTab/>}
        {tab === 'vault'    && <VaultTab/>}
        {tab === 'tracker'  && <TrackerTab/>}
        {tab === 'report'   && <ReportTab/>}
      </DashShell>
    </div>
  );
}

window.DashboardPage = DashboardPage;