/* Maison Silya — Piece (the work itself).
   A gallery monograph: the piece is unveiled in a dark room, spoken of,
   examined in the hand, then offered — by appointment, never by price.
   No commerce, no size pickers: one quiet invitation to enquire. */
function PieceScreen({ piece, onNav, onPiece }) {
  const lang = window.__MS_LANG || 'en';
  const L = (fr, en) => (lang === 'fr' ? fr : en);
  const p = piece || msPiece('Monolith I', { name: 'Monolith I', prov: t('p.prov.nepal'), detail: '300 × 400 cm', tone: 'stone-300', image: 'media/monolith-i.jpg' });

  const enquire = () => { window.__MS_ORDER = { kind: 'enquiry', piece: p.name, size: p.detail }; onNav('contact'); };

  const specs = [
    [t('sp.materials'), p.materials || t('pd.materials')],
    [t('sp.dimensions'), L('Sur mesure — à vos dimensions', 'Made to order — to your dimensions')],
    [t('sp.pile'), p.pile || t('pc.pile.monolith')],
    [t('sp.knots'), p.knots || '200 / in²'],
    [t('sp.origin'), t('pd.origin')],
    [t('sp.edition'), p.edition || t('pd.open')],
    [t('pd.leadtime'), t('pd.leadtime_v')],
  ];

  const allRelated = [
    { name: 'Monolith I', prov: t('p.prov.nepal'), detail: '300 × 400 cm', tone: 'stone-300', image: 'media/monolith-i.jpg' },
    { name: 'Sediment II', prov: t('p.prov.marrakech'), detail: '250 × 350 cm', tone: 'stone-200', image: 'media/sediment-ii.jpg' },
    { name: 'Travertine', prov: t('p.prov.nepal'), detail: '270 × 360 cm', tone: 'travertine', image: 'media/travertine.jpg' },
    { name: 'Plaster Field', prov: t('p.prov.marrakech'), detail: '240 × 300 cm', tone: 'champagne', image: 'media/plaster-field.jpg' },
  ];
  const related = allRelated.filter((r) => r.name !== p.name).slice(0, 3);

  return (
    <div style={{ background: C('canvas') }}>

      {/* ── I · The Unveiling — the piece, spotlit in a private gallery ── */}
      <section data-norv style={{ position: 'relative', background: C('deep-black'), color: C('ink-inverse'), overflow: 'hidden', minHeight: '100vh', display: 'flex', flexDirection: 'column', justifyContent: 'center' }}>
        {/* overhead key light + floor pooling */}
        <div style={{ position: 'absolute', inset: 0, background: 'radial-gradient(70% 52% at 50% 30%, rgba(201,162,108,0.13), rgba(201,162,108,0) 68%)', pointerEvents: 'none' }} />
        <div style={{ position: 'absolute', inset: 0, background: 'radial-gradient(120% 70% at 50% 120%, rgba(0,0,0,0.55), rgba(0,0,0,0) 60%)', pointerEvents: 'none' }} />

        {/* back to collection */}
        <button onClick={() => onNav('signature')} style={{ position: 'absolute', top: 'clamp(6rem,12vh,8rem)', left: 'clamp(1.5rem,5vw,4rem)', zIndex: 3, background: 'none', border: 'none', cursor: 'pointer', display: 'inline-flex', alignItems: 'center', gap: 12, fontFamily: C('font-sans'), fontSize: 11, letterSpacing: '0.26em', textTransform: 'uppercase', color: C('ink-inverse-secondary') }}
          onMouseEnter={(e) => { e.currentTarget.style.color = C('champagne'); }}
          onMouseLeave={(e) => { e.currentTarget.style.color = C('ink-inverse-secondary'); }}>
          <span style={{ rotate: '180deg', display: 'flex' }}><Icon name="arrow" size={16} /></span> {t('pd.back')}
        </button>

        <div style={{ position: 'relative', maxWidth: 1240, margin: '0 auto', width: '100%', padding: 'clamp(8rem,15vh,11rem) clamp(1.5rem,5vw,4rem) clamp(5rem,9vh,7rem)', textAlign: 'center', display: 'flex', flexDirection: 'column', alignItems: 'center' }}>
          <div className="ms-reveal ms-reveal-1" style={{ display: 'flex', alignItems: 'center', gap: 16, fontFamily: C('font-sans'), fontSize: 11, letterSpacing: '0.34em', textTransform: 'uppercase', color: C('champagne') }}>
            <span>{p.prov}</span>
            {p.edition && <><span style={{ width: 3, height: 3, background: C('champagne'), rotate: '45deg' }} /><span>{p.edition}</span></>}
          </div>
          <h1 className="ms-reveal ms-reveal-1" style={{ fontFamily: C('font-serif'), fontWeight: 400, color: C('ivory'), fontSize: 'clamp(2.5rem,5.4vw,4.5rem)', letterSpacing: '-0.022em', lineHeight: 1.04, margin: '22px 0 0' }}>{p.name}</h1>

          {/* the work, floating, with halo + contact shadow */}
          <div className="ms-reveal ms-reveal-2" style={{ position: 'relative', width: 'min(78vw, 440px)', marginTop: 'clamp(3.75rem,7vh,5.5rem)' }}>
            <div style={{ position: 'absolute', inset: '-26% -20% -8%', background: 'radial-gradient(58% 50% at 50% 42%, rgba(201,162,108,0.22), rgba(201,162,108,0) 70%)', filter: 'blur(6px)', pointerEvents: 'none' }} />
            <div style={{ position: 'absolute', left: '6%', right: '6%', bottom: '-7%', height: '14%', background: 'radial-gradient(50% 100% at 50% 0, rgba(0,0,0,0.6), rgba(0,0,0,0) 72%)', filter: 'blur(12px)', pointerEvents: 'none' }} />
            <div style={{ position: 'relative', aspectRatio: '4 / 5', background: C(p.tone || 'stone-300'), overflow: 'hidden', borderRadius: C('radius-sm'), boxShadow: '0 90px 130px -45px rgba(0,0,0,0.9), 0 0 0 1px rgba(255,249,238,0.06) inset' }}>
              {p.image && <img src={p.image} alt={p.name} decoding="async" style={{ position: 'absolute', inset: 0, width: '100%', height: '100%', objectFit: 'cover', display: 'block' }} />}
            </div>
          </div>

          <p className="ms-reveal ms-reveal-2" style={{ fontFamily: C('font-serif'), fontWeight: 300, fontStyle: 'italic', fontSize: 'clamp(1.2rem,1.9vw,1.6rem)', lineHeight: 1.55, color: C('ink-inverse-secondary'), margin: 'clamp(2.5rem,5vh,3.5rem) auto 0', maxWidth: 540 }}>
            {p.desc || t('pd.desc')}
          </p>
        </div>
      </section>

      {/* ── II · The detail — the evidence of the hand, examined close ── */}
      <section className="ms-mvt" style={{ background: C('deep-black'), color: C('ink-inverse'), padding: 'clamp(6rem,13vh,10rem) clamp(1.5rem,5vw,4rem)' }}>
        <div className="ms-stagger" style={{ maxWidth: 1440, margin: '0 auto' }}>
          <div style={{ display: 'flex', alignItems: 'center', gap: 20, marginBottom: 'clamp(2.5rem,5vh,3.5rem)' }}>
            <span style={{ fontFamily: C('font-sans'), fontSize: 11, letterSpacing: '0.32em', textTransform: 'uppercase', color: C('champagne') }}>{t('pd.detail_k')}</span>
            <span style={{ flex: 1, height: 1, background: C('line-inverse') }} />
          </div>
          <div style={{ display: 'grid', gridTemplateColumns: 'repeat(3,1fr)', gap: 'clamp(1rem,2vw,1.75rem)' }} className="ms-detail-grid">
            {(p.details && p.details.length === 3
              ? p.details.map((img, i) => ({ img, label: [L('La matière', 'The matter'), L('Le motif', 'The pattern'), L('La lisière', 'The selvedge')][i] }))
              : [
                  { size: '300%', pos: '16% 20%', label: t('pd.d1') },
                  { size: '320%', pos: '82% 52%', label: t('pd.d2') },
                  { size: '300%', pos: '48% 86%', label: t('pd.d3') },
                ]
            ).map((z, i) => (
              <figure key={i} style={{ margin: 0 }}>
                <div className="ms-plate" style={{ position: 'relative', aspectRatio: '3 / 4', background: C(p.tone || 'stone-400'), overflow: 'hidden', borderRadius: C('radius-sm'), boxShadow: '0 50px 90px -50px rgba(0,0,0,0.8)' }}>
                  {z.img
                    ? <img src={z.img} alt={z.label} loading="lazy" decoding="async" style={{ position: 'absolute', inset: 0, width: '100%', height: '100%', objectFit: 'cover', display: 'block' }} />
                    : (p.image
                        ? <div style={{ position: 'absolute', inset: 0, backgroundImage: `url(${p.image})`, backgroundSize: z.size, backgroundPosition: z.pos, backgroundRepeat: 'no-repeat' }}></div>
                        : <div style={{ position: 'absolute', inset: 0, display: 'flex', alignItems: 'center', justifyContent: 'center', fontFamily: C('font-sans'), fontSize: 10, letterSpacing: '0.3em', textTransform: 'uppercase', color: C('stone-500') }}>{z.label}</div>)}
                  <div style={{ position: 'absolute', inset: '-10%', background: 'radial-gradient(56% 42% at 50% 24%, rgba(255,249,238,0.14), rgba(255,249,238,0) 64%)', mixBlendMode: 'screen', pointerEvents: 'none' }} />
                </div>
                <figcaption style={{ fontFamily: C('font-sans'), fontSize: 10.5, letterSpacing: '0.24em', textTransform: 'uppercase', color: C('ink-inverse-secondary'), marginTop: 16 }}>{z.label}</figcaption>
              </figure>
            ))}
          </div>
        </div>
      </section>

      {/* ── III · The specifications & the invitation ── */}
      <section style={{ background: C('canvas'), padding: 'clamp(6rem,13vh,10rem) clamp(1.5rem,5vw,4rem)' }}>
        <div style={{ maxWidth: 1080, margin: '0 auto', display: 'grid', gridTemplateColumns: '1.1fr 1fr', gap: 'clamp(3rem,7vw,7rem)', alignItems: 'start' }} className="ms-piece-spec">
          <div className="ms-stagger">
            <div style={{ display: 'flex', alignItems: 'center', gap: 16 }}>
              <span style={{ width: 6, height: 6, background: C('accent'), rotate: '45deg', flex: 'none' }} />
              <span style={{ fontFamily: C('font-sans'), fontSize: 11, letterSpacing: '0.28em', textTransform: 'uppercase', color: C('ink-tertiary') }}>{L('La pièce, en détail', 'The piece, in detail')}</span>
            </div>
            <dl style={{ margin: '34px 0 0', display: 'grid', gridTemplateColumns: '1fr' }}>
              {specs.map(([k, v], i) => (
                <div key={k} style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'baseline', gap: 24, padding: '15px 0', borderBottom: `1px solid ${C('line-faint')}` }}>
                  <dt style={{ fontFamily: C('font-sans'), fontSize: 11, letterSpacing: '0.18em', textTransform: 'uppercase', color: C('ink-tertiary') }}>{k}</dt>
                  <dd style={{ margin: 0, fontFamily: C('font-serif'), fontSize: 16.5, color: C('ink'), textAlign: 'right' }}>{v}</dd>
                </div>
              ))}
            </dl>
          </div>

          <div className="ms-stagger" style={{ position: 'sticky', top: 120 }}>
            <h2 style={{ fontFamily: C('font-serif'), fontWeight: 400, fontSize: 'clamp(1.9rem,3vw,2.6rem)', letterSpacing: '-0.015em', lineHeight: 1.1, margin: 0, color: C('ink') }}>{L('Une pièce, une conversation', 'One piece, one conversation')}</h2>
            <p style={{ fontFamily: C('font-serif'), fontWeight: 300, fontSize: 18.5, lineHeight: 1.75, color: C('ink-secondary'), margin: '22px 0 0' }}>
              {L('Chaque pièce est nouée à la commande, façonnée pour votre lumière et le plan de votre projet. Elle se découvre sur rendez-vous — à Paris, et partout où l’architecture l’appelle.',
                 'Each piece is knotted to order, made for your light and the plan of your project. It is shown by appointment — in Paris, and wherever the architecture calls for it.')}
            </p>
            <div style={{ marginTop: 36 }}>
              <Btn variant="primary" size="lg" style={{ width: '100%' }} onClick={enquire}>{t('pd.enquire')}</Btn>
            </div>
            <p style={{ fontFamily: C('font-sans'), fontSize: 10.5, letterSpacing: '0.14em', textTransform: 'uppercase', color: C('ink-tertiary'), textAlign: 'center', margin: '18px 0 0', lineHeight: 1.7 }}>
              {L('Réponse de l’atelier sous 48 h', 'A reply from the atelier within 48 hours')}
            </p>
          </div>
        </div>
      </section>

      {/* ── IV · The architect's note ── */}
      <section className="ms-mvt" style={{ background: C('deep-black'), color: C('ink-inverse'), padding: 'clamp(7rem,15vh,12rem) clamp(1.5rem,5vw,4rem)' }}>
        <div className="ms-stagger" style={{ maxWidth: 860, margin: '0 auto', textAlign: 'center' }}>
          <div style={{ fontFamily: C('font-sans'), fontSize: 11, letterSpacing: '0.32em', textTransform: 'uppercase', color: C('champagne') }}>{t('pd.note_k')}</div>
          <p style={{ fontFamily: C('font-serif'), fontWeight: 300, fontStyle: 'italic', fontSize: 'clamp(1.7rem,3vw,2.5rem)', lineHeight: 1.5, margin: '32px 0 0', color: C('ivory') }}>
            {t('pd.note')}
          </p>
          <div style={{ fontFamily: C('font-sans'), fontSize: 11, letterSpacing: '0.26em', textTransform: 'uppercase', color: C('ink-inverse-secondary'), marginTop: 38 }}>{t('pd.note_by')}</div>
        </div>
      </section>

      {/* ── V · Pieces of the same hand ── */}
      <section style={{ background: C('canvas'), padding: 'clamp(6rem,12vh,10rem) clamp(1.5rem,5vw,4rem)' }}>
        <div style={{ maxWidth: 1440, margin: '0 auto' }}>
          <div style={{ display: 'flex', alignItems: 'baseline', justifyContent: 'space-between', gap: 24, marginBottom: 'clamp(2.5rem,5vh,3.5rem)', flexWrap: 'wrap' }}>
            <h2 style={{ fontFamily: C('font-serif'), fontWeight: 400, fontSize: 'clamp(1.75rem,3vw,2.4rem)', margin: 0 }}>{t('pd.related')}</h2>
            <button onClick={() => onNav('signature')} style={{ background: 'none', border: 'none', cursor: 'pointer', fontFamily: C('font-sans'), fontSize: 11, letterSpacing: '0.24em', textTransform: 'uppercase', color: C('ink-tertiary'), display: 'inline-flex', alignItems: 'center', gap: 10 }}
              onMouseEnter={(e) => { e.currentTarget.style.color = C('accent'); }}
              onMouseLeave={(e) => { e.currentTarget.style.color = C('ink-tertiary'); }}>
              {t('pd.back')} <Icon name="arrow" size={15} />
            </button>
          </div>
          <div style={{ display: 'grid', gridTemplateColumns: 'repeat(3,1fr)', gap: 'clamp(1.5rem,3vw,3rem)' }} className="ms-piece-grid">
            {related.map((r) => (
              <article key={r.name} onClick={() => onPiece(msPiece(r.name, r))} style={{ cursor: 'pointer' }}>
                <Plate ratio="4 / 5" tone={r.tone} image={r.image} label={t('sg.piece')} />
                <div style={{ paddingTop: 18 }}>
                  <div style={{ fontFamily: C('font-sans'), fontSize: 11, letterSpacing: '0.22em', textTransform: 'uppercase', color: C('ink-tertiary') }}>{r.prov}</div>
                  <h3 style={{ fontFamily: C('font-serif'), fontWeight: 400, fontSize: 24, margin: '8px 0 0' }}>{r.name}</h3>
                </div>
              </article>
            ))}
          </div>
        </div>
      </section>
    </div>
  );
}
Object.assign(window, { PieceScreen });