/* Maison Silya — The Signature Collection. A catalogue raisonné, entered
   like a private viewing room: the house is named in the dark, then the
   numbered editions are shown in full daylight — large, quiet, uncrowded.
   No filters, no prices. The pieces are simply presented. */

function MsCollCard({ p, n, onPiece }) {
  const lang = window.__MS_LANG || 'en';
  const [h, setH] = React.useState(false);
  const hov = h && MS_CAN_HOVER;
  return (
    <article onClick={() => onPiece(msPiece(p.name, p))}
      onMouseEnter={() => setH(true)} onMouseLeave={() => setH(false)}
      style={{ gridColumn: p.span, marginTop: p.off || 0, cursor: 'pointer' }} className="ms-coll-item">
      <div style={{ position: 'relative' }}>
        <Plate ratio="4 / 5" tone={p.tone} image={p.image} label={t('sg.piece')} radius="sm" />
        {/* a soft light crosses the surface as the eye rests on it */}
        <div style={{ position: 'absolute', inset: 0, background: 'radial-gradient(72% 58% at 50% 0, rgba(255,249,238,0.26), rgba(255,249,238,0) 62%)', mixBlendMode: 'soft-light', opacity: hov ? 1 : 0, transition: 'opacity 760ms var(--ms-ease)', pointerEvents: 'none', borderRadius: C('radius-sm') }} />
        <div style={{ position: 'absolute', left: 0, right: 0, bottom: 0, padding: 'clamp(16px,2vw,24px)', display: 'flex', alignItems: 'center', justifyContent: 'space-between', opacity: hov ? 1 : 0, transform: `translateY(${hov ? 0 : 10}px)`, transition: 'opacity 620ms var(--ms-ease), transform 620ms var(--ms-ease)', pointerEvents: 'none' }}>
          <span style={{ fontFamily: C('font-sans'), fontSize: 10, letterSpacing: '0.3em', textTransform: 'uppercase', color: C('ivory'), textShadow: '0 1px 24px rgba(0,0,0,0.7)' }}>{lang === 'fr' ? 'Découvrir' : 'Discover'}</span>
          <span style={{ color: C('ivory'), display: 'flex', filter: 'drop-shadow(0 1px 14px rgba(0,0,0,0.6))' }}><Icon name="arrow" size={16} /></span>
        </div>
      </div>
      <div style={{ paddingTop: 22 }}>
        <div style={{ display: 'flex', alignItems: 'baseline', gap: 12, flexWrap: 'wrap' }}>
          <span style={{ fontFamily: C('font-serif'), fontStyle: 'italic', fontSize: 17, color: C('ink-secondary') }}>{t('home.plate')}&nbsp;N°&nbsp;{n}</span>
          <span style={{ fontFamily: C('font-sans'), fontSize: 10.5, letterSpacing: '0.22em', textTransform: 'uppercase', color: C('ink-tertiary') }}>{p.prov}{p.edition ? ' · ' + p.edition : ''}</span>
        </div>
        <div style={{ display: 'flex', alignItems: 'baseline', justifyContent: 'space-between', gap: 16, marginTop: 6 }}>
          <h3 style={{ fontFamily: C('font-serif'), fontWeight: 400, fontSize: 'clamp(1.5rem,2vw,1.9rem)', letterSpacing: '-0.01em', margin: 0 }}>{p.name}</h3>
          <span style={{ fontFamily: C('font-sans'), fontSize: 10, letterSpacing: '0.2em', textTransform: 'uppercase', color: C('ink-tertiary'), whiteSpace: 'nowrap' }}>{lang === 'fr' ? 'Sur mesure' : 'Made to order'}</span>
        </div>
        {p.line && <p style={{ fontFamily: C('font-serif'), fontWeight: 300, fontSize: 15.5, lineHeight: 1.6, color: C('ink-secondary'), margin: '12px 0 0', maxWidth: 460 }}>{p.line}</p>}
      </div>
    </article>
  );
}

function CollectionScreen({ onPiece, onNav }) {
  const lang = window.__MS_LANG || 'en';
  const L = (fr, en) => (lang === 'fr' ? fr : en);
  const ed = (n) => (lang === 'fr' ? 'Édition de ' : 'Edition of ') + n;
  const rom = ['Ⅰ', 'Ⅱ', 'Ⅲ', 'Ⅳ', 'Ⅴ', 'Ⅵ', 'Ⅶ'];
  const pieces = [
    { name: 'Monolith I', prov: t('p.prov.nepal'), detail: '300 × 400 cm', edition: ed(8), tone: 'stone-300', image: 'media/monolith-i.jpg', line: t('p.monolith.line'), span: '1 / 7', off: 0 },
    { name: 'Sediment II', prov: t('p.prov.marrakech'), detail: '250 × 350 cm', tone: 'stone-200', image: 'media/sediment-ii.jpg', line: t('p.sediment.line'), span: '8 / 13', off: 'clamp(5rem,16vh,12rem)' },
    { name: 'Travertine', prov: t('p.prov.nepal'), detail: '270 × 360 cm', edition: ed(12), tone: 'travertine', image: 'media/travertine.jpg', line: L('Tirée des carrières de travertin — cavités, strates, un relief d’architecture.', 'Drawn from travertine quarries — cavities, strata, an architectural relief.'), span: '2 / 7', off: 0 },
    { name: 'Plaster Field', prov: t('p.prov.marrakech'), detail: '240 × 300 cm', tone: 'champagne', image: 'media/plaster-field.jpg', line: L('Un champ de plâtre écru — la matité totale, pour seul sujet.', 'A field of bare plaster — total matteness, as the only subject.'), span: '8 / 13', off: 'clamp(4rem,11vh,9rem)' },
    { name: 'Terra', prov: t('p.prov.nepal'), edition: ed(10), tone: 'stone-400', image: 'media/terra.jpg',
      materials: L('100% laine de Nouvelle-Zélande', '100% New Zealand wool'),
      pile: L('14 mm, velours bouclé dense', '14 mm, dense looped pile'), knots: '150 / in²',
      line: L('La terre cuite au crépuscule — une chaleur qui monte du sol.', 'Terracotta at dusk — a warmth that rises from the floor.'),
      desc: L('Un champ de laine couleur terre brûlée dont le relief dense retient la lumière basse comme une braise.', 'A field of burnt-earth wool whose dense relief holds low light like a banked ember.'),
      details: ['media/terra-d1.jpg', 'media/terra-d2.jpg', 'media/terra-d3.jpg'], span: '1 / 7', off: 0 },
    { name: 'Émeraude', prov: t('p.prov.nepal'), edition: ed(6), tone: 'stone-700', image: 'media/emeraude.jpg',
      materials: L('80% laine · 20% soie · rehauts d’or', '80% wool · 20% silk · gold highlights'),
      pile: L('12 mm, relief sculpté · fil d’or', '12 mm, sculpted relief · gold thread'), knots: '200 / in²',
      line: L('Le vert profond, traversé d’un filet d’or.', 'Deep green, crossed by a thread of gold.'),
      desc: L('Un vert forêt sourd, parcouru de veines dorées qui dessinent une géométrie discrète — la nuit d’un salon, éclairée d’or.', 'A muted forest green, run through with gilded veins tracing a quiet geometry — a salon at night, lit with gold.'),
      details: ['media/emeraude-d1.jpg', 'media/emeraude-d2.jpg', 'media/emeraude-d3.jpg'], span: '8 / 13', off: 'clamp(5rem,16vh,12rem)' },
    { name: 'Bleu Profond', prov: t('p.prov.nepal'), edition: ed(8), tone: 'stone-800', image: 'media/bleu-profond.jpg',
      materials: L('80% laine · 20% soie · rehauts d’or', '80% wool · 20% silk · gold highlights'),
      pile: L('12 mm, relief sculpté · fil d’or', '12 mm, sculpted relief · gold thread'), knots: '200 / in²',
      line: L('Le bleu de minuit, veiné d’or.', 'Midnight blue, veined with gold.'),
      desc: L('Un bleu nuit dense où l’or trace de fines rivières — une présence grave et feutrée, faite pour les pièces sombres.', 'A dense midnight blue where gold traces fine rivers — a grave, hushed presence made for dark rooms.'),
      details: ['media/bleu-profond-d1.jpg', 'media/bleu-profond-d2.jpg', 'media/bleu-profond-d3.jpg'], span: '3 / 11', off: 0 },
  ];

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

      {/* ── I · Overture — the house, named in the dark ── */}
      <section data-norv style={{ position: 'relative', background: C('deep-black'), color: C('ink-inverse'), overflow: 'hidden', minHeight: '92vh', display: 'flex', alignItems: 'center', justifyContent: 'center', textAlign: 'center' }}>
        <div style={{ position: 'absolute', inset: 0, background: 'radial-gradient(60% 48% at 50% 38%, rgba(201,162,108,0.12), rgba(201,162,108,0) 68%)', pointerEvents: 'none' }} />
        <div style={{ position: 'relative', maxWidth: 1080, padding: 'clamp(8rem,16vh,12rem) clamp(1.5rem,5vw,4rem) clamp(5rem,9vh,7rem)' }}>
          <div className="ms-reveal ms-reveal-1" style={{ fontFamily: C('font-sans'), fontSize: 11, letterSpacing: '0.42em', textTransform: 'uppercase', color: C('champagne') }}>{t('sg.kicker')}</div>
          <h1 className="ms-reveal ms-reveal-1" style={{ fontFamily: C('font-serif'), fontWeight: 400, color: C('ivory'), fontSize: 'clamp(2.7rem,6vw,5.25rem)', letterSpacing: '-0.022em', lineHeight: 1.04, margin: '28px 0 0' }}>{t('sg.title')}</h1>
          <p className="ms-reveal ms-reveal-2" style={{ fontFamily: C('font-serif'), fontWeight: 300, fontSize: 'clamp(1.2rem,1.8vw,1.55rem)', lineHeight: 1.7, color: C('ink-inverse-secondary'), margin: 'clamp(2rem,4vh,2.8rem) auto 0', maxWidth: 600 }}>
            {L('Des éditions numérotées, conçues comme des surfaces d’architecture — nouées à la main, sur de longs mois, et réalisées sur commande à vos dimensions.',
               'Numbered editions, conceived as surfaces of architecture — knotted by hand, over many months, and made to order to your dimensions.')}
          </p>
          <div className="ms-reveal ms-reveal-2" style={{ fontFamily: C('font-sans'), fontSize: 10.5, letterSpacing: '0.3em', textTransform: 'uppercase', color: C('ink-inverse-secondary'), marginTop: 'clamp(2.5rem,5vh,3.5rem)' }}>
            {L('Sept pièces · Paris, sur rendez-vous', 'Seven pieces · Paris, by appointment')}
          </div>
        </div>
        <div className="ms-reveal ms-reveal-2" style={{ position: 'absolute', bottom: 'clamp(2rem,4vh,3rem)', left: '50%', transform: 'translateX(-50%)', display: 'flex', flexDirection: 'column', alignItems: 'center', gap: 12, color: C('ink-inverse-secondary') }}>
          <span style={{ fontFamily: C('font-sans'), fontSize: 9.5, letterSpacing: '0.32em', textTransform: 'uppercase' }}>{L('La collection', 'The collection')}</span>
          <span style={{ width: 1, height: 46, background: 'linear-gradient(rgba(247,243,236,0.5), rgba(247,243,236,0))' }} />
        </div>
      </section>

      {/* ── II · The catalogue, in full daylight ── */}
      <section style={{ padding: 'clamp(5rem,11vh,9rem) clamp(1.5rem,5vw,4rem) clamp(6rem,12vh,10rem)' }}>
        <div style={{ maxWidth: 1440, margin: '0 auto', display: 'grid', gridTemplateColumns: 'repeat(12,1fr)', gap: 'clamp(1.5rem,3vw,3rem)', rowGap: 'clamp(6rem,15vh,13rem)' }} className="ms-coll-grid">
          {pieces.map((p, i) => (
            <MsCollCard key={p.name} p={p} n={rom[i]} onPiece={onPiece} />
          ))}
        </div>
      </section>

      {/* ── III · The invitation — back into the dark ── */}
      <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(48% 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: 820, margin: '0 auto', textAlign: 'center' }}>
          <div style={{ fontFamily: C('font-sans'), fontSize: 11, letterSpacing: '0.34em', textTransform: 'uppercase', color: C('champagne') }}>{L('Sur rendez-vous', 'By appointment')}</div>
          <p style={{ fontFamily: C('font-serif'), fontWeight: 300, fontSize: 'clamp(1.9rem,3.6vw,3rem)', lineHeight: 1.4, margin: '28px 0 0', color: C('ivory') }}>
            {L('Chaque pièce commence par une conversation.', 'Every piece begins with a conversation.')}
          </p>
          <p style={{ fontFamily: C('font-serif'), fontWeight: 300, fontSize: 19, lineHeight: 1.7, color: C('ink-inverse-secondary'), margin: '24px auto 0', maxWidth: 520 }}>
            {L('La collection se découvre sur rendez-vous — à Paris, et partout où un projet l’appelle.', 'The collection is shown by appointment — in Paris, and wherever a project calls for it.')}
          </p>
          <div style={{ marginTop: 44 }}>
            <Btn variant="inverse" size="lg" onClick={() => onNav && onNav('contact')}>{t('home.cta_view2')}</Btn>
          </div>
        </div>
      </section>
    </div>
  );
}
Object.assign(window, { CollectionScreen });