// ReferenceMediaStrip — LUMO video card, TANhub Multimedia pattern.
// Shown ONLY for pericopes in the 4 Gospels + Acts.
//
// Visual model (from TANhub design system · Multimedia card):
//   ┌─────────────────────────┐
//   │      [LUMO still]       │    16:9 image
//   │                         │
//   ├─────────────────────────┤
//   │ ▶ 02:33:09      Català  │    play glyph + timecode · language
//   └─────────────────────────┘
//     • Book · Bible Media Group    attribution line (outside card)
//
// Kept narrow (max-width 260px) and right-floated into the Read view so
// it acts as an editorial sidebar rather than a hero block.

function ReferenceMediaStrip({ hasLumo, pericopeLabel, lang, thumb, book }) {
  const [open, setOpen] = React.useState(false);
  if (!hasLumo) return null;

  const language = lang || 'Català';
  const bookName = book || (pericopeLabel || '').split(' ')[0] || '';

  // Deterministic timecode so it stays stable per pericope.
  const seed = (pericopeLabel || '').split('').reduce((a,c)=>a+c.charCodeAt(0), 0);
  const totalSec = (seed % 3) * 3600 + (seed * 7 % 60) * 60 + (seed * 13 % 60);
  const fmtTC = (s) => {
    const h = Math.floor(s / 3600);
    const m = Math.floor((s % 3600) / 60);
    const ss = s % 60;
    return String(h).padStart(2,'0') + ':' + String(m).padStart(2,'0') + ':' + String(ss).padStart(2,'0');
  };

  const card = React.createElement('figure', { className: 'lumo-card' },
    React.createElement('button', {
      className: 'lumo-card-frame',
      onClick: () => setOpen(true),
      'aria-label': 'Watch LUMO segment for ' + pericopeLabel + ' in ' + language
    },
      React.createElement('div', { className: 'lumo-card-thumb' },
        thumb && React.createElement('img', {
          src: thumb, alt: '',
          onError: (e) => { e.target.style.display = 'none'; }
        }),
        React.createElement('div', { className: 'lumo-card-fallback' }),
        React.createElement('div', { className: 'lumo-card-play' },
          React.createElement('svg', { viewBox:'0 0 24 24', width:14, height:14 },
            React.createElement('polygon', { points:'7 5 19 12 7 19', fill:'currentColor' })
          )
        )
      ),
      React.createElement('div', { className: 'lumo-card-bar' },
        React.createElement('span', { className: 'lcb-left' },
          React.createElement('svg', { viewBox:'0 0 24 24', width:12, height:12, fill:'none', stroke:'currentColor', strokeWidth:1.8 },
            React.createElement('rect', { x:2.5, y:7, width:14, height:10, rx:1.5 }),
            React.createElement('polygon', { points:'16.5 10 22 7 22 17 16.5 14', fill:'currentColor', stroke:'none' })
          ),
          React.createElement('span', { className: 'lcb-time' }, fmtTC(totalSec))
        ),
        React.createElement('span', { className: 'lcb-lang' }, language)
      )
    ),
    React.createElement('figcaption', { className: 'lumo-card-cap' },
      React.createElement('span', { className: 'lumo-dot' }),
      React.createElement('span', { className: 'lumo-cap-book' }, bookName),
      React.createElement('span', { className: 'lumo-cap-sep' }, '·'),
      React.createElement('span', { className: 'lumo-cap-src' }, 'Bible Media Group')
    )
  );

  const modal = open && React.createElement('div', { className: 'lumo-modal', onClick: () => setOpen(false) },
    React.createElement('div', { className: 'lumo-modal-box', onClick: (e) => e.stopPropagation() },
      React.createElement('button', {
        className: 'lumo-modal-close',
        onClick: () => setOpen(false),
        'aria-label': 'Close'
      }, '✕'),
      React.createElement('div', { className: 'lumo-modal-frame' },
        thumb
          ? React.createElement('img', { src: thumb, alt:'' })
          : React.createElement('div', { className: 'lumo-modal-fallback' }),
        React.createElement('div', { className: 'lumo-modal-bar' },
          React.createElement('span', { className: 'lmb-left' },
            React.createElement('svg', { viewBox:'0 0 24 24', width:14, height:14, fill:'none', stroke:'currentColor', strokeWidth:1.8 },
              React.createElement('rect', { x:2.5, y:7, width:14, height:10, rx:1.5 }),
              React.createElement('polygon', { points:'16.5 10 22 7 22 17 16.5 14', fill:'currentColor', stroke:'none' })
            ),
            React.createElement('span', { className: 'lmb-time' }, '00:00:00 / ' + fmtTC(totalSec))
          ),
          React.createElement('span', { className: 'lmb-lang' }, language)
        )
      ),
      React.createElement('div', { className: 'lumo-modal-cap' },
        React.createElement('span', null,
          React.createElement('b', null, pericopeLabel), ' · LUMO · Bible Media Group'
        ),
        React.createElement('button', { className: 'lpc-lang-btn' },
          (window.I && window.I.filter) ? window.I.filter(12) : null, 'Change language'
        )
      )
    )
  );

  return React.createElement(React.Fragment, null, card, modal);
}
Object.assign(window, { ReferenceMediaStrip });