// Interactive dashboard mock — sidebar nav switches the main view
// Used in marketing site to show the product structure.

const { useState } = React;

const ExoMark = ({ size = 18 }) => (
  <svg width={size} height={size} viewBox="0 0 200 200" style={{ flexShrink: 0 }}>
    <circle cx="100" cy="62"     r="28" fill="#5b8def" fillOpacity="0.92" />
    <circle cx="136.14" cy="88.257" r="28" fill="#7c69e0" fillOpacity="0.92" />
    <circle cx="122.336" cy="130.743" r="28" fill="#e07ab0" fillOpacity="0.92" />
    <circle cx="77.664"  cy="130.743" r="28" fill="#e89e5b" fillOpacity="0.92" />
    <circle cx="63.86"   cy="88.257"  r="28" fill="#5db98a" fillOpacity="0.92" />
  </svg>
);

// `LensDot` / `.exo-ov-lens` are pre-R03 identifiers kept as-is in this
// marketing mockup because (a) the dot is purely visual, (b) the CSS
// class is coupled to `site-shared.css`, and (c) this file is not the
// signed-in dashboard surface — that lives in `dashboard.jsx`. Renaming
// is cosmetic and deferred to a future cleanup pass.
const LensDot = ({ color }) => <span className="exo-ov-lens" style={{ background: color }} />;

const Radial = ({ value, color = '#34c759' }) => {
  const r = 9, c = 2 * Math.PI * r;
  return (
    <svg width="22" height="22" viewBox="0 0 22 22" style={{ flexShrink: 0 }}>
      <circle cx="11" cy="11" r={r} stroke="rgba(0,0,0,0.08)" strokeWidth="2.5" fill="none" />
      <circle cx="11" cy="11" r={r} stroke={color} strokeWidth="2.5" fill="none"
        strokeDasharray={c} strokeDashoffset={c * (1 - value)} strokeLinecap="round"
        transform="rotate(-90 11 11)" />
    </svg>
  );
};

const OvCard = ({ icon, title, count, open, onOpen, children }) => (
  <div className="exo-ov-card">
    <div className="exo-ov-card-h">
      <span className="exo-ov-card-icon">{icon}</span>
      <span className="exo-ov-card-title">{title}</span>
      {count != null && <span className="exo-ov-card-count">{count}</span>}
      {open && <span className="exo-ov-card-open" onClick={onOpen} style={{ cursor: 'pointer' }}>Open →</span>}
    </div>
    <div className="exo-ov-card-body">{children}</div>
  </div>
);

const OvRow = ({ left, title, sub, right }) => (
  <div className="exo-ov-row">
    {left && <span className="exo-ov-row-left">{left}</span>}
    <span className="exo-ov-row-main">
      <span className="exo-ov-row-title">{title}</span>
      {sub && <span className="exo-ov-row-sub">{sub}</span>}
    </span>
    {right && <span className="exo-ov-row-right">{right}</span>}
  </div>
);

// ── Sidebar item config ──────────────────────────────────
const ALWAYS_ON = [
  { id: 'overview', label: 'Overview', icon: '◆' },
  { id: 'inbox',    label: 'Inbox',    icon: '◇', count: 3 },
  { id: 'contacts', label: 'Contacts', icon: '◇', count: 235 },
];
const SIDEBAR_BUNDLES = [
  { id: 'fundraising', label: 'Fundraising', color: '#5b8def' },
  { id: 'events',      label: 'Events',      color: '#7c69e0', count: 7 },
  { id: 'sales',       label: 'Sales',       color: '#5db98a' },
  { id: 'grants',      label: 'Grants',      color: '#e07ab0', count: 7 },
];

const CRUMBS = {
  overview: 'Overview',
  inbox: 'Inbox',
  chat: 'AI Chat',
  contacts: 'Contacts',
  fundraising: 'Fundraising',
  events: 'Events',
  sales: 'Sales',
  grants: 'Grants',
};

// ── Views ────────────────────────────────────────────────

const ViewOverview = ({ go }) => (
  <div className="exo-dash-ov-main">
    {/* Top strip — Today */}
    <div className="exo-dash-ov-hero">
      <div className="exo-dash-ov-greeting">
        Good morning, Max
        <span className="exo-dash-ov-meta"> · Monday 11 May</span>
      </div>
    </div>

    {/* Needs you now — hero card */}
    <div className="exo-ov-card" style={{ marginBottom: 10, borderColor: 'rgba(255,59,48,0.18)', background: 'linear-gradient(180deg, rgba(255,59,48,0.025), #fff 40%)' }}>
      <div className="exo-ov-card-h">
        <span className="exo-ov-card-icon" style={{ color: '#ff3b30' }}>!</span>
        <span className="exo-ov-card-title">Needs you now</span>
        <span className="exo-ov-card-count">3</span>
      </div>
      <div className="exo-ov-card-body">
        <OvRow left={<LensDot color="#ff3b30" />}
          title={<>Helen Ng <span className="exo-ov-row-muted">· Friday hold expires</span></>}
          sub="Draft ready · approve to send"
          right={<span className="exo-ov-pill bad">4h</span>} />
        <OvRow left={<LensDot color="#ff9500" />}
          title={<>MCP grant <span className="exo-ov-row-muted">· UKRI · £180k</span></>}
          sub="Exec summary 80% · needs sign-off on scope"
          right={<span className="exo-ov-pill warn">8d</span>} />
        <OvRow left={<LensDot color="#5b8def" />}
          title={<>Cyan Ventures <span className="exo-ov-row-muted">· Sara expecting Q2 metrics</span></>}
          sub="Last touch 9d · draft ready"
          right={<span className="exo-ov-pill warn">9d</span>} />
      </div>
    </div>

    {/* Today's calendar */}
    <div className="exo-ov-card" style={{ marginBottom: 10 }}>
      <div className="exo-ov-card-h">
        <span className="exo-ov-card-icon">▦</span>
        <span className="exo-ov-card-title">Today &amp; tomorrow</span>
        <span className="exo-ov-card-open">Open →</span>
      </div>
      <div className="exo-ov-card-body" style={{ display: 'flex', flexDirection: 'column', gap: 4 }}>
        <div style={{ display: 'flex', gap: 10, alignItems: 'center', fontSize: 10.5 }}>
          <span style={{ width: 44, color: '#86868b', fontVariantNumeric: 'tabular-nums' }}>11:00</span>
          <span style={{ width: 3, height: 18, borderRadius: 2, background: '#5b8def' }}></span>
          <span style={{ flex: 1, color: '#1d1d1f' }}>Standup · Yana &amp; Aleks</span>
          <span style={{ fontSize: 9.5, color: '#a1a1a6' }}>30m</span>
        </div>
        <div style={{ display: 'flex', gap: 10, alignItems: 'center', fontSize: 10.5 }}>
          <span style={{ width: 44, color: '#86868b', fontVariantNumeric: 'tabular-nums' }}>14:00</span>
          <span style={{ width: 3, height: 18, borderRadius: 2, background: '#7c69e0' }}></span>
          <span style={{ flex: 1, color: '#1d1d1f' }}>Donatella Barbieri · Critical Costume</span>
          <span style={{ fontSize: 9.5, color: '#a1a1a6' }}>45m</span>
        </div>
        <div style={{ display: 'flex', gap: 10, alignItems: 'center', fontSize: 10.5, opacity: 0.65, paddingTop: 4, borderTop: '1px solid rgba(0,0,0,0.04)' }}>
          <span style={{ width: 44, color: '#86868b', fontVariantNumeric: 'tabular-nums' }}>Tue</span>
          <span style={{ width: 3, height: 18, borderRadius: 2, background: '#e07ab0' }}></span>
          <span style={{ flex: 1, color: '#1d1d1f' }}>Andrew Lister · residency dates</span>
          <span style={{ fontSize: 9.5, color: '#a1a1a6' }}>60m</span>
        </div>
        <div style={{ display: 'flex', gap: 10, alignItems: 'center', fontSize: 10.5, opacity: 0.65 }}>
          <span style={{ width: 44, color: '#86868b', fontVariantNumeric: 'tabular-nums' }}>Wed</span>
          <span style={{ width: 3, height: 18, borderRadius: 2, background: 'transparent', border: '1.5px dashed #5b8def' }}></span>
          <span style={{ flex: 1, color: '#1d1d1f' }}>Helen Ng · runtime licensing <span style={{ fontSize: 9.5, color: '#5b8def', marginLeft: 4 }}>· held by Exoteam</span></span>
          <span style={{ fontSize: 9.5, color: '#a1a1a6' }}>45m</span>
        </div>
      </div>
    </div>

    {/* Bundle previews — secondary */}
    <div className="exo-dash-ov-grid">
      <OvCard icon="✎" title="Drafts" count={3} open onOpen={() => go('inbox')}>
        <OvRow left={<LensDot color="#5b8def" />}
          title={<>Helen Ng <span className="exo-ov-row-muted">· reply ready</span></>} />
        <OvRow left={<LensDot color="#e89e5b" />}
          title={<>Donatella Barbieri <span className="exo-ov-row-muted">· reply ready</span></>} />
        <OvRow left={<LensDot color="#5b8def" />}
          title={<>Andrew Lister <span className="exo-ov-row-muted">· sequence #2</span></>} />
      </OvCard>

      <OvCard icon="◎" title="Events" count={4} open onOpen={() => go('events')}>
        <OvRow left={<LensDot color="#7c69e0" />}
          title={<>Ars Electronica <span className="exo-ov-row-muted">· decision 14 Jun</span></>} />
        <OvRow left={<LensDot color="#7c69e0" />}
          title={<>STRP Festival <span className="exo-ov-row-muted">· new · fit 0.78</span></>} />
      </OvCard>

      <OvCard icon="◷" title="Fundraising" count={2} open onOpen={() => go('fundraising')}>
        <OvRow left={<Radial value={0.65} color="#5b8def" />}
          title={<>Cyan Ventures <span className="exo-ov-row-muted">· seed-led</span></>} />
        <OvRow left={<Radial value={0.42} color="#5b8def" />}
          title={<>Project A <span className="exo-ov-row-muted">· solo GP</span></>} />
      </OvCard>

      <OvCard icon="⌘" title="Grants" count={7} open onOpen={() => go('grants')}>
        <OvRow left={<Radial value={0.78} color="#34c759" />}
          title={<>MCP · UKRI <span className="exo-ov-row-muted">· £180k</span></>} />
        <OvRow left={<Radial value={0.71} color="#ff9500" />}
          title={<>Innovate UK <span className="exo-ov-row-muted">· £150k</span></>} />
      </OvCard>
    </div>
  </div>
);

// Generic list/detail screen
const ListDetail = ({ rows, detail }) => (
  <div className="exo-dash-main">
    <div className="exo-dash-list">
      {rows.map((r, i) => (
        <div key={i} className={`exo-dash-list-row ${r.sel ? 'sel' : ''}`}>
          <div className="exo-dash-list-row-top">
            <span className="exo-dash-list-row-from">{r.from}</span>
            <span className="exo-dash-list-row-time">{r.time}</span>
          </div>
          {r.sub && <div className="exo-dash-list-row-sub">{r.sub}</div>}
          {r.snip && <div className="exo-dash-list-row-snip">{r.snip}</div>}
          {r.chip && <span className="exo-dash-list-chip">{r.chip}</span>}
        </div>
      ))}
    </div>
    <div className="exo-dash-detail">{detail}</div>
  </div>
);

const ViewInbox = () => (
  <ListDetail
    rows={[
      { from: 'Helen Ng', time: '09:42', sub: 'Meadow runtime licensing', snip: 'Just got back to your note from last week — would love to find a 30 min slot…', sel: true, chip: 'Draft ready' },
      { from: 'Donatella Barbieri', time: '08:18', sub: 'Critical Costume 2027', snip: 'The board has voted through the keynote programme. You\'re in for…' },
      { from: 'Andrew Lister', time: 'Yesterday', sub: 'Re: residency dates', snip: 'Confirmed for the September block. Will send paperwork…' },
      { from: 'Juliet Sprake', time: 'Yesterday', sub: 'Visiting practitioner residency', snip: 'Budget approved for the autumn cohort — could you confirm the…' },
      { from: 'Stedelijk team', time: 'Sat', sub: 'Re: programme submission', snip: 'Filed under "for the 2027 cycle"…' },
    ]}
    detail={
      <>
        <div className="exo-dash-detail-h">Re: Meadow runtime licensing</div>
        <div className="exo-dash-detail-meta">
          <b style={{ color: '#1d1d1f' }}>Helen Ng</b> · helen@tate.org.uk · 09:42
        </div>
        <div className="exo-dash-draft">
          <div style={{ padding: '8px 10px', borderBottom: '1px solid rgba(0,122,255,0.10)' }}>
            <span className="exo-dash-draft-label">✎ Exoteam draft</span>
          </div>
          <div className="exo-dash-draft-body" style={{ padding: '8px 10px' }}>
            Helen, lovely — Friday 14:00 BST works on our side. I'll send a calendar hold with a Tate-facing one-pager on the runtime so we can dive straight in. Want to bring anyone from the digital team?
          </div>
          <div className="exo-dash-draft-foot" style={{ padding: '0 10px 8px' }}>
            <button className="exo-dash-draft-btn">Send</button>
            <button className="exo-dash-draft-btn gh">Schedule</button>
            <button className="exo-dash-draft-btn gh">Regenerate</button>
          </div>
        </div>
      </>
    }
  />
);

const ViewFundraising = () => (
  <ListDetail
    rows={[
      { from: 'Cyan Ventures', time: 'Hot', sub: 'Seed-led · £500k–£2M', snip: 'Met 02 May at the Bermondsey office. Following up with deck and metrics.', sel: true, chip: 'Warm' },
      { from: 'Project A', time: 'Warm', sub: 'Solo GP · £100–250k', snip: 'Sent April update 28 Apr. Awaiting follow-up.' },
      { from: 'Backed VC', time: 'Lead', sub: 'Pre-seed · UK + EU', snip: 'Intro via Juliet last Friday. No meeting yet.' },
      { from: 'Form Capital', time: 'Lead', sub: 'Seed · creative tech', snip: 'Cold inbound 06 May. Drafted polite hold.' },
      { from: 'Konvoy', time: 'Cold', sub: 'Games-adjacent', snip: 'Filed for autumn cycle. Not engaging until v1 ship.' },
    ]}
    detail={
      <>
        <div className="exo-dash-detail-h">Cyan Ventures · Seed-led</div>
        <div className="exo-dash-detail-meta">Partner: Sara Lim · sara@cyan.vc · ticket size £500k–£2M</div>
        <div style={{ marginTop: 10, fontSize: 10.5, color: '#1d1d1f', lineHeight: 1.55 }}>
          <div><b>Last touch</b> · 02 May · in-person meeting, Bermondsey</div>
          <div><b>Next step</b> · share Q2 metrics + Meadow runtime deck</div>
          <div><b>Notes</b> · Sara mentioned they're closing fund III in Q3, so timing is tight. Andrew (warm intro) said she's "pre-conviction but interested".</div>
        </div>
        <div className="exo-dash-draft" style={{ marginTop: 10 }}>
          <div style={{ padding: '8px 10px', borderBottom: '1px solid rgba(0,122,255,0.10)' }}>
            <span className="exo-dash-draft-label">✎ Update email draft</span>
          </div>
          <div className="exo-dash-draft-body" style={{ padding: '8px 10px' }}>
            Sara, following our chat last Friday — attaching the Q2 metrics deck and the Meadow runtime one-pager. Top line: 4× MoM on licensing pipeline, two pilot LOIs signed this month…
          </div>
          <div className="exo-dash-draft-foot" style={{ padding: '0 10px 8px' }}>
            <button className="exo-dash-draft-btn">Send</button>
            <button className="exo-dash-draft-btn gh">Edit</button>
          </div>
        </div>
      </>
    }
  />
);

const ViewEvents = () => (
  <ListDetail
    rows={[
      { from: 'Ars Electronica 2026', time: 'Sep', sub: 'Linz · festival', snip: 'Applied to Theme Symposium track. Awaiting decision by 14 Jun.', sel: true, chip: 'Applied' },
      { from: 'STRP Festival', time: 'Oct', sub: 'Eindhoven · open call', snip: 'Fit 0.78 — strong alignment with Meadow runtime. Scout suggests apply.', chip: 'Interested' },
      { from: 'Sundance New Frontier', time: 'Jan', sub: 'Park City · XR showcase', snip: 'Applied 12 Apr with the Reach piece. Two-stage review.', chip: 'Applied' },
      { from: 'Mutek Montréal', time: 'Aug', sub: 'AV / live performance', snip: 'Scout flagged — programme call closes 30 May.' },
      { from: 'SXSW XR Experience', time: 'Mar', sub: 'Austin · showcase', snip: 'Submitted, awaiting first-round decision.', chip: 'Applied' },
      { from: 'NEW INC residency', time: 'Year', sub: 'New York · year-long', snip: 'Long-shot but high-value. Application opens 01 Jun.' },
    ]}
    detail={
      <>
        <div className="exo-dash-detail-h">Ars Electronica 2026</div>
        <div className="exo-dash-detail-meta">Linz · 04–08 Sep · Theme Symposium track</div>
        <div style={{ marginTop: 10, fontSize: 10.5, color: '#1d1d1f', lineHeight: 1.55 }}>
          <div><b>Status</b> · Applied 18 Apr · decision by 14 Jun</div>
          <div><b>Fit signal</b> · 0.84 — past Untold Garden work shown in 2022, curator-level relationship</div>
          <div><b>Organisers</b> · Veronika Liebl, Christl Baur</div>
        </div>
        <div className="exo-dash-draft" style={{ marginTop: 10 }}>
          <div style={{ padding: '8px 10px', borderBottom: '1px solid rgba(0,122,255,0.10)' }}>
            <span className="exo-dash-draft-label">✎ Follow-up draft · ready 04 Jun</span>
          </div>
          <div className="exo-dash-draft-body" style={{ padding: '8px 10px' }}>
            Veronika, hope the programme curation is going well. A gentle nudge on the Theme Symposium application — happy to share the updated Meadow runtime demo if useful for the committee.
          </div>
          <div className="exo-dash-draft-foot" style={{ padding: '0 10px 8px' }}>
            <button className="exo-dash-draft-btn">Schedule for 04 Jun</button>
            <button className="exo-dash-draft-btn gh">Edit</button>
          </div>
        </div>
      </>
    }
  />
);

const ViewSales = () => (
  <ListDetail
    rows={[
      { from: 'Helen Ng · Tate Modern', time: 'Today', sub: 'Sequence · runtime licensing', snip: 'Touch #2 of 5 · value-add (case study attached)', sel: true, chip: 'Due today' },
      { from: 'V&A digital team', time: '2d', sub: 'Sequence · museum partners', snip: 'Touch #3 · intro pricing.', chip: 'Scheduled' },
      { from: 'BBC R&D', time: '4d', sub: 'Proposal · pilot scope', snip: 'Section drafting 7/12 · pricing within rate-card.', chip: 'Drafting' },
      { from: 'Studio Drift', time: '1w', sub: 'Cold intro · Andrew', snip: 'Awaiting reply since last Tuesday.' },
      { from: 'Random Studio', time: '2w', sub: 'Replied no', snip: 'Filed for 2027 cycle.', chip: 'Filed' },
    ]}
    detail={
      <>
        <div className="exo-dash-detail-h">Sequence · Tate runtime · Q2</div>
        <div className="exo-dash-detail-meta">3 of 5 sent · last touch 09:42 today</div>
        <div style={{ marginTop: 10, display: 'flex', flexDirection: 'column', gap: 6, fontSize: 10.5 }}>
          {[
            { n: 1, label: 'Intro · soft hello', state: 'sent', when: '24 Apr' },
            { n: 2, label: 'Value-add · case study', state: 'sent', when: '02 May' },
            { n: 3, label: 'Slot offer · Friday hold', state: 'sent', when: 'today' },
            { n: 4, label: 'Soft follow-up', state: 'scheduled', when: '14 May' },
            { n: 5, label: 'Polite close', state: 'scheduled', when: '23 May' },
          ].map(s => (
            <div key={s.n} style={{ display: 'flex', alignItems: 'center', gap: 8, padding: '6px 8px', borderRadius: 7, background: s.state === 'sent' ? 'rgba(52,199,89,0.08)' : 'rgba(0,0,0,0.03)' }}>
              <span style={{ width: 16, color: s.state === 'sent' ? '#34c759' : '#a1a1a6', fontFamily: 'ui-monospace, SF Mono, monospace' }}>{s.state === 'sent' ? '✓' : '◷'}</span>
              <span style={{ flex: 1, color: '#1d1d1f' }}>{s.label}</span>
              <span style={{ fontSize: 9.5, color: '#86868b' }}>{s.when}</span>
            </div>
          ))}
        </div>
      </>
    }
  />
);

const ViewGrants = () => (
  <ListDetail
    rows={[
      { from: 'MCP · Connected Public Admin', time: '8d', sub: 'UKRI · £180k', snip: 'Fit 0.78 · drafting executive summary + scope.', sel: true, chip: 'Drafting' },
      { from: 'Innovate UK Venture Builder', time: '11d', sub: 'Innovate UK · £150k', snip: 'Fit 0.71 · consortium needed (warm leads: BBC R&D, Goldsmiths).', chip: 'Pursuing' },
      { from: 'Mellon Public Knowledge', time: '83d', sub: 'Mellon · $600k', snip: 'Fit 0.78 · awareness phase, monitoring partners.', chip: 'Awareness' },
      { from: 'Wellcome Discovery', time: '135d', sub: 'Wellcome · £950k', snip: 'Fit 0.65 · long lead, abstract draft started.', chip: 'Awareness' },
      { from: 'Creative Europe · Platforms', time: '4d', sub: 'EACEA · €1.1M', snip: 'Fit 0.42 — filtered out by scout, awareness only.', chip: 'Filtered' },
      { from: 'AHRC · Practice Research', time: '54d', sub: 'UKRI · £180k', snip: 'Fit 0.84 · partnership confirmed with Goldsmiths.', chip: 'Drafting' },
      { from: 'Horizon Europe CCI-2026-04', time: '32d', sub: 'EU · €2.4M', snip: 'Fit 0.71 · awaiting consortium partner reply.', chip: 'Pursuing' },
    ]}
    detail={
      <>
        <div className="exo-dash-detail-h">MCP · Connected Public Admin</div>
        <div className="exo-dash-detail-meta">UKRI · £180k · deadline 19 May (8d) · fit 0.78</div>
        <div style={{ marginTop: 10, fontSize: 10.5, color: '#1d1d1f', lineHeight: 1.55 }}>
          <div><b>Why it fits</b> · runtime-as-platform framing matches "connected service" rubric; past UKRI grant track record</div>
          <div><b>Sections done</b> · 5 / 12 · exec summary, context, scope, deliverables, timeline</div>
          <div><b>Watch out</b> · no [NEEDS:] markers; 2 AI-tell hits in scope (under review)</div>
        </div>
        <div style={{ marginTop: 10, display: 'grid', gridTemplateColumns: '1fr 1fr', gap: 4 }}>
          {['Exec summary','Context','Scope','Deliverables','Timeline','Team','Pricing','Acceptance','Exclusions','Assumptions','Terms','Next steps'].map((s, i) => (
            <div key={s} style={{ padding: '4px 8px', borderRadius: 6, background: i < 5 ? 'rgba(52,199,89,0.10)' : 'rgba(0,0,0,0.03)', fontSize: 9.5, color: i < 5 ? '#1d1d1f' : '#86868b' }}>
              {i < 5 ? '✓ ' : '◷ '}{s}
            </div>
          ))}
        </div>
      </>
    }
  />
);

const ViewChat = () => (
  <div style={{ padding: '24px 28px', overflow: 'hidden' }}>
    <div style={{ fontSize: 18, fontWeight: 600, letterSpacing: '-0.02em' }}>AI Chat</div>
    <div style={{ fontSize: 11, color: '#86868b', marginTop: 2 }}>Ask anything · across all your bundles</div>
    <div style={{ marginTop: 14, display: 'flex', flexDirection: 'column', gap: 10 }}>
      <div style={{ alignSelf: 'flex-end', background: '#007aff', color: '#fff', padding: '8px 12px', borderRadius: 14, fontSize: 11.5, maxWidth: '70%' }}>
        brief me on the Tate thread and draft a polite hold for the Friday slot
      </div>
      <div style={{ alignSelf: 'flex-start', background: 'rgba(0,0,0,0.04)', padding: '10px 12px', borderRadius: 14, fontSize: 11.5, maxWidth: '85%', lineHeight: 1.5 }}>
        <b>Helen Ng (Tate Modern)</b> has been in conversation about Meadow runtime licensing since 14 Apr. Last touch was 09:42 today proposing Friday 14:00 BST. She's the head of digital experiences — Andrew Lister (Tate) is a mutual contact, both spoke at Critical Costume 2024.
        <div style={{ marginTop: 8, padding: '8px 10px', background: '#fff', borderRadius: 10, border: '1px solid rgba(0,122,255,0.15)' }}>
          <div style={{ fontSize: 9.5, fontWeight: 600, color: '#007aff', textTransform: 'uppercase' }}>✎ Hold draft</div>
          <div style={{ fontSize: 10.5, marginTop: 4, lineHeight: 1.45 }}>
            Helen, holding Friday 14:00 BST on my calendar — sending a Tate-facing one-pager separately. Talk soon, Max.
          </div>
        </div>
      </div>
    </div>
  </div>
);

const ViewContacts = () => (
  <div style={{ padding: '14px 16px', overflow: 'hidden' }}>
    <div style={{ fontSize: 14, fontWeight: 600, letterSpacing: '-0.02em', marginBottom: 8 }}>Contacts</div>
    <div style={{ display: 'flex', flexDirection: 'column', gap: 1 }}>
      {[
        ['Helen Ng', 'Tate Modern · digital', 'today', '#5b8def'],
        ['Donatella Barbieri', 'LCF · UAL', 'today', '#e89e5b'],
        ['Andrew Lister', 'Tate · curator', '2d ago', '#5b8def'],
        ['Juliet Sprake', 'Goldsmiths', '1w ago', '#5b8def'],
        ['Sara Lim', 'Cyan Ventures', '2 May', '#5db98a'],
        ['Maja Gehrt', 'Stedelijk Museum', '3w ago', '#7c69e0'],
        ['Veronika Liebl', 'Ars Electronica', '6w ago', '#7c69e0'],
        ['Helen Charman', 'V&A', '2mo ago', '#5b8def'],
      ].map(([n, o, t, c], i) => (
        <div key={i} style={{ display: 'grid', gridTemplateColumns: '24px 1fr auto', gap: 10, alignItems: 'center', padding: '7px 8px', borderRadius: 7, fontSize: 11 }}>
          <span style={{ width: 24, height: 24, borderRadius: '50%', background: c, color: '#fff', display: 'grid', placeItems: 'center', fontSize: 9.5, fontWeight: 600 }}>
            {n.split(' ').map(s => s[0]).join('')}
          </span>
          <span><b style={{ color: '#1d1d1f' }}>{n}</b> <span style={{ color: '#86868b' }}>· {o}</span></span>
          <span style={{ fontSize: 9.5, color: '#a1a1a6' }}>{t}</span>
        </div>
      ))}
    </div>
  </div>
);

// ── Main component ───────────────────────────────────────

const DashMock = ({ scale = 1, initial = 'overview', locked = false }) => {
  const [view, setView] = useState(initial);
  const go = locked ? () => {} : setView;

  const renderView = () => {
    switch (view) {
      case 'overview':    return <ViewOverview go={go} />;
      case 'inbox':       return <ViewInbox />;
      case 'chat':        return <ViewChat />;
      case 'contacts':    return <ViewContacts />;
      case 'fundraising': return <ViewFundraising />;
      case 'events':      return <ViewEvents />;
      case 'sales':       return <ViewSales />;
      case 'grants':      return <ViewGrants />;
      default:            return <ViewOverview go={go} />;
    }
  };

  return (
    <div className="exo-dash exo-dash-overview" style={{ transform: `scale(${scale})`, transformOrigin: 'top left' }}>
      <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"></div>
        <div className="exo-dash-tb-right">
          <span className="exo-dash-tb-org"><span className="exo-ov-lens" style={{ background: '#5b8def' }} /> Both orgs</span>
          <span className="exo-dash-tb-pill">Run</span>
        </div>
      </div>

      <aside className="exo-dash-sb">
        <div className="exo-dash-sb-brand">
          <ExoMark size={18} />
          <div className="exo-dash-sb-name">exoteam</div>
        </div>
        <div className="exo-dash-sb-label">Always on</div>
        {ALWAYS_ON.map(item => (
          <div key={item.id}
               className={`exo-dash-sb-item ${view === item.id ? 'active' : ''}`}
               onClick={() => go(item.id)}
               style={{ cursor: locked ? 'default' : 'pointer' }}>
            <span className="exo-dash-sb-item-icon">{item.icon}</span>
            <span>{item.label}</span>
            {item.count != null && <span className="exo-dash-sb-count">{item.count}</span>}
          </div>
        ))}
        <div className="exo-dash-sb-label" style={{ marginTop: 10 }}>Your bundles</div>
        {SIDEBAR_BUNDLES.map(b => (
          <div key={b.id}
               className={`exo-dash-sb-item ${view === b.id ? 'active' : ''}`}
               onClick={() => go(b.id)}
               style={{ cursor: locked ? 'default' : 'pointer' }}>
            <span style={{ width: 10, height: 10, borderRadius: 3, background: b.color, display: 'inline-block', flexShrink: 0 }}></span>
            <span style={{ flex: 1 }}>{b.label}</span>
            {b.count != null && <span className="exo-dash-sb-count">{b.count}</span>}
          </div>
        ))}
        <div className="exo-dash-sb-item"
             style={{ border: '1px dashed rgba(0,0,0,0.15)', marginTop: 4, color: '#86868b', cursor: 'pointer' }}>
          <span className="exo-dash-sb-item-icon">+</span>
          <span>Add a helper</span>
        </div>
      </aside>

      {renderView()}

      {view === 'overview' && (
        <aside className="exo-dash-rb">
          <div className="exo-dash-rb-h">
            <span className="exo-dash-rb-h-dot"></span>
            <span>AI Chat</span>
            <span className="exo-dash-rb-h-meta">all bundles</span>
          </div>
          <div className="exo-dash-rb-msgs">
            <div className="exo-dash-rb-msg me">brief me on the Tate thread</div>
            <div className="exo-dash-rb-msg bot">
              <b>Helen Ng · Tate Modern</b>
              <div style={{ marginTop: 3, color: '#6e6e73' }}>
                Re: Meadow runtime licensing. Last touch 09:42 — proposed Friday 14:00 BST. Mutual: Andrew Lister.
              </div>
              <div className="exo-dash-rb-action">
                ✎ Hold draft
                <div className="exo-dash-rb-action-body">Helen, holding Friday 14:00 BST. Sending a Tate-facing one-pager. — Max</div>
              </div>
            </div>
            <div className="exo-dash-rb-msg me">approve · send</div>
            <div className="exo-dash-rb-msg bot">Scheduled for 09:30 · cc Andrew.</div>
          </div>
          <div className="exo-dash-rb-suggest">
            <span className="exo-dash-rb-chip">Why does MCP grant fit us?</span>
            <span className="exo-dash-rb-chip">VCs I haven't followed up with</span>
          </div>
          <div className="exo-dash-rb-input">
            <span className="exo-dash-rb-input-text">Ask anything…</span>
            <span className="exo-dash-rb-input-send" aria-label="Send">
              <svg width="10" height="10" viewBox="0 0 16 16" fill="none"><path d="M8 13V3M8 3L3.5 7.5M8 3l4.5 4.5" stroke="currentColor" strokeWidth="1.8" strokeLinecap="round" strokeLinejoin="round"/></svg>
            </span>
          </div>
        </aside>
      )}
    </div>
  );
};

const TelegramMock = () => (
  <div className="exo-tg">
    <div className="exo-tg-msg me">brief me on today</div>
    <div className="exo-tg-msg bot">
      <b>Good morning.</b>
      <div className="tg-sub">3 drafts ready, 1 meeting at 14:00 with Helen Ng, Horizon grant due in 12 days.</div>
    </div>
    <div className="exo-tg-msg me">approve drafts</div>
    <div className="exo-tg-msg bot">
      Sent 3 replies — Helen Ng, Donatella Barbieri, Juliet Sprake.
      <div className="tg-sub">All scheduled for 09:30 local.</div>
    </div>
  </div>
);

window.DashMock = DashMock;
window.TelegramMock = TelegramMock;