// AboutView — the "About / Qui som" landing.
// Styled to match the existing Collection / Teachings chrome (coll-hero, coll-body)
// so it reads as part of the Library rather than a separate surface.
// Content: condensed Section 8 of the Amos Project Platform Manifesto
// (WorldMission.media — twenty-six years of technical localization, the moment
// when AI became ready, the passion, the gap, and the expertise brought in).

function AboutView({ onBack, signedIn, onOpenLanguageModal, onOpenSignIn, onOpenUserMenu, userMenuOpen, onCloseUserMenu, onSignOut }) {
  const I = window.useI18n();
  const ACCENT = '#3DCADC';

  const stats = [
    { value: '26',    label: 'Years of localization' },
    { value: '100+',  label: 'Living languages' },
    { value: '\u2014', label: 'Consumer-grade translation' },
    { value: '1\u20031', label: 'Ministry : platform' }
  ];

  const editorialLines = [
    'Twenty-six years of infrastructure-grade localization: telephony, voice recording, grammar files, telematics, banking.',
    'The owners trained between them at the Moody Bible Institute in Chicago and ESADE Business School in Barcelona.',
    'Before the company existed, the same people helped ministries carry the message of Jesus across language barriers.',
    'The Amos Project is the arc closing \u2014 commercial expertise returning to the vision that preceded the company.'
  ];

  return React.createElement('div', { className:'amos-coll' },

    // Topbar (reused app chrome)
    React.createElement('div', { className:'amos-topbar' },
      React.createElement('button', {
        className:'amos-sidebar-toggle',
        onClick:()=>window.dispatchEvent(new CustomEvent('amos:toggle-sidebar')),
        title:'Toggle sidebar ([)',
        'aria-label': 'Toggle sidebar'
      },
        React.createElement('svg', { width:16, height:16, viewBox:'0 0 24 24', fill:'none', stroke:'currentColor', strokeWidth:'2', strokeLinecap:'round', strokeLinejoin:'round' },
          React.createElement('rect', { x:'3', y:'4', width:'18', height:'16', rx:'2' }),
          React.createElement('line', { x1:'9', y1:'4', x2:'9', y2:'20' })
        )
      ),
      React.createElement('div', { className:'amos-crumbs' },
        React.createElement('span', { className:'crumb-link', onClick: onBack }, 'The Amos Project'),
        React.createElement('span', { className:'sep' }, '\u203a'),
        React.createElement('span', { className:'here' }, I.t('nav.about'))
      ),
      React.createElement('div', { className:'amos-topbar-right' },
        window.NotificationsBell ? React.createElement(window.NotificationsBell, null) : null,
        window.WalletChip && React.createElement(window.WalletChip, null),
        React.createElement('button', {
          className:'amos-pill lang',
          onClick: onOpenLanguageModal
        },
          React.createElement('span', { className:'code' }, I.getLang()),
          React.createElement('span', { className:'chev' }, window.I.chevronDown(14))
        ),
        React.createElement('span', { className:'topbar-sep' }),
        signedIn
          ? React.createElement('div', { className:'amos-userpill-wrap' },
              React.createElement('button', { className:'amos-pill avatar', onClick: onOpenUserMenu },
                React.createElement('span', { className:'av' }, 'JR'),
                React.createElement('span', { className:'chev' }, window.I.chevronDown(14))
              ),
              React.createElement(window.UserMenu, { open: !!userMenuOpen, onClose: onCloseUserMenu, onSignOut })
            )
          : React.createElement('button', { className:'amos-pill signin', onClick: onOpenSignIn }, I.t('topbar.sign_in'))
      )
    ),

    // ── Editorial Hero ────────────────────────
    React.createElement('section', {
      className:'coll-hero',
      style:{ '--coll-accent': ACCENT }
    },
      React.createElement('div', { className:'coll-hero-top' },
        React.createElement('div', { className:'coll-hero-tag' },
          React.createElement('span', { className:'num' }, 'WM'),
          React.createElement('span', null, 'ABOUT'),
          React.createElement('span', { className:'dot' }),
          React.createElement('span', { className:'coll-subtype' }, 'WORLDMISSION.MEDIA \u00b7 EST. c. 2000')
        )
      ),
      React.createElement('h1', { className:'coll-hero-title' }, 'A project of WorldMission.media.'),
      React.createElement('div', { className:'coll-hero-tagline' },
        'Twenty-six years of excellence in highly technical localization, returned to the vision that preceded the company.'
      ),
      React.createElement('p', { className:'coll-hero-sub' },
        'WorldMission.media has spent twenty-six years getting language right when the stakes are high \u2014 telephone IVR trees for millions of callers, voice recording at broadcast quality, grammar files for speech recognizers, training Microsoft\u2019s AI to understand a child speaking Italian, fine-tuning some of the most sophisticated microphones in the industry across distances and ages, telematics, banking, concatenated number sequences that must sound natural across languages whose number grammars work nothing like English. Infrastructure-grade multilingual communication, not consumer-grade translation. The Amos Project is what happens when that discipline turns back toward the vision that preceded it.'
      ),

      // Stat strip
      React.createElement('div', { className:'coll-stats' },
        stats.map((s, i) => React.createElement('div', { key: i, className:'coll-stat' },
          React.createElement('div', { className:'coll-stat-val' }, s.value),
          React.createElement('div', { className:'coll-stat-lbl' }, s.label)
        ))
      ),

      // Editorial bullets
      React.createElement('div', { className:'coll-editorial' },
        editorialLines.map((line, i) => React.createElement('div', { key:i, className:'coll-ed-line' },
          React.createElement('span', { className:'coll-ed-mark' }, '\u00a7'),
          React.createElement('span', null, line)
        ))
      )
    ),

    // ── Reception Record — authoritative platform stats (vault source of truth) ──
    window.ReceptionRecord && React.createElement(window.ReceptionRecord, { variant: 'in-about' }),

    // ── Body ─────────────────────────────────
    React.createElement('section', { className:'coll-body' },

      React.createElement('div', { className:'coll-body-head' },
        React.createElement('span', null, 'What made the moment'),
        React.createElement('span', null, 'Why the Amos Project, why now')
      ),

      // Three "what made the moment" pillars — bold lead + body pattern
      React.createElement('div', { className:'about-pillars', style:{
        display:'grid', gridTemplateColumns:'repeat(3, 1fr)', gap:'28px', margin:'20px 0 44px'
      }},
        [
          {
            head: 'The technology became ready.',
            body: 'The most recent generation of artificial intelligence is — for the first time in the history of machine computation — capable of handling ancient languages, theological nuance, and multilingual output at a quality level that was impossible even five years ago. A library of this complexity could not have been built with earlier technology. Now it can.'
          },
          {
            head: 'The passion was already there.',
            body: 'The owners and team of WorldMission.media are Christians whose conviction about the earliest sources of their faith, and about the kingdom message they saw being lost in so much of modern preaching, long predates the means to act on it. The passion is not new. The means are.'
          },
          {
            head: 'The gap was obvious.',
            body: 'No equivalent library exists. The pre-Nicene sources, the preterocanonical literature, the analytical translations, the original-language apparatus — available in scattered form, scholarly editions priced for institutions, paywalled databases. No platform makes the full textual world of the earliest believers accessible to ordinary readers in their own language. That is the gap.'
          }
        ].map((p, i) => React.createElement('div', { key: i, style:{
          background:'var(--surface-sub, #f8f8f9)',
          borderLeft: `3px solid ${ACCENT}`,
          padding:'18px 20px',
          borderRadius:'4px'
        }},
          React.createElement('div', { style:{
            fontWeight:700, fontSize:'15px', color:'var(--ink-9, #061F27)', marginBottom:'8px'
          }}, p.head),
          React.createElement('div', { style:{
            fontSize:'13px', lineHeight:1.55, color:'var(--ink-6, #697B80)'
          }}, p.body)
        ))
      ),

      // Formation + the depth paragraph
      React.createElement('div', { className:'coll-body-head' },
        React.createElement('span', null, 'The formation behind the project'),
        React.createElement('span', null, null)
      ),
      React.createElement('div', { style:{
        fontSize:'14px', lineHeight:1.65, color:'var(--ink-9, #061F27)', margin:'14px 0 22px',
        maxWidth:'780px'
      }},
        'The depth extends past voice. One member of the team has, over many years, single-handedly built enterprise software for the pharmaceutical community that looks like Salesforce and synchronizes with Salesforce \u2014 a serious feat of client engineering, deployed in the field for years. The formation behind all of this is unusually broad. Between them, the owners have trained in the Pastoral Studies program at the ',
        React.createElement('b', null, 'Moody Bible Institute in Chicago'),
        ' and earned a Master of Business Administration at ',
        React.createElement('b', null, 'ESADE Business School in Barcelona'),
        ' \u2014 a combination that explains much about how the Amos Project holds theological seriousness and platform rigor in the same hand. The owners have also, in years past, planted churches together.'
      ),

      // Arc closing
      React.createElement('div', { style:{
        borderTop:'1px solid var(--ink-15, #DCE0E0)',
        marginTop:'8px',
        paddingTop:'22px'
      }},
        React.createElement('div', { style:{
          fontSize:'9px', fontWeight:700, letterSpacing:'.15em', textTransform:'uppercase',
          color: ACCENT, marginBottom:'10px'
        }}, 'The arc closing'),
        React.createElement('div', { style:{
          fontSize:'15px', lineHeight:1.65, color:'var(--ink-9, #061F27)', maxWidth:'780px'
        }},
          'Before WorldMission.media existed as a company, the same people were doing a different kind of work: helping ministries carry the message of Jesus across language barriers, with whatever technology the moment allowed. The commercial company grew out of that ministry experience and eventually outgrew it in scale \u2014 but never in purpose. The Amos Project is, in one sense, the arc closing. Twenty-six years of technical excellence returning to the vision that preceded the company itself.'
        )
      )
    )
,
    React.createElement(window.Footer, null)
  )
}
Object.assign(window, { AboutView });