/* OpenAccess.jsx — large editorial call-out */

function OpenAccess() {
  const { t } = useI18n();
  return (
    <section className="section dark oa" id="oa">
      <div className="container oa-grid">
        <div>
          <div className="section-thread" aria-hidden="true"></div>
          <p className="oa-callout">{rich(t('oa.callout'))}</p>
          <div className="oa-availability">
            <span className="oa-availability-dot" aria-hidden="true"></span>
            {t('oa.availability')}
          </div>
          <p className="oa-body">{rich(t('oa.body'))}</p>
          <p className="oa-proceeds">{t('oa.proceeds')}</p>
          <div className="oa-meta">{t('oa.meta')}</div>
          <div className="hero-actions">
            <a className="btn accent">
              {t('oa.btnRead')} <span className="arrow">→</span>
            </a>
          </div>
        </div>
        <div style={{ borderLeft: '1px solid color-mix(in oklab, var(--paper-50) 22%, transparent)', paddingLeft: 40 }}>
          <div className="oa-meta" style={{ marginBottom: 16 }}>{t('oa.detailsTitle')}</div>
          <ul style={{ listStyle: 'none', padding: 0, margin: 0, display: 'grid', gap: 10, fontFamily: 'var(--font-serif)', fontSize: 15, lineHeight: 1.5, color: 'var(--paper-300)' }}>
            {t('oa.details').map((d, i) => (
              <li key={i} style={i === 0 ? { color: 'var(--paper-50)', fontWeight: 600 } : undefined}>{d}</li>
            ))}
          </ul>
        </div>
      </div>
    </section>
  );
}

window.OpenAccess = OpenAccess;