/* Stylized mocks of key SyncBuild app surfaces: assistant chat,
   project home rollup, daily log draft preview, photo gallery w/
   suggested tags, agent workforce credit ledger, trust layer events.
   Not pixel-perfect — they're hero imagery that evokes the real UI
   (white-on-white, hairline borders, one brand accent). */

function AppFrame({ url = '/assistant', children, className = '', height }) {
  return (
    <div className={cls('app-frame', className)} style={height ? { height } : undefined}>
      <div className="app-titlebar">
        <span className="dot" /><span className="dot" /><span className="dot" />
        <span className="url">app.syncbuild.co{url}</span>
      </div>
      <div>{children}</div>
    </div>
  );
}

// Mini sidebar used across mocks — mirrors the real AppShell:
// Workspace / Account / Platform admin sections, active = 18% brand
// tint + 3px inset-left accent bar.
function MiniSidebar({ active = 'Assistant' }) {
  const workspace = [
    ['LayoutDashboard', 'Dashboard'],
    ['FolderKanban', 'Projects'],
    ['Sparkles', 'Assistant'],
    ['Activity', 'Agent Workforce'],
    ['Users', 'Members'],
    ['Package', 'Modules'],
    ['Store', 'Marketplace'],
  ];
  const account = [
    ['Building2', 'Workspace'],
    ['FileText', 'Audit log'],
    ['CreditCard', 'Subscription'],
    ['Settings', 'Settings'],
  ];
  const renderRow = ([ic, label]) => {
    const isActive = active === label;
    return (
      <button key={label} className={cls(
        'flex items-center gap-2.5 h-8 px-3 rounded-md text-[13px] font-medium transition-colors',
        !isActive && 'hover:bg-[var(--bg-muted)]'
      )} style={isActive
        ? { background: 'hsl(var(--sb-primary) / 0.18)', color: 'var(--fg1)', boxShadow: 'inset 3px 0 0 var(--brand)' }
        : { color: 'var(--fg2)' }
      }>
        <Icon name={ic} size={14} />
        <span>{label}</span>
      </button>
    );
  };
  return (
    <aside className="hidden md:flex flex-col w-[200px] shrink-0 border-r" style={{ borderColor: 'var(--border)', background: 'var(--bg2)' }}>
      <div className="h-14 px-5 flex items-center border-b" style={{ borderColor: 'var(--border)' }}>
        <Logo size={22} />
      </div>
      <div className="p-3 flex-1 overflow-hidden space-y-4">
        <div>
          <div className="sb-eyebrow px-3 mb-1.5" style={{ fontSize: 10 }}>Workspace</div>
          <div className="space-y-0.5">{workspace.map(renderRow)}</div>
        </div>
        <div>
          <div className="sb-eyebrow px-3 mb-1.5" style={{ fontSize: 10 }}>Account</div>
          <div className="space-y-0.5">{account.map(renderRow)}</div>
        </div>
      </div>
    </aside>
  );
}

// Assistant chat + command bar
function AssistantMock() {
  return (
    <AppFrame url="/assistant">
      <div className="flex" style={{ minHeight: 420 }}>
        <MiniSidebar active="Assistant" />
        <div className="flex-1 flex flex-col">
          <div className="px-5 py-3 border-b flex items-center justify-between" style={{ borderColor: 'var(--border)' }}>
            <div>
              <div className="text-[15px] font-semibold">Assistant</div>
              <div className="text-[11px]" style={{ color: 'var(--fg2)' }}>Morrison Tower · project #MT-041</div>
            </div>
            <div className="flex items-center gap-2">
              <Badge tone="brand">· Agent workforce on</Badge>
            </div>
          </div>
          <div className="flex-1 p-5 space-y-4 overflow-hidden">
            <div className="flex gap-3">
              <div className="w-7 h-7 rounded-full grid place-items-center" style={{ background: 'var(--bg-muted)', fontSize: 11, fontWeight: 600 }}>JM</div>
              <div className="flex-1">
                <div className="text-[13px] font-medium">You</div>
                <div className="text-[14px] mt-1" style={{ color: 'var(--fg1)' }}>Draft today's daily log from the inputs the crew added.</div>
              </div>
            </div>
            <div className="flex gap-3">
              <div className="w-7 h-7 rounded-md grid place-items-center shrink-0" style={{ background: 'var(--brand-tint)', color: 'var(--brand)' }}>
                <Icon name="Sparkles" size={14} />
              </div>
              <div className="flex-1">
                <div className="text-[13px] font-medium">Assistant</div>
                <div className="text-[14px] mt-1" style={{ color: 'var(--fg1)' }}>
                  I read 14 inputs from today (8 notes · 5 photos · 1 voice note). I'll draft the log — you'll approve before it saves.
                </div>
                <div className="mt-3 card-flat p-3 text-[13px]" style={{ background: 'var(--bg-muted)' }}>
                  <div className="flex items-center justify-between mb-2">
                    <div className="font-medium">draft_daily_log <span className="font-normal" style={{ color: 'var(--fg2)' }}>· medium-stakes · preview</span></div>
                    <Badge tone="brand">Awaiting approval</Badge>
                  </div>
                  <div className="space-y-1.5" style={{ color: 'var(--fg2)' }}>
                    <div><span style={{ color: 'var(--fg1)' }}>Weather:</span> 62°F · partly cloudy · wind 8 mph NW</div>
                    <div><span style={{ color: 'var(--fg1)' }}>Crew on site:</span> 14 (4 electrical, 6 framing, 2 plumbing, 2 site)</div>
                    <div><span style={{ color: 'var(--fg1)' }}>Work completed:</span> Level 4 rough-in 80% · east stair guardrail installed · grid B–D drywall prep.</div>
                    <div><span style={{ color: 'var(--fg1)' }}>Delays:</span> Concrete pour pushed to Wed — truck #2 rerouted.</div>
                  </div>
                </div>
                <div className="flex gap-2 mt-3">
                  <button className="btn btn-primary" style={{ height: 34, padding: '0 12px', fontSize: 13 }}><Icon name="Check" size={14} /> Approve &amp; save</button>
                  <button className="btn btn-ghost" style={{ height: 34, padding: '0 12px', fontSize: 13 }}>Edit</button>
                  <button className="btn btn-ghost" style={{ height: 34, padding: '0 12px', fontSize: 13 }}>Deny</button>
                </div>
              </div>
            </div>
          </div>
          <div className="p-4 border-t" style={{ borderColor: 'var(--border)' }}>
            <div className="card-flat flex items-center gap-2 px-3" style={{ height: 44 }}>
              <Icon name="Sparkles" size={16} className="opacity-60" />
              <div className="text-[13px]" style={{ color: 'var(--fg2)' }}>Ask anything, or type / for a command.</div>
              <div className="ml-auto flex items-center gap-1.5">
                <span className="kbd">⌘</span><span className="kbd">K</span>
              </div>
            </div>
            <div className="text-[10px] mt-1.5 px-1" style={{ color: 'var(--fg2)' }}>Medium &amp; high-stakes actions always preview before they run.</div>
          </div>
        </div>
      </div>
    </AppFrame>
  );
}

// Project home — rollup chips + tasks + activity
function ProjectHomeMock() {
  return (
    <AppFrame url="/projects/mt-041">
      <div className="flex" style={{ minHeight: 420 }}>
        <MiniSidebar active="Projects" />
        <div className="flex-1 flex flex-col">
          <div className="px-5 py-3 border-b flex items-center justify-between" style={{ borderColor: 'var(--border)' }}>
            <div className="flex items-center gap-3">
              <div>
                <div className="text-[15px] font-semibold">Morrison Tower</div>
                <div className="text-[11px]" style={{ color: 'var(--fg2)' }}>MT-041 · Seattle, WA · Level 4 · PM: J. Moreno</div>
              </div>
              <Badge tone="success">On track</Badge>
            </div>
            <button className="btn btn-ghost" style={{ height: 32, padding: '0 12px', fontSize: 13 }}><Icon name="Plus" size={14} /> New task</button>
          </div>
          <div className="px-5 pt-4 grid grid-cols-5 gap-3">
            {[
              ['CheckCircle2', '24', 'Open tasks'],
              ['Clock', '3', 'Overdue'],
              ['ClipboardList', '5', 'Logs this week'],
              ['Camera', '47', 'Photos this week'],
              ['Flag', '2', 'Decisions'],
            ].map(([ic, v, l]) => (
              <div key={l} className="card p-3">
                <div className="flex items-center justify-between">
                  <Icon name={ic} size={14} className="opacity-70" />
                  <span className="sb-display" style={{ fontSize: 20 }}>{v}</span>
                </div>
                <div className="text-[11px] mt-1" style={{ color: 'var(--fg2)' }}>{l}</div>
              </div>
            ))}
          </div>
          <div className="px-5 py-4 grid grid-cols-5 gap-3 items-stretch">
            <div className="col-span-3 card p-4">
              <div className="flex items-center justify-between mb-2">
                <div className="text-[13px] font-semibold">Milestones</div>
                <div className="text-[11px]" style={{ color: 'var(--fg2)' }}>6 total · 2 complete</div>
              </div>
              <div className="flex items-center gap-1">
                {[100, 100, 60, 20, 0, 0].map((p, i) => (
                  <div key={i} className="flex-1">
                    <div className="h-1.5 rounded-full" style={{ background: 'var(--bg-muted)' }}>
                      <div style={{ width: p + '%', height: '100%', background: 'var(--brand)', borderRadius: 999 }} />
                    </div>
                    <div className="text-[10px] mt-1.5" style={{ color: 'var(--fg2)' }}>M{i+1}</div>
                  </div>
                ))}
              </div>
              <div className="text-[13px] mt-4 font-semibold">Activity</div>
              <ul className="mt-2 divide-y-hairline text-[13px]">
                {[
                  ['ClipboardList', 'Daily log finalized', '2 hours ago', 'M. Torres'],
                  ['Camera', '8 photos auto-tagged (rebar, formwork)', '5 hours ago', 'assistant'],
                  ['Flag', 'Decision recorded — reroute pour to Wed', 'yesterday', 'J. Moreno'],
                  ['CheckCircle2', 'Task "guardrail east stair" completed', 'yesterday', 'R. Park'],
                ].map(([ic, txt, ago, who], i) => (
                  <li key={i} className="py-2 flex items-start gap-2.5">
                    <Icon name={ic} size={13} className="mt-0.5 opacity-70" />
                    <div className="flex-1">
                      <div>{txt}</div>
                      <div className="text-[11px]" style={{ color: 'var(--fg2)' }}>{ago} · {who}</div>
                    </div>
                  </li>
                ))}
              </ul>
            </div>
            <div className="col-span-2 card p-4">
              <div className="text-[13px] font-semibold mb-2">Team</div>
              <ul className="space-y-2">
                {[
                  ['JM', 'Julia Moreno', 'PM'],
                  ['RP', 'Ray Park', 'Superintendent'],
                  ['MT', 'Miguel Torres', 'Foreman · electrical'],
                  ['AO', 'Ana Ortega', 'Architect'],
                ].map(([a, n, r]) => (
                  <li key={n} className="flex items-center gap-2.5 text-[13px]">
                    <div className="w-7 h-7 rounded-full grid place-items-center" style={{ background: 'var(--bg-muted)', fontSize: 10, fontWeight: 600 }}>{a}</div>
                    <div className="flex-1">
                      <div>{n}</div>
                      <div className="text-[11px]" style={{ color: 'var(--fg2)' }}>{r}</div>
                    </div>
                  </li>
                ))}
              </ul>
            </div>
          </div>
        </div>
      </div>
    </AppFrame>
  );
}

// Credit ledger / usage mock
function CreditLedgerMock() {
  const rows = [
    ['Today 14:22', 'draft_daily_log', 'daily-logs', 'assistant', -134],
    ['Today 13:08', 'tag_photo (vision)', 'photos', 'system', -56],
    ['Today 11:44', 'summarize_project', 'project-management', 'assistant', -88],
    ['Today 10:01', 'Top up — Growth pack', 'billing', 'stripe', 50000],
    ['Yesterday', 'find_overdue_tasks', 'project-management', 'assistant', -20],
    ['Yesterday', 'draft_rfi', 'rfis', 'assistant', -212],
  ];
  return (
    <AppFrame url="/workforce">
      <div className="p-5">
        <div className="flex items-center justify-between mb-4">
          <div>
            <div className="text-[15px] font-semibold">Agent workforce</div>
            <div className="text-[11px]" style={{ color: 'var(--fg2)' }}>Credit ledger · 3 tenants · this month</div>
          </div>
          <button className="btn btn-primary" style={{ height: 32, padding: '0 12px', fontSize: 13 }}><Icon name="Plus" size={14} /> Top up credits</button>
        </div>
        <div className="grid grid-cols-4 gap-3">
          <div className="card p-4">
            <div className="text-[11px]" style={{ color: 'var(--fg2)' }}>Balance</div>
            <div className="sb-display mt-2" style={{ fontSize: 24 }}>48,902</div>
            <div className="text-[11px] mt-1" style={{ color: 'var(--fg2)' }}>credits</div>
          </div>
          <div className="card p-4">
            <div className="text-[11px]" style={{ color: 'var(--fg2)' }}>Used this month</div>
            <div className="sb-display mt-2" style={{ fontSize: 24 }}>11,098</div>
            <div className="h-1.5 rounded-full mt-2" style={{ background: 'var(--bg-muted)' }}>
              <div style={{ width: '22%', height: '100%', background: 'var(--brand)', borderRadius: 999 }} />
            </div>
            <div className="text-[10px] mt-1" style={{ color: 'var(--fg2)' }}>22% of 50,000 budget</div>
          </div>
          <div className="card p-4">
            <div className="text-[11px]" style={{ color: 'var(--fg2)' }}>Projected month-end</div>
            <div className="sb-display mt-2" style={{ fontSize: 24 }}>18,400</div>
            <div className="mt-1 inline-flex items-center gap-1 px-1.5 py-0.5 rounded text-[11px] font-medium delta-up"><Icon name="TrendingUp" size={11}/> on pace</div>
          </div>
          <div className="card p-4">
            <div className="text-[11px]" style={{ color: 'var(--fg2)' }}>Mode</div>
            <div className="text-[14px] font-semibold mt-2">Enforce</div>
            <div className="text-[11px] mt-1" style={{ color: 'var(--fg2)' }}>alerts at 50 · 80 · 100%</div>
          </div>
        </div>
        <div className="card mt-4">
          <div className="px-4 py-2.5 border-b flex items-center justify-between text-[12px]" style={{ borderColor: 'var(--border)' }}>
            <div className="font-semibold">Transactions</div>
            <div style={{ color: 'var(--fg2)' }}>6 of 238</div>
          </div>
          <table className="w-full text-[13px]">
            <thead>
              <tr className="text-[11px] uppercase tracking-wider" style={{ color: 'var(--fg2)', background: 'var(--bg-muted)' }}>
                <th className="text-left font-medium px-4 py-2">Time</th>
                <th className="text-left font-medium px-4 py-2">Action</th>
                <th className="text-left font-medium px-4 py-2">Module</th>
                <th className="text-left font-medium px-4 py-2">Actor</th>
                <th className="text-right font-medium px-4 py-2">Credits</th>
              </tr>
            </thead>
            <tbody className="divide-y-hairline">
              {rows.map((r, i) => (
                <tr key={i}>
                  <td className="px-4 py-2.5" style={{ color: 'var(--fg2)' }}>{r[0]}</td>
                  <td className="px-4 py-2.5 font-mono text-[12px]">{r[1]}</td>
                  <td className="px-4 py-2.5"><Badge>{r[2]}</Badge></td>
                  <td className="px-4 py-2.5" style={{ color: 'var(--fg2)' }}>{r[3]}</td>
                  <td className="px-4 py-2.5 text-right font-mono" style={{ color: r[4] > 0 ? 'var(--success-fg)' : 'var(--fg1)' }}>
                    {r[4] > 0 ? '+' : ''}{r[4].toLocaleString()}
                  </td>
                </tr>
              ))}
            </tbody>
          </table>
        </div>
      </div>
    </AppFrame>
  );
}

// Photo gallery with suggested tags
function PhotoGalleryMock() {
  const photos = [
    { id: 1, cap: 'East stair guardrail', tags: ['guardrail', 'stair', 'safety'] },
    { id: 2, cap: 'Rebar lay — grid C/4', tags: ['rebar', 'formwork'] },
    { id: 3, cap: 'Level 4 rough-in', tags: ['electrical', 'rough-in'] },
    { id: 4, cap: 'Pour prep truck #2', tags: ['concrete'] },
    { id: 5, cap: 'Site safety check', tags: ['ppe', 'safety'] },
    { id: 6, cap: 'Drywall delivery', tags: ['drywall', 'delivery'] },
  ];
  return (
    <AppFrame url="/projects/mt-041/photos">
      <div className="p-5">
        <div className="flex items-center justify-between mb-3">
          <div>
            <div className="text-[15px] font-semibold">Photos · Morrison Tower</div>
            <div className="text-[11px]" style={{ color: 'var(--fg2)' }}>247 photos · 8 pending tag review</div>
          </div>
          <div className="flex items-center gap-2">
            <div className="card-flat flex items-center gap-2 px-3 h-9">
              <Icon name="Search" size={14} className="opacity-60" />
              <input placeholder="rebar, safety…" className="bg-transparent text-[13px] outline-none" />
            </div>
            <button className="btn btn-ghost" style={{ height: 36, padding: '0 12px', fontSize: 13 }}><Icon name="Upload" size={14} /> Upload</button>
          </div>
        </div>
        <div className="grid grid-cols-3 gap-3">
          {photos.map((p) => (
            <div key={p.id} className="card overflow-hidden">
              <div className="aspect-[4/3]" style={{ background: 'var(--bg-muted)', position: 'relative' }}>
                <PhotoPlaceholder id={p.id} />
                <div className="absolute top-2 left-2"><Badge tone="brand">auto-tagged</Badge></div>
              </div>
              <div className="px-3 py-2.5 border-t" style={{ borderColor: 'var(--border)' }}>
                <div className="text-[13px] font-medium truncate">{p.cap}</div>
                <div className="flex gap-1.5 flex-wrap mt-1.5">
                  {p.tags.map(t => <span key={t} className="tag-pill" style={{ fontSize: 11, padding: '1px 8px' }}>{t}</span>)}
                </div>
              </div>
            </div>
          ))}
        </div>
      </div>
    </AppFrame>
  );
}

// Stylized "construction scene" placeholder SVG, not real photo
function PhotoPlaceholder({ id = 0 }) {
  const variants = [
    // rebar grid
    (<g key="1">
      <rect width="100%" height="100%" fill="hsl(var(--sb-muted))" />
      {[...Array(8)].map((_, i) => <line key={'h'+i} x1="0" x2="240" y1={12 + i*22} y2={12 + i*22} stroke="#94a3b8" strokeWidth="1.2" />)}
      {[...Array(11)].map((_, i) => <line key={'v'+i} x1={12 + i*22} x2={12 + i*22} y1="0" y2="180" stroke="#64748b" strokeWidth="1.2" />)}
    </g>),
    // stair railing
    (<g key="2">
      <rect width="100%" height="100%" fill="hsl(var(--sb-muted))" />
      <path d="M 20 150 L 90 110 L 160 150 L 230 110" fill="none" stroke="#475569" strokeWidth="3" />
      <path d="M 20 170 L 90 130 L 160 170 L 230 130" fill="none" stroke="#475569" strokeWidth="3" />
      {[30, 70, 110, 150, 190, 220].map(x => <line key={x} x1={x} x2={x} y1="170" y2="100" stroke="#64748b" strokeWidth="1.2" />)}
    </g>),
    // rough-in studs
    (<g key="3">
      <rect width="100%" height="100%" fill="hsl(var(--sb-muted))" />
      {[30,60,90,120,150,180,210].map(x => <rect key={x} x={x} y="20" width="10" height="140" fill="#cbd5e1" />)}
      <rect x="20" y="60" width="200" height="4" fill="#94a3b8" />
      <rect x="20" y="110" width="200" height="4" fill="#94a3b8" />
    </g>),
    // concrete truck
    (<g key="4">
      <rect width="100%" height="100%" fill="hsl(var(--sb-muted))" />
      <circle cx="130" cy="90" r="44" fill="#94a3b8" />
      <rect x="40" y="120" width="170" height="30" rx="4" fill="#64748b" />
      <circle cx="70" cy="155" r="10" fill="#0f172a" />
      <circle cx="180" cy="155" r="10" fill="#0f172a" />
    </g>),
    // hard hat / PPE
    (<g key="5">
      <rect width="100%" height="100%" fill="hsl(var(--sb-muted))" />
      <path d="M 80 120 Q 120 60 170 120 Z" fill="hsl(var(--sb-primary))" />
      <rect x="70" y="120" width="110" height="10" rx="3" fill="#0f172a" />
    </g>),
    // pallet drywall
    (<g key="6">
      <rect width="100%" height="100%" fill="hsl(var(--sb-muted))" />
      {[...Array(6)].map((_, i) => <rect key={i} x={30 + i*2} y={50 + i*2} width="180" height="80" fill="#e2e8f0" stroke="#94a3b8" />)}
    </g>),
  ];
  return (
    <svg viewBox="0 0 240 180" preserveAspectRatio="xMidYMid slice" style={{ width: '100%', height: '100%', display: 'block' }}>
      {variants[(id - 1) % variants.length]}
    </svg>
  );
}

// Trust layer events mock
function TrustLayerMock() {
  const rows = [
    ['PII scrub', 'user input', 'Redacted phone number', 'Sanitize', 'success'],
    ['Prompt injection', 'tool output', 'Instructions in PDF ignored', 'Block', 'danger'],
    ['Toxicity', 'user input', 'No violations', 'Allow', 'muted'],
    ['PII scrub', 'tool output', 'Redacted email address', 'Sanitize', 'success'],
    ['Prompt injection', 'user input', 'Clean', 'Allow', 'muted'],
  ];
  return (
    <AppFrame url="/workforce/trust">
      <div className="p-5">
        <div className="flex items-center justify-between mb-3">
          <div>
            <div className="text-[15px] font-semibold">Trust layer</div>
            <div className="text-[11px]" style={{ color: 'var(--fg2)' }}>Sanitize-first · rarely-block · audited</div>
          </div>
          <div className="flex items-center gap-2">
            <Badge tone="success">Enabled</Badge>
            <Badge>v1</Badge>
          </div>
        </div>
        <div className="grid grid-cols-3 gap-3 mb-3">
          <div className="card p-3">
            <div className="flex items-center gap-2 text-[13px] font-semibold"><Icon name="Shield" size={14}/> PII scrub</div>
            <div className="text-[11px] mt-1" style={{ color: 'var(--fg2)' }}>243 items sanitized · last 30 days</div>
          </div>
          <div className="card p-3">
            <div className="flex items-center gap-2 text-[13px] font-semibold"><Icon name="AlertCircle" size={14}/> Prompt injection</div>
            <div className="text-[11px] mt-1" style={{ color: 'var(--fg2)' }}>4 blocked · 12 flagged</div>
          </div>
          <div className="card p-3">
            <div className="flex items-center gap-2 text-[13px] font-semibold"><Icon name="MessageSquare" size={14}/> Toxicity</div>
            <div className="text-[11px] mt-1" style={{ color: 'var(--fg2)' }}>0 violations</div>
          </div>
        </div>
        <div className="card overflow-hidden">
          <table className="w-full text-[13px]">
            <thead>
              <tr className="text-[11px] uppercase tracking-wider" style={{ color: 'var(--fg2)', background: 'var(--bg-muted)' }}>
                <th className="text-left font-medium px-4 py-2">Filter</th>
                <th className="text-left font-medium px-4 py-2">Source</th>
                <th className="text-left font-medium px-4 py-2">Detail</th>
                <th className="text-left font-medium px-4 py-2">Action</th>
              </tr>
            </thead>
            <tbody className="divide-y-hairline">
              {rows.map((r, i) => {
                const sev = r[4];
                const dot = sev === 'success' ? 'var(--success-fg)' : sev === 'danger' ? 'var(--danger)' : 'var(--fg2)';
                return (
                  <tr key={i}>
                    <td className="px-4 py-2.5 flex items-center gap-2 font-medium">
                      <span style={{ width: 6, height: 6, borderRadius: 999, background: dot, display: 'inline-block' }} />
                      {r[0]}
                    </td>
                    <td className="px-4 py-2.5" style={{ color: 'var(--fg2)' }}>{r[1]}</td>
                    <td className="px-4 py-2.5">{r[2]}</td>
                    <td className="px-4 py-2.5"><Badge tone={sev === 'danger' ? 'brand' : 'default'}>{r[3]}</Badge></td>
                  </tr>
                );
              })}
            </tbody>
          </table>
        </div>
      </div>
    </AppFrame>
  );
}

// Command bar (for hero 'focus on assistant' angle)
function CommandBarStandalone() {
  return (
    <div className="card-flat flex items-center gap-3 px-4" style={{ height: 56, maxWidth: 720, margin: '0 auto' }}>
      <Icon name="Sparkles" size={18} style={{ color: 'var(--brand)' }} />
      <div className="text-[15px]" style={{ color: 'var(--fg2)' }}>Ask anything, or type <span className="kbd" style={{ fontSize: 12 }}>/</span> for a command.</div>
      <div className="ml-auto flex items-center gap-1.5">
        <span className="kbd" style={{ fontSize: 12 }}>⌘</span><span className="kbd" style={{ fontSize: 12 }}>K</span>
      </div>
    </div>
  );
}

// Daily log detail — mirrors DailyLogDetailPage.tsx from the repo.
// Two columns: field inputs (360px) | structured log draft.
// Amber "Draft now" banner when status === 'no_draft' with inputs.
// Crew values render as rounded muted pills. Status badge top-right.
function DailyLogMock() {
  const inputs = [
    ['MessageSquare', '07:42', 'Pour pushed to Wed — truck #2 rerouted to MT-019.'],
    ['Camera', '08:15', 'East stair guardrail', { tags: ['guardrail', 'stair', 'safety'], photo: 2 }],
    ['Camera', '09:02', 'Rebar lay — grid C/4', { tags: ['rebar', 'formwork'], photo: 1 }],
    ['Mic', '10:20', '"Framing crew hit level 4 — running ahead on east span. Plumbing waiting on a valve…"'],
    ['MessageSquare', '11:08', 'Grid B–D drywall prep complete.'],
    ['Camera', '13:40', 'Rough-in · level 4', { tags: ['electrical', 'rough-in'], photo: 3 }],
    ['MessageSquare', '14:22', 'RFI #214 opened — clarify beam flange.'],
  ];
  const crews = [['Electrical', 4], ['Framing', 6], ['Plumbing', 2], ['Site', 2]];
  return (
    <AppFrame url="/projects/mt-041/daily-logs/2026-04-20">
      <div className="flex" style={{ minHeight: 580 }}>
        <div className="flex-1 flex flex-col min-w-0">
          {/* PageHeader */}
          <div className="px-5 py-3 border-b flex items-center justify-between" style={{ borderColor: 'var(--border)' }}>
            <div>
              <div className="text-[15px] font-semibold">Monday, Apr 20 · 2026</div>
              <div className="text-[11px]" style={{ color: 'var(--fg2)' }}>Daily log · Morrison Tower · MT-041</div>
            </div>
            <div className="flex items-center gap-2">
              <button className="btn btn-ghost" style={{ height: 30, padding: '0 10px', fontSize: 12 }}>
                <Icon name="MessageSquare" size={13} /> Ask about this log
              </button>
              <button className="btn btn-ghost" style={{ height: 30, padding: '0 10px', fontSize: 12 }}>
                <Icon name="ChevronLeft" size={13} /> Back to logs
              </button>
            </div>
          </div>

          <div className="p-5">
            {/* Proactive draft banner — amber, icon + CTA (no_draft w/ inputs) */}
            <div className="rounded-md p-4 mb-5 flex items-start justify-between gap-4"
                 style={{ background: 'hsl(42 100% 96%)', border: '1px solid hsl(38 92% 84%)' }}>
              <div className="flex items-start gap-3">
                <Icon name="Sparkles" size={18} style={{ color: 'hsl(32 95% 44%)', marginTop: 1 }} />
                <div>
                  <div className="text-[13px] font-semibold" style={{ color: 'hsl(28 78% 24%)' }}>
                    7 inputs captured today. Draft the daily log?
                  </div>
                  <p className="text-[12px] mt-1" style={{ color: 'hsl(30 50% 30%)', maxWidth: 480 }}>
                    The assistant will synthesise a structured log from the notes, photos, and transcripts.
                    You'll review and approve before anything lands.
                  </p>
                </div>
              </div>
              <button className="btn shrink-0" style={{ height: 32, padding: '0 12px', fontSize: 12, background: 'hsl(28 70% 38%)', color: 'white', border: 'none' }}>
                <Icon name="Sparkles" size={13} /> Draft now
              </button>
            </div>

            {/* Two-column grid: narrower inputs | 1fr structured log */}
            <div className="grid gap-4" style={{ gridTemplateColumns: '220px 1fr' }}>
              {/* Inputs column */}
              <div className="card">
                <div className="p-4">
                  <div className="flex items-center justify-between mb-3">
                    <div className="text-[13px] font-semibold">Field inputs</div>
                    <div className="text-[11px]" style={{ color: 'var(--fg2)' }}>{inputs.length} captured</div>
                  </div>
                  <ul className="space-y-2.5">
                    {inputs.map(([ic, when, text, extra], i) => (
                      <li key={i} className="flex items-start gap-2 text-[12px]">
                        <Icon name={ic} size={12} className="shrink-0 mt-0.5" style={{ color: 'var(--fg2)' }} />
                        <div className="min-w-0 flex-1">
                          <div style={{ color: 'var(--fg2)', fontSize: 11 }}>{when}</div>
                          {extra?.photo ? (
                            <div className="mt-1 flex items-start gap-2 rounded-md border p-1.5" style={{ borderColor: 'var(--border)' }}>
                              <div className="w-12 h-12 rounded overflow-hidden shrink-0" style={{ background: 'var(--bg-muted)' }}>
                                <PhotoPlaceholder id={extra.photo} />
                              </div>
                              <div className="min-w-0 flex-1">
                                <div className="line-clamp-2" style={{ lineHeight: 1.35 }}>{text}</div>
                                <div className="mt-1 flex flex-wrap gap-1">
                                  {extra.tags.slice(0, 3).map(t => (
                                    <span key={t} className="rounded" style={{ fontSize: 10, padding: '1px 5px', background: 'var(--bg-muted)', color: 'var(--fg2)' }}>{t}</span>
                                  ))}
                                </div>
                              </div>
                            </div>
                          ) : (
                            <div className="break-words" style={{ lineHeight: 1.4 }}>{text}</div>
                          )}
                        </div>
                      </li>
                    ))}
                  </ul>
                  <div className="border-t mt-3 pt-3" style={{ borderColor: 'var(--border)' }}>
                    <div className="flex gap-1 mb-2">
                      {['note', 'photo', 'voice'].map((t, i) => (
                        <div key={t} className="flex-1 text-center rounded border" style={{
                          fontSize: 10, padding: '4px 6px', fontWeight: 500, textTransform: 'uppercase', letterSpacing: '0.05em',
                          background: i === 0 ? 'var(--fg1)' : 'var(--bg1)',
                          color: i === 0 ? 'var(--bg1)' : 'var(--fg2)',
                          borderColor: i === 0 ? 'var(--fg1)' : 'var(--border)',
                        }}>{t}</div>
                      ))}
                    </div>
                    <div className="card-flat" style={{ height: 54, padding: 8, fontSize: 11, color: 'var(--fg2)' }}>Typed field note…</div>
                    <button className="btn btn-primary w-full mt-2" style={{ height: 30, fontSize: 12 }}>
                      <Icon name="Plus" size={12} /> Add input
                    </button>
                  </div>
                </div>
              </div>

              {/* Structured log column */}
              <div className="card">
                <div className="p-5 space-y-4">
                  <div className="flex items-center justify-between">
                    <div className="flex items-center gap-2">
                      <div className="text-[13px] font-semibold">Structured log</div>
                      <span className="rounded" style={{ fontSize: 10, fontWeight: 500, textTransform: 'uppercase', padding: '2px 6px', background: 'var(--brand-tint)', color: 'var(--brand)' }}>Draft</span>
                      <span className="text-[10px]" style={{ color: 'var(--fg2)' }}>(draft history available)</span>
                    </div>
                    <span style={{ fontSize: 10, color: 'var(--fg2)' }}>assistant · 8s ago</span>
                  </div>

                  <div>
                    <div style={{ fontSize: 10.5, fontWeight: 600, textTransform: 'uppercase', letterSpacing: '0.06em', color: 'var(--fg2)', marginBottom: 3 }}>Weather</div>
                    <div className="text-[13px]">62°F · partly cloudy · wind 8 mph NW</div>
                  </div>

                  <div>
                    <div style={{ fontSize: 10.5, fontWeight: 600, textTransform: 'uppercase', letterSpacing: '0.06em', color: 'var(--fg2)', marginBottom: 4 }}>Crews</div>
                    <div className="flex flex-wrap gap-1.5">
                      {crews.map(([role, count]) => (
                        <span key={role} className="rounded" style={{ fontSize: 12, padding: '2px 8px', background: 'var(--bg-muted)', color: 'var(--fg1)' }}>
                          {count} × {role}
                        </span>
                      ))}
                    </div>
                  </div>

                  <div>
                    <div style={{ fontSize: 10.5, fontWeight: 600, textTransform: 'uppercase', letterSpacing: '0.06em', color: 'var(--fg2)', marginBottom: 3 }}>Work completed</div>
                    <div className="text-[13px]" style={{ whiteSpace: 'pre-wrap', lineHeight: 1.5 }}>
                      Level 4 rough-in reached 80% on the east span. East stair guardrail installed and signed off. Grid B–D drywall prep complete — mud coat scheduled Tue AM.
                    </div>
                  </div>

                  <div>
                    <div style={{ fontSize: 10.5, fontWeight: 600, textTransform: 'uppercase', letterSpacing: '0.06em', color: 'var(--fg2)', marginBottom: 3 }}>Issues</div>
                    <div className="text-[13px]" style={{ whiteSpace: 'pre-wrap', lineHeight: 1.5 }}>
                      Concrete pour pushed from Mon → Wed. Truck #2 rerouted to MT-019. RFI #214 opened on beam flange spec — blocking plumbing valve install.
                    </div>
                  </div>

                  <div>
                    <div style={{ fontSize: 10.5, fontWeight: 600, textTransform: 'uppercase', letterSpacing: '0.06em', color: 'var(--fg2)', marginBottom: 3 }}>Notes</div>
                    <div className="text-[13px] italic" style={{ color: 'var(--fg2)' }}>— empty —</div>
                  </div>

                  <div className="pt-3 border-t flex items-center justify-between" style={{ borderColor: 'var(--border)' }}>
                    <div className="text-[11px]" style={{ color: 'var(--fg2)' }}>Finalizing locks the log. This cannot be reversed from the UI.</div>
                    <button className="btn btn-primary" style={{ height: 30, padding: '0 12px', fontSize: 12 }}>
                      <Icon name="Lock" size={12} /> Finalize
                    </button>
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </AppFrame>
  );
}

// Background agents inbox mock — list of scheduled-agent runs with
// severity + "why you got this" provenance. Read-only feature under build.
function BackgroundInboxMock() {
  const runs = [
    { title: 'Weekly project digest', scope: 'Harbor North Tower Phase 2', sev: 'Medium', when: 'Mon 08:02', summary: 'One milestone slipping — Level 3 MEP rough-in moved +4 days. Three RFIs aged past SLA.', unread: true },
    { title: 'Daily at-risk scan', scope: 'Tenant-wide · 12 projects', sev: 'High', when: 'Today 07:00', summary: 'Ridgefield — concrete pour blocked by missing submittal approval. Ortega Arch. hasn\u2019t responded in 9 days.', unread: true },
    { title: 'Open RFI aging', scope: 'Cascade Subs · Cottonwood', sev: 'Low', when: 'Fri 09:00', summary: '2 RFIs open >7 days; both within typical review window.', unread: false },
    { title: 'Safety photo digest', scope: 'Pacific Forge Warehouse', sev: 'Low', when: 'Mon 09:00', summary: 'No PPE issues flagged this week. 14 photos reviewed.', unread: false },
  ];
  const sevColor = { High: 'var(--danger)', Medium: 'var(--warning-fg, #b26c00)', Low: 'var(--fg2)' };
  return (
    <AppFrame url="/inbox">
      <div className="p-5">
        <div className="flex items-center justify-between mb-4">
          <div>
            <div className="text-[15px] font-semibold">Inbox · background agents</div>
            <div className="text-[11px]" style={{ color: 'var(--fg2)' }}>4 runs · 2 unread · default email gate: Medium</div>
          </div>
          <div className="flex gap-2">
            <Badge tone="success">Active</Badge>
            <Badge>2,500 cr / mo</Badge>
          </div>
        </div>
        <div className="card overflow-hidden">
          <ul className="divide-y-hairline">
            {runs.map((r, i) => (
              <li key={i} className="px-4 py-3.5 flex items-start gap-3" style={{ background: r.unread ? 'var(--brand-tint)' : 'transparent', opacity: r.unread ? 1 : 0.92 }}>
                <div className="w-7 h-7 rounded-md grid place-items-center shrink-0 mt-0.5" style={{ background: 'var(--bg)', color: 'var(--brand)', border: '1px solid var(--border)' }}>
                  <Icon name="Clock" size={14} />
                </div>
                <div className="flex-1 min-w-0">
                  <div className="flex items-center gap-2 flex-wrap">
                    <span className="text-[13.5px] font-semibold">{r.title}</span>
                    <span className="text-[11px]" style={{ color: 'var(--fg2)' }}>· {r.scope}</span>
                    <span className="ml-auto text-[11px] font-mono" style={{ color: 'var(--fg2)' }}>{r.when}</span>
                  </div>
                  <div className="text-[12.5px] mt-1" style={{ color: 'var(--fg2)' }}>{r.summary}</div>
                  <div className="mt-2 flex items-center gap-2 text-[11px]" style={{ color: 'var(--fg2)' }}>
                    <span style={{ width: 6, height: 6, borderRadius: 999, background: sevColor[r.sev] }} />
                    <span style={{ color: sevColor[r.sev], fontWeight: 600 }}>{r.sev}</span>
                    <span>·</span>
                    <span>Why you got this</span>
                    <Icon name="ChevronRight" size={11} />
                  </div>
                </div>
              </li>
            ))}
          </ul>
        </div>
        <div className="mt-3 card p-3 text-[11.5px]" style={{ color: 'var(--fg2)', background: 'var(--bg-muted)' }}>
          <div className="flex items-center gap-2 mb-1 font-semibold" style={{ color: 'var(--fg1)' }}>
            <Icon name="Info" size={12} /> Why you got this — Weekly project digest
          </div>
          Data window: Apr 13 → Apr 20 · Sources: 12 daily logs, 34 photos, 6 RFIs, 3 decisions · Severity scored Medium because one milestone slipped past its target
        </div>
      </div>
    </AppFrame>
  );
}

// Magic-link review mock — the external-reviewer view an architect or
// engineer sees when answering an RFI via email. No login; scoped token.
function MagicLinkMock() {
  return (
    <AppFrame url="/rfi/review?t=•••">
      <div className="p-6" style={{ background: 'var(--bg)' }}>
        <div className="flex items-center justify-between mb-5 pb-4 border-b" style={{ borderColor: 'var(--border)' }}>
          <div className="flex items-center gap-2">
            <div className="w-7 h-7 rounded-md grid place-items-center" style={{ background: 'var(--brand)', color: '#fff' }}>
              <Icon name="Flag" size={14} />
            </div>
            <div>
              <div className="text-[13px] font-semibold">RFI-0147 · Review request</div>
              <div className="text-[11px]" style={{ color: 'var(--fg2)' }}>From Ridgefield GC · Harbor North Tower</div>
            </div>
          </div>
          <Badge tone="brand">No login required</Badge>
        </div>
        <div className="mb-4">
          <div className="text-[11px] uppercase tracking-wider font-semibold mb-1.5" style={{ color: 'var(--fg2)' }}>Subject</div>
          <div className="text-[14.5px] font-semibold">Clarification on window head detail at Grid C-7</div>
        </div>
        <div className="mb-4">
          <div className="text-[11px] uppercase tracking-wider font-semibold mb-1.5" style={{ color: 'var(--fg2)' }}>Question</div>
          <div className="text-[13px] leading-relaxed" style={{ color: 'var(--fg1)' }}>
            Sheet A-401 shows a 2½&quot; steel angle at the head; section 08 11 13 calls for extruded aluminum. Which controls? We&rsquo;re staging for framing Thursday.
          </div>
        </div>
        <div className="grid grid-cols-3 gap-2 mb-4">
          <div className="card p-2.5 text-center">
            <Icon name="Image" size={14} />
            <div className="text-[10.5px] mt-1 font-semibold">Sheet A-401</div>
            <div className="text-[10px]" style={{ color: 'var(--fg2)' }}>detail 3</div>
          </div>
          <div className="card p-2.5 text-center">
            <Icon name="FileText" size={14} />
            <div className="text-[10.5px] mt-1 font-semibold">Spec 08 11 13</div>
            <div className="text-[10px]" style={{ color: 'var(--fg2)' }}>2.1 A</div>
          </div>
          <div className="card p-2.5 text-center">
            <Icon name="Camera" size={14} />
            <div className="text-[10.5px] mt-1 font-semibold">Field photos</div>
            <div className="text-[10px]" style={{ color: 'var(--fg2)' }}>2 attached</div>
          </div>
        </div>
        <div>
          <div className="text-[11px] uppercase tracking-wider font-semibold mb-1.5" style={{ color: 'var(--fg2)' }}>Your response</div>
          <div className="card p-3" style={{ background: 'var(--bg-muted)' }}>
            <div className="text-[12.5px]" style={{ color: 'var(--fg2)' }}>Type your answer here. The reply posts back to Ridgefield&rsquo;s SyncBuild automatically.</div>
          </div>
          <div className="mt-3 flex items-center gap-2">
            <Button size="sm" icon="Send">Send reply</Button>
            <Button variant="ghost" size="sm">Request more info</Button>
            <span className="ml-auto text-[11px] flex items-center gap-1" style={{ color: 'var(--fg2)' }}>
              <Icon name="Lock" size={10} /> Link expires in 7 days
            </span>
          </div>
        </div>
      </div>
    </AppFrame>
  );
}

Object.assign(window, { AppFrame, MiniSidebar, AssistantMock, ProjectHomeMock, CreditLedgerMock, PhotoGalleryMock, TrustLayerMock, PhotoPlaceholder, CommandBarStandalone, DailyLogMock, BackgroundInboxMock, MagicLinkMock });