/* Maison Silya — Journal article (long-form reading). */
function ArticleScreen({ article, onNav }) {
  const a = article || { cat: t('jo.feat_cat'), title: t('jo.feat_title'), tone: 'stone-300', image: 'media/journal-featured.jpg' };
  return (
    <div style={{ background: C('canvas') }}>
      {/* Article header */}
      <section className="ms-mvt" style={{ padding: 'clamp(8rem,15vh,11rem) clamp(1.5rem,5vw,4rem) clamp(2.5rem,5vh,4rem)' }}>
        <div className="ms-stagger" style={{ maxWidth: 760, margin: '0 auto', textAlign: 'center' }}>
          <button onClick={() => onNav('journal')} style={{ background: 'none', border: 'none', cursor: 'pointer', fontFamily: C('font-sans'), fontSize: 11, letterSpacing: '0.24em', textTransform: 'uppercase', color: C('ink-tertiary') }}>{t('ar.back')}</button>
          <div style={{ fontFamily: C('font-sans'), fontSize: 11, letterSpacing: '0.28em', textTransform: 'uppercase', color: C('accent'), marginTop: 36 }}>{a.cat}</div>
          <h1 style={{ fontFamily: C('font-serif'), fontWeight: 400, fontSize: 'clamp(2.35rem,4.6vw,3.85rem)', letterSpacing: '-0.018em', lineHeight: 1.07, margin: '20px 0 0' }}>{a.title}</h1>
          <div style={{ fontFamily: C('font-sans'), fontSize: 11, letterSpacing: '0.2em', textTransform: 'uppercase', color: C('ink-tertiary'), marginTop: 26 }}>{t('ar.by')}</div>
        </div>
      </section>

      {/* Hero image */}
      <section className="ms-mvt" style={{ padding: '0 clamp(1.5rem,5vw,4rem) clamp(3.5rem,7vh,5.5rem)' }}>
        <div className="ms-stagger" style={{ maxWidth: 1100, margin: '0 auto' }}>
          <Plate ratio="16 / 9" tone={a.tone} image={a.image} label={t('ar.hero')} />
        </div>
      </section>

      {/* Body */}
      <section className="ms-mvt" style={{ padding: '0 clamp(1.5rem,5vw,4rem) clamp(4rem,8vh,6rem)' }}>
        <div className="ms-stagger" style={{ maxWidth: 680, margin: '0 auto' }}>
          <p style={{ fontFamily: C('font-serif'), fontWeight: 300, fontSize: 'clamp(1.4rem,2vw,1.65rem)', lineHeight: 1.6, color: C('ink'), margin: 0 }}>
            {t('ar.lede')}
          </p>
          {[t('ar.p1'), t('ar.p2')].map((para, i) => (
            <p key={i} style={{ fontFamily: C('font-serif'), fontSize: 18.5, lineHeight: 1.9, color: C('ink-secondary'), marginTop: 30 }}>{para}</p>
          ))}
          <blockquote style={{ margin: '52px 0', paddingLeft: 30, borderLeft: `2px solid ${C('accent')}` }}>
            <p style={{ fontFamily: C('font-serif'), fontStyle: 'italic', fontWeight: 300, fontSize: 'clamp(1.55rem,2.5vw,2.1rem)', lineHeight: 1.4, color: C('ink'), margin: 0 }}>
              {t('ar.quote')}
            </p>
          </blockquote>
          <p style={{ fontFamily: C('font-serif'), fontSize: 18.5, lineHeight: 1.9, color: C('ink-secondary'), marginTop: 30 }}>
            {t('ar.p3')}
          </p>
        </div>
      </section>

      {/* Closing CTA */}
      <section className="ms-mvt" style={{ padding: '0 clamp(1.5rem,5vw,4rem) clamp(7rem,13vh,11rem)' }}>
        <div className="ms-stagger" style={{ maxWidth: 680, margin: '0 auto', paddingTop: 'clamp(2.5rem,5vh,4rem)', borderTop: `1px solid ${C('line')}`, display: 'flex', justifyContent: 'space-between', alignItems: 'center', gap: 20, flexWrap: 'wrap' }}>
          <span style={{ fontFamily: C('font-serif'), fontStyle: 'italic', fontSize: 19, color: C('ink-secondary') }}>{t('ar.cont')}</span>
          <Btn variant="secondary" onClick={() => onNav('journal')}>{t('ar.all')}</Btn>
        </div>
      </section>
    </div>
  );
}
Object.assign(window, { ArticleScreen });