/* Silya — 02 Philosophy. A page from a book, revealed slowly: one centred
   measure, the values read as a continuous litany, a single illustration,
   and the founder's line as the closing signature in the dark. */
function PhilosophyScreen({ onNav }) {
  const values = [[t('ph.v1'), t('ph.v1_d')], [t('ph.v2'), t('ph.v2_d')], [t('ph.v3'), t('ph.v3_d')], [t('ph.v4'), t('ph.v4_d')]];
  return (
    <div style={{ background: C('canvas') }}>
      {/* Masthead */}
      <section className="ms-mvt" style={{ padding: 'clamp(9rem,18vh,14rem) clamp(1.5rem,5vw,4rem) clamp(3rem,6vh,5rem)' }}>
        <div className="ms-stagger" style={{ maxWidth: 1100, margin: '0 auto' }}>
          <Chapter index="I" label={t('ph.kicker')}
            title={<React.Fragment>{t('ph.t1')}<span style={{ fontStyle: 'italic', fontWeight: 300 }}>{t('ph.t_em')}</span>{t('ph.t2')}</React.Fragment>} />
        </div>
      </section>

      {/* The page — one centred reading measure */}
      <section className="ms-mvt" style={{ padding: '0 clamp(1.5rem,5vw,4rem) clamp(4.5rem,9vh,7rem)' }}>
        <div className="ms-stagger" style={{ maxWidth: 660, margin: '0 auto' }}>
          <p style={{ fontFamily: C('font-serif'), fontWeight: 300, fontSize: 'clamp(1.5rem,2.4vw,1.95rem)', lineHeight: 1.6, margin: 0, color: C('ink') }}>
            {t('ph.lede')}
          </p>
          <p style={{ fontFamily: C('font-serif'), fontSize: 18.5, lineHeight: 1.9, color: C('ink-secondary'), marginTop: 32 }}>
            {t('ph.body')}
          </p>
        </div>
      </section>

      {/* Illustration, as in a book */}
      <section className="ms-mvt" style={{ padding: '0 clamp(1.5rem,5vw,4rem) clamp(5rem,9vh,7rem)' }}>
        <div className="ms-stagger" style={{ maxWidth: 1080, margin: '0 auto' }}>
          <Plate ratio="16 / 9" tone="stone-300" image="media/atelier.jpg" label={t('ph.portrait')} />
          <div style={{ fontFamily: C('font-serif'), fontStyle: 'italic', fontSize: 15, color: C('ink-tertiary'), textAlign: 'center', marginTop: 18 }}>{t('ph.portrait')}</div>
        </div>
      </section>

      {/* The litany — what we hold, read as text */}
      <section className="ms-mvt" style={{ padding: '0 clamp(1.5rem,5vw,4rem) clamp(6rem,12vh,9rem)' }}>
        <div className="ms-stagger" style={{ maxWidth: 660, margin: '0 auto' }}>
          <div style={{ display: 'flex', justifyContent: 'center', margin: '0 0 clamp(2.5rem,5vh,3.5rem)' }}>
            <span style={{ width: 6, height: 6, background: C('accent'), rotate: '45deg', display: 'block' }}></span>
          </div>
          {values.map(([vt, vd]) => (
            <p key={vt} style={{ fontFamily: C('font-serif'), fontSize: 18.5, lineHeight: 1.9, color: C('ink-secondary'), margin: '0 0 30px' }}>
              <span style={{ fontFamily: C('font-sans'), fontSize: 12, letterSpacing: '0.26em', textTransform: 'uppercase', color: C('accent'), marginRight: 16 }}>{vt}.</span>
              {vd}
            </p>
          ))}
          <div style={{ marginTop: 48, display: 'flex', justifyContent: 'center' }}><Btn variant="ghost" onClick={() => onNav('craftsmanship')}>{t('ph.link')}</Btn></div>
        </div>
      </section>

      {/* The signature */}
      <section className="ms-mvt" style={{ background: C('deep-black'), color: C('ink-inverse'), padding: 'clamp(7rem,17vh,14rem) clamp(1.5rem,5vw,4rem)' }}>
        <div style={{ position: 'absolute', inset: 0, background: 'radial-gradient(46% 50% at 50% 50%, rgba(166,136,90,0.10), rgba(166,136,90,0) 70%)', pointerEvents: 'none' }} />
        <div className="ms-stagger" style={{ position: 'relative', maxWidth: 980, margin: '0 auto', textAlign: 'center' }}>
          <p style={{ fontFamily: C('font-serif'), fontWeight: 300, fontStyle: 'italic', fontSize: 'clamp(2.1rem,3.8vw,3.25rem)', lineHeight: 1.38, margin: 0, color: C('ivory') }}>
            {t('ph.quote')}
          </p>
          <div style={{ fontFamily: C('font-sans'), fontSize: 11, letterSpacing: '0.3em', textTransform: 'uppercase', color: C('ink-inverse-secondary'), marginTop: 42 }}>{t('ph.quote_by')}</div>
        </div>
      </section>
    </div>
  );
}
Object.assign(window, { PhilosophyScreen });