/* Maison Silya — 04 Bespoke. Not a list of capabilities: a commission,
   told as a conversation between the client and the maison. */
function BespokeScreen({ onNav }) {
  const beats = [
    ['Ⅰ', t('bp.b1'), t('bp.b1_d'), null],
    ['Ⅱ', t('bp.b2'), t('bp.b2_d'), 'media/abrash-macro.jpg'],
    ['Ⅲ', t('bp.b3'), t('bp.b3_d'), null],
    ['Ⅳ', t('bp.b4'), t('bp.b4_d'), 'media/detail-relief.jpg'],
  ];
  return (
    <div style={{ background: C('canvas') }}>
      {/* Split hero */}
      <section style={{ display: 'grid', gridTemplateColumns: '1fr 1fr', minHeight: '92vh' }} className="ms-split">
        <div className="ms-stagger" style={{ display: 'flex', flexDirection: 'column', justifyContent: 'center', padding: 'clamp(7rem,12vw,10rem) clamp(1.5rem,5vw,4.5rem) clamp(3rem,6vh,5rem)' }}>
          <div style={{ fontFamily: C('font-sans'), fontSize: 11, letterSpacing: '0.32em', textTransform: 'uppercase', color: C('accent') }}>{t('bp.kicker')}</div>
          <h1 style={{ fontFamily: C('font-serif'), fontWeight: 400, fontSize: 'clamp(2.75rem,5vw,4.5rem)', letterSpacing: '-0.02em', lineHeight: 1.04, margin: '22px 0 0' }}>
            {t('bp.t1')}<span style={{ fontStyle: 'italic', fontWeight: 300 }}>{t('bp.t_em')}</span>
          </h1>
          <p style={{ fontFamily: C('font-serif'), fontWeight: 300, fontSize: 20, lineHeight: 1.7, color: C('ink-secondary'), marginTop: 26, maxWidth: 440 }}>
            {t('bp.lede')}
          </p>
          <div style={{ marginTop: 40, display: 'flex', gap: 24, alignItems: 'center', flexWrap: 'wrap' }}>
            <Btn variant="primary" size="lg" onClick={() => onNav('contact')}>{t('bp.cta1')}</Btn>
            <Btn variant="ghost" onClick={() => onNav('process')}>{t('bp.cta2')}</Btn>
          </div>
        </div>
        <Plate ratio="auto" tone="stone-400" image="media/bespoke.jpg" label={t('bp.hero')} style={{ minHeight: 480, borderRadius: 0 }} />
      </section>

      {/* The commission, as a conversation — four movements */}
      <section className="ms-mvt" style={{ padding: 'clamp(6rem,12vh,10rem) clamp(1.5rem,5vw,4rem)' }}>
        <div className="ms-stagger" style={{ maxWidth: 1280, margin: '0 auto' }}>
          <div style={{ display: 'flex', alignItems: 'center', gap: 20, marginBottom: 'clamp(2rem,4vh,3rem)' }}>
            <span style={{ fontFamily: C('font-sans'), fontSize: 11, letterSpacing: '0.3em', textTransform: 'uppercase', color: C('ink-tertiary') }}>{t('bp.conv_k')}</span>
            <span style={{ flex: 1, height: 1, background: C('line') }} />
          </div>
          {beats.map(([num, line, body, img]) => (
            <div key={num} style={{ display: 'grid', gridTemplateColumns: img ? '90px 1fr minmax(200px, 320px)' : '90px 1fr', gap: 'clamp(1.5rem,4vw,4rem)', alignItems: 'center',
              padding: 'clamp(3rem,6vh,5rem) 0', borderBottom: `1px solid ${C('line')}` }} 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>
                <h2 style={{ fontFamily: C('font-serif'), fontWeight: 300, fontStyle: 'italic', fontSize: 'clamp(1.85rem,3vw,2.7rem)', letterSpacing: '-0.01em', lineHeight: 1.15, margin: 0 }}>{line}</h2>
                <p style={{ fontFamily: C('font-serif'), fontSize: 17.5, lineHeight: 1.75, color: C('ink-secondary'), margin: '18px 0 0', maxWidth: 540 }}>{body}</p>
              </div>
              {img && <Plate ratio="1 / 1" tone="stone-300" image={img} label={t('mt.close')} />}
            </div>
          ))}
        </div>
      </section>

      {/* Trade band */}
      <section className="ms-mvt" style={{ background: C('deep-black'), color: C('ink-inverse'), padding: 'clamp(7rem,15vh,12rem) clamp(1.5rem,5vw,4rem)' }}>
        <div style={{ position: 'absolute', inset: 0, background: 'radial-gradient(46% 52% 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: 900, margin: '0 auto', textAlign: 'center' }}>
          <div style={{ fontFamily: C('font-sans'), fontSize: 11, letterSpacing: '0.3em', textTransform: 'uppercase', color: C('champagne') }}>{t('bp.trade_k')}</div>
          <h2 style={{ fontFamily: C('font-serif'), fontWeight: 300, fontSize: 'clamp(2rem,3.6vw,3rem)', lineHeight: 1.3, margin: '26px 0 0', color: C('ivory') }}>
            {t('bp.trade')}
          </h2>
          <div style={{ marginTop: 46 }}><Btn variant="inverse" size="lg" onClick={() => onNav('contact')}>{t('bp.trade_cta')}</Btn></div>
        </div>
      </section>
    </div>
  );
}
Object.assign(window, { BespokeScreen });