// ModesBandV2 — simplified to reader-intent framing.
//   Two peer actions (Read · Study deeply); verification is a small trust note.
//   Internal product taxonomy (B/C/D/A) lives in the schema, not the user surface.

function ModesBandV2({ onOpenDoc, onOpenAnalytical, onOpenReaders, onOpenAnnotated, onOpenReviewed }) {

  const peers = [
    {
      letter: 'C',
      kicker: 'READ',
      title: 'Read any passage',
      desc: 'A clean translation in your language with optional inline notes where the Greek is stronger. For everyday reading, devotional use, or public reading aloud.',
      cta: 'Open on Rom 8:28',
      onClick: onOpenReaders || onOpenDoc,
    },
    {
      letter: 'B',
      kicker: 'STUDY',
      title: 'Study it deeply',
      desc: 'A reader-progression study: what the early church taught, the library the authors were reading, structure, the Greek up close, and where later traditions diverged.',
      cta: 'Open on Rom 9',
      onClick: onOpenAnalytical || onOpenDoc,
    }
  ];

  return React.createElement('section', { className: 'wmb-v2' },
    React.createElement('div', { className: 'wmb-head' },
      React.createElement('div', null,
        React.createElement('div', { className: 'wmb-kicker' }, 'Two ways to engage'),
        React.createElement('div', { className: 'wmb-title' },
          'Read any passage · ',
          React.createElement('em', null, 'or study it deeply')
        )
      ),
      React.createElement('span', {
        className: 'wmb-more',
        onClick: onOpenDoc,
        style: { font: '600 12.5px Roboto', color: 'var(--tan-cyan-600)', cursor: 'pointer', display: 'inline-flex', alignItems: 'center', gap: 4 }
      }, 'Try on Rom 8:28 ', window.I.arrowRight(13))
    ),

    React.createElement('div', { className: 'wmb-v2-consumer' },
      peers.map(p => React.createElement('div', { key: p.letter, className: 'wmb-card', onClick: p.onClick },
        React.createElement('div', { className: 'wmb-letter' }, p.letter),
        React.createElement('div', { className: 'wmb-k' }, p.kicker),
        React.createElement('div', { className: 'wmb-n' }, p.title),
        React.createElement('div', { className: 'wmb-d' }, p.desc),
        React.createElement('div', { className: 'wmb-cta' }, p.cta + ' ', window.I.arrowRight(13))
      ))
    ),

    // Linguist verification — demoted from a peer card to a small trust note.
    // Regular readers see "this has been reviewed by [agency]" as a check mark;
    // they don't need a separate product card explaining it.
    React.createElement('div', { className: 'wmb-v2-partner', style: { padding: '12px 18px' } },
      React.createElement('div', { className: 'pa-copy' },
        React.createElement('p', { style: { margin: 0, fontSize: '13px', color: 'var(--tan-cyan-700)' } },
          React.createElement('strong', null, 'Some passages have been reviewed by linguists.'),
          ' When you see a check mark on a translation, a credentialed reviewer from one of our partner agencies has signed off on the rendering: ',
          React.createElement('span', { className: 'pa-agencies', style: { display: 'inline-flex', gap: '4px', verticalAlign: 'middle', margin: '0 4px' } },
            ['bib', 'bec', 'ubs', 'wyc', 'abs'].map(c =>
              React.createElement(window.SealBadge, { key: c, code: c, sm: true })
            )
          ),
          '. ',
          React.createElement('a', {
            href: '#',
            onClick: (e) => { e.preventDefault(); if (onOpenReviewed) onOpenReviewed(); else onOpenDoc && onOpenDoc(); },
            style: { color: 'var(--tan-cyan-600)', textDecoration: 'none', fontWeight: 600 }
          }, 'See reviewed pericopes →')
        )
      )
    )
  );
}
Object.assign(window, { ModesBandV2 });