// Meridian — Pitch Deck
// 6 slides, Clinical White, 1920×1080. Every slide built like a journal page.

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

// ─────────────────────────────────────────────────────────────────
// Journal chrome: every slide sits inside this frame, so the whole
// deck reads as issue pages of the same periodical.
// ─────────────────────────────────────────────────────────────────
function SlideChrome({ folio, section, runningHead, date = 'March 2026', children, pad = '56px 88px 56px' }) {
  return (
    <div style={{
      width: '100%', height: '100%',
      background: MK.paper, color: MK.ink,
      fontFamily: MK.serif,
      display: 'flex', flexDirection: 'column',
      position: 'relative',
    }}>
      {/* Top rule + masthead strip */}
      <div style={{
        borderTop: `1px solid ${MK.ink}`,
        borderBottom: `1px solid ${MK.rule}`,
        padding: '14px 40px',
        display: 'flex', justifyContent: 'space-between', alignItems: 'center',
        fontFamily: MK.mono, fontSize: 10.5, letterSpacing: '0.14em', textTransform: 'uppercase', color: MK.muted,
      }}>
        <div style={{ display: 'flex', alignItems: 'center', gap: 14 }}>
          <ArcMark size={18} strokeWidth={1.5} />
          <span style={{ color: MK.ink, fontFamily: MK.serif, fontSize: 15, letterSpacing: '-0.01em', textTransform: 'none' }}>Meridian</span>
          <span style={{ width: 1, height: 12, background: MK.rule }} />
          <span>Vol. 01 · Prospectus · 2026</span>
        </div>
        <div style={{ display: 'flex', gap: 28 }}>
          <span>{runningHead}</span>
          <span style={{ color: MK.accent }}>{section}</span>
        </div>
      </div>

      {/* Page body */}
      <div style={{ flex: 1, padding: pad, position: 'relative', minHeight: 0 }}>
        {children}
      </div>

      {/* Bottom folio */}
      <div style={{
        borderTop: `1px solid ${MK.rule}`,
        padding: '14px 40px 16px',
        display: 'flex', justifyContent: 'space-between', alignItems: 'center',
        fontFamily: MK.mono, fontSize: 10, letterSpacing: '0.12em', textTransform: 'uppercase', color: MK.mutedDim,
      }}>
        <span>meridianjournal.org · founding prospectus</span>
        <span>{date}</span>
        <span style={{ color: MK.ink, fontFamily: MK.serif, fontSize: 14, letterSpacing: 0, textTransform: 'none' }}>{folio}</span>
      </div>
    </div>
  );
}

// Drop-cap helper for opening sentences — journal-style
function DropCap({ letter, children }) {
  return (
    <p style={{ fontFamily: MK.serif, fontSize: 22, lineHeight: 1.55, color: MK.text, margin: 0 }}>
      <span style={{
        float: 'left', fontFamily: MK.serif, fontSize: 80, lineHeight: 0.85,
        padding: '6px 12px 0 0', color: MK.ink, fontWeight: 400,
      }}>{letter}</span>
      {children}
    </p>
  );
}

// Column rule helper
function Col({ children, style }) {
  return <div style={{ display: 'flex', flexDirection: 'column', ...style }}>{children}</div>;
}

// ═════════════════════════════════════════════════════════════════
// Slide 01 — TITLE
// ═════════════════════════════════════════════════════════════════
window.DeckSlide1 = function DeckSlide1() {
  return (
    <SlideChrome folio="01" section="Prospectus" runningHead="A journal for biomedical research" pad="0">
      <div style={{ height: '100%', display: 'grid', gridTemplateColumns: '1.6fr 1fr', gap: 0 }}>
        {/* LEFT — the mark and title */}
        <div style={{ padding: '80px 88px 72px', display: 'flex', flexDirection: 'column', justifyContent: 'space-between', borderRight: `1px solid ${MK.rule}` }}>
          <div>
            <Eyebrow style={{ color: MK.accent, fontSize: 12 }}>Est. 2026 · ISSN 0000·0000 [placeholder]</Eyebrow>
            <div style={{ marginTop: 52, display: 'flex', alignItems: 'flex-start', gap: 36 }}>
              <ArcMark size={140} strokeWidth={1.3} />
              <div>
                <div style={{
                  fontFamily: MK.serif, fontSize: 168, lineHeight: 0.92,
                  letterSpacing: '-0.035em', color: MK.ink, fontWeight: 400,
                }}>Meridian</div>
                <div style={{ marginTop: 18, fontFamily: MK.mono, fontSize: 11.5, letterSpacing: '0.18em', textTransform: 'uppercase', color: MK.muted }}>
                  An open-access journal of biomedical &amp; healthcare research
                </div>
              </div>
            </div>

            <div style={{ marginTop: 72, borderTop: `1px solid ${MK.ink}`, borderBottom: `1px solid ${MK.rule}`, padding: '22px 0' }}>
              <div style={{
                fontFamily: MK.serif, fontSize: 64, lineHeight: 1.05,
                letterSpacing: '-0.025em', color: MK.ink, fontWeight: 400,
              }}>
                Rigorous. <span style={{ color: MK.muted }}>Transparent.</span> <em style={{ fontStyle: 'italic' }}>Fast.</em>
              </div>
            </div>
          </div>

          <div style={{ display: 'flex', gap: 56, fontFamily: MK.mono, fontSize: 10.5, letterSpacing: '0.14em', textTransform: 'uppercase', color: MK.muted }}>
            <div><span style={{ color: MK.ink }}>Founding Editor</span> · Dr. [tbd]</div>
            <div><span style={{ color: MK.ink }}>Publisher</span> · Meridian Press Ltd.</div>
            <div><span style={{ color: MK.ink }}>Contact</span> · editors@meridianjournal.org</div>
          </div>
        </div>

        {/* RIGHT — imprint card */}
        <div style={{ padding: '80px 72px', background: MK.paperDim, display: 'flex', flexDirection: 'column', justifyContent: 'space-between' }}>
          <div>
            <div style={{ fontFamily: MK.mono, fontSize: 10, letterSpacing: '0.18em', textTransform: 'uppercase', color: MK.muted, marginBottom: 18 }}>Imprint</div>
            <table style={{ borderCollapse: 'collapse', fontFamily: MK.serif, fontSize: 18, color: MK.text, width: '100%' }}>
              <tbody>
                {[
                  ['Title', 'Meridian'],
                  ['Founded', '2026'],
                  ['ISSN (Online)', '0000·0000'],
                  ['ISSN (Print)', '0000·0001'],
                  ['DOI prefix', '10.00000/meridian'],
                  ['License', 'CC-BY 4.0'],
                  ['Frequency', 'Continuous'],
                  ['Scope', 'Biomedical, clinical, public health'],
                ].map(([k, v]) => (
                  <tr key={k} style={{ borderBottom: `1px solid ${MK.rule}` }}>
                    <td style={{ padding: '12px 0', color: MK.muted, fontFamily: MK.mono, fontSize: 11, letterSpacing: '0.12em', textTransform: 'uppercase', width: 170 }}>{k}</td>
                    <td style={{ padding: '12px 0', color: MK.ink }}>{v}</td>
                  </tr>
                ))}
              </tbody>
            </table>
          </div>

          <div style={{ borderTop: `1px solid ${MK.ink}`, paddingTop: 22 }}>
            <div style={{ fontFamily: MK.mono, fontSize: 10, letterSpacing: '0.14em', textTransform: 'uppercase', color: MK.accent, marginBottom: 10 }}>Audience</div>
            <div style={{ fontFamily: MK.serif, fontStyle: 'italic', fontSize: 17, lineHeight: 1.55, color: MK.text }}>
              A prospectus for founding editorial board members &amp; funder partners.
            </div>
          </div>
        </div>
      </div>
    </SlideChrome>
  );
};

// ═════════════════════════════════════════════════════════════════
// Slide 02 — PROBLEM
// ═════════════════════════════════════════════════════════════════
window.DeckSlide2 = function DeckSlide2() {
  // Disconnect chart: reviewer hours done (blue ink) vs. compensation ($)
  const metrics = [
    { label: 'Reviewer hours donated annually', value: '100.0M', bar: 1.0 },
    { label: 'Industry revenue from that review labour', value: '$10.4B', bar: 0.90 },
    { label: 'Est. value of reviewer time (at $75/hr)', value: '$1.5B', bar: 0.18 },
    { label: 'Actually paid to reviewers', value: '$0', bar: 0.003 },
  ];

  return (
    <SlideChrome folio="02" section="Problem" runningHead="The arithmetic of academic publishing">
      <div style={{ height: '100%', display: 'grid', gridTemplateColumns: '1fr 1.05fr', gap: 72 }}>
        {/* LEFT — journal-style opening */}
        <div style={{ display: 'flex', flexDirection: 'column' }}>
          <Eyebrow style={{ color: MK.accent, fontSize: 12 }}>§ I · Problem</Eyebrow>
          <h1 style={{ fontFamily: MK.serif, fontSize: 76, lineHeight: 1.02, letterSpacing: '-0.028em', color: MK.ink, margin: '16px 0 28px', fontWeight: 400, textWrap: 'balance' }}>
            Academic publishing is a <em style={{ fontStyle: 'italic' }}>$10.4&nbsp;billion</em> industry built on unpaid labour.
          </h1>

          <div style={{ borderTop: `1px solid ${MK.ink}`, paddingTop: 24, marginBottom: 24 }}>
            <DropCap letter="E">
              very year, researchers perform an estimated <strong style={{ fontWeight: 600 }}>100 million hours</strong> of peer review — and are paid nothing for it. Publishers then sell access back to the institutions that funded the work. The average paper waits <strong style={{ fontWeight: 600 }}>6&ndash;12 months</strong> for decision. A third of it still sits behind a paywall.
            </DropCap>
          </div>

          {/* Small stats grid */}
          <div style={{ marginTop: 'auto', display: 'grid', gridTemplateColumns: 'repeat(3, 1fr)', gap: 0, borderTop: `1px solid ${MK.ink}` }}>
            {[
              { n: '6–12', u: 'months', d: 'typical time from submission to first decision' },
              { n: '41%', u: 'paywalled', d: 'of biomedical papers still behind paid access (2024)' },
              { n: '$0', u: 'paid', d: 'standard reviewer compensation at major publishers' },
            ].map((x, i) => (
              <div key={i} style={{ padding: '20px 22px 0 0', borderRight: i < 2 ? `1px solid ${MK.rule}` : 'none', paddingLeft: i > 0 ? 22 : 0 }}>
                <div style={{ fontFamily: MK.serif, fontSize: 46, lineHeight: 1, color: MK.ink, letterSpacing: '-0.02em' }}>{x.n}</div>
                <div style={{ fontFamily: MK.mono, fontSize: 10, letterSpacing: '0.14em', textTransform: 'uppercase', color: MK.accent, marginTop: 6 }}>{x.u}</div>
                <div style={{ fontFamily: MK.serif, fontSize: 13.5, lineHeight: 1.45, color: MK.text, marginTop: 8 }}>{x.d}</div>
              </div>
            ))}
          </div>

          <div style={{ marginTop: 18, fontFamily: MK.mono, fontSize: 9.5, letterSpacing: '0.1em', textTransform: 'uppercase', color: MK.mutedDim }}>
            Sources · STM Global Report 2024 · Kovanis et&nbsp;al. 2016 · Aczel et&nbsp;al. 2021
          </div>
        </div>

        {/* RIGHT — the disconnect chart, framed as a figure */}
        <div style={{ display: 'flex', flexDirection: 'column' }}>
          <div style={{
            background: MK.paperDim, padding: '28px 32px 32px',
            borderTop: `1px solid ${MK.ink}`, borderBottom: `1px solid ${MK.ink}`,
            flex: 1, display: 'flex', flexDirection: 'column',
          }}>
            <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'baseline', marginBottom: 22 }}>
              <div style={{ fontFamily: MK.mono, fontSize: 10.5, letterSpacing: '0.16em', textTransform: 'uppercase', color: MK.muted }}>
                Figure 1 · The compensation gap
              </div>
              <div style={{ fontFamily: MK.mono, fontSize: 10, letterSpacing: '0.1em', color: MK.mutedDim }}>n = global, annual</div>
            </div>

            <div style={{ display: 'flex', flexDirection: 'column', gap: 22, flex: 1, justifyContent: 'center' }}>
              {metrics.map((m, i) => (
                <div key={i}>
                  <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'baseline', marginBottom: 8 }}>
                    <span style={{ fontFamily: MK.serif, fontSize: 16, color: MK.text }}>{m.label}</span>
                    <span style={{ fontFamily: MK.serif, fontSize: 28, color: i === 3 ? MK.accent : MK.ink, letterSpacing: '-0.02em', fontWeight: i === 3 ? 500 : 400 }}>{m.value}</span>
                  </div>
                  <div style={{ position: 'relative', height: 12, background: 'transparent', borderBottom: `1px solid ${MK.rule}` }}>
                    <div style={{
                      position: 'absolute', left: 0, top: 0, bottom: 0,
                      width: `${Math.max(m.bar * 100, 0.4)}%`,
                      background: i === 3 ? MK.accent : MK.ink,
                      height: 10,
                    }} />
                    {/* tick marks */}
                    <div style={{ position: 'absolute', inset: 0, display: 'flex', justifyContent: 'space-between', pointerEvents: 'none' }}>
                      {[0,1,2,3,4].map(t => <div key={t} style={{ width: 1, height: 4, background: MK.rule, alignSelf: 'flex-end' }} />)}
                    </div>
                  </div>
                </div>
              ))}
            </div>

            <div style={{ marginTop: 24, paddingTop: 18, borderTop: `1px solid ${MK.rule}`, fontFamily: MK.serif, fontStyle: 'italic', fontSize: 14.5, lineHeight: 1.5, color: MK.text }}>
              The people doing the scientific work of peer review — reading, checking, arguing — capture essentially none of the value they produce. Meanwhile, decisions take half a year.
            </div>
          </div>
        </div>
      </div>
    </SlideChrome>
  );
};

// ═════════════════════════════════════════════════════════════════
// Slide 03 — SOLUTION
// ═════════════════════════════════════════════════════════════════
window.DeckSlide3 = function DeckSlide3() {
  const pillars = [
    {
      num: '01', tag: 'Compensation',
      title: 'Reviewers are paid.',
      body: 'Every reviewer earns $20–$50 per report, plus a citable DOI for their review. Review becomes recognised, compensated scholarly work — not a volunteer tax.',
      meta: '$20–$50 / report · DOI-citable · ORCID-linked',
    },
    {
      num: '02', tag: 'Transparency',
      title: 'Reviews are signed and public.',
      body: 'Reviewer names and full reports published alongside the article. Authors respond in writing. Readers see how the paper was strengthened, not just the final version.',
      meta: 'Signed · Published · Versioned',
    },
    {
      num: '03', tag: 'Access',
      title: 'Papers are open by default.',
      body: 'CC-BY 4.0, every article, no embargo. A flat $150 APC — roughly one twentieth of the legacy average — covered by waiver for authors without funding.',
      meta: '$150 APC · Full waiver available · CC-BY 4.0',
    },
    {
      num: '04', tag: 'Tooling',
      title: 'The software is modern.',
      body: 'No downloading PDFs to re-upload them. Structured submission, in-browser revision, threaded discussions, live status. The manuscript is one document with a history — not an email chain.',
      meta: 'One URL · Live revisions · No re-uploads',
    },
  ];

  return (
    <SlideChrome folio="03" section="Solution" runningHead="A journal with different arithmetic">
      <div style={{ height: '100%', display: 'flex', flexDirection: 'column' }}>
        <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'flex-end', borderBottom: `1px solid ${MK.ink}`, paddingBottom: 22, marginBottom: 28 }}>
          <div style={{ maxWidth: 1180 }}>
            <Eyebrow style={{ color: MK.accent, fontSize: 12 }}>§ II · Solution</Eyebrow>
            <h1 style={{ fontFamily: MK.serif, fontSize: 72, lineHeight: 1.02, letterSpacing: '-0.028em', color: MK.ink, margin: '14px 0 0', fontWeight: 400 }}>
              Meridian rewires the <em style={{ fontStyle: 'italic' }}>four things</em> legacy journals got wrong.
            </h1>
          </div>
          <div style={{ fontFamily: MK.mono, fontSize: 10.5, letterSpacing: '0.14em', textTransform: 'uppercase', color: MK.muted, paddingBottom: 8, textAlign: 'right' }}>
            Four pillars<br/><span style={{ color: MK.accent }}>one economic model</span>
          </div>
        </div>

        <div style={{ display: 'grid', gridTemplateColumns: 'repeat(4, 1fr)', gap: 0, flex: 1 }}>
          {pillars.map((p, i) => (
            <div key={i} style={{
              padding: '8px 28px 8px 0',
              paddingLeft: i > 0 ? 28 : 0,
              borderRight: i < 3 ? `1px solid ${MK.rule}` : 'none',
              display: 'flex', flexDirection: 'column',
            }}>
              <div style={{ fontFamily: MK.mono, fontSize: 38, color: MK.accent, letterSpacing: '-0.02em', lineHeight: 1 }}>{p.num}</div>
              <div style={{ marginTop: 14, fontFamily: MK.mono, fontSize: 10.5, letterSpacing: '0.16em', textTransform: 'uppercase', color: MK.muted }}>{p.tag}</div>
              <div style={{ marginTop: 14, fontFamily: MK.serif, fontSize: 28, lineHeight: 1.1, letterSpacing: '-0.02em', color: MK.ink, fontWeight: 400 }}>{p.title}</div>
              <div style={{ marginTop: 18, fontFamily: MK.serif, fontSize: 16, lineHeight: 1.55, color: MK.text, textWrap: 'pretty' }}>{p.body}</div>
              <div style={{ marginTop: 'auto', paddingTop: 22, borderTop: `1px solid ${MK.rule}`, fontFamily: MK.mono, fontSize: 10, letterSpacing: '0.12em', textTransform: 'uppercase', color: MK.muted }}>
                {p.meta}
              </div>
            </div>
          ))}
        </div>

        <div style={{ marginTop: 28, borderTop: `1px solid ${MK.ink}`, paddingTop: 18, display: 'flex', justifyContent: 'space-between', alignItems: 'center' }}>
          <div style={{ fontFamily: MK.serif, fontStyle: 'italic', fontSize: 18, color: MK.text }}>
            “The paper belongs to the authors. The review belongs to the reviewers. The record belongs to everyone.”
          </div>
          <div style={{ fontFamily: MK.mono, fontSize: 10.5, letterSpacing: '0.14em', textTransform: 'uppercase', color: MK.accent }}>
            Editorial charter · Art. I
          </div>
        </div>
      </div>
    </SlideChrome>
  );
};

// ═════════════════════════════════════════════════════════════════
// Slide 04 — HOW IT WORKS
// ═════════════════════════════════════════════════════════════════
window.DeckSlide4 = function DeckSlide4() {
  // Day 0 → Day 42 pipeline — 6 stages matching the landing / article pages
  const stages = [
    { day: 'Day 0', name: 'Submit', actor: 'Author', body: 'Structured upload. One URL. No PDFs to shuffle.', x: 0.02 },
    { day: 'Day 2', name: 'Triage', actor: 'Editor', body: 'Scope + methods screen. Desk reject or send out — in 48 hours.', x: 0.19 },
    { day: 'Day 14', name: 'Peer review', actor: '3 reviewers', body: 'Signed reports, $20–50 paid, DOI assigned to each.', x: 0.38 },
    { day: 'Day 21', name: 'Editor decision', actor: 'Handling editor', body: 'Reject, revise, or accept — all reviewer reports attached.', x: 0.56 },
    { day: 'Day 35', name: 'Revisions', actor: 'Authors + reviewers', body: 'One round. Threaded, in-browser. Response letter auto-linked.', x: 0.75 },
    { day: 'Day 42', name: 'Publish', actor: 'Meridian', body: 'CC-BY 4.0. DOI minted. Peer reports published alongside.', x: 0.96 },
  ];

  return (
    <SlideChrome folio="04" section="Mechanism" runningHead="Submission to publication in six weeks">
      <div style={{ height: '100%', display: 'flex', flexDirection: 'column' }}>
        <div style={{ borderBottom: `1px solid ${MK.ink}`, paddingBottom: 22, marginBottom: 44, display: 'flex', justifyContent: 'space-between', alignItems: 'flex-end' }}>
          <div>
            <Eyebrow style={{ color: MK.accent, fontSize: 12 }}>§ III · Mechanism</Eyebrow>
            <h1 style={{ fontFamily: MK.serif, fontSize: 72, lineHeight: 1.02, letterSpacing: '-0.028em', color: MK.ink, margin: '14px 0 0', fontWeight: 400 }}>
              From submission to DOI in <em style={{ fontStyle: 'italic' }}>42&nbsp;days.</em>
            </h1>
          </div>
          <div style={{ display: 'flex', gap: 40, fontFamily: MK.mono, fontSize: 10.5, letterSpacing: '0.14em', textTransform: 'uppercase', color: MK.muted, paddingBottom: 8 }}>
            <div><div style={{ color: MK.ink, fontFamily: MK.serif, fontSize: 32, letterSpacing: '-0.02em' }}>42</div>Median days</div>
            <div><div style={{ color: MK.ink, fontFamily: MK.serif, fontSize: 32, letterSpacing: '-0.02em' }}>1</div>Round of revision</div>
            <div><div style={{ color: MK.ink, fontFamily: MK.serif, fontSize: 32, letterSpacing: '-0.02em' }}>3</div>Signed reviewers</div>
          </div>
        </div>

        {/* Pipeline */}
        <div style={{ flex: 1, position: 'relative', paddingTop: 32, paddingBottom: 16 }}>
          {/* Axis line */}
          <div style={{ position: 'absolute', left: 0, right: 0, top: 120, height: 1, background: MK.ink }} />
          {/* Axis tick marks (days 0..42, every 7) */}
          {[0, 7, 14, 21, 28, 35, 42].map((d, i) => (
            <div key={d} style={{ position: 'absolute', top: 120, left: `${(d/42)*100}%`, transform: 'translateX(-50%)' }}>
              <div style={{ width: 1, height: 7, background: MK.muted }} />
              <div style={{ marginTop: 6, fontFamily: MK.mono, fontSize: 9.5, letterSpacing: '0.1em', color: MK.mutedDim, transform: 'translateX(-50%)', position: 'absolute', left: 0, whiteSpace: 'nowrap' }}>
                D{String(d).padStart(2,'0')}
              </div>
            </div>
          ))}

          {/* Stage cards */}
          {stages.map((s, i) => {
            const above = i % 2 === 0;
            return (
              <div key={i} style={{
                position: 'absolute',
                left: `${s.x * 100}%`,
                top: above ? 0 : 150,
                width: 220,
                transform: 'translateX(-10%)',
              }}>
                {above && (
                  <div>
                    <StageCard s={s} i={i} above />
                    <div style={{ width: 1, height: 18, background: MK.ink, marginLeft: 22, marginTop: 2 }} />
                    <div style={{ width: 11, height: 11, border: `1.5px solid ${MK.ink}`, background: MK.paper, borderRadius: '50%', marginLeft: 16, marginTop: -6, position: 'relative', zIndex: 2 }}>
                      <div style={{ width: 5, height: 5, background: MK.accent, borderRadius: '50%', margin: '3px auto' }} />
                    </div>
                  </div>
                )}
                {!above && (
                  <div>
                    <div style={{ width: 11, height: 11, border: `1.5px solid ${MK.ink}`, background: MK.paper, borderRadius: '50%', marginLeft: 16, marginTop: -25, position: 'relative', zIndex: 2 }}>
                      <div style={{ width: 5, height: 5, background: MK.accent, borderRadius: '50%', margin: '3px auto' }} />
                    </div>
                    <div style={{ width: 1, height: 18, background: MK.ink, marginLeft: 22, marginTop: 0 }} />
                    <StageCard s={s} i={i} />
                  </div>
                )}
              </div>
            );
          })}
        </div>

        <div style={{ borderTop: `1px solid ${MK.ink}`, paddingTop: 18, marginTop: 12, display: 'flex', justifyContent: 'space-between', alignItems: 'center' }}>
          <div style={{ fontFamily: MK.serif, fontSize: 16, color: MK.text, fontStyle: 'italic', maxWidth: 900 }}>
            The full timeline is visible to the author in real time — every paper has a live URL, not an opaque “under review”.
          </div>
          <div style={{ fontFamily: MK.mono, fontSize: 10.5, letterSpacing: '0.14em', textTransform: 'uppercase', color: MK.accent }}>Figure 2 · Editorial pipeline</div>
        </div>
      </div>
    </SlideChrome>
  );
};

function StageCard({ s, i, above }) {
  return (
    <div style={{
      borderTop: above ? 'none' : `1px solid ${MK.ink}`,
      borderBottom: above ? `1px solid ${MK.ink}` : 'none',
      paddingTop: above ? 0 : 10, paddingBottom: above ? 10 : 0,
      fontFamily: MK.sans,
    }}>
      <div style={{ display: 'flex', alignItems: 'baseline', justifyContent: 'space-between', marginBottom: 6 }}>
        <span style={{ fontFamily: MK.mono, fontSize: 10.5, letterSpacing: '0.14em', textTransform: 'uppercase', color: MK.accent }}>{s.day}</span>
        <span style={{ fontFamily: MK.mono, fontSize: 10, color: MK.mutedDim, letterSpacing: '0.1em' }}>{String(i+1).padStart(2,'0')}</span>
      </div>
      <div style={{ fontFamily: MK.serif, fontSize: 22, color: MK.ink, letterSpacing: '-0.015em', lineHeight: 1.1 }}>{s.name}</div>
      <div style={{ marginTop: 4, fontFamily: MK.mono, fontSize: 10, letterSpacing: '0.12em', textTransform: 'uppercase', color: MK.muted }}>{s.actor}</div>
      <div style={{ marginTop: 10, fontFamily: MK.serif, fontSize: 13.5, lineHeight: 1.45, color: MK.text }}>{s.body}</div>
    </div>
  );
}

// ═════════════════════════════════════════════════════════════════
// Slide 05 — MARKET & TRACTION
// ═════════════════════════════════════════════════════════════════
window.DeckSlide5 = function DeckSlide5() {
  return (
    <SlideChrome folio="05" section="Market" runningHead="Tailwinds &amp; indexing path">
      <div style={{ height: '100%', display: 'grid', gridTemplateColumns: '1.15fr 1fr', gap: 64 }}>
        {/* LEFT — market + policy */}
        <div style={{ display: 'flex', flexDirection: 'column' }}>
          <Eyebrow style={{ color: MK.accent, fontSize: 12 }}>§ IV · Market &amp; traction</Eyebrow>
          <h1 style={{ fontFamily: MK.serif, fontSize: 68, lineHeight: 1.02, letterSpacing: '-0.028em', color: MK.ink, margin: '14px 0 28px', fontWeight: 400, textWrap: 'balance' }}>
            Policy and researcher demand are pointing <em style={{ fontStyle: 'italic' }}>toward us</em>.
          </h1>

          {/* Market size strip */}
          <div style={{ borderTop: `1px solid ${MK.ink}`, borderBottom: `1px solid ${MK.rule}`, padding: '22px 0 24px', display: 'grid', gridTemplateColumns: 'repeat(3, 1fr)', gap: 24, marginBottom: 28 }}>
            {[
              { n: '$12.1B', u: 'STM market', d: 'global scientific publishing, 2024' },
              { n: '$4.9B', u: 'Biomedical', d: 'of that, life sciences + health' },
              { n: '43%', u: 'CAGR', d: 'open-access share growth, 2019–24' },
            ].map((x, i) => (
              <div key={i}>
                <div style={{ fontFamily: MK.serif, fontSize: 44, lineHeight: 1, color: MK.ink, letterSpacing: '-0.02em' }}>{x.n}</div>
                <div style={{ fontFamily: MK.mono, fontSize: 10, letterSpacing: '0.14em', textTransform: 'uppercase', color: MK.accent, marginTop: 6 }}>{x.u}</div>
                <div style={{ fontFamily: MK.serif, fontSize: 13, lineHeight: 1.45, color: MK.text, marginTop: 6 }}>{x.d}</div>
              </div>
            ))}
          </div>

          <div style={{ fontFamily: MK.mono, fontSize: 10.5, letterSpacing: '0.16em', textTransform: 'uppercase', color: MK.muted, marginBottom: 14 }}>Policy mandates driving demand</div>
          <table style={{ borderCollapse: 'collapse', fontFamily: MK.serif, fontSize: 15.5, color: MK.text, width: '100%' }}>
            <tbody>
              {[
                ['NIH Public Access Policy', '2024', 'All NIH-funded research must be open access at time of publication. $47B annual funding.'],
                ['Wellcome Open Access Policy', '2021→', 'CC-BY, no embargo, on all Wellcome-funded outputs.'],
                ['Plan S (cOAlition S)', '2021→', '30+ European & global funders require open access.'],
                ['UKRI Open Access Policy', '2024', 'All UK Research &amp; Innovation outputs must be OA.'],
              ].map(([k, y, d], i) => (
                <tr key={i} style={{ borderBottom: `1px solid ${MK.rule}` }}>
                  <td style={{ padding: '11px 16px 11px 0', color: MK.ink, width: 260, verticalAlign: 'top' }}>{k}</td>
                  <td style={{ padding: '11px 16px 11px 0', color: MK.accent, fontFamily: MK.mono, fontSize: 11, letterSpacing: '0.1em', verticalAlign: 'top', width: 70 }}>{y}</td>
                  <td style={{ padding: '11px 0', color: MK.text, verticalAlign: 'top' }}>{d}</td>
                </tr>
              ))}
            </tbody>
          </table>

          <div style={{ marginTop: 'auto', paddingTop: 18, fontFamily: MK.mono, fontSize: 9.5, letterSpacing: '0.1em', textTransform: 'uppercase', color: MK.mutedDim }}>
            Sources · STM Report 2024 · NIH OER · cOAlition&nbsp;S · UKRI
          </div>
        </div>

        {/* RIGHT — indexing milestones + researcher signal */}
        <div style={{ display: 'flex', flexDirection: 'column' }}>
          {/* Researcher signal */}
          <div style={{
            background: MK.paperDim,
            borderTop: `1px solid ${MK.ink}`, borderBottom: `1px solid ${MK.ink}`,
            padding: '26px 32px',
          }}>
            <div style={{ fontFamily: MK.mono, fontSize: 10.5, letterSpacing: '0.16em', textTransform: 'uppercase', color: MK.muted, marginBottom: 14 }}>Researcher signal</div>
            <div style={{ display: 'grid', gridTemplateColumns: 'repeat(2, 1fr)', gap: 28 }}>
              <div>
                <div style={{ fontFamily: MK.serif, fontSize: 52, lineHeight: 1, color: MK.ink, letterSpacing: '-0.02em' }}>82%</div>
                <div style={{ fontFamily: MK.serif, fontSize: 14, lineHeight: 1.45, color: MK.text, marginTop: 8 }}>
                  of authors would prefer transparent review over anonymous <span style={{ color: MK.mutedDim, fontSize: 12 }}>(Wiley 2023, n=4,300)</span>
                </div>
              </div>
              <div>
                <div style={{ fontFamily: MK.serif, fontSize: 52, lineHeight: 1, color: MK.ink, letterSpacing: '-0.02em' }}>74%</div>
                <div style={{ fontFamily: MK.serif, fontSize: 14, lineHeight: 1.45, color: MK.text, marginTop: 8 }}>
                  of reviewers say payment would increase their review quality <span style={{ color: MK.mutedDim, fontSize: 12 }}>(eLife 2022)</span>
                </div>
              </div>
            </div>
          </div>

          {/* Indexing milestones */}
          <div style={{ marginTop: 28, flex: 1, display: 'flex', flexDirection: 'column' }}>
            <div style={{ fontFamily: MK.mono, fontSize: 10.5, letterSpacing: '0.16em', textTransform: 'uppercase', color: MK.muted, marginBottom: 14 }}>Indexing path · aspirational</div>
            <div style={{ display: 'flex', flexDirection: 'column', gap: 0 }}>
              {[
                { m: 'DOAJ', when: 'Year 1', req: '5 issues · 10 articles', status: 'Target · Q4 2026' },
                { m: 'Crossref', when: 'Day 0', req: 'DOI registration agency', status: 'Live at launch' },
                { m: 'PubMed Central', when: 'Year 2', req: '25 articles · NLM technical eval', status: 'Target · Q3 2027' },
                { m: 'MEDLINE', when: 'Year 3–4', req: 'LSTRC editorial evaluation', status: 'Target · 2029' },
                { m: 'Scopus / Web of Science', when: 'Year 3–4', req: 'Content selection review', status: 'Target · 2029' },
                { m: 'Clarivate JCR · Impact Factor', when: 'Year 5+', req: '2 yrs of Web of Science coverage', status: 'Stretch' },
              ].map((r, i) => (
                <div key={i} style={{
                  display: 'grid', gridTemplateColumns: '1.2fr 0.8fr 1.5fr 1fr', gap: 18, alignItems: 'center',
                  padding: '13px 0',
                  borderBottom: `1px solid ${MK.rule}`,
                  borderTop: i === 0 ? `1px solid ${MK.ink}` : 'none',
                }}>
                  <div style={{ fontFamily: MK.serif, fontSize: 17, color: MK.ink, letterSpacing: '-0.01em' }}>{r.m}</div>
                  <div style={{ fontFamily: MK.mono, fontSize: 10.5, letterSpacing: '0.12em', textTransform: 'uppercase', color: MK.accent }}>{r.when}</div>
                  <div style={{ fontFamily: MK.serif, fontSize: 13, color: MK.text, fontStyle: 'italic' }}>{r.req}</div>
                  <div style={{ fontFamily: MK.mono, fontSize: 10, letterSpacing: '0.12em', textTransform: 'uppercase', color: i === 1 ? MK.success : MK.muted, textAlign: 'right' }}>{r.status}</div>
                </div>
              ))}
            </div>
          </div>
        </div>
      </div>
    </SlideChrome>
  );
};

// ═════════════════════════════════════════════════════════════════
// Slide 06 — CALL TO ACTION
// ═════════════════════════════════════════════════════════════════
window.DeckSlide6 = function DeckSlide6() {
  return (
    <SlideChrome folio="06" section="Call" runningHead="Two invitations" pad="0">
      <div style={{ height: '100%', display: 'flex', flexDirection: 'column' }}>
        {/* Heading band */}
        <div style={{ padding: '56px 88px 32px', borderBottom: `1px solid ${MK.ink}` }}>
          <Eyebrow style={{ color: MK.accent, fontSize: 12 }}>§ V · Call</Eyebrow>
          <h1 style={{ fontFamily: MK.serif, fontSize: 84, lineHeight: 1.0, letterSpacing: '-0.03em', color: MK.ink, margin: '14px 0 18px', fontWeight: 400, textWrap: 'balance' }}>
            Meridian opens with <em style={{ fontStyle: 'italic' }}>a founding board</em>, and with <em style={{ fontStyle: 'italic' }}>first papers</em>.
          </h1>
          <p style={{ fontFamily: MK.serif, fontSize: 20, lineHeight: 1.5, color: MK.text, maxWidth: 1100, margin: 0 }}>
            We are filling the founding editorial board now, and accepting first-issue submissions from researchers who want their work reviewed and published differently.
          </p>
        </div>

        {/* Two audiences */}
        <div style={{ flex: 1, display: 'grid', gridTemplateColumns: '1fr 1fr', gap: 0, minHeight: 0 }}>
          {/* A · Editorial board */}
          <div style={{ padding: '48px 56px 48px 88px', borderRight: `1px solid ${MK.rule}`, display: 'flex', flexDirection: 'column' }}>
            <div style={{ display: 'flex', alignItems: 'baseline', gap: 14, marginBottom: 22 }}>
              <span style={{ fontFamily: MK.mono, fontSize: 38, color: MK.accent, letterSpacing: '-0.02em' }}>A</span>
              <Eyebrow style={{ fontSize: 12 }}>For researchers &amp; clinicians</Eyebrow>
            </div>
            <div style={{ fontFamily: MK.serif, fontSize: 44, lineHeight: 1.08, letterSpacing: '-0.02em', color: MK.ink, marginBottom: 16 }}>
              Join the founding editorial board.
            </div>
            <p style={{ fontFamily: MK.serif, fontSize: 17, lineHeight: 1.55, color: MK.text, margin: '0 0 26px' }}>
              We are seating 30 founding editors across biomedical, clinical, and public-health fields. Honorarium, review budget, and a hand in the editorial charter.
            </p>

            <ul style={{ listStyle: 'none', padding: 0, margin: 0, display: 'flex', flexDirection: 'column', gap: 10 }}>
              {[
                ['Commitment', '4 handled papers/yr · ~6 hrs/month'],
                ['Honorarium', '$4,000 / year · plus per-decision stipend'],
                ['Term', '2-year founding term · renewable'],
                ['Close', 'Rolling · first cohort seated June 2026'],
              ].map(([k, v]) => (
                <li key={k} style={{ display: 'grid', gridTemplateColumns: '160px 1fr', gap: 14, paddingBottom: 10, borderBottom: `1px solid ${MK.rule}`, fontFamily: MK.serif, fontSize: 14.5, color: MK.text }}>
                  <span style={{ fontFamily: MK.mono, fontSize: 10.5, letterSpacing: '0.14em', textTransform: 'uppercase', color: MK.muted }}>{k}</span>
                  <span>{v}</span>
                </li>
              ))}
            </ul>

            <div style={{ marginTop: 'auto', paddingTop: 28 }}>
              <CTABlock
                label="Apply to the board"
                href="meridianjournal.org/founding-board"
                kbd="→"
                note="Apply · 15-minute form · CV upload"
              />
            </div>
          </div>

          {/* B · Authors */}
          <div style={{ padding: '48px 88px 48px 56px', background: MK.paperDim, display: 'flex', flexDirection: 'column' }}>
            <div style={{ display: 'flex', alignItems: 'baseline', gap: 14, marginBottom: 22 }}>
              <span style={{ fontFamily: MK.mono, fontSize: 38, color: MK.accent, letterSpacing: '-0.02em' }}>B</span>
              <Eyebrow style={{ fontSize: 12 }}>For authors</Eyebrow>
            </div>
            <div style={{ fontFamily: MK.serif, fontSize: 44, lineHeight: 1.08, letterSpacing: '-0.02em', color: MK.ink, marginBottom: 16 }}>
              Submit your next paper.
            </div>
            <p style={{ fontFamily: MK.serif, fontSize: 17, lineHeight: 1.55, color: MK.text, margin: '0 0 26px' }}>
              Reserve a slot in the inaugural issue. Review in weeks, signed reports, $150 APC — and a paper that will actually be read.
            </p>

            <ul style={{ listStyle: 'none', padding: 0, margin: 0, display: 'flex', flexDirection: 'column', gap: 10 }}>
              {[
                ['First decision', '≤ 14 days · guaranteed for inaugural issue'],
                ['APC', '$150 · full waiver if unfunded'],
                ['Scope', 'Biomedical · clinical · public health'],
                ['Opens', 'Submissions live · inaugural issue Sept 2026'],
              ].map(([k, v]) => (
                <li key={k} style={{ display: 'grid', gridTemplateColumns: '160px 1fr', gap: 14, paddingBottom: 10, borderBottom: `1px solid ${MK.rule}`, fontFamily: MK.serif, fontSize: 14.5, color: MK.text }}>
                  <span style={{ fontFamily: MK.mono, fontSize: 10.5, letterSpacing: '0.14em', textTransform: 'uppercase', color: MK.muted }}>{k}</span>
                  <span>{v}</span>
                </li>
              ))}
            </ul>

            <div style={{ marginTop: 'auto', paddingTop: 28 }}>
              <CTABlock
                label="Join the author waitlist"
                href="meridianjournal.org/submit"
                kbd="→"
                note="Waitlist · first slot guaranteed for signups"
                inverse
              />
            </div>
          </div>
        </div>

        {/* Contact colophon */}
        <div style={{
          borderTop: `1px solid ${MK.ink}`,
          padding: '22px 88px 24px',
          display: 'grid', gridTemplateColumns: 'repeat(4, 1fr)', gap: 32,
          background: MK.paper,
        }}>
          {[
            ['Editorial', 'editors@meridianjournal.org'],
            ['Board applications', 'board@meridianjournal.org'],
            ['Press &amp; partnerships', 'press@meridianjournal.org'],
            ['Next milestone', 'Founding board seated · June 2026'],
          ].map(([k, v], i) => (
            <div key={i} style={{ borderLeft: i > 0 ? `1px solid ${MK.rule}` : 'none', paddingLeft: i > 0 ? 20 : 0 }}>
              <div style={{ fontFamily: MK.mono, fontSize: 9.5, letterSpacing: '0.16em', textTransform: 'uppercase', color: MK.muted, marginBottom: 6 }}>{k}</div>
              <div style={{ fontFamily: MK.serif, fontSize: 15.5, color: MK.ink, letterSpacing: '-0.005em' }} dangerouslySetInnerHTML={{ __html: v.replace(/&amp;/g, '&') }} />
            </div>
          ))}
        </div>
      </div>
    </SlideChrome>
  );
};

function CTABlock({ label, href, kbd, note, inverse }) {
  return (
    <div>
      <div style={{
        display: 'inline-flex', alignItems: 'center', gap: 14,
        background: inverse ? MK.ink : MK.accent,
        color: MK.paper,
        padding: '18px 26px',
        fontFamily: MK.sans, fontSize: 17, fontWeight: 500, letterSpacing: '-0.005em',
      }}>
        <span>{label}</span>
        <span style={{ fontFamily: MK.mono, color: 'rgba(251,250,247,0.7)' }}>{kbd}</span>
      </div>
      <div style={{ marginTop: 12, fontFamily: MK.mono, fontSize: 10.5, letterSpacing: '0.12em', textTransform: 'uppercase', color: MK.muted }}>
        {note}<br/><span style={{ color: MK.ink, textTransform: 'none', letterSpacing: 0, fontFamily: MK.serif, fontSize: 14, fontStyle: 'italic' }}>{href}</span>
      </div>
    </div>
  );
}
