// MYSTERY Kollektion — eigene Seite

const MysteryCollection = () => {
  const { openPDP, quickAdd, go, lang, t } = useApp();
  const mysteryProducts = PRODUCTS.filter(p => p.id === 'sphere' || p.id === 'alchemy');

  return <>
    <section className="mystery-hero">
      <div className="mystery-hero-img">
        <Ph tone="warm" src="assets/freisteller/alchemy.jpg" alt="MYSTERY Collection"/>
      </div>
      <div className="grad"/>
      <div className="t">
        <div className="eyebrow">{t('Kollektion · MYSTERY')}</div>
        <h1 style={{display:'flex',flexDirection:'column',alignItems:'flex-start',gap:0,lineHeight:0.9,textTransform:'uppercase'}}><span>STEIN</span><span>TRIFFT</span><span className="accent-word">METALL.</span></h1>
        <p>{t('Natur trifft Manufaktur. Schweizer Kalkstein und Messing verschmelzen zu Objekten, die die Tiefe des Unbekannten verkörpern.')}</p>
      </div>
    </section>

    <section className="sect">
      <div className="sect-head">
        <div>
          <div className="eyebrow">{String(mysteryProducts.length).padStart(2,'0')} Pieces</div>
          <h2>{t('Die MYSTERY')} <span className="accent-word">{t('Kollektion.')}</span></h2>
        </div>
      </div>
      <div className="grid mystery-grid">
        {mysteryProducts.map(p => <ProductCard key={p.id} p={p} onOpen={openPDP} onAdd={quickAdd}/>)}
      </div>
    </section>

    <section className="mystery-materials">
      <div className="inner">
        <div className="eyebrow">{t('Materialien')}</div>
        <h2>{t('Stein. Metall.')} <span className="accent-word">{t('Design.')}</span></h2>
        <div className="cols">
          <div className="col">
            <div className="num">01</div>
            <h4>{t('Schweizer Kalkstein')}</h4>
            <p>{t('Millionen Jahre alt, von Hand ausgewählt. Jeder Stein ist ein Unikat mit eigener Maserung und Geschichte.')}</p>
          </div>
          <div className="col">
            <div className="num">02</div>
            <h4>{t('Messing & Edelstahl')}</h4>
            <p>{t('Brüniert, gebürstet oder patiniert. Das Metall bildet den architektonischen Rahmen für den Stein.')}</p>
          </div>
          <div className="col">
            <div className="num">03</div>
            <h4>{t('Handarbeit')}</h4>
            <p>{t('Jedes Piece wird in unserer Werkstatt in Deutschland gefertigt. Stein und Metall werden von Hand zusammengeführt.')}</p>
          </div>
        </div>
      </div>
    </section>

    <section className="mystery-set">
      <div className="inner">
        <div className="eyebrow">{t('Set-Angebot')}</div>
        <h2>ALCHEMY & SPHERE <span className="accent-word">{t('Set.')}</span></h2>
        <p>{t('Beide Pieces zusammen als Set. Stein und Metall in zwei Formen, eine Sprache.')}</p>
        <div className="set-price">
          <span className="old">{fmt(2150 + 1650)}</span>
          <span className="now">{fmt(4500)}</span>
        </div>
        <button className="btn" onClick={()=>openPDP(PRODUCTS.find(p=>p.id==='alchemy'))}>{t('Set ansehen')} <Icon name="arrow"/></button>
      </div>
    </section>

    <section className="mystery-highlights">
      <div className="inner">
        <div className="eyebrow">{t('Highlights')}</div>
        <div className="cols">
          <div><Icon name="hand"/><h4>{t('Made in Germany')}</h4><p>{t('Regionale Herstellung mit höchstem Qualitätsanspruch.')}</p></div>
          <div><Icon name="shield"/><h4>{t('Echte Handarbeit')}</h4><p>{t('Jedes Stück ein Unikat, mit Sorgfalt gefertigt.')}</p></div>
          <div><Icon name="return"/><h4>{t('Nachhaltige Materialien')}</h4><p>{t('Naturstein und Metall, ressourcenschonend verarbeitet.')}</p></div>
        </div>
      </div>
    </section>

    <div style={{marginTop:64,padding:'40px',textAlign:'center'}}>
      <div className="eyebrow">{t('Nicht das Richtige dabei?')}</div>
      <div className="serif" style={{fontSize:36,marginTop:14}}>{t('Wir fertigen')} <span className="accent-word">{t('maßgeschneidert.')}</span></div>
      <p style={{color:'var(--ink-2)',maxWidth:'36em',margin:'16px auto'}}>{t('Jedes Piece gibt es auch in anderer Größe, Oberfläche oder Legierung. Skizze oder Foto schicken. Wir antworten mit Zeichnung und Preis.')}</p>
      <button className="btn" style={{marginTop:14}}>{t('Auftragsarbeit anfragen')} <Icon name="arrow"/></button>
    </div>
  </>;
};

Object.assign(window, { MysteryCollection });