// Meridian — Author submission dashboard

const MD = window.MERIDIAN;
const { Wordmark, Eyebrow, RuleBadge, ArcMark } = window;

// ───────────────── Nav ─────────────────
window.DashNav = function DashNav({ mobile }) {
  return (
    <nav style={{ borderBottom: `1px solid ${MD.rule}`, background: MD.paper, position: 'sticky', top: 0, zIndex: 20, backdropFilter: 'blur(8px)' }}>
      <div style={{ maxWidth: 1440, margin: '0 auto', padding: mobile ? '12px 16px' : '14px 32px', display: 'flex', justifyContent: 'space-between', alignItems: 'center' }}>
        <div style={{ display: 'flex', alignItems: 'center', gap: mobile ? 12 : 24 }}>
          <Wordmark size={mobile ? 18 : 20} />
          {!mobile && <><div style={{ width: 1, height: 18, background: MD.rule }} /><Eyebrow>Author workspace</Eyebrow></>}
        </div>
        <div style={{ display: 'flex', gap: mobile ? 10 : 20, alignItems: 'center' }}>
          {!mobile && <>
            <a href="#" style={{ fontFamily: MD.sans, fontSize: 13, color: MD.text, textDecoration: 'none' }}>Submissions</a>
            <a href="#" style={{ fontFamily: MD.sans, fontSize: 13, color: MD.text, textDecoration: 'none' }}>Reviews</a>
            <a href="#" style={{ fontFamily: MD.sans, fontSize: 13, color: MD.text, textDecoration: 'none' }}>Help</a>
            <div style={{ width: 1, height: 18, background: MD.rule }} />
          </>}
          <div style={{ display: 'flex', alignItems: 'center', gap: 8, padding: '5px 10px', border: `1px solid ${MD.rule}` }}>
            <div style={{ width: 22, height: 22, borderRadius: '50%', background: MD.paperDim, fontFamily: MD.serif, fontSize: 11, color: MD.muted, display: 'flex', alignItems: 'center', justifyContent: 'center' }}>SC</div>
            {!mobile && <span style={{ fontFamily: MD.sans, fontSize: 12, color: MD.text }}>Sarah Chen</span>}
          </div>
        </div>
      </div>
    </nav>
  );
};

// ───────────────── Pipeline tracker ─────────────────
window.DashPipeline = function DashPipeline({ current = 4, mobile }) {
  const stages = [
    ['01', 'Submitted', '14 Mar'],
    ['02', 'Screening', '14 Mar'],
    ['03', 'Editorial', '17 Mar'],
    ['04', 'Peer review', '21 Mar'],
    ['05', 'Revisions', '—'],
    ['06', 'Accepted', '—'],
    ['07', 'Published', '—'],
  ];
  return (
    <section style={{ background: MD.paper, borderBottom: `1px solid ${MD.rule}` }}>
      <div style={{ maxWidth: 1440, margin: '0 auto', padding: mobile ? '20px 16px' : '28px 32px' }}>
        <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'baseline', marginBottom: 18, flexWrap: 'wrap', gap: 12 }}>
          <div>
            <Eyebrow>MS-2026-003 · Stage 05 of 07</Eyebrow>
            <div style={{ fontFamily: MD.serif, fontSize: mobile ? 22 : 28, color: MD.ink, letterSpacing: '-0.02em', marginTop: 6, lineHeight: 1.15, fontWeight: 400 }}>
              A cell-free microfluidic assay for quantifying amyloid-β aggregation kinetics…
            </div>
          </div>
          <Eyebrow style={{ color: MD.accent, textAlign: 'right' }}>Revisions · Responding to Round 1<br/><span style={{ color: MD.muted }}>Due 03 May 2026</span></Eyebrow>
        </div>

        {mobile ? (
          <div style={{ border: `1px solid ${MD.rule}`, padding: '12px 14px', background: MD.paperDim }}>
            <div style={{ display: 'flex', justifyContent: 'space-between', marginBottom: 8 }}>
              <Eyebrow>Stage {stages[current][0]}</Eyebrow>
              <Eyebrow style={{ color: MD.accent }}>In progress</Eyebrow>
            </div>
            <div style={{ fontFamily: MD.serif, fontSize: 20, color: MD.ink }}>{stages[current][1]}</div>
            <div style={{ marginTop: 12, height: 3, background: MD.rule, position: 'relative' }}>
              <div style={{ position: 'absolute', left: 0, top: 0, bottom: 0, width: `${((current + 0.6) / stages.length) * 100}%`, background: MD.accent }} />
            </div>
            <div style={{ marginTop: 8, fontFamily: MD.mono, fontSize: 9.5, color: MD.muted, letterSpacing: '0.08em', display: 'flex', justifyContent: 'space-between' }}>
              <span>DAY 0</span><span>DAY {28} OF ~48</span>
            </div>
          </div>
        ) : (
          <div style={{ display: 'grid', gridTemplateColumns: 'repeat(7, 1fr)', gap: 0, border: `1px solid ${MD.rule}` }}>
            {stages.map(([n, t, d], i) => {
              const state = i < current ? 'done' : i === current ? 'active' : 'pending';
              const color = state === 'done' ? MD.success : state === 'active' ? MD.accent : MD.muted;
              return (
                <div key={n} style={{
                  padding: '14px 14px 16px',
                  borderRight: i < stages.length - 1 ? `1px solid ${MD.rule}` : 'none',
                  borderTop: `3px solid ${state === 'pending' ? MD.rule : color}`,
                  marginTop: -1,
                  background: state === 'active' ? MD.accentSoft : MD.paper,
                  position: 'relative',
                }}>
                  <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'center' }}>
                    <Eyebrow style={{ color }}>{n}</Eyebrow>
                    {state === 'done' && <span style={{ fontFamily: MD.mono, fontSize: 11, color: MD.success }}>✓</span>}
                    {state === 'active' && <span style={{ width: 6, height: 6, borderRadius: '50%', background: MD.accent, boxShadow: `0 0 0 3px ${MD.accentSoft}` }} />}
                  </div>
                  <div style={{ fontFamily: MD.serif, fontSize: 16, color: state === 'pending' ? MD.muted : MD.ink, marginTop: 6, letterSpacing: '-0.01em', fontWeight: 400 }}>{t}</div>
                  <div style={{ fontFamily: MD.mono, fontSize: 9.5, color: MD.muted, marginTop: 4, letterSpacing: '0.06em' }}>{d.toUpperCase()}</div>
                </div>
              );
            })}
          </div>
        )}
      </div>
    </section>
  );
};

// ───────────────── Upload panel ─────────────────
window.DashUpload = function DashUpload() {
  return (
    <div style={{ border: `1px solid ${MD.rule}`, background: MD.paper }}>
      <div style={{ padding: '12px 18px', borderBottom: `1px solid ${MD.rule}`, background: MD.paperDim, display: 'flex', justifyContent: 'space-between', alignItems: 'center' }}>
        <Eyebrow>Revision upload · Round 1 response</Eyebrow>
        <Eyebrow style={{ color: MD.accent }}>Optional · edit in-platform below</Eyebrow>
      </div>
      <div style={{ padding: 24 }}>
        <div style={{ border: `1.5px dashed ${MD.rule}`, padding: '32px 24px', textAlign: 'center', background: MD.paperDim, position: 'relative' }}>
          <div style={{ display: 'flex', justifyContent: 'center', gap: 14, marginBottom: 14 }}>
            {['PDF', 'DOCX', 'MD'].map(t => (
              <div key={t} style={{ fontFamily: MD.mono, fontSize: 10, letterSpacing: '0.14em', color: MD.muted, border: `1px solid ${MD.rule}`, padding: '4px 10px', background: MD.paper }}>{t}</div>
            ))}
          </div>
          <div style={{ fontFamily: MD.serif, fontSize: 20, color: MD.ink, letterSpacing: '-0.015em', marginBottom: 6, fontWeight: 400 }}>
            Drag a revised manuscript here
          </div>
          <div style={{ fontFamily: MD.sans, fontSize: 13, color: MD.muted, marginBottom: 16 }}>
            …or <a href="#" style={{ color: MD.accent }}>browse files</a> · <a href="#" style={{ color: MD.accent }}>paste Markdown</a> · <a href="#" style={{ color: MD.accent }}>import from Overleaf</a>
          </div>
          <div style={{ fontFamily: MD.mono, fontSize: 9.5, color: MD.muted, letterSpacing: '0.1em' }}>MAX 50 MB · ENCRYPTED AT REST · v1 ARCHIVED AUTOMATICALLY</div>
        </div>

        <div style={{ marginTop: 16, padding: '12px 14px', background: MD.paperDim, borderLeft: `2px solid ${MD.info}`, fontFamily: MD.sans, fontSize: 12.5, color: MD.text, lineHeight: 1.55 }}>
          <span style={{ fontWeight: 500, color: MD.info }}>Tip ·</span> Most authors skip the upload entirely and revise inline below. Changes are track-preserved either way.
        </div>
      </div>
    </div>
  );
};

// ───────────────── Intake panels (evidence grade) ─────────────────
window.DashIntake = function DashIntake() {
  const cards = [
    { k: 'Completeness', v: '10 / 10', state: 'pass', detail: 'Abstract · Methods · Data statement · Ethics · Conflicts · ORCID (4/4) · All figures · Supplementary · References · License' },
    { k: 'References verified', v: '47 / 47', state: 'pass', detail: 'All DOIs resolved via Crossref. 3 references updated with post-print versions.' },
    { k: 'Data availability', v: 'Open · Zenodo', state: 'pass', detail: 'Raw kinetics data + analysis code linked. Cohort metadata deposited to dbGaP (controlled access).' },
    { k: 'Estimated decision', v: '03 May', state: 'watch', detail: '~9 days from today. 2 of 3 reviewers have submitted round-1 reports.' },
    { k: 'APC estimate', v: '$150', state: 'info', detail: 'Flat rate. Full waiver available if corresponding author\'s institution is on the Meridian equity list.' },
    { k: 'Preprint match', v: 'bioRxiv · ✓', state: 'pass', detail: 'Detected matching preprint 2026.02.14.578429. License compatible with CC-BY 4.0.' },
  ];
  const color = (s) => s === 'pass' ? MD.success : s === 'watch' ? MD.warning : s === 'info' ? MD.info : MD.muted;
  return (
    <div style={{ border: `1px solid ${MD.rule}`, background: MD.paper }}>
      <div style={{ padding: '12px 18px', borderBottom: `1px solid ${MD.rule}`, background: MD.paperDim, display: 'flex', justifyContent: 'space-between', alignItems: 'center' }}>
        <Eyebrow>Intake · Evidence grade</Eyebrow>
        <Eyebrow>Updated 2 min ago</Eyebrow>
      </div>
      <div style={{ display: 'grid', gridTemplateColumns: 'repeat(3, 1fr)', gap: 0 }}>
        {cards.map((c, i) => (
          <div key={c.k} style={{
            padding: '18px 18px 20px',
            borderRight: (i + 1) % 3 !== 0 ? `1px solid ${MD.rule}` : 'none',
            borderBottom: i < 3 ? `1px solid ${MD.rule}` : 'none',
          }}>
            <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'start', marginBottom: 10 }}>
              <Eyebrow>{c.k}</Eyebrow>
              <span style={{ width: 6, height: 6, borderRadius: '50%', background: color(c.state), marginTop: 6 }} />
            </div>
            <div style={{ fontFamily: MD.mono, fontSize: 20, color: color(c.state) === MD.info || color(c.state) === MD.success ? MD.ink : color(c.state), letterSpacing: '-0.01em', fontWeight: 500 }}>{c.v}</div>
            <div style={{ fontFamily: MD.sans, fontSize: 11.5, color: MD.muted, marginTop: 8, lineHeight: 1.5 }}>{c.detail}</div>
          </div>
        ))}
      </div>
    </div>
  );
};

// ───────────────── Manuscript with inline reviewer comments ─────────────────
window.DashManuscript = function DashManuscript() {
  const [filter, setFilter] = React.useState('all');

  // paragraphs w/ attached comments
  const paras = [
    { id: 'p1', text: 'Alzheimer\'s disease progresses silently for one to two decades before clinical presentation. During this window, amyloid-β oligomers accumulate in soluble forms that existing imaging modalities cannot resolve.' },
    {
      id: 'p2',
      text: 'We engineered a two-channel microfluidic device in which recombinant Aβ₄₂ monomer is introduced at physiological concentration alongside thioflavin-T, a fluorescent aggregation reporter.',
      comment: {
        reviewer: 'Prof. Amara Okonkwo',
        round: 'R1',
        category: 'AI-editable',
        text: 'The phrase "physiological concentration" should specify the exact molarity. Readers outside the field need a number, not a qualifier.',
        suggestion: 'at 2.5 μM — within the range reported in CSF of early-stage patients',
        action: 'accepted',
      },
    },
    {
      id: 'p3',
      text: 'Channel geometry maintains laminar flow at Reynolds numbers below 0.8, ensuring that measured kinetics reflect intrinsic aggregation rather than convective mixing.',
      comment: {
        reviewer: 'Dr. Hiroshi Tanaka',
        round: 'R1',
        category: 'Collaborative',
        text: 'Could you show the flow profile simulation in the supplementary? Many readers will want to verify the Reynolds calculation themselves.',
        suggestion: null,
        action: 'modified',
        authorResponse: 'Added Supplementary Fig. S4 showing COMSOL simulation of the flow profile across all three channel widths tested. Reynolds values recalculated per channel.',
      },
    },
    {
      id: 'p4',
      text: 'In a pilot cohort of 42 pre-symptomatic participants, the assay resolved aggregation kinetics within 42 minutes and identified 14 individuals whose kinetic profiles diverged from age-matched controls.',
      comment: {
        reviewer: 'Prof. Amara Okonkwo',
        round: 'R1',
        category: 'Author-only',
        text: 'The control cohort (n=12) is too small to support the "divergent from age-matched controls" claim. This is the central finding — please expand the control arm before we can proceed.',
        suggestion: null,
        action: 'pending',
      },
    },
    { id: 'p5', text: 'Real-time fluorescence readout enabled kinetic fitting to a modified Finke-Watzky two-step model, capturing both nucleation and elongation rate constants.' },
  ];

  const filtered = filter === 'all' ? paras : paras.filter(p => p.comment && p.comment.category.toLowerCase().replace('-', '').replace(' ', '') === filter);

  const catColor = (c) => c === 'AI-editable' ? MD.success : c === 'Collaborative' ? MD.info : MD.accent;

  const counts = {
    all: paras.filter(p => p.comment).length,
    aieditable: paras.filter(p => p.comment?.category === 'AI-editable').length,
    collaborative: paras.filter(p => p.comment?.category === 'Collaborative').length,
    authoronly: paras.filter(p => p.comment?.category === 'Author-only').length,
  };

  return (
    <div style={{ border: `1px solid ${MD.rule}`, background: MD.paper }}>
      <div style={{ padding: '12px 18px', borderBottom: `1px solid ${MD.rule}`, background: MD.paperDim, display: 'flex', justifyContent: 'space-between', alignItems: 'center', flexWrap: 'wrap', gap: 10 }}>
        <Eyebrow>Manuscript · Round 1 reviewer comments</Eyebrow>
        <div style={{ display: 'flex', gap: 6 }}>
          {[
            ['all', 'All', counts.all, MD.ink],
            ['aieditable', 'AI-editable', counts.aieditable, MD.success],
            ['collaborative', 'Collaborative', counts.collaborative, MD.info],
            ['authoronly', 'Author-only', counts.authoronly, MD.accent],
          ].map(([k, l, n, c]) => (
            <button key={k} onClick={() => setFilter(k)} style={{
              fontFamily: MD.mono, fontSize: 9.5, letterSpacing: '0.1em', textTransform: 'uppercase',
              padding: '5px 9px', background: filter === k ? c : 'transparent',
              color: filter === k ? MD.paper : c, border: `1px solid ${c}`, cursor: 'pointer',
              display: 'flex', alignItems: 'center', gap: 6,
            }}>
              <span>{l}</span>
              <span style={{ opacity: 0.8 }}>{n}</span>
            </button>
          ))}
        </div>
      </div>

      <div style={{ padding: '24px 28px' }}>
        {filtered.map(p => (
          <div key={p.id} style={{ marginBottom: 28 }}>
            <p style={{
              fontFamily: MD.serif, fontSize: 16, lineHeight: 1.75, color: MD.text, margin: 0,
              background: p.comment ? (p.comment.action === 'accepted' ? 'rgba(63,122,79,0.05)' : p.comment.action === 'modified' ? 'rgba(42,91,143,0.05)' : 'rgba(138,31,43,0.04)') : 'transparent',
              padding: p.comment ? '10px 14px' : '0',
              borderLeft: p.comment ? `3px solid ${catColor(p.comment.category)}` : 'none',
              fontWeight: 400,
            }}>
              {p.comment?.action === 'accepted' ? (
                <>
                  Alzheimer's disease progresses silently… We engineered a two-channel microfluidic device in which recombinant Aβ₄₂ monomer is introduced{' '}
                  <span style={{ background: 'rgba(199,80,80,0.12)', color: '#a33030', textDecoration: 'line-through', padding: '1px 3px' }}>at physiological concentration</span>{' '}
                  <span style={{ background: 'rgba(63,122,79,0.15)', color: '#3f7a4f', padding: '1px 3px' }}>at 2.5 μM — within the range reported in CSF of early-stage patients</span>{' '}
                  alongside thioflavin-T, a fluorescent aggregation reporter.
                </>
              ) : p.text}
            </p>

            {p.comment && (
              <div style={{ marginTop: 10, marginLeft: 14, background: MD.paper, border: `1px solid ${MD.rule}`, overflow: 'hidden' }}>
                <div style={{ padding: '10px 14px', background: MD.paperDim, borderBottom: `1px solid ${MD.rule}`, display: 'flex', justifyContent: 'space-between', alignItems: 'center', flexWrap: 'wrap', gap: 8 }}>
                  <div style={{ display: 'flex', alignItems: 'center', gap: 10 }}>
                    <div style={{ width: 22, height: 22, borderRadius: '50%', background: MD.paper, border: `1px solid ${MD.rule}`, fontFamily: MD.serif, fontSize: 10, color: MD.muted, display: 'flex', alignItems: 'center', justifyContent: 'center' }}>{p.comment.reviewer.split(' ').slice(-2).map(x => x[0]).join('')}</div>
                    <span style={{ fontFamily: MD.serif, fontSize: 13, color: MD.ink, letterSpacing: '-0.005em' }}>{p.comment.reviewer}</span>
                    <Eyebrow>{p.comment.round}</Eyebrow>
                  </div>
                  <div style={{ display: 'flex', gap: 6, alignItems: 'center' }}>
                    <span style={{ fontFamily: MD.mono, fontSize: 9, letterSpacing: '0.12em', textTransform: 'uppercase', color: catColor(p.comment.category), border: `1px solid ${catColor(p.comment.category)}`, padding: '2px 6px' }}>{p.comment.category}</span>
                    {p.comment.action === 'accepted' && <span style={{ fontFamily: MD.mono, fontSize: 9, letterSpacing: '0.12em', textTransform: 'uppercase', color: MD.success, background: 'rgba(63,122,79,0.12)', padding: '3px 7px' }}>✓ Accepted</span>}
                    {p.comment.action === 'modified' && <span style={{ fontFamily: MD.mono, fontSize: 9, letterSpacing: '0.12em', textTransform: 'uppercase', color: MD.info, background: 'rgba(42,91,143,0.12)', padding: '3px 7px' }}>✎ Modified</span>}
                    {p.comment.action === 'pending' && <span style={{ fontFamily: MD.mono, fontSize: 9, letterSpacing: '0.12em', textTransform: 'uppercase', color: MD.accent, background: MD.accentSoft, padding: '3px 7px' }}>Pending</span>}
                  </div>
                </div>
                <div style={{ padding: '12px 14px' }}>
                  <p style={{ fontFamily: MD.serif, fontSize: 14, color: MD.text, margin: 0, lineHeight: 1.6, fontWeight: 400 }}>"{p.comment.text}"</p>

                  {p.comment.suggestion && (
                    <div style={{ marginTop: 10, padding: '8px 12px', background: MD.paperDim, border: `1px solid ${MD.rule}`, fontFamily: MD.mono, fontSize: 12, color: MD.ink, lineHeight: 1.5 }}>
                      <Eyebrow style={{ color: MD.success, fontSize: 9 }}>Suggested edit</Eyebrow>
                      <div style={{ marginTop: 4 }}>{p.comment.suggestion}</div>
                    </div>
                  )}

                  {p.comment.authorResponse && (
                    <div style={{ marginTop: 10, padding: '10px 12px', background: 'rgba(42,91,143,0.05)', borderLeft: `2px solid ${MD.info}` }}>
                      <Eyebrow style={{ color: MD.info, fontSize: 9 }}>Author response · Sarah Chen</Eyebrow>
                      <p style={{ fontFamily: MD.sans, fontSize: 12.5, color: MD.text, margin: '6px 0 0', lineHeight: 1.55 }}>{p.comment.authorResponse}</p>
                    </div>
                  )}

                  {p.comment.action === 'pending' && (
                    <div style={{ marginTop: 12, display: 'flex', gap: 6, flexWrap: 'wrap' }}>
                      <button style={{ fontFamily: MD.mono, fontSize: 10, letterSpacing: '0.12em', textTransform: 'uppercase', padding: '7px 12px', background: MD.success, color: MD.paper, border: 'none', cursor: 'pointer' }}>Accept</button>
                      <button style={{ fontFamily: MD.mono, fontSize: 10, letterSpacing: '0.12em', textTransform: 'uppercase', padding: '7px 12px', background: MD.paper, color: MD.info, border: `1px solid ${MD.info}`, cursor: 'pointer' }}>Modify</button>
                      <button style={{ fontFamily: MD.mono, fontSize: 10, letterSpacing: '0.12em', textTransform: 'uppercase', padding: '7px 12px', background: MD.paper, color: MD.error, border: `1px solid ${MD.error}`, cursor: 'pointer' }}>Reject</button>
                      <span style={{ flex: 1 }} />
                      <button style={{ fontFamily: MD.sans, fontSize: 12, padding: '7px 12px', background: 'transparent', color: MD.muted, border: `1px solid ${MD.rule}`, cursor: 'pointer' }}>Reply to reviewer</button>
                    </div>
                  )}
                </div>
              </div>
            )}
          </div>
        ))}
      </div>
    </div>
  );
};

// ───────────────── Response letter ─────────────────
window.DashResponse = function DashResponse() {
  return (
    <div style={{ border: `1px solid ${MD.rule}`, background: MD.paper }}>
      <div style={{ padding: '12px 18px', borderBottom: `1px solid ${MD.rule}`, background: MD.paperDim, display: 'flex', justifyContent: 'space-between', alignItems: 'center' }}>
        <Eyebrow>Point-by-point response letter · auto-linked to revisions</Eyebrow>
        <Eyebrow style={{ color: MD.accent }}>2 of 3 addressed</Eyebrow>
      </div>
      <div style={{ padding: '24px 28px' }}>
        <div style={{ fontFamily: MD.serif, fontSize: 14, lineHeight: 1.65, color: MD.text, marginBottom: 20, fontWeight: 300 }}>
          <em>Dear handling editor and reviewers,</em> We thank the three reviewers for the thoughtful and constructive comments. Below we respond to each point in turn, indicating the corresponding changes in the revised manuscript. Each response links directly to the edited passage.
        </div>

        {[
          { r: 'Prof. Amara Okonkwo · R1 · Comment 1', status: 'addressed', statusColor: MD.success, q: 'The phrase "physiological concentration" should specify the exact molarity.', a: 'Corrected. Methods §2 now reads "at 2.5 μM — within the range reported in CSF of early-stage patients."', link: '§2, line 14' },
          { r: 'Dr. Hiroshi Tanaka · R1 · Comment 1', status: 'addressed', statusColor: MD.info, q: 'Could you show the flow profile simulation in the supplementary?', a: 'Added Supplementary Fig. S4 with COMSOL simulations across all three channel widths. Reynolds values recalculated per channel.', link: 'Supp. Fig. S4' },
          { r: 'Prof. Amara Okonkwo · R1 · Comment 2', status: 'pending', statusColor: MD.accent, q: 'The control cohort (n=12) is too small to support the "divergent from age-matched controls" claim.', a: '[draft] We have expanded the control cohort from 12 to 34 participants (ages 55–78, screened for amyloid-PET negativity). Updated Fig. 3 and Table 2 reflect the larger sample; all primary statistical comparisons remain significant (p < 0.001).', link: '§4 · Fig. 3 · Table 2' },
        ].map((c, i) => (
          <div key={i} style={{ marginBottom: 18, padding: '14px 16px', border: `1px solid ${MD.rule}`, borderLeft: `3px solid ${c.statusColor}` }}>
            <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'center', marginBottom: 8 }}>
              <Eyebrow>{c.r}</Eyebrow>
              <span style={{ fontFamily: MD.mono, fontSize: 9, letterSpacing: '0.12em', textTransform: 'uppercase', color: c.statusColor }}>{c.status === 'addressed' ? '✓ Addressed' : 'Draft'}</span>
            </div>
            <div style={{ fontFamily: MD.serif, fontSize: 13.5, color: MD.text, marginBottom: 8, lineHeight: 1.6 }}>
              <span style={{ color: MD.muted, fontStyle: 'italic' }}>Reviewer: </span>"{c.q}"
            </div>
            <div style={{ fontFamily: MD.serif, fontSize: 13.5, color: MD.ink, lineHeight: 1.6 }}>
              <span style={{ color: MD.accent, fontStyle: 'italic' }}>Response: </span>{c.a}
            </div>
            <div style={{ marginTop: 10, paddingTop: 10, borderTop: `1px solid ${MD.rule}`, display: 'flex', justifyContent: 'space-between', alignItems: 'center' }}>
              <a href="#" style={{ fontFamily: MD.mono, fontSize: 10, color: MD.accent, textDecoration: 'none', letterSpacing: '0.1em', textTransform: 'uppercase' }}>→ See change in manuscript · {c.link}</a>
              {c.status === 'pending' && <button style={{ fontFamily: MD.sans, fontSize: 11.5, padding: '5px 10px', background: MD.accent, color: MD.paper, border: 'none', cursor: 'pointer' }}>Finalize</button>}
            </div>
          </div>
        ))}
      </div>
    </div>
  );
};

// ───────────────── Sidebar ─────────────────
window.DashSidebar = function DashSidebar() {
  return (
    <aside style={{ display: 'flex', flexDirection: 'column', gap: 16 }}>
      {/* Submission metadata */}
      <div style={{ border: `1px solid ${MD.rule}`, background: MD.paper }}>
        <div style={{ padding: '10px 14px', borderBottom: `1px solid ${MD.rule}`, background: MD.paperDim }}>
          <Eyebrow>Submission</Eyebrow>
        </div>
        <div style={{ padding: '14px 16px', display: 'flex', flexDirection: 'column', gap: 10 }}>
          {[
            ['Manuscript ID', 'MS-2026-003', MD.ink],
            ['DOI', 'Reserved · pending accept', MD.muted],
            ['Preprint', 'bioRxiv · matched', MD.info],
            ['Track', 'Research article'],
            ['Section', 'Neurobiology'],
            ['Word count', '8,421'],
            ['Figures · tables', '6 · 2'],
            ['Authors', '4 · all ORCID linked'],
          ].map(([k, v, c]) => (
            <div key={k} style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'baseline', gap: 12 }}>
              <Eyebrow style={{ fontSize: 9.5 }}>{k}</Eyebrow>
              <span style={{ fontFamily: MD.mono, fontSize: 11, color: c || MD.text, textAlign: 'right' }}>{v}</span>
            </div>
          ))}
        </div>
      </div>

      {/* Timestamps */}
      <div style={{ border: `1px solid ${MD.rule}`, background: MD.paper }}>
        <div style={{ padding: '10px 14px', borderBottom: `1px solid ${MD.rule}`, background: MD.paperDim }}>
          <Eyebrow>Timestamps</Eyebrow>
        </div>
        <div style={{ padding: 14, borderLeft: `1px solid ${MD.rule}`, marginLeft: 16 }}>
          {[
            ['Submitted', '14 Mar · 09:14 UTC', MD.success],
            ['Screening passed', '14 Mar · 09:15 UTC', MD.success],
            ['Editor assigned', '17 Mar · 11:02 UTC', MD.success],
            ['R1 invitations sent', '17 Mar · 11:30 UTC', MD.success],
            ['R1 reports 2/3 in', '28 Mar · 16:04 UTC', MD.accent],
            ['R1 report 3/3', 'Expected 03 May', MD.muted],
          ].map(([k, v, c], i) => (
            <div key={i} style={{ position: 'relative', padding: '6px 0 6px 14px', borderBottom: i < 5 ? `1px solid ${MD.ruleSoft}` : 'none' }}>
              <div style={{ position: 'absolute', left: -20, top: 10, width: 7, height: 7, borderRadius: '50%', background: c, border: `2px solid ${MD.paper}` }} />
              <div style={{ fontFamily: MD.sans, fontSize: 12, color: MD.ink }}>{k}</div>
              <div style={{ fontFamily: MD.mono, fontSize: 9.5, color: MD.muted, marginTop: 2, letterSpacing: '0.05em' }}>{v}</div>
            </div>
          ))}
        </div>
      </div>

      {/* AI ops counter */}
      <div style={{ border: `1px solid ${MD.rule}`, background: MD.paper }}>
        <div style={{ padding: '10px 14px', borderBottom: `1px solid ${MD.rule}`, background: MD.paperDim, display: 'flex', justifyContent: 'space-between' }}>
          <Eyebrow>Assist usage · Round 1</Eyebrow>
          <Eyebrow style={{ color: MD.accent }}>Included</Eyebrow>
        </div>
        <div style={{ padding: '14px 16px', display: 'flex', flexDirection: 'column', gap: 10 }}>
          {[
            ['Reference verification', '47 ops', MD.success],
            ['Suggested edits applied', '8 of 12', MD.accent],
            ['Plain-language summary', '1 draft', MD.info],
            ['Tokens used', '142k', MD.muted],
            ['Equivalent cost', '$0.00 · included', MD.muted],
          ].map(([k, v, c]) => (
            <div key={k} style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'baseline' }}>
              <Eyebrow style={{ fontSize: 9.5 }}>{k}</Eyebrow>
              <span style={{ fontFamily: MD.mono, fontSize: 11, color: c }}>{v}</span>
            </div>
          ))}
          <div style={{ marginTop: 6, paddingTop: 10, borderTop: `1px solid ${MD.ruleSoft}`, fontFamily: MD.sans, fontSize: 11, color: MD.muted, lineHeight: 1.5 }}>
            Assistance is infrastructure — no per-token charges to authors. <a href="#" style={{ color: MD.accent }}>See policy →</a>
          </div>
        </div>
      </div>

      {/* Actions */}
      <div style={{ display: 'flex', flexDirection: 'column', gap: 8 }}>
        <button style={{ fontFamily: MD.sans, fontWeight: 500, fontSize: 13.5, padding: '12px 16px', background: MD.accent, color: MD.paper, border: 'none', cursor: 'pointer', display: 'flex', justifyContent: 'space-between', alignItems: 'center' }}>
          <span>Submit revision</span><span>→</span>
        </button>
        <button style={{ fontFamily: MD.sans, fontSize: 13, padding: '10px 14px', background: MD.paper, color: MD.ink, border: `1px solid ${MD.ink}`, cursor: 'pointer' }}>Save draft</button>
        <button style={{ fontFamily: MD.sans, fontSize: 12.5, padding: '9px 14px', background: 'transparent', color: MD.muted, border: `1px solid ${MD.rule}`, cursor: 'pointer' }}>Message handling editor</button>
      </div>
    </aside>
  );
};
