/* Maison Silya — 07 Process (the commission journey). */
function ProcessScreen({ onNav }) {
  const stages = [
    ['Ⅰ', t('pr.s1'), t('pr.s1_d'), t('pr.s1_t'), 'stone-200'],
    ['Ⅱ', t('pr.s2'), t('pr.s2_d'), t('pr.s2_t'), 'travertine'],
    ['Ⅲ', t('pr.s3'), t('pr.s3_d'), t('pr.s3_t'), 'stone-300'],
    ['Ⅳ', t('pr.s4'), t('pr.s4_d'), t('pr.s4_t'), 'champagne'],
    ['Ⅴ', t('pr.s5'), t('pr.s5_d'), t('pr.s5_t'), 'stone-400'],
    ['Ⅵ', t('pr.s6'), t('pr.s6_d'), t('pr.s6_t'), 'stone-300'],
  ];
  return (
    <div style={{ background: C('canvas') }}>
      <section className="ms-mvt" style={{ padding: 'clamp(9rem,17vh,13rem) clamp(1.5rem,5vw,4rem) clamp(3.5rem,7vh,5.5rem)' }}>
        <div className="ms-stagger" style={{ maxWidth: 1100, margin: '0 auto' }}>
          <Chapter index="III" label={t('pr.kicker')} title={t('pr.title')} lede={t('pr.lede')} />
        </div>
      </section>

      <section className="ms-mvt" style={{ padding: '0 clamp(1.5rem,5vw,4rem) clamp(6rem,12vh,10rem)' }}>
        <div className="ms-stagger" style={{ maxWidth: 1080, margin: '0 auto' }}>
          {stages.map(([num, title, desc, time, tone], i) => (
            <div key={title} style={{ display: 'grid', gridTemplateColumns: '120px 1fr 200px', gap: 'clamp(1.5rem,4vw,4rem)', alignItems: 'start',
              padding: 'clamp(2.75rem,5.5vh,4.5rem) 0', borderTop: `1px solid ${C('line')}`, borderBottom: i === stages.length - 1 ? `1px solid ${C('line')}` : 'none' }} className="ms-stage">
              <div style={{ fontFamily: C('font-serif'), fontWeight: 300, fontSize: 'clamp(2.5rem,4vw,3.5rem)', lineHeight: 1, color: C('accent') }}>{num}</div>
              <div>
                <h3 style={{ fontFamily: C('font-serif'), fontWeight: 400, fontSize: 'clamp(1.7rem,2.5vw,2.15rem)', margin: 0 }}>{title}</h3>
                <p style={{ fontFamily: C('font-serif'), fontSize: 17.5, lineHeight: 1.75, color: C('ink-secondary'), margin: '14px 0 0', maxWidth: 520 }}>{desc}</p>
              </div>
              <div style={{ textAlign: 'right' }} className="ms-stage-time">
                <div style={{ fontFamily: C('font-sans'), fontSize: 10, letterSpacing: '0.24em', textTransform: 'uppercase', color: C('ink-tertiary') }}>{t('pr.intime')}</div>
                <div style={{ fontFamily: C('font-serif'), fontSize: 17, color: C('ink'), marginTop: 8 }}>{time}</div>
              </div>
            </div>
          ))}
          <div style={{ marginTop: 'clamp(3.5rem,7vh,5.5rem)', display: 'flex', justifyContent: 'center' }}>
            <Btn variant="primary" size="lg" onClick={() => onNav('contact')}>{t('pr.cta')}</Btn>
          </div>
        </div>
      </section>
    </div>
  );
}
Object.assign(window, { ProcessScreen });