// Grants and Outreach dossier mockups — same dashboard chrome as DashMock, different content
const DashChrome = ({ activeNav, crumb, children }) => (
  <div className="exo-dash" style={{ gridTemplateColumns: '168px 1fr', gridTemplateRows: '40px 1fr' }}>
    <div className="exo-dash-tb">
      <div className="exo-dash-tb-dot" style={{ background: '#ff5f57' }}></div>
      <div className="exo-dash-tb-dot" style={{ background: '#febc2e' }}></div>
      <div className="exo-dash-tb-dot" style={{ background: '#28c840' }}></div>
      <div className="exo-dash-tb-crumb">{crumb}</div>
      <div className="exo-dash-tb-right">
        <span style={{ display: 'inline-flex', alignItems: 'center', gap: 5 }}><span style={{ width: 6, height: 6, borderRadius: 50, background: '#34c759' }}></span>local · 192.168.1.42</span>
        <span className="exo-dash-tb-pill">Run</span>
      </div>
    </div>
    <aside className="exo-dash-sb">
      <div className="exo-dash-sb-brand">
        <div className="exo-dash-sb-mark"></div>
        <div className="exo-dash-sb-name">exoteam</div>
      </div>
      <div className="exo-dash-sb-label">Overview</div>
      {[['Inbox','6'],['Chat',null],['Agents','3']].map(([n,c]) => (
        <div key={n} className={`exo-dash-sb-item ${activeNav === n ? 'active' : ''}`}>
          <span className="exo-dash-sb-item-icon">{activeNav === n ? '◆' : '◇'}</span>
          <span>{n}</span>
          {c && <span className="exo-dash-sb-count">{c}</span>}
        </div>
      ))}
      <div className="exo-dash-sb-label">Work</div>
      {[['Grants','12'],['Outreach',null],['Proposals','4'],['Contacts',null]].map(([n,c]) => (
        <div key={n} className={`exo-dash-sb-item ${activeNav === n ? 'active' : ''}`}>
          <span className="exo-dash-sb-item-icon">{activeNav === n ? '◆' : '◇'}</span>
          <span>{n}</span>
          {c && <span className="exo-dash-sb-count">{c}</span>}
        </div>
      ))}
    </aside>
    {children}
  </div>
);

// ── Grants page mock ──
const GRANTS = [
  { call: 'Horizon Europe · CCI-2026-04', funder: 'European Commission', amt: '€2.4M', deadline: '12 Jun', fit: 0.71, status: 'pursuing' },
  { call: 'AHRC · Practice Research',     funder: 'UK Research & Innovation', amt: '£180K', deadline: '04 Jul', fit: 0.84, status: 'drafting' },
  { call: 'Creative Europe · Platforms',  funder: 'EACEA',          amt: '€1.1M', deadline: '15 May', fit: 0.42, status: 'awareness' },
  { call: 'Mellon · Public Knowledge',    funder: 'Mellon Foundation', amt: '$600K', deadline: '01 Aug', fit: 0.78, status: 'pursuing' },
  { call: 'Wellcome · Discovery',         funder: 'Wellcome Trust',   amt: '£950K', deadline: '22 Sep', fit: 0.65, status: 'awareness' },
];

const GrantsMock = () => (
  <DashChrome activeNav="Grants" crumb={<>Grants / <b>Funding radar</b></>}>
    <div style={{ display: 'flex', flexDirection: 'column', minWidth: 0 }}>
      <div style={{ padding: '12px 16px', borderBottom: '1px solid rgba(0,0,0,0.06)', display: 'flex', alignItems: 'center', gap: 12 }}>
        <div style={{ fontSize: 13, fontWeight: 600, letterSpacing: -0.015 }}>Funding radar</div>
        <div style={{ fontSize: 10.5, color: '#86868b' }}>23 calls watched · 5 pursuing · last sweep 04:12</div>
        <div style={{ marginLeft: 'auto', display: 'flex', gap: 6 }}>
          <div style={{ fontSize: 10, padding: '3px 10px', borderRadius: 999, background: 'rgba(0,0,0,0.05)' }}>Fit ≥ 0.6</div>
          <div style={{ fontSize: 10, padding: '3px 10px', borderRadius: 999, background: 'rgba(0,0,0,0.05)' }}>Sort by deadline</div>
        </div>
      </div>
      <div style={{ display: 'grid', gridTemplateColumns: '1fr 0.8fr', flex: 1, minWidth: 0 }}>
        {/* table */}
        <div style={{ borderRight: '1px solid rgba(0,0,0,0.06)', overflow: 'hidden' }}>
          <div style={{ display: 'grid', gridTemplateColumns: '1.6fr 0.7fr 0.7fr 0.8fr', padding: '8px 14px', fontSize: 9.5, fontWeight: 600, letterSpacing: 0.04, color: '#86868b', textTransform: 'uppercase', borderBottom: '1px solid rgba(0,0,0,0.06)' }}>
            <div>Call</div><div>Amount</div><div>Deadline</div><div>Fit</div>
          </div>
          {GRANTS.map((g, i) => (
            <div key={i} style={{ display: 'grid', gridTemplateColumns: '1.6fr 0.7fr 0.7fr 0.8fr', padding: '10px 14px', fontSize: 11, alignItems: 'center', background: i === 0 ? 'rgba(0,122,255,0.07)' : 'transparent', borderBottom: '1px solid rgba(0,0,0,0.04)' }}>
              <div>
                <div style={{ fontWeight: 600, color: '#1d1d1f' }}>{g.call}</div>
                <div style={{ fontSize: 9.5, color: '#86868b', marginTop: 2 }}>{g.funder}</div>
              </div>
              <div style={{ fontFamily: 'ui-monospace, monospace', fontWeight: 500 }}>{g.amt}</div>
              <div style={{ fontFamily: 'ui-monospace, monospace' }}>{g.deadline}</div>
              <div style={{ display: 'flex', alignItems: 'center', gap: 6 }}>
                <div style={{ width: 40, height: 4, background: 'rgba(0,0,0,0.06)', borderRadius: 999, overflow: 'hidden' }}>
                  <div style={{ width: `${g.fit*100}%`, height: '100%', background: g.fit > 0.7 ? '#34c759' : g.fit > 0.5 ? '#ff9500' : '#86868b', borderRadius: 999 }}></div>
                </div>
                <span style={{ fontFamily: 'ui-monospace, monospace', fontSize: 10 }}>{g.fit.toFixed(2)}</span>
              </div>
            </div>
          ))}
        </div>
        {/* detail */}
        <div style={{ padding: '12px 16px', minWidth: 0, overflow: 'hidden' }}>
          <div style={{ fontSize: 9.5, color: '#86868b', textTransform: 'uppercase', letterSpacing: 0.04, fontWeight: 600 }}>EU · €2.4M · DEADLINE 12 JUN</div>
          <div style={{ fontSize: 14, fontWeight: 600, marginTop: 4, letterSpacing: -0.015 }}>Horizon Europe — CCI-2026-04</div>
          <div style={{ fontSize: 10.5, color: '#6e6e73', marginTop: 6, lineHeight: 1.5 }}>Cultural &amp; Creative Industries — cross-border research consortia. Match: practice-based research, cultural data infrastructure.</div>
          <div style={{ marginTop: 10, padding: '8px 10px', background: 'rgba(0,122,255,0.06)', borderRadius: 10 }}>
            <div style={{ fontSize: 9, fontWeight: 700, color: '#007aff', textTransform: 'uppercase', letterSpacing: 0.04 }}>✦ Drafted outline</div>
            <div style={{ fontSize: 10.5, marginTop: 5, lineHeight: 1.5, color: '#1d1d1f' }}>
              <b>Work package 1</b> — Practice research methods (Lead: Goldsmiths)<br/>
              <b>Work package 2</b> — Cultural data platform (Lead: <em>you</em>)<br/>
              <b>Work package 3</b> — Public engagement (Lead: Tate)
            </div>
          </div>
          <div style={{ marginTop: 10, fontSize: 10.5, color: '#1d1d1f' }}>
            <div style={{ fontSize: 9, fontWeight: 700, color: '#86868b', textTransform: 'uppercase', letterSpacing: 0.04, marginBottom: 5 }}>Why fit 0.71</div>
            <div style={{ display: 'flex', flexDirection: 'column', gap: 3, fontSize: 10 }}>
              <div>✓ Practice-based research framework matches</div>
              <div>✓ Past Tate &amp; Goldsmiths collaborations</div>
              <div>✓ Budget envelope within typical award size</div>
              <div style={{ color: '#86868b' }}>~ Need 1–2 EU partners for consortium</div>
            </div>
          </div>
          <div style={{ display: 'flex', gap: 5, marginTop: 12 }}>
            <button className="exo-dash-draft-btn">Start proposal</button>
            <button className="exo-dash-draft-btn gh">Find partners</button>
          </div>
        </div>
      </div>
    </div>
  </DashChrome>
);

// ── Outreach dossier mock ──
const DossierMock = () => (
  <DashChrome activeNav="Outreach" crumb={<>Outreach / Dossier · <b>Helen Ng</b></>}>
    <div style={{ display: 'flex', flexDirection: 'column', minWidth: 0 }}>
      <div style={{ padding: '14px 18px', borderBottom: '1px solid rgba(0,0,0,0.06)', display: 'flex', alignItems: 'flex-start', gap: 12 }}>
        <div style={{ width: 44, height: 44, borderRadius: '50%', background: 'linear-gradient(135deg, #7c69e0, #e07ab0)', display: 'flex', alignItems: 'center', justifyContent: 'center', color: '#fff', fontWeight: 600, fontSize: 14, flexShrink: 0 }}>HN</div>
        <div style={{ minWidth: 0 }}>
          <div style={{ fontSize: 14, fontWeight: 600, letterSpacing: -0.015 }}>Helen Ng</div>
          <div style={{ fontSize: 10.5, color: '#6e6e73' }}>Head of Digital Programmes · Tate Modern · London</div>
          <div style={{ display: 'flex', gap: 5, marginTop: 6 }}>
            <span style={{ fontSize: 9.5, padding: '2px 8px', borderRadius: 999, background: 'rgba(52,199,89,0.14)', color: '#1c8c45', fontWeight: 500 }}>● warm</span>
            <span style={{ fontSize: 9.5, padding: '2px 8px', borderRadius: 999, background: 'rgba(0,0,0,0.06)' }}>Tier 1 · museum</span>
            <span style={{ fontSize: 9.5, padding: '2px 8px', borderRadius: 999, background: 'rgba(0,0,0,0.06)' }}>3 prior touches</span>
          </div>
        </div>
        <div style={{ marginLeft: 'auto', display: 'flex', gap: 5 }}>
          <button className="exo-dash-draft-btn gh">Open thread</button>
          <button className="exo-dash-draft-btn">Send sequence</button>
        </div>
      </div>

      <div style={{ display: 'grid', gridTemplateColumns: '1fr 0.85fr', flex: 1, minWidth: 0, overflow: 'hidden' }}>
        <div style={{ padding: '14px 18px', borderRight: '1px solid rgba(0,0,0,0.06)', overflow: 'hidden' }}>
          <div style={{ fontSize: 9.5, fontWeight: 700, color: '#86868b', textTransform: 'uppercase', letterSpacing: 0.05 }}>Brief</div>
          <div style={{ fontSize: 11, lineHeight: 1.55, color: '#1d1d1f', marginTop: 6 }}>
            Helen leads Tate's digital strategy since 2022 — previously V&amp;A, RCA fellow. Interested in <b>runtime licensing for museums</b> (mentioned Mar 14 thread). Has budget authority up to £80K. Decision cycle ~6 weeks.
          </div>

          <div style={{ fontSize: 9.5, fontWeight: 700, color: '#86868b', textTransform: 'uppercase', letterSpacing: 0.05, marginTop: 14 }}>Shared context</div>
          <div style={{ fontSize: 10.5, color: '#1d1d1f', marginTop: 6, display: 'flex', flexDirection: 'column', gap: 4 }}>
            <div>· 2 mutual connections (Andrew Lister, Juliet Sprake)</div>
            <div>· Both spoke at <em>Critical Costume 2024</em></div>
            <div>· Tate aligns with runtime product line</div>
          </div>

          <div style={{ fontSize: 9.5, fontWeight: 700, color: '#86868b', textTransform: 'uppercase', letterSpacing: 0.05, marginTop: 14 }}>Last 5 touches</div>
          <div style={{ fontSize: 10, color: '#1d1d1f', marginTop: 6, display: 'flex', flexDirection: 'column', gap: 4 }}>
            <div>· <span style={{ fontFamily: 'ui-monospace, monospace', color: '#86868b' }}>Mar 14</span> — "Re: residency dates" <span style={{ color: '#86868b' }}>· replied 2d</span></div>
            <div>· <span style={{ fontFamily: 'ui-monospace, monospace', color: '#86868b' }}>Feb 02</span> — "Critical Costume programme draft" <span style={{ color: '#86868b' }}>· replied same day</span></div>
            <div>· <span style={{ fontFamily: 'ui-monospace, monospace', color: '#86868b' }}>Jan 19</span> — "Hello again" <span style={{ color: '#86868b' }}>· replied 3h</span></div>
          </div>
        </div>

        <div style={{ padding: '14px 18px', minWidth: 0, overflow: 'hidden' }}>
          <div style={{ fontSize: 9.5, fontWeight: 700, color: '#86868b', textTransform: 'uppercase', letterSpacing: 0.05 }}>Sequence · Tate runtime · Q2</div>
          <div style={{ fontSize: 10.5, color: '#6e6e73', marginTop: 4 }}>3 of 5 sent · last touch 09:42 today</div>

          <div style={{ marginTop: 12, display: 'flex', flexDirection: 'column', gap: 8 }}>
            {[
              ['1', 'Re-introduction', 'Mar 14', 'replied', '#34c759'],
              ['2', 'Value-add: runtime one-pager', 'Apr 02', 'replied', '#34c759'],
              ['3', 'Friday meeting proposal', '09:42', 'drafted', '#007aff'],
              ['4', 'Post-meeting recap (template)', '— pending', 'queued', '#86868b'],
              ['5', 'Pricing & timeline (template)', '— pending', 'queued', '#86868b'],
            ].map(([n, title, when, state, color]) => (
              <div key={n} style={{ display: 'flex', alignItems: 'center', gap: 10, padding: '8px 10px', borderRadius: 10, background: state === 'drafted' ? 'rgba(0,122,255,0.06)' : 'transparent', border: state === 'queued' ? '1px dashed rgba(0,0,0,0.10)' : '1px solid transparent' }}>
                <div style={{ width: 18, height: 18, borderRadius: '50%', background: color, color: '#fff', display: 'flex', alignItems: 'center', justifyContent: 'center', fontSize: 9, fontWeight: 700, flexShrink: 0 }}>{n}</div>
                <div style={{ minWidth: 0, flex: 1 }}>
                  <div style={{ fontSize: 11, fontWeight: 500, color: '#1d1d1f' }}>{title}</div>
                  <div style={{ fontSize: 9.5, color: '#86868b', marginTop: 1 }}>{when} · {state}</div>
                </div>
                {state === 'drafted' && <span style={{ fontSize: 9, padding: '2px 8px', borderRadius: 999, background: '#007aff', color: '#fff', fontWeight: 600 }}>Ready</span>}
              </div>
            ))}
          </div>
        </div>
      </div>
    </div>
  </DashChrome>
);

window.GrantsMock = GrantsMock;
window.DossierMock = DossierMock;