/* Maison Silya — 09 Journal (editorial index). */
function JournalScreen({ onArticle }) {
  const featured = { cat: t('jo.feat_cat'), date: t('jo.feat_d'), title: t('jo.feat_title'), tone: 'stone-300', image: 'media/journal-featured.jpg', excerpt: t('jo.feat_x') };
  const articles = [
    { cat: t('jo.a1c'), date: t('jo.a1d'), title: t('jo.a1t'), tone: 'stone-200', image: 'media/journal-1.jpg' },
    { cat: t('jo.a2c'), date: t('jo.a2d'), title: t('jo.a2t'), tone: 'travertine', image: 'media/journal-2.jpg' },
    { cat: t('jo.a3c'), date: t('jo.a3d'), title: t('jo.a3t'), tone: 'champagne', image: 'media/journal-3.jpg' },
    { cat: t('jo.a4c'), date: t('jo.a4d'), title: t('jo.a4t'), tone: 'stone-300', image: 'media/journal-4.jpg' },
    { cat: t('jo.a5c'), date: t('jo.a5d'), title: t('jo.a5t'), tone: 'stone-400', image: 'media/journal-5.jpg' },
    { cat: t('jo.a6c'), date: t('jo.a6d'), title: t('jo.a6t'), tone: 'stone-200', image: 'media/journal-6.jpg' },
  ];
  return (
    <div style={{ background: C('canvas') }}>
      <section className="ms-mvt" style={{ padding: 'clamp(9rem,16vh,12rem) clamp(1.5rem,5vw,4rem) clamp(3.5rem,7vh,5.5rem)' }}>
        <div className="ms-stagger" style={{ maxWidth: 1100, margin: '0 auto' }}>
          <Chapter label={t('jo.kicker')} title={t('jo.title')} />
        </div>
      </section>

      {/* Featured long-read */}
      <section className="ms-mvt" style={{ padding: '0 clamp(1.5rem,5vw,4rem) clamp(5.5rem,10vh,8rem)' }}>
        <div className="ms-stagger ms-split" style={{ maxWidth: 1440, margin: '0 auto', display: 'grid', gridTemplateColumns: '1.3fr 1fr', gap: 'clamp(2rem,5vw,5rem)', alignItems: 'center', cursor: 'pointer' }}
          onClick={() => onArticle(featured)}>
          <Plate ratio="4 / 3" tone={featured.tone} image={featured.image} label={t('jo.editorial')} />
          <div>
            <div style={{ fontFamily: C('font-sans'), fontSize: 11, letterSpacing: '0.24em', textTransform: 'uppercase', color: C('accent') }}>{featured.cat}<span style={{ color: C('ink-tertiary') }}> — {featured.date}</span></div>
            <h2 style={{ fontFamily: C('font-serif'), fontWeight: 400, fontSize: 'clamp(2.1rem,3.8vw,3.1rem)', letterSpacing: '-0.01em', lineHeight: 1.12, margin: '18px 0 0' }}>{featured.title}</h2>
            <p style={{ fontFamily: C('font-serif'), fontWeight: 300, fontSize: 19, lineHeight: 1.7, color: C('ink-secondary'), marginTop: 22, maxWidth: 460 }}>{featured.excerpt}</p>
            <div style={{ marginTop: 32, display: 'flex', alignItems: 'center', gap: 18 }}>
              <Btn variant="ghost" onClick={(e) => { e.stopPropagation(); onArticle(featured); }}>{t('jo.read')}</Btn>
            </div>
          </div>
        </div>
      </section>

      {/* Grid */}
      <section className="ms-mvt" style={{ padding: '0 clamp(1.5rem,5vw,4rem) clamp(6rem,12vh,10rem)' }}>
        <div style={{ maxWidth: 1440, margin: '0 auto', borderTop: `1px solid ${C('line')}`, paddingTop: 'clamp(3rem,5vh,4rem)',
          display: 'grid', gridTemplateColumns: 'repeat(3,1fr)', gap: 'clamp(1.5rem,3vw,3rem)', rowGap: 'clamp(3.5rem,7vh,5rem)' }} className="ms-piece-grid ms-stagger">
          {articles.map((a) => (
            <article key={a.title} style={{ cursor: 'pointer' }} onClick={() => onArticle(a)}>
              <Plate ratio="4 / 3" tone={a.tone} image={a.image} label={t('jo.editorial')} />
              <div style={{ paddingTop: 18 }}>
                <div style={{ fontFamily: C('font-sans'), fontSize: 11, letterSpacing: '0.22em', textTransform: 'uppercase', color: C('ink-tertiary') }}>{a.cat} — {a.date}</div>
                <h3 style={{ fontFamily: C('font-serif'), fontWeight: 400, fontSize: 23, lineHeight: 1.2, margin: '10px 0 0' }}>{a.title}</h3>
              </div>
            </article>
          ))}
        </div>
      </section>
    </div>
  );
}
Object.assign(window, { JournalScreen });