// Landing page sections

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

// ───────────────── Nav ─────────────────
window.LandingNav = function LandingNav({ mobile }) {
  const links = ['For Authors', 'For Reviewers', 'Pricing', 'About', 'Ethics'];
  if (mobile) {
    return (
      <nav style={{ borderBottom: `1px solid ${M.rule}`, background: M.paper, position: 'sticky', top: 0, zIndex: 10 }}>
        <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'center', padding: '14px 20px' }}>
          <Wordmark size={18} />
          <div style={{ display: 'flex', flexDirection: 'column', gap: 4, padding: 4 }}>
            <div style={{ width: 18, height: 1, background: M.ink }} />
            <div style={{ width: 18, height: 1, background: M.ink }} />
          </div>
        </div>
      </nav>
    );
  }
  return (
    <nav style={{ borderBottom: `1px solid ${M.rule}`, background: M.paper, position: 'sticky', top: 0, zIndex: 10, backdropFilter: 'blur(8px)' }}>
      <div style={{ maxWidth: 1280, margin: '0 auto', padding: '18px 40px', display: 'flex', justifyContent: 'space-between', alignItems: 'center' }}>
        <Wordmark size={22} />
        <div style={{ display: 'flex', alignItems: 'center', gap: 32 }}>
          <div style={{ display: 'flex', gap: 28, fontFamily: M.sans, fontSize: 13.5, color: M.text }}>
            {links.map(l => <a key={l} href="#" style={{ color: M.text, textDecoration: 'none' }}>{l}</a>)}
          </div>
          <div style={{ width: 1, height: 20, background: M.rule }} />
          <div style={{ display: 'flex', gap: 12, alignItems: 'center' }}>
            <a href="#" style={{ fontFamily: M.sans, fontSize: 13.5, color: M.text, textDecoration: 'none' }}>Sign in</a>
            <MButton size="md" arrow={false} style={{ padding: '8px 16px', fontSize: 13 }}>Submit</MButton>
          </div>
        </div>
      </div>
    </nav>
  );
};

// ───────────────── Hero ─────────────────
const TAGLINES = {
  'A': { eyebrow: 'An open-access journal of biomedical and healthcare research', title: 'A modern journal for biomedical research.' },
  'B': { eyebrow: 'A new kind of journal', title: <>Rigorous. <span style={{ color: M.muted }}>Transparent.</span> <em style={{ fontStyle: 'italic' }}>Fast.</em></> },
  'C': { eyebrow: 'Est. 2026 · ISSN 0000·0000', title: <>Open access,<br/>open review,<br/><em style={{ fontStyle: 'italic' }}>paid reviewers.</em></> },
};

window.LandingHero = function LandingHero({ tagline = 'B', mobile }) {
  const t = TAGLINES[tagline];
  return (
    <section style={{ borderBottom: `1px solid ${M.ink}`, background: M.paper }}>
      <div style={{ maxWidth: 1280, margin: '0 auto', padding: mobile ? '40px 20px 48px' : '72px 40px 80px' }}>
        {/* Masthead banner */}
        <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'center', borderTop: `1px solid ${M.ink}`, borderBottom: `1px solid ${M.rule}`, padding: mobile ? '8px 0' : '10px 0', marginBottom: mobile ? 32 : 56 }}>
          <Eyebrow>Vol. 01 · Inaugural issue · 2026</Eyebrow>
          <Eyebrow style={{ display: mobile ? 'none' : 'inline' }}>Open Access · CC-BY 4.0 · Signed Peer Review</Eyebrow>
          <Eyebrow style={{ color: M.accent }}>Now accepting submissions</Eyebrow>
        </div>

        <div style={{ display: 'grid', gridTemplateColumns: mobile ? '1fr' : '1.3fr 1fr', gap: mobile ? 32 : 80, alignItems: 'start' }}>
          <div>
            <Eyebrow style={{ color: M.accent }}>{t.eyebrow}</Eyebrow>
            <h1 style={{
              fontFamily: M.serif,
              fontSize: mobile ? 54 : 108,
              lineHeight: 0.95,
              letterSpacing: '-0.035em',
              color: M.ink,
              margin: '20px 0 28px',
              fontWeight: 400,
              textWrap: 'balance',
            }}>{t.title}</h1>
            <p style={{
              fontFamily: M.serif,
              fontSize: mobile ? 18 : 22,
              lineHeight: 1.5,
              color: M.text,
              maxWidth: 560,
              margin: '0 0 36px',
              fontWeight: 300,
            }}>
              Peer review published alongside every article. Reviewers paid for their work, with citable DOIs. A flat $150 APC. Decisions in weeks, not months.
            </p>
            <div style={{ display: 'flex', gap: 12, flexWrap: 'wrap' }}>
              <MButton size="lg" variant="primary">Submit a manuscript</MButton>
              <MButton size="lg" variant="secondary">Apply to editorial board</MButton>
            </div>
          </div>

          {/* Right column — stat block */}
          <div style={{ display: 'flex', flexDirection: 'column', gap: 0, border: `1px solid ${M.rule}`, background: M.paper }}>
            <div style={{ padding: '14px 20px', borderBottom: `1px solid ${M.rule}`, background: M.paperDim, display: 'flex', justifyContent: 'space-between', alignItems: 'center' }}>
              <Eyebrow>At a glance</Eyebrow>
              <Eyebrow style={{ color: M.accent }}>LIVE</Eyebrow>
            </div>
            {[
              ['Median time to first decision', '14 days', M.accent],
              ['Reviewer honorarium', '$20 – $50', M.ink],
              ['Article processing charge', '$150', M.ink],
              ['Peer reviews · named & published', '100%', M.success],
              ['Open access license', 'CC-BY 4.0', M.ink],
            ].map(([k, v, c]) => (
              <div key={k} style={{ padding: '16px 20px', borderBottom: `1px solid ${M.rule}`, display: 'flex', justifyContent: 'space-between', alignItems: 'baseline', gap: 16 }}>
                <span style={{ fontFamily: M.sans, fontSize: 13, color: M.muted }}>{k}</span>
                <span style={{ fontFamily: M.mono, fontSize: 14, color: c, fontWeight: 500, letterSpacing: '-0.01em', whiteSpace: 'nowrap' }}>{v}</span>
              </div>
            ))}
            <div style={{ padding: '14px 20px', display: 'flex', gap: 8, flexWrap: 'wrap' }}>
              <RuleBadge color={M.success}>Peer reviewed</RuleBadge>
              <RuleBadge color={M.info}>Open data</RuleBadge>
              <RuleBadge color={M.accent}>Signed review</RuleBadge>
            </div>
          </div>
        </div>
      </div>
    </section>
  );
};

// ───────────────── Pillars ─────────────────
window.LandingPillars = function LandingPillars({ mobile }) {
  const pillars = [
    { num: '01', tag: 'Transparent peer review', title: <>Reviews published <em style={{ fontStyle: 'italic' }}>alongside</em> every article.</>, body: 'Reviewer names, reports, and author responses — all permanent, all citable. Readers see how conclusions were tested, not just the conclusion.', foot: '100% of reviews signed & published' },
    { num: '02', tag: 'Fair compensation', title: <>Reviewers paid, <em style={{ fontStyle: 'italic' }}>cited,</em> and credited.</>, body: 'Every review earns the reviewer $20 – $50 and a citable DOI. Review work becomes visible scholarly output, not invisible unpaid labor.', foot: 'Honorarium per review · $20 – $50' },
    { num: '03', tag: 'Open access by default', title: <>CC-BY 4.0. <em style={{ fontStyle: 'italic' }}>$150 APC.</em> No paywalls.</>, body: 'A flat article processing charge — roughly a tenth of the legacy rate — with full waivers for authors from low-income countries. Every article free to read, forever.', foot: 'Flat APC · full waivers available' },
  ];
  return (
    <section style={{ background: M.paperDim, borderBottom: `1px solid ${M.rule}` }}>
      <div style={{ maxWidth: 1280, margin: '0 auto', padding: mobile ? '48px 20px' : '88px 40px' }}>
        <div style={{ display: 'flex', alignItems: 'baseline', justifyContent: 'space-between', marginBottom: mobile ? 28 : 48, flexWrap: 'wrap', gap: 16 }}>
          <div>
            <Eyebrow>§ 01 · What makes Meridian different</Eyebrow>
            <h2 style={{ fontFamily: M.serif, fontSize: mobile ? 38 : 56, lineHeight: 1.02, letterSpacing: '-0.025em', color: M.ink, margin: '12px 0 0', fontWeight: 400, maxWidth: 900 }}>
              Three commitments we make <em style={{ fontStyle: 'italic' }}>to every paper</em>.
            </h2>
          </div>
        </div>

        <div style={{ display: 'grid', gridTemplateColumns: mobile ? '1fr' : 'repeat(3, 1fr)', gap: 0, borderTop: `1px solid ${M.ink}`, borderLeft: `1px solid ${M.rule}` }}>
          {pillars.map(p => (
            <article key={p.num} style={{ padding: mobile ? '28px 24px' : '36px 32px', background: M.paper, borderRight: `1px solid ${M.rule}`, borderBottom: `1px solid ${M.rule}`, display: 'flex', flexDirection: 'column', minHeight: mobile ? 'auto' : 380 }}>
              <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'start', marginBottom: 20 }}>
                <Eyebrow style={{ color: M.accent, fontSize: 11 }}>{p.num}</Eyebrow>
                <ArcMark size={24} strokeWidth={1.2} />
              </div>
              <Eyebrow style={{ fontSize: 10.5 }}>{p.tag}</Eyebrow>
              <h3 style={{ fontFamily: M.serif, fontSize: mobile ? 26 : 30, lineHeight: 1.15, letterSpacing: '-0.02em', color: M.ink, margin: '10px 0 16px', fontWeight: 400 }}>{p.title}</h3>
              <p style={{ fontFamily: M.serif, fontSize: 16, lineHeight: 1.6, color: M.text, margin: 0, flex: 1, fontWeight: 300 }}>{p.body}</p>
              <div style={{ marginTop: 24, paddingTop: 16, borderTop: `1px solid ${M.rule}`, display: 'flex', justifyContent: 'space-between', alignItems: 'center' }}>
                <Eyebrow style={{ color: M.accent, fontSize: 9.5 }}>{p.foot}</Eyebrow>
                <span style={{ fontFamily: M.mono, fontSize: 10, color: M.muted }}>→</span>
              </div>
            </article>
          ))}
        </div>
      </div>
    </section>
  );
};

// ───────────────── How it works ─────────────────
window.LandingHow = function LandingHow({ mobile }) {
  const steps = [
    { n: '01', t: 'Submit', d: 'Upload manuscript, figures, and data. ORCID sign-in verifies authorship. Intake completeness check runs in seconds.', time: '< 1 min' },
    { n: '02', t: 'Editorial review', d: 'Handling editor triages scope, novelty, and reproducibility within 72 hours. No desk-reject fog — you get a reasoned decision either way.', time: '≤ 72 hr' },
    { n: '03', t: 'Paid peer review', d: 'Two to three matched reviewers are invited and compensated per review. Reports are structured, signed, and written for the record.', time: '10 – 14 d' },
    { n: '04', t: 'Co-creation', d: 'Authors revise in a shared workspace alongside reviewers. The thread is preserved — every question, every response — and published with the paper.', time: '7 – 14 d' },
    { n: '05', t: 'Published open', d: 'Article, reviews, and author responses go live under CC-BY 4.0. All parties receive citable DOIs. Indexed, archived, permanent.', time: 'Day one' },
  ];
  return (
    <section style={{ background: M.paper, borderBottom: `1px solid ${M.rule}` }}>
      <div style={{ maxWidth: 1280, margin: '0 auto', padding: mobile ? '48px 20px' : '88px 40px' }}>
        <div style={{ display: 'flex', alignItems: 'baseline', justifyContent: 'space-between', marginBottom: mobile ? 28 : 48, flexWrap: 'wrap', gap: 16 }}>
          <div>
            <Eyebrow>§ 02 · The editorial pipeline</Eyebrow>
            <h2 style={{ fontFamily: M.serif, fontSize: mobile ? 38 : 56, lineHeight: 1.02, letterSpacing: '-0.025em', color: M.ink, margin: '12px 0 0', fontWeight: 400, maxWidth: 900 }}>
              From submission to publication<br/>in <em style={{ fontStyle: 'italic' }}>four to six weeks.</em>
            </h2>
          </div>
          <Eyebrow style={{ textAlign: 'right' }}>Median cycle · 4 – 6 weeks<br/>Legacy journals · 6 – 12 months</Eyebrow>
        </div>

        {/* Desktop: horizontal pipeline */}
        {!mobile && (
          <div style={{ display: 'grid', gridTemplateColumns: 'repeat(5, 1fr)', gap: 0, borderTop: `1px solid ${M.ink}` }}>
            {steps.map((s, i) => (
              <div key={s.n} style={{ padding: '24px 20px 28px', borderRight: i === 4 ? `1px solid ${M.rule}` : 'none', borderLeft: `1px solid ${M.rule}`, background: M.paper, position: 'relative' }}>
                <div style={{ position: 'absolute', top: -1, left: 0, height: 3, width: '100%', background: i === 0 ? M.accent : 'transparent' }} />
                <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'center', marginBottom: 14 }}>
                  <Eyebrow style={{ color: M.accent }}>{s.n}</Eyebrow>
                  <Eyebrow style={{ fontSize: 9.5 }}>{s.time}</Eyebrow>
                </div>
                <h3 style={{ fontFamily: M.serif, fontSize: 24, lineHeight: 1.1, letterSpacing: '-0.015em', color: M.ink, margin: '0 0 12px', fontWeight: 400 }}>{s.t}</h3>
                <p style={{ fontFamily: M.sans, fontSize: 13, lineHeight: 1.55, color: M.text, margin: 0 }}>{s.d}</p>
              </div>
            ))}
          </div>
        )}

        {/* Mobile: vertical pipeline */}
        {mobile && (
          <div style={{ borderTop: `1px solid ${M.ink}` }}>
            {steps.map((s, i) => (
              <div key={s.n} style={{ padding: '22px 0 26px', borderBottom: `1px solid ${M.rule}`, display: 'grid', gridTemplateColumns: '60px 1fr auto', gap: 16, alignItems: 'start' }}>
                <Eyebrow style={{ color: M.accent, paddingTop: 2 }}>{s.n}</Eyebrow>
                <div>
                  <h3 style={{ fontFamily: M.serif, fontSize: 22, lineHeight: 1.1, color: M.ink, margin: '0 0 8px', fontWeight: 400 }}>{s.t}</h3>
                  <p style={{ fontFamily: M.sans, fontSize: 13.5, lineHeight: 1.55, color: M.text, margin: 0 }}>{s.d}</p>
                </div>
                <Eyebrow style={{ fontSize: 9, paddingTop: 4 }}>{s.time}</Eyebrow>
              </div>
            ))}
          </div>
        )}

        {/* Timeline visual */}
        {!mobile && (
          <div style={{ marginTop: 28, padding: '20px 0', borderTop: `1px solid ${M.rule}`, display: 'flex', alignItems: 'center', gap: 24, fontFamily: M.mono, fontSize: 10, color: M.muted, letterSpacing: '0.1em' }}>
            <span>DAY 0</span>
            <div style={{ flex: 1, height: 1, background: M.rule, position: 'relative' }}>
              {[20, 40, 60, 80].map(pct => (
                <div key={pct} style={{ position: 'absolute', left: `${pct}%`, top: -3, width: 1, height: 7, background: M.muted }} />
              ))}
              <div style={{ position: 'absolute', left: 0, top: -1, height: 3, width: '28%', background: M.accent }} />
            </div>
            <span>DAY 42 · PUBLISHED</span>
          </div>
        )}
      </div>
    </section>
  );
};

// ───────────────── Social proof ─────────────────
window.LandingProof = function LandingProof({ mobile }) {
  const board = [
    ['Prof. Amara Okonkwo', 'Editor-in-Chief', 'Stanford · Molecular Neurobiology'],
    ['Dr. Hiroshi Tanaka', 'Clinical Trials', 'Keio University Hospital'],
    ['Prof. Elena Vasquez', 'Epidemiology', 'Johns Hopkins BSPH'],
    ['Dr. Rahul Mehta', 'Computational Biology', 'EMBL Heidelberg'],
    ['Prof. Sofia Almeida', 'Cardiology', 'Karolinska Institutet'],
    ['Dr. Priya Raman', 'Genomics & Data', 'Broad Institute'],
    ['Prof. Samuel Ngwenya', 'Infectious Disease', 'Univ. of Cape Town'],
    ['Dr. Chen Wei', 'Oncology', 'MSKCC'],
  ];
  const funders = ['Chan Zuckerberg Initiative', 'Wellcome Trust', 'Arcadia Fund', 'Open Philanthropy', 'Simons Foundation'];
  const indexing = [
    ['PubMed Central', 'Submitted', M.warning],
    ['Crossref DOIs', 'Active', M.success],
    ['DOAJ', 'Under review', M.warning],
    ['Web of Science', 'Planned · 2027', M.muted],
    ['Scopus', 'Planned · 2027', M.muted],
  ];
  return (
    <section style={{ background: M.paperWarm, borderBottom: `1px solid ${M.rule}` }}>
      <div style={{ maxWidth: 1280, margin: '0 auto', padding: mobile ? '48px 20px' : '88px 40px' }}>
        {/* Editorial board */}
        <div style={{ marginBottom: mobile ? 40 : 72 }}>
          <div style={{ display: 'flex', alignItems: 'baseline', justifyContent: 'space-between', marginBottom: mobile ? 24 : 36, flexWrap: 'wrap', gap: 16 }}>
            <div>
              <Eyebrow>§ 03 · Editorial board</Eyebrow>
              <h2 style={{ fontFamily: M.serif, fontSize: mobile ? 36 : 48, lineHeight: 1.05, letterSpacing: '-0.025em', color: M.ink, margin: '10px 0 0', fontWeight: 400 }}>
                Active researchers. <em style={{ fontStyle: 'italic' }}>Named.</em> Accountable.
              </h2>
            </div>
            <a href="#" style={{ fontFamily: M.sans, fontSize: 13, color: M.accent, textDecoration: 'none' }}>View full board (42) →</a>
          </div>
          <div style={{ display: 'grid', gridTemplateColumns: mobile ? '1fr 1fr' : 'repeat(4, 1fr)', gap: 0, borderTop: `1px solid ${M.ink}`, borderLeft: `1px solid ${M.rule}` }}>
            {board.map(([n, r, aff]) => (
              <div key={n} style={{ padding: mobile ? '16px 14px' : '22px 20px', borderRight: `1px solid ${M.rule}`, borderBottom: `1px solid ${M.rule}`, background: M.paper }}>
                <div style={{ width: 36, height: 36, border: `1px solid ${M.rule}`, display: 'flex', alignItems: 'center', justifyContent: 'center', marginBottom: 12, background: M.paperDim, fontFamily: M.serif, fontSize: 15, color: M.muted }}>
                  {n.split(' ').slice(-2).map(x => x[0]).join('')}
                </div>
                <div style={{ fontFamily: M.serif, fontSize: mobile ? 14.5 : 16, color: M.ink, marginBottom: 4, lineHeight: 1.2, letterSpacing: '-0.01em' }}>{n}</div>
                <Eyebrow style={{ fontSize: 9, color: M.accent }}>{r}</Eyebrow>
                <div style={{ fontFamily: M.sans, fontSize: 11, color: M.muted, marginTop: 6, lineHeight: 1.4 }}>{aff}</div>
              </div>
            ))}
          </div>
        </div>

        {/* Funders + indexing */}
        <div style={{ display: 'grid', gridTemplateColumns: mobile ? '1fr' : '1.2fr 1fr', gap: mobile ? 32 : 64, alignItems: 'start' }}>
          <div>
            <Eyebrow>§ 04 · Funding partnerships</Eyebrow>
            <h3 style={{ fontFamily: M.serif, fontSize: mobile ? 22 : 26, lineHeight: 1.15, color: M.ink, margin: '10px 0 24px', letterSpacing: '-0.015em', fontWeight: 400 }}>
              Supported by research funders who <em style={{ fontStyle: 'italic' }}>require</em> open publication.
            </h3>
            <div style={{ borderTop: `1px solid ${M.ink}`, borderBottom: `1px solid ${M.rule}` }}>
              {funders.map(f => (
                <div key={f} style={{ padding: '14px 0', borderBottom: `1px solid ${M.rule}`, display: 'flex', justifyContent: 'space-between', alignItems: 'center' }}>
                  <span style={{ fontFamily: M.serif, fontSize: 18, color: M.ink, letterSpacing: '-0.01em' }}>{f}</span>
                  <Eyebrow style={{ fontSize: 9.5 }}>In discussion</Eyebrow>
                </div>
              ))}
            </div>
            <div style={{ marginTop: 14 }}>
              <Eyebrow style={{ color: M.muted, fontStyle: 'italic' }}>Aspirational · in active conversation</Eyebrow>
            </div>
          </div>

          <div>
            <Eyebrow>§ 05 · Indexing & archival</Eyebrow>
            <h3 style={{ fontFamily: M.serif, fontSize: mobile ? 22 : 26, lineHeight: 1.15, color: M.ink, margin: '10px 0 24px', letterSpacing: '-0.015em', fontWeight: 400 }}>
              Indexed where it counts.
            </h3>
            <div style={{ border: `1px solid ${M.rule}`, background: M.paper }}>
              {indexing.map(([n, status, color], i) => (
                <div key={n} style={{ padding: '14px 18px', borderBottom: i === indexing.length - 1 ? 'none' : `1px solid ${M.rule}`, display: 'flex', justifyContent: 'space-between', alignItems: 'center' }}>
                  <span style={{ fontFamily: M.sans, fontSize: 13.5, color: M.ink, fontWeight: 500 }}>{n}</span>
                  <span style={{ display: 'flex', alignItems: 'center', gap: 8 }}>
                    <span style={{ width: 6, height: 6, borderRadius: '50%', background: color }} />
                    <span style={{ fontFamily: M.mono, fontSize: 10, color: color, letterSpacing: '0.08em', textTransform: 'uppercase' }}>{status}</span>
                  </span>
                </div>
              ))}
            </div>
          </div>
        </div>
      </div>
    </section>
  );
};

// ───────────────── CTA band ─────────────────
window.LandingCTA = function LandingCTA({ mobile }) {
  return (
    <section style={{ background: M.ink, borderBottom: `1px solid ${M.ink}` }}>
      <div style={{ maxWidth: 1280, margin: '0 auto', padding: mobile ? '56px 20px' : '96px 40px', display: 'grid', gridTemplateColumns: mobile ? '1fr' : '1.3fr 1fr', gap: mobile ? 32 : 80, alignItems: 'center' }}>
        <div>
          <Eyebrow style={{ color: M.accent }}>§ 06 · Begin</Eyebrow>
          <h2 style={{ fontFamily: M.serif, fontSize: mobile ? 44 : 72, lineHeight: 1, letterSpacing: '-0.03em', color: M.paper, margin: '18px 0 24px', fontWeight: 400, textWrap: 'balance' }}>
            Publish your next paper<br/>the way it <em style={{ fontStyle: 'italic' }}>should</em> work.
          </h2>
          <p style={{ fontFamily: M.serif, fontSize: mobile ? 17 : 20, lineHeight: 1.5, color: M.darkText, margin: 0, maxWidth: 540, fontWeight: 300, opacity: 0.85 }}>
            Submission takes under a minute. You'll hear back from a handling editor within 72 hours — not 72 days.
          </p>
        </div>
        <div style={{ display: 'flex', flexDirection: 'column', gap: 14 }}>
          <button style={{ fontFamily: M.sans, fontWeight: 500, fontSize: 15, padding: '20px 24px', background: M.accent, color: M.paper, border: `1px solid ${M.accent}`, cursor: 'pointer', display: 'flex', justifyContent: 'space-between', alignItems: 'center', letterSpacing: '-0.005em' }}>
            <span>Submit a manuscript</span><span>→</span>
          </button>
          <button style={{ fontFamily: M.sans, fontWeight: 500, fontSize: 15, padding: '20px 24px', background: 'transparent', color: M.paper, border: `1px solid ${M.darkRule}`, cursor: 'pointer', display: 'flex', justifyContent: 'space-between', alignItems: 'center', letterSpacing: '-0.005em' }}>
            <span>Apply to the editorial board</span><span>→</span>
          </button>
          <div style={{ marginTop: 12, display: 'flex', gap: 8, flexWrap: 'wrap' }}>
            <RuleBadge color={M.accent} style={{ color: M.accent, borderColor: M.accent }}>ORCID sign-in</RuleBadge>
            <RuleBadge color={M.darkMuted} style={{ color: M.darkMuted, borderColor: M.darkRule }}>No login required to browse</RuleBadge>
          </div>
        </div>
      </div>
    </section>
  );
};

// ───────────────── Footer ─────────────────
window.LandingFooter = function LandingFooter({ mobile }) {
  const cols = [
    ['For Authors', ['Submit a manuscript', 'Author guidelines', 'Scope & sections', 'APC & waivers', 'Preprint policy']],
    ['For Reviewers', ['Apply as reviewer', 'Review guidelines', 'Honorarium & DOIs', 'Reviewer index', 'Conflict policy']],
    ['About', ['Our mission', 'Editorial board', 'Governance', 'Funding', 'Press & media']],
    ['Ethics & Policy', ['Ethics & integrity', 'Data availability', 'Corrections', 'Retractions', 'Complaints']],
  ];
  return (
    <footer style={{ background: M.paper, padding: mobile ? '48px 20px 28px' : '72px 40px 32px' }}>
      <div style={{ maxWidth: 1280, margin: '0 auto' }}>
        <div style={{ display: 'grid', gridTemplateColumns: mobile ? '1fr' : '1.6fr repeat(4, 1fr)', gap: mobile ? 32 : 48, paddingBottom: mobile ? 32 : 56, borderBottom: `1px solid ${M.rule}` }}>
          <div>
            <Wordmark size={24} />
            <p style={{ fontFamily: M.serif, fontSize: 15, lineHeight: 1.55, color: M.text, margin: '16px 0 20px', maxWidth: 320, fontWeight: 300 }}>
              An open-access journal of biomedical and healthcare research. Transparent peer review, paid reviewers, fair access.
            </p>
            <div style={{ display: 'flex', flexDirection: 'column', gap: 6 }}>
              <Eyebrow>Meridian Publishing Co-op · Est. 2026</Eyebrow>
              <Eyebrow>ISSN 0000 · 0000</Eyebrow>
              <Eyebrow style={{ color: M.accent }}>hello@meridian.pub</Eyebrow>
            </div>
          </div>
          {cols.map(([h, items]) => (
            <div key={h}>
              <Eyebrow style={{ color: M.ink }}>{h}</Eyebrow>
              <ul style={{ listStyle: 'none', padding: 0, margin: '16px 0 0', display: 'flex', flexDirection: 'column', gap: 10 }}>
                {items.map(i => (
                  <li key={i}><a href="#" style={{ fontFamily: M.sans, fontSize: 13.5, color: M.text, textDecoration: 'none' }}>{i}</a></li>
                ))}
              </ul>
            </div>
          ))}
        </div>
        <div style={{ paddingTop: 24, display: 'flex', justifyContent: 'space-between', alignItems: 'center', flexWrap: 'wrap', gap: 12 }}>
          <Eyebrow>© 2026 Meridian Publishing Co-op · CC-BY 4.0 unless noted</Eyebrow>
          <div style={{ display: 'flex', gap: 18 }}>
            <a href="#" style={{ fontFamily: M.sans, fontSize: 12, color: M.muted, textDecoration: 'none' }}>Privacy</a>
            <a href="#" style={{ fontFamily: M.sans, fontSize: 12, color: M.muted, textDecoration: 'none' }}>Terms</a>
            <a href="#" style={{ fontFamily: M.sans, fontSize: 12, color: M.muted, textDecoration: 'none' }}>Contact</a>
            <a href="#" style={{ fontFamily: M.sans, fontSize: 12, color: M.muted, textDecoration: 'none' }}>Mastodon</a>
            <a href="#" style={{ fontFamily: M.sans, fontSize: 12, color: M.muted, textDecoration: 'none' }}>Bluesky</a>
          </div>
        </div>
      </div>
    </footer>
  );
};
