// dashboard.jsx — OnboardIQ admin dashboard (anchor artboard)
// Dense operator's console. Today's queue is the hero, not vanity tiles.

// ─── data ──────────────────────────────────────────────────────────
// `owns` is the categorical ownership of the action, not the subject.
// you=admin reading this dashboard · hr=other admin · it=IT team
// hire=the onboardee themselves · ext=external party (sponsor, vendor, gov)
const TODAY_QUEUE = [
  { id: "q1", action: "Countersign I-9 Section 2", subject: "Daniel Okafor", subjectRole: "Cloud Engineer · day 3 / 14",
    type: "sig", due: "today · 17:00 ET", owns: "you", status: "warn", blocker: "section-1 received 09:18 · within 3-business-day rule" },
  { id: "q2", action: "Approve interim clearance prep packet", subject: "Aisha Karam", subjectRole: "Subcontractor · BlueRidge LLC · day 5",
    type: "cl", due: "today · 18:00 ET", owns: "you", status: "warn", blocker: "sponsor code 24-OPM-7714" },
  { id: "q3", action: "Resolve E-Verify TNC", subject: "Jenna Whitfield", subjectRole: "Program Manager · day 12 · TS/SCI",
    type: "ev", due: "tomorrow · 09:00", owns: "you", status: "danger", blocker: "8-day window remaining · DHS referral imminent" },
  { id: "q4", action: "Confirm laptop kit shipped", subject: "Marcus Reed", subjectRole: "1099 · UX Designer · CA-remote · day 1",
    type: "eq", due: "thu may 15", owns: "it", status: "info", blocker: "FedEx pickup window today 14-17 PT" },
  { id: "q5", action: "Pick 30-day check-in slot", subject: "Theo Bramwell", subjectRole: "IT Support · day 2",
    type: "check", due: "by jun 10", owns: "hire", status: "neutral", blocker: "invitation sent 2 days ago · no response" },
  { id: "q6", action: "Sponsor countersignature · DD-254", subject: "Aisha Karam", subjectRole: "Subcontractor · BlueRidge LLC",
    type: "sig", due: "fri may 16", owns: "ext", status: "warn", blocker: "envelope sent to b.lerner@blueridge.gov · 18h unopened" },
];

const OWNERSHIP = {
  you:  { label: "ON YOU",      bg: "var(--ink-900)",   fg: "var(--paper-50)", bar: "var(--ink-900)" },
  hr:   { label: "ON HR",       bg: "var(--slate-100)", fg: "var(--slate-700)", bar: "var(--slate-500)" },
  it:   { label: "ON IT",       bg: "var(--blue-100)",  fg: "var(--blue-700)",  bar: "var(--blue-500)" },
  hire: { label: "ON NEW HIRE", bg: "var(--accent-100)",fg: "var(--accent-700)",bar: "var(--accent-500)" },
  ext:  { label: "EXTERNAL",    bg: "var(--paper-200)", fg: "var(--ink-700)",  bar: "var(--ink-500)" },
};

const ONBOARDINGS = [
  { id: 1, name: "Daniel Okafor",      role: "Cloud Engineer",       dept: "Eng",      cl: "TS · interim",   hire: "W-2",  day: 3,  total: 14, steps: 9,  totalSteps: 18, status: "warn",    flag: "i9_due" },
  { id: 2, name: "Priya Subramanian",  role: "Sr Contracts Analyst", dept: "Legal",    cl: null,             hire: "W-2",  day: 7,  total: 14, steps: 14, totalSteps: 18, status: "ontrack", flag: null },
  { id: 3, name: "Marcus Reed",        role: "UX Designer",          dept: "Design",   cl: null,             hire: "1099", day: 1,  total: 14, steps: 2,  totalSteps: 12, status: "ontrack", flag: null },
  { id: 4, name: "Jenna Whitfield",    role: "Program Manager",      dept: "Programs", cl: "TS/SCI",         hire: "W-2",  day: 12, total: 14, steps: 17, totalSteps: 18, status: "danger",  flag: "ev_tnc" },
  { id: 5, name: "Theo Bramwell",      role: "IT Support",           dept: "IT",       cl: null,             hire: "W-2",  day: 2,  total: 14, steps: 4,  totalSteps: 15, status: "ontrack", flag: null },
  { id: 6, name: "Aisha Karam",        role: "Cyber Analyst",        dept: "Security", cl: "Secret · pend",  hire: "Sub",  day: 5,  total: 14, steps: 8,  totalSteps: 16, status: "warn",    flag: "cl_pkg" },
];

const ACTIVITY = [
  { t: "09:42", actor: "T. Bramwell", verb: "countersigned",        obj: "I-9 Section 2 · Daniel Okafor",   chain: "0x7a1f…c402" },
  { t: "09:31", actor: "system",       verb: "ran",                  obj: "E-Verify case · Jenna Whitfield · TNC issued", chain: "0x7a1e…b8e1" },
  { t: "09:18", actor: "M. Reed",      verb: "uploaded",              obj: "I-9 Section 1 + work auth (passport)", chain: "0x7a1d…9c10" },
  { t: "08:56", actor: "you",          verb: "approved",              obj: "Template fork · Sub · BlueRidge · v3", chain: "0x7a1c…4d77" },
  { t: "08:42", actor: "P. Subramanian", verb: "signed",              obj: "NDA · v2026.04 · with notarized timestamp", chain: "0x7a1b…21a9" },
  { t: "08:21", actor: "audit",        verb: "rotated",               obj: "hash-chain checkpoint · 14 events sealed", chain: "0x7a1a…ff80" },
];

const COMPLIANCE = [
  { label: "I-9 currency",      ratio: [142, 148], status: "warn",    note: "6 awaiting Section 2 countersignature" },
  { label: "E-Verify cleared",  ratio: [148, 148], status: "success", note: "1 TNC open · 8-day window" },
  { label: "Background checks", ratio: [148, 148], status: "success", note: "all current within 12-month policy" },
  { label: "Active clearances", ratio: [34, 41],   status: "info",    note: "7 in pending adjudication" },
  { label: "Training overdue",  ratio: [0, 148],   status: "success", note: "CMMC v2.3 acknowledged by all" },
  { label: "Expiring < 30d",    ratio: [4, null],  status: "warn",    note: "3 driver's-license · 1 work-auth" },
];

const CROSS_PRODUCT = [
  { product: "OpsTicket",  for: "Theo Bramwell",      do: "Provision Tier-1 queue access on day 5", action: "Auto-stage" },
  { product: "DeliverOps", for: "Jenna Whitfield",    do: "Assign to CONTRACT-MFD-441 on day-1-ready",      action: "Pre-link" },
  { product: "GovBid AI",  for: "Daniel Okafor",      do: "Staff candidate to BPA-2026-04 response",        action: "Mark eligible" },
];

const PIPELINE_STAGES = [
  { key: "offer",     label: "Offer · NDA",  count: 14 },
  { key: "docs",      label: "Documents",    count: 9 },
  { key: "i9",        label: "I-9 · EV",     count: 6 },
  { key: "clearance", label: "Clearance",    count: 7 },
  { key: "training",  label: "Training",     count: 11 },
  { key: "day1",      label: "Day-1 ready",  count: 4 },
];

// ─── dashboard ────────────────────────────────────────────────────
function Dashboard({ tweaks }) {
  const cust = WHITELABEL[tweaks.whitelabel] || WHITELABEL.default;
  return (
    <div className="oiq" data-theme={tweaks.dark ? "dark" : "light"} data-accent={tweaks.accent} data-density={tweaks.density}
         style={{
           width: '100%', height: '100%',
           background: 'var(--paper-100)',
           color: 'var(--ink-900)',
           display: 'grid',
           gridTemplateColumns: '212px 1fr',
           gridTemplateRows: '48px 1fr',
           overflow: 'hidden',
           fontSize: 13.5,
         }}>
      <TopBar cust={cust} />
      <Sidebar cust={cust} />
      <Main cust={cust} />
    </div>
  );
}

// ─── top bar ───────────────────────────────────────────────────────
function TopBar({ cust }) {
  return (
    <div style={{
      gridColumn: '1 / -1', gridRow: '1 / 2',
      display: 'flex', alignItems: 'center', gap: 0,
      borderBottom: '1px solid var(--paper-300)',
      background: 'var(--paper-50)',
      paddingRight: 12,
    }}>
      {/* Brand */}
      <div style={{ width: 212, padding: '0 14px', display: 'flex', alignItems: 'center', gap: 10, borderRight: '1px solid var(--paper-300)', height: '100%' }}>
        {cust.kind === "wl" ? (
          // White-label: customer brand large, OnboardIQ small
          <div style={{ display: 'flex', flexDirection: 'column', lineHeight: 1 }}>
            <span style={{ fontFamily: 'var(--sans)', fontWeight: 600, fontSize: 15, letterSpacing: '-0.02em', color: 'var(--ink-900)' }}>{cust.name}</span>
            <span className="oiq-mono" style={{ fontSize: 9, color: 'var(--ink-500)', letterSpacing: '0.04em', marginTop: 2 }}>onboarding · powered by OnboardIQ</span>
          </div>
        ) : (
          <Lockup size={16} color="var(--ink-900)" />
        )}
      </div>
      {/* Product switcher */}
      <ProductSwitcher />
      {/* Tenant switcher */}
      <div style={{ marginLeft: 8, display: 'flex', alignItems: 'center', gap: 6, padding: '5px 8px', borderRadius: 'var(--r-2)', cursor: 'default' }}>
        <span className="oiq-mono" style={{ fontSize: 10.5, color: 'var(--ink-500)', letterSpacing: '0.06em', textTransform: 'uppercase' }}>tenant</span>
        <span style={{ fontSize: 12.5, color: 'var(--ink-900)', fontWeight: 500 }}>{cust.tenant}</span>
        <Icon name="chevron-d" size={12} />
      </div>
      <div style={{ flex: 1 }} />
      {/* Search */}
      <div style={{
        display: 'flex', alignItems: 'center', gap: 8,
        padding: '5px 10px',
        background: 'var(--paper-100)',
        border: '1px solid var(--paper-300)',
        borderRadius: 'var(--r-2)',
        width: 280,
      }}>
        <Icon name="search" size={13} />
        <input placeholder="Search people, docs, audit events" style={{
          flex: 1, border: 'none', outline: 'none', background: 'transparent',
          fontFamily: 'var(--sans)', fontSize: 12.5, color: 'var(--ink-900)',
        }} />
        <span className="oiq-mono" style={{ fontSize: 10, color: 'var(--ink-500)', padding: '1px 4px', border: '1px solid var(--paper-300)', borderRadius: 3 }}>⌘K</span>
      </div>
      {/* Right cluster */}
      <button title="What's new" style={topBtn()}>
        <Icon name="flag" size={15} />
      </button>
      <button title="Notifications" style={{ ...topBtn(), position: 'relative' }}>
        <Icon name="bell" size={15} />
        <span style={{
          position: 'absolute', top: 4, right: 4,
          width: 6, height: 6, borderRadius: '50%',
          background: 'var(--accent-500)',
          boxShadow: '0 0 0 2px var(--paper-50)',
        }} />
      </button>
      <div style={{ width: 1, height: 24, background: 'var(--paper-300)', margin: '0 6px' }} />
      <button style={{ ...topBtn(), gap: 8, paddingRight: 8 }}>
        <Avatar name="Ren Mahoney" size={22} />
        <span style={{ fontSize: 12.5, color: 'var(--ink-900)' }}>Ren Mahoney</span>
        <Icon name="chevron-d" size={12} />
      </button>
    </div>
  );
}

function topBtn() {
  return {
    height: 28, padding: '0 8px', display: 'flex', alignItems: 'center', justifyContent: 'center',
    background: 'transparent', border: 'none', color: 'var(--ink-700)', cursor: 'pointer',
    borderRadius: 'var(--r-2)',
  };
}

function ProductSwitcher() {
  const items = [
    { k: "ob", name: "OnboardIQ",  glyph: "OI", active: true },
    { k: "gb", name: "GovBid AI",  glyph: "GB" },
    { k: "ot", name: "OpsTicket",  glyph: "OT" },
    { k: "do", name: "DeliverOps", glyph: "DO" },
    { k: "sd", name: "ShieldDesk", glyph: "SD" },
    { k: "vg", name: "VaultGuard", glyph: "VG" },
  ];
  return (
    <div style={{ display: 'flex', alignItems: 'center', gap: 4, padding: '0 8px', borderRight: '1px solid var(--paper-300)', height: '100%' }}>
      {items.map(p => (
        <div key={p.k} title={p.name} style={{
          width: 28, height: 28,
          display: 'flex', alignItems: 'center', justifyContent: 'center',
          background: p.active ? 'var(--ink-900)' : 'transparent',
          color: p.active ? 'var(--paper-50)' : 'var(--ink-600)',
          fontFamily: 'var(--mono)', fontSize: 10, fontWeight: 600,
          letterSpacing: '0.04em',
          borderRadius: 'var(--r-1)',
          cursor: 'default',
          border: p.active ? 'none' : '1px solid var(--paper-300)',
        }}>{p.glyph}</div>
      ))}
      <div style={{ marginLeft: 8 }} className="oiq-mono">
        <span style={{ fontSize: 9.5, color: 'var(--ink-500)', letterSpacing: '0.06em', textTransform: 'uppercase' }}>itc suite</span>
      </div>
    </div>
  );
}

// ─── sidebar ─────────────────────────────────────────────────────
function Sidebar({ cust }) {
  const nav = [
    { group: "Operate", items: [
      { i: "dashboard",  l: "Dashboard", active: true },
      { i: "onboardings", l: "Onboardings", count: 12 },
      { i: "people",     l: "People",      count: 148 },
      { i: "templates",  l: "Templates",   count: 17 },
      { i: "documents",  l: "Documents",   count: 1842 },
    ]},
    { group: "Compliance", items: [
      { i: "shield",     l: "Posture" },
      { i: "clearance",  l: "Clearances", count: 41, tag: "cleared" },
      { i: "audit",      l: "Audit log" },
    ]},
    { group: "Build", items: [
      { i: "integration", l: "Integrations" },
      { i: "settings",    l: "Settings" },
    ]},
  ];
  return (
    <div style={{
      gridColumn: '1 / 2', gridRow: '2 / 3',
      borderRight: '1px solid var(--paper-300)',
      background: 'var(--paper-50)',
      padding: '14px 10px',
      display: 'flex', flexDirection: 'column', gap: 14, overflow: 'auto',
    }}>
      {nav.map((g, gi) => (
        <div key={gi} style={{ display: 'flex', flexDirection: 'column', gap: 2 }}>
          <div className="oiq-mono" style={{ fontSize: 9.5, color: 'var(--ink-500)', padding: '0 8px', letterSpacing: '0.1em', textTransform: 'uppercase', marginBottom: 4 }}>{g.group}</div>
          {g.items.map((it) => (
            <div key={it.i} style={{
              display: 'flex', alignItems: 'center', gap: 10,
              padding: '6px 8px', borderRadius: 'var(--r-2)',
              background: it.active ? 'var(--paper-200)' : 'transparent',
              color: it.active ? 'var(--ink-900)' : 'var(--ink-700)',
              fontSize: 13, fontWeight: it.active ? 500 : 400,
              cursor: 'default',
            }}>
              <Icon name={it.i} size={15} stroke={1.6} />
              <span style={{ flex: 1 }}>{it.l}</span>
              {it.count != null && (
                <span className="oiq-mono" style={{ fontSize: 10.5, color: 'var(--ink-500)' }}>{it.count}</span>
              )}
            </div>
          ))}
        </div>
      ))}

      <div style={{ flex: 1 }} />

      {/* Footer: ITC parent attribution */}
      <div style={{ padding: '12px 8px', borderTop: '1px solid var(--paper-300)', display: 'flex', flexDirection: 'column', gap: 4 }}>
        <div className="oiq-mono" style={{ fontSize: 9.5, color: 'var(--ink-500)', letterSpacing: '0.08em' }}>AN ITC PRODUCT</div>
        <div style={{ fontSize: 11, color: 'var(--ink-600)' }}>IT Custom Solution LLC · NY</div>
      </div>
    </div>
  );
}

// ─── main content ────────────────────────────────────────────────
function Main({ cust }) {
  return (
    <div style={{ overflow: 'auto', padding: '20px 28px 32px', display: 'flex', flexDirection: 'column', gap: 20 }}>
      <PageHeader cust={cust} />
      <TodayQueue />
      <PipelineStrip />
      <div style={{ display: 'grid', gridTemplateColumns: '1.45fr 1fr', gap: 16, alignItems: 'start' }}>
        <CompliancePanel />
        <ActivityPanel />
      </div>
      <CrossProductPanel />
    </div>
  );
}

function PageHeader({ cust }) {
  return (
    <div style={{ display: 'flex', alignItems: 'flex-end', justifyContent: 'space-between', gap: 16 }}>
      <div>
        <div className="oiq-eyebrow">Operations · {new Date(2026, 4, 13).toLocaleDateString('en-US', { weekday: 'long', month: 'long', day: 'numeric' })}</div>
        <div style={{ display: 'flex', alignItems: 'baseline', gap: 12, marginTop: 4 }}>
          <h1 className="oiq-display" style={{ fontSize: 28, margin: 0 }}>Good morning, Ren.</h1>
          <span className="oiq-mono" style={{ fontSize: 11.5, color: 'var(--ink-500)' }}>3 owe you · 3 you're tracking.</span>
        </div>
      </div>
      <div style={{ display: 'flex', gap: 8 }}>
        <Btn kind="secondary" icon="upload">Import roster</Btn>
        <Btn kind="primary" icon="plus">New onboarding</Btn>
      </div>
    </div>
  );
}

// ─── today's queue (the hero) ───────────────────────────────────
function TodayQueue() {
  const counts = TODAY_QUEUE.reduce((acc, r) => { acc[r.owns] = (acc[r.owns] || 0) + 1; return acc; }, {});
  return (
    <Surface style={{ overflow: 'hidden' }}>
      <div style={{
        display: 'flex', alignItems: 'center', gap: 14,
        padding: '10px 14px',
        borderBottom: '1px solid var(--paper-300)',
        background: 'var(--paper-100)',
      }}>
        <div style={{ display: 'flex', alignItems: 'center', gap: 8 }}>
          <span className="oiq-dot" style={{ background: 'var(--accent-500)' }} />
          <span style={{ fontFamily: 'var(--sans)', fontWeight: 600, fontSize: 13.5, color: 'var(--ink-900)' }}>Today's queue</span>
          <span className="oiq-mono" style={{ fontSize: 10.5, color: 'var(--ink-500)' }}>6 open · sorted by SLA</span>
        </div>
        {/* Ownership breakdown */}
        <div style={{ display: 'flex', alignItems: 'center', gap: 6 }}>
          {[["you", counts.you || 0], ["it", counts.it || 0], ["hire", counts.hire || 0], ["ext", counts.ext || 0]].filter(([, n]) => n > 0).map(([k, n]) => {
            const o = OWNERSHIP[k];
            return (
              <span key={k} className="oiq-mono" style={{
                fontSize: 10, padding: '2px 7px',
                background: o.bg, color: o.fg,
                letterSpacing: '0.04em',
                borderRadius: 'var(--r-pill)',
                display: 'inline-flex', alignItems: 'center', gap: 5,
              }}>
                <span className="oiq-tabular" style={{ fontWeight: 600 }}>{n}</span>
                {o.label.replace('ON ', '')}
              </span>
            );
          })}
        </div>
        <div style={{ flex: 1 }} />
        <Seg value="mine" onChange={() => {}} options={[
          { value: 'mine', label: 'Mine · 3' },
          { value: 'team', label: 'Team · 12' },
          { value: 'all', label: 'All · 23' },
        ]} />
      </div>
      <div>
        {TODAY_QUEUE.map((row, i) => {
          const o = OWNERSHIP[row.owns];
          return (
            <div key={row.id} style={{
              display: 'grid',
              gridTemplateColumns: '3px 22px 1fr 200px 110px 100px 24px',
              gap: 12, alignItems: 'center',
              padding: '10px 14px 10px 0',
              borderBottom: i === TODAY_QUEUE.length - 1 ? 'none' : '1px solid var(--paper-200)',
              cursor: 'default',
            }}>
              {/* Owner color bar */}
              <div style={{ width: 3, height: 32, background: o.bar }} />
              {/* Step type */}
              <span style={{ color: 'var(--ink-600)', display: 'flex', alignItems: 'center' }}><StepIcon type={row.type} /></span>
              {/* Action + blocker */}
              <div>
                <div style={{ fontSize: 13.5, color: 'var(--ink-900)', fontWeight: 500, letterSpacing: '-0.005em' }}>{row.action}</div>
                {row.blocker && (
                  <div className="oiq-mono" style={{ fontSize: 10.5, color: 'var(--ink-500)', marginTop: 2 }}>{row.blocker}</div>
                )}
              </div>
              {/* Subject (the new hire this is for) */}
              <div style={{ display: 'flex', alignItems: 'center', gap: 8 }}>
                <Avatar name={row.subject} size={22} />
                <div style={{ display: 'flex', flexDirection: 'column', minWidth: 0 }}>
                  <span className="oiq-mono" style={{ fontSize: 9.5, color: 'var(--ink-500)', letterSpacing: '0.06em' }}>FOR</span>
                  <span style={{ fontSize: 12.5, color: 'var(--ink-900)', overflow: 'hidden', textOverflow: 'ellipsis', whiteSpace: 'nowrap', lineHeight: 1.2 }}>{row.subject}</span>
                </div>
              </div>
              {/* Due */}
              <span className="oiq-mono oiq-tabular" style={{ fontSize: 11.5, color: row.status === 'danger' ? 'var(--red-500)' : 'var(--ink-700)' }}>{row.due}</span>
              {/* Owner pill */}
              <span className="oiq-mono" style={{
                display: 'inline-flex', alignItems: 'center', justifyContent: 'center',
                padding: '3px 8px',
                background: o.bg, color: o.fg,
                borderRadius: 'var(--r-pill)',
                fontSize: 10, fontWeight: 600, letterSpacing: '0.06em',
                whiteSpace: 'nowrap',
              }}>
                {o.label}
              </span>
              <button style={topBtn()}><Icon name="chevron-r" size={14} /></button>
            </div>
          );
        })}
      </div>
    </Surface>
  );
}

// ─── pipeline strip ──────────────────────────────────────────
function PipelineStrip() {
  return (
    <Surface style={{ padding: '12px 14px' }}>
      <div style={{ display: 'flex', alignItems: 'baseline', justifyContent: 'space-between', marginBottom: 10 }}>
        <div style={{ display: 'flex', alignItems: 'baseline', gap: 10 }}>
          <span style={{ fontFamily: 'var(--sans)', fontWeight: 600, fontSize: 13.5, color: 'var(--ink-900)' }}>Active pipeline</span>
          <span className="oiq-mono" style={{ fontSize: 11, color: 'var(--ink-500)' }}>12 in flight · median 11d to day-1</span>
        </div>
        <a style={{ fontSize: 12, color: 'var(--ink-700)', display: 'inline-flex', alignItems: 'center', gap: 4 }}>View all 12 <Icon name="chevron-r" size={12} /></a>
      </div>

      <div style={{ display: 'grid', gridTemplateColumns: 'repeat(6, 1fr)', gap: 0, marginBottom: 14, borderTop: '1px solid var(--paper-300)', borderBottom: '1px solid var(--paper-300)' }}>
        {PIPELINE_STAGES.map((s, i) => (
          <div key={s.key} style={{
            padding: '8px 10px',
            borderLeft: i === 0 ? 'none' : '1px solid var(--paper-200)',
            display: 'flex', flexDirection: 'column', gap: 4,
          }}>
            <div className="oiq-mono" style={{ fontSize: 9.5, color: 'var(--ink-500)', textTransform: 'uppercase', letterSpacing: '0.06em' }}>{`stage ${i+1}`}</div>
            <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'baseline' }}>
              <span style={{ fontSize: 12.5, color: 'var(--ink-900)' }}>{s.label}</span>
              <span className="oiq-mono oiq-tabular" style={{ fontSize: 14, fontWeight: 500, color: 'var(--ink-900)' }}>{s.count}</span>
            </div>
            <div style={{ height: 3, background: 'var(--paper-200)' }}>
              <div style={{ height: '100%', background: 'var(--ink-800)', width: `${(s.count / 14) * 100}%` }} />
            </div>
          </div>
        ))}
      </div>

      {/* People rows */}
      <div style={{ display: 'grid', gridTemplateColumns: 'repeat(3, 1fr)', gap: 8 }}>
        {ONBOARDINGS.map(p => <PersonRow key={p.id} p={p} />)}
      </div>
    </Surface>
  );
}

function PersonRow({ p }) {
  const statusColor = p.status === 'danger' ? 'danger' : p.status === 'warn' ? 'warn' : 'success';
  const pct = (p.steps / p.totalSteps) * 100;
  return (
    <div style={{
      border: '1px solid var(--paper-300)', borderRadius: 'var(--r-2)',
      padding: '10px 12px', display: 'flex', flexDirection: 'column', gap: 8,
      background: 'var(--paper-100)',
    }}>
      <div style={{ display: 'flex', alignItems: 'center', gap: 8 }}>
        <Avatar name={p.name} size={26} />
        <div style={{ minWidth: 0, flex: 1 }}>
          <div style={{ fontSize: 12.5, color: 'var(--ink-900)', fontWeight: 500, overflow: 'hidden', textOverflow: 'ellipsis', whiteSpace: 'nowrap' }}>{p.name}</div>
          <div style={{ fontSize: 10.5, color: 'var(--ink-500)' }}>{p.role} · {p.dept}</div>
        </div>
        <span className="oiq-dot" style={{ background: statusColor === 'danger' ? 'var(--red-500)' : statusColor === 'warn' ? 'var(--accent-600)' : 'var(--green-500)' }} />
      </div>
      <div style={{ display: 'flex', alignItems: 'center', gap: 6, flexWrap: 'wrap' }}>
        <Pill kind={p.hire === '1099' ? 'slate' : p.hire === 'Sub' ? 'slate' : 'neutral'}>{p.hire}</Pill>
        {p.cl && <Pill kind="ink" dot>{p.cl}</Pill>}
      </div>
      <div style={{ display: 'flex', alignItems: 'center', gap: 8 }}>
        <div style={{ flex: 1, height: 4, background: 'var(--paper-300)', borderRadius: 999, overflow: 'hidden' }}>
          <div style={{ height: '100%', background: 'var(--ink-800)', width: `${pct}%` }} />
        </div>
        <span className="oiq-mono oiq-tabular" style={{ fontSize: 10.5, color: 'var(--ink-600)' }}>{p.steps}/{p.totalSteps}</span>
        <span className="oiq-mono" style={{ fontSize: 10.5, color: 'var(--ink-500)' }}>d{p.day}</span>
      </div>
    </div>
  );
}

// ─── compliance ──────────────────────────────────────────────
function CompliancePanel() {
  return (
    <Surface style={{ overflow: 'hidden' }}>
      <div style={{ display: 'flex', alignItems: 'center', padding: '10px 14px', borderBottom: '1px solid var(--paper-300)', background: 'var(--paper-100)' }}>
        <span style={{ fontFamily: 'var(--sans)', fontWeight: 600, fontSize: 13.5, color: 'var(--ink-900)' }}>Compliance posture</span>
        <span className="oiq-mono" style={{ fontSize: 10.5, color: 'var(--ink-500)', marginLeft: 10 }}>148 active · audit window 90d</span>
        <div style={{ flex: 1 }} />
        <a style={{ fontSize: 12, color: 'var(--ink-700)', display: 'inline-flex', alignItems: 'center', gap: 4 }}>Export ZIP <Icon name="chevron-r" size={12} /></a>
      </div>
      <div>
        {COMPLIANCE.map((c, i) => (
          <div key={c.label} style={{
            display: 'grid', gridTemplateColumns: '1fr 92px 24px', gap: 12, alignItems: 'center',
            padding: '8px 14px',
            borderBottom: i === COMPLIANCE.length - 1 ? 'none' : '1px solid var(--paper-200)',
          }}>
            <div>
              <div style={{ display: 'flex', alignItems: 'center', gap: 8 }}>
                <span className="oiq-dot" style={{ background: c.status === 'success' ? 'var(--green-500)' : c.status === 'warn' ? 'var(--accent-600)' : c.status === 'danger' ? 'var(--red-500)' : 'var(--blue-500)' }} />
                <span style={{ fontSize: 13, color: 'var(--ink-900)', fontWeight: 500 }}>{c.label}</span>
              </div>
              <div className="oiq-mono" style={{ fontSize: 10.5, color: 'var(--ink-500)', marginTop: 2, paddingLeft: 15 }}>{c.note}</div>
            </div>
            <div className="oiq-mono oiq-tabular" style={{ fontSize: 13, color: 'var(--ink-900)', textAlign: 'right' }}>
              {c.ratio[1] === null ? c.ratio[0] : `${c.ratio[0]} / ${c.ratio[1]}`}
            </div>
            <button style={topBtn()}><Icon name="chevron-r" size={13} /></button>
          </div>
        ))}
      </div>
      {/* Clearance contextual strip (always-visible-but-contextual per Q8) */}
      <div style={{
        display: 'flex', alignItems: 'center', gap: 10,
        padding: '10px 14px',
        background: 'var(--accent-50)',
        borderTop: '1px solid var(--paper-300)',
      }}>
        <Icon name="clearance" size={15} />
        <div style={{ flex: 1 }}>
          <div style={{ fontSize: 12.5, color: 'var(--ink-900)', fontWeight: 500 }}>Clearance track</div>
          <div className="oiq-mono" style={{ fontSize: 10.5, color: 'var(--ink-600)' }}>34 active · 7 in adjudication · 2 reinvest due Q3</div>
        </div>
        <Btn kind="secondary" size="sm">Open tracker</Btn>
      </div>
    </Surface>
  );
}

// ─── activity feed ───────────────────────────────────────────
function ActivityPanel() {
  return (
    <Surface style={{ overflow: 'hidden', height: '100%' }}>
      <div style={{ display: 'flex', alignItems: 'center', padding: '10px 14px', borderBottom: '1px solid var(--paper-300)', background: 'var(--paper-100)' }}>
        <span style={{ fontFamily: 'var(--sans)', fontWeight: 600, fontSize: 13.5, color: 'var(--ink-900)' }}>Activity</span>
        <span className="oiq-mono" style={{ fontSize: 10.5, color: 'var(--ink-500)', marginLeft: 10 }}>hash-chain · last seal 08:21</span>
        <div style={{ flex: 1 }} />
        <Icon name="audit" size={14} />
      </div>
      <div style={{ padding: '4px 0' }}>
        {ACTIVITY.map((a, i) => (
          <div key={i} style={{ padding: '8px 14px', display: 'flex', gap: 10, alignItems: 'flex-start' }}>
            <span className="oiq-mono oiq-tabular" style={{ fontSize: 10.5, color: 'var(--ink-500)', width: 40, paddingTop: 1 }}>{a.t}</span>
            <div style={{ flex: 1, fontSize: 12.5, color: 'var(--ink-700)', lineHeight: 1.4 }}>
              <span style={{ color: 'var(--ink-900)', fontWeight: 500 }}>{a.actor}</span>{' '}
              <span style={{ color: 'var(--ink-500)' }}>{a.verb}</span>{' '}
              <span style={{ color: 'var(--ink-900)' }}>{a.obj}</span>
              <div className="oiq-mono" style={{ fontSize: 9.5, color: 'var(--ink-500)', marginTop: 2 }}>{a.chain}</div>
            </div>
          </div>
        ))}
      </div>
    </Surface>
  );
}

// ─── cross-product cards ─────────────────────────────────────
function CrossProductPanel() {
  return (
    <div style={{ display: 'flex', flexDirection: 'column', gap: 8 }}>
      <div style={{ display: 'flex', alignItems: 'baseline', gap: 10 }}>
        <span className="oiq-eyebrow">ITC suite · contextual</span>
        <span className="oiq-mono" style={{ fontSize: 10.5, color: 'var(--ink-500)' }}>3 suggested actions tied to active onboardings</span>
      </div>
      <div style={{ display: 'grid', gridTemplateColumns: 'repeat(3, 1fr)', gap: 8 }}>
        {CROSS_PRODUCT.map((c, i) => (
          <div key={i} style={{
            border: '1px solid var(--paper-300)',
            borderRadius: 'var(--r-2)',
            padding: '12px 14px',
            background: 'var(--paper-50)',
            display: 'flex', flexDirection: 'column', gap: 8,
          }}>
            <div style={{ display: 'flex', alignItems: 'center', gap: 6 }}>
              <div style={{
                width: 22, height: 22, display: 'inline-flex', alignItems: 'center', justifyContent: 'center',
                background: 'var(--ink-900)', color: 'var(--paper-50)',
                fontFamily: 'var(--mono)', fontSize: 9, fontWeight: 600, letterSpacing: '0.04em',
                borderRadius: 'var(--r-1)',
              }}>{c.product.slice(0,2).toUpperCase()}</div>
              <span style={{ fontSize: 12.5, color: 'var(--ink-900)', fontWeight: 500 }}>{c.product}</span>
              <span style={{ flex: 1 }} />
              <Icon name="integration" size={12} />
            </div>
            <div style={{ fontSize: 12.5, color: 'var(--ink-700)', lineHeight: 1.45 }}>
              {c.do}
            </div>
            <div className="oiq-mono" style={{ fontSize: 10.5, color: 'var(--ink-500)' }}>for · {c.for}</div>
            <div style={{ display: 'flex', gap: 6, marginTop: 4 }}>
              <Btn kind="secondary" size="sm">{c.action}</Btn>
              <Btn kind="ghost" size="sm">Skip</Btn>
            </div>
          </div>
        ))}
      </div>
    </div>
  );
}

// ─── white-label presets ─────────────────────────────────────
const WHITELABEL = {
  default:  { kind: "oiq", tenant: "Meridian Federal", name: "OnboardIQ" },
  meridian: { kind: "wl",  tenant: "Meridian Federal", name: "Meridian Federal" },
  northwind:{ kind: "wl",  tenant: "Northwind PEO",    name: "Northwind PEO" },
};

Object.assign(window, { Dashboard, WHITELABEL });