/* Maison Silya — Materials. Fibres that age with grace, shown close —
   each material a large macro paired with its story, revealed in turn. */
function MaterialsScreen({ onNav }) {
  const mats = [
    [t('mt.m1'), t('mt.m1_o'), t('mt.m1_d'), 'stone-300', 'media/wool-macro.jpg'],
    [t('mt.m2'), t('mt.m2_o'), t('mt.m2_d'), 'champagne', 'media/silk-macro.jpg'],
    [t('mt.m3'), t('mt.m3_o'), t('mt.m3_d'), 'stone-200', 'media/nettle-macro.jpg'],
    [t('mt.m4'), t('mt.m4_o'), t('mt.m4_d'), 'travertine', 'media/abrash-macro.jpg'],
  ];
  return (
    <div style={{ background: C('canvas') }}>
      <section className="ms-mvt" style={{ padding: 'clamp(8rem,16vh,13rem) clamp(1.5rem,5vw,4rem) clamp(3.5rem,7vh,5.5rem)' }}>
        <div className="ms-stagger" style={{ maxWidth: 1080, margin: '0 auto' }}>
          <Chapter label={t('mt.kicker')} title={t('mt.title')} lede={t('mt.lede')} />
        </div>
      </section>

      <section className="ms-mvt" style={{ padding: '0 clamp(1.5rem,5vw,4rem) clamp(6rem,12vh,10rem)' }}>
        <div style={{ maxWidth: 1440, margin: '0 auto', display: 'grid', gridTemplateColumns: 'repeat(2,1fr)', gap: 'clamp(3rem,5vw,5rem) clamp(1.5rem,3vw,3rem)' }} className="ms-mat-grid ms-stagger">
          {mats.map(([name, origin, desc, tone, img]) => (
            <article key={name} style={{ display: 'grid', gridTemplateColumns: '1fr 1fr', gap: 'clamp(1.5rem,2.5vw,2.5rem)', alignItems: 'center' }} className="ms-mat-item">
              <Plate ratio="1 / 1" tone={tone} label={t('mt.close')} image={img} />
              <div>
                <div style={{ fontFamily: C('font-sans'), fontSize: 11, letterSpacing: '0.22em', textTransform: 'uppercase', color: C('ink-tertiary') }}>{origin}</div>
                <h2 style={{ fontFamily: C('font-serif'), fontWeight: 400, fontSize: 'clamp(1.7rem,2.5vw,2.15rem)', margin: '10px 0 0' }}>{name}</h2>
                <p style={{ fontFamily: C('font-serif'), fontSize: 16.5, lineHeight: 1.75, color: C('ink-secondary'), marginTop: 14 }}>{desc}</p>
              </div>
            </article>
          ))}
        </div>
      </section>

      <section className="ms-mvt" style={{ background: C('deep-black'), color: C('ink-inverse'), padding: 'clamp(6rem,13vh,11rem) clamp(1.5rem,5vw,4rem)' }}>
        <div style={{ position: 'absolute', inset: 0, background: 'radial-gradient(46% 55% at 30% 50%, rgba(166,136,90,0.10), rgba(166,136,90,0) 70%)', pointerEvents: 'none' }} />
        <div className="ms-stagger" style={{ position: 'relative', maxWidth: 1080, margin: '0 auto', display: 'flex', flexWrap: 'wrap', justifyContent: 'space-between', alignItems: 'center', gap: 36 }}>
          <h2 style={{ fontFamily: C('font-serif'), fontWeight: 300, fontSize: 'clamp(1.9rem,3.2vw,2.8rem)', lineHeight: 1.3, margin: 0, maxWidth: 640, color: C('ivory') }}>
            {t('mt.band')}
          </h2>
          <Btn variant="inverse" size="lg" onClick={() => onNav('contact')}>{t('mt.cta')}</Btn>
        </div>
      </section>
    </div>
  );
}
Object.assign(window, { MaterialsScreen });