/* Maison Silya — 06 Craftsmanship. A slow vertical descent through the
   months: a full-bleed loom hero, then each stage revealed as its own
   movement as the page is traversed — so scrolling feels like the wait.
   A dark interstitial holds the house's creed before the density band. */
function CraftStep({ num, st, sd, time, img, right }) {
  return (
    <section className="ms-mvt" style={{ background: C('canvas'), padding: 'clamp(3.5rem,8vh,6.5rem) clamp(1.5rem,5vw,4rem)' }}>
      <div className="ms-stagger ms-split" style={{ maxWidth: 1280, margin: '0 auto', display: 'grid', gridTemplateColumns: '1fr 1fr', gap: 'clamp(2rem,5vw,5.5rem)', alignItems: 'center' }}>
        <figure style={{ margin: 0, gridColumn: right ? 2 : 1, gridRow: 1 }}>
          <Plate ratio="3 / 4" tone="stone-300" image={img} label={st} />
        </figure>
        <div style={{ gridColumn: right ? 1 : 2, gridRow: 1 }} className="ms-view-info">
          <div style={{ display: 'flex', alignItems: 'baseline', gap: 16 }}>
            <span style={{ fontFamily: C('font-serif'), fontWeight: 300, fontSize: 'clamp(2.4rem,4vw,3.4rem)', lineHeight: 1, color: C('accent') }}>{num}</span>
            <span style={{ fontFamily: C('font-sans'), fontSize: 11, letterSpacing: '0.26em', textTransform: 'uppercase', color: C('ink-tertiary') }}>{time}</span>
          </div>
          <h2 style={{ fontFamily: C('font-serif'), fontWeight: 400, fontSize: 'clamp(2.1rem,3.6vw,3rem)', letterSpacing: '-0.01em', lineHeight: 1.08, margin: '20px 0 0' }}>{st}</h2>
          <p style={{ fontFamily: C('font-serif'), fontWeight: 300, fontSize: 'clamp(1.05rem,1.4vw,1.25rem)', lineHeight: 1.75, color: C('ink-secondary'), margin: '20px 0 0', maxWidth: 480 }}>{sd}</p>
        </div>
      </div>
    </section>
  );
}

function CraftsmanshipScreen({ onNav }) {
  const lang = window.__MS_LANG || 'en';
  const L = (fr, en) => (lang === 'fr' ? fr : en);
  const steps = [
    ['Ⅰ', t('cr.s1'), t('cr.s1_d'), t('cr.s1_t'), 'media/step-dessin.jpg'],
    ['Ⅱ', t('cr.s2'), t('cr.s2_d'), t('cr.s2_t'), 'media/step-teinture.jpg'],
    ['Ⅲ', t('cr.s3'), t('cr.s3_d'), t('cr.s3_t'), 'media/step-nouage.jpg'],
    ['Ⅳ', t('cr.s4'), t('cr.s4_d'), t('cr.s4_t'), 'media/step-finition.jpg'],
  ];
  return (
    <div style={{ background: C('canvas') }}>
      {/* Full-bleed loom hero */}
      <section data-norv style={{ position: 'relative', height: '88vh', minHeight: 560, background: `var(--ms-stone-700) center/cover no-repeat url(media/loom.jpg)`, overflow: 'hidden' }}>
        <div style={{ position: 'absolute', inset: 0, background: 'linear-gradient(180deg, rgba(21,17,12,0.42) 0%, rgba(21,17,12,0.05) 38%, rgba(21,17,12,0.68) 100%)' }} />
        <div className="ms-reveal ms-reveal-2" style={{ position: 'absolute', left: 'clamp(1.5rem,5vw,4rem)', bottom: 'clamp(3rem,7vh,6rem)', right: 'clamp(1.5rem,5vw,4rem)' }}>
          <div style={{ fontFamily: C('font-sans'), fontSize: 11, letterSpacing: '0.36em', textTransform: 'uppercase', color: C('champagne') }}>{t('cr.kicker')}</div>
          <h1 style={{ fontFamily: C('font-serif'), fontWeight: 400, color: C('ivory'), fontSize: 'clamp(2.75rem,6.4vw,5.75rem)', lineHeight: 1.0, letterSpacing: '-0.02em', margin: '22px 0 0', maxWidth: 1000 }}>{t('cr.title')}</h1>
        </div>
      </section>

      {/* Intro measure */}
      <section className="ms-mvt" style={{ padding: 'clamp(6rem,13vh,10rem) clamp(1.5rem,5vw,4rem) clamp(3rem,6vh,5rem)' }}>
        <div className="ms-stagger" style={{ maxWidth: 760, margin: '0 auto' }}>
          <p style={{ fontFamily: C('font-serif'), fontWeight: 300, fontSize: 'clamp(1.5rem,2.4vw,2.1rem)', lineHeight: 1.55, margin: 0, color: C('ink') }}>
            {t('cr.lede')}
          </p>
        </div>
      </section>

      {/* The descent label */}
      <section className="ms-mvt" style={{ padding: '0 clamp(1.5rem,5vw,4rem)' }}>
        <div className="ms-stagger" style={{ maxWidth: 1280, margin: '0 auto', display: 'flex', alignItems: 'center', gap: 20 }}>
          <span style={{ fontFamily: C('font-sans'), fontSize: 11, letterSpacing: '0.3em', textTransform: 'uppercase', color: C('ink-tertiary') }}>{t('cr.descent')}</span>
          <span style={{ flex: 1, height: 1, background: C('line') }} />
        </div>
      </section>

      {/* The stages — each a movement of its own */}
      {steps.map(([num, st, sd, time, img], i) => (
        <CraftStep key={num} num={num} st={st} sd={sd} time={time} img={img} right={i % 2 === 1} />
      ))}

      {/* Dark interstitial — the house's creed on time */}
      <section className="ms-mvt" style={{ background: C('deep-black'), color: C('ink-inverse'), padding: 'clamp(7rem,16vh,13rem) 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: 880, margin: '0 auto', textAlign: 'center' }}>
          <div style={{ fontFamily: C('font-sans'), fontSize: 11, letterSpacing: '0.34em', textTransform: 'uppercase', color: C('champagne') }}>{L('Le temps de la main', 'The time of the hand')}</div>
          <p style={{ fontFamily: C('font-serif'), fontWeight: 300, fontStyle: 'italic', fontSize: 'clamp(2rem,4vw,3.25rem)', lineHeight: 1.35, margin: '30px 0 0', color: C('ivory') }}>
            {L('« Une pièce est achevée quand elle est achevée — jamais avant. »', '“A piece is finished when it is finished — and not before.”')}
          </p>
        </div>
      </section>

      {/* Density band */}
      <section className="ms-mvt ms-split" style={{ display: 'grid', gridTemplateColumns: '1fr 1fr' }}>
        <div className="ms-stagger" style={{ background: C('limestone'), display: 'flex', flexDirection: 'column', justifyContent: 'center', padding: 'clamp(4rem,8vw,7.5rem)' }}>
          <div style={{ fontFamily: C('font-sans'), fontSize: 11, letterSpacing: '0.3em', textTransform: 'uppercase', color: C('accent') }}>{t('cr.byhand')}</div>
          <h2 style={{ fontFamily: C('font-serif'), fontWeight: 400, fontSize: 'clamp(2rem,3.2vw,2.8rem)', lineHeight: 1.12, letterSpacing: '-0.01em', margin: '18px 0 0' }}>{t('cr.density')}</h2>
          <p style={{ fontFamily: C('font-serif'), fontWeight: 300, fontSize: 18, lineHeight: 1.75, color: C('ink-secondary'), marginTop: 22, maxWidth: 440 }}>
            {t('cr.density_d')}
          </p>
          <div style={{ marginTop: 38 }}><Btn variant="secondary" onClick={() => onNav('process')}>{t('cr.cta')}</Btn></div>
        </div>
        <Plate ratio="auto" tone="stone-400" label={t('cr.macro')} image="media/craft-macro.jpg" style={{ minHeight: 520, borderRadius: 0 }} />
      </section>
    </div>
  );
}
Object.assign(window, { CraftsmanshipScreen, CraftStep });