// ZEN Kollektion — eigene Seite

const ZenCollection = () => {
  const { openPDP, quickAdd, go, lang, t } = useApp();
  const zenProducts = PRODUCTS.filter(p => p.name.startsWith('ZEN'));

  const pins = [
    { id:'zen-console', x:50, y:62, labelDir:'right', num:'01' },
    { id:'zen-coffee',  x:38, y:78, labelDir:'left',  num:'02' },
    { id:'zen-dining',  x:80, y:62, labelDir:'up-left', num:'03' },
    { id:'zen-bench',   x:75, y:79, labelDir:'left',  num:'04' },
  ].map(p => ({ ...p, product: PRODUCTS.find(x => x.id === p.id) })).filter(p => p.product);

  const [active, setActive] = React.useState(null);

  return <>
    <section className="zenroom zenroom-hero">
      <div className={`stage ${active?'has-active':''}`}>
        <picture>
          <source media="(max-width: 900px)" srcSet="assets/zen-room-mobile.jpg"/>
          <img src="assets/zen-room.jpg" alt="ZEN Kollektion im Interior"/>
        </picture>
        <div className="head">
          <div>
            <div className="eyebrow">{t('Kollektion · ZEN')}</div>
            <h2>{t('Vier Pieces, ein Raum.')}</h2>
            <div className="sub">{t('Die Gründungskollektion. Eine schwere Platte auf der leisesten möglichen Basis. Tipp auf einen Punkt.')}</div>
          </div>
        </div>

        {pins.map(pin => (
          <button
            key={pin.id}
            className={`pin dir-${pin.labelDir} ${active===pin.id?'active':''} ${active && active!==pin.id?'dim':''}`}
            style={{ left: pin.x+'%', top: pin.y+'%' }}
            onMouseEnter={()=>setActive(pin.id)}
            onMouseLeave={()=>setActive(null)}
            onFocus={()=>setActive(pin.id)}
            onBlur={()=>setActive(null)}
            onClick={()=>openPDP(pin.product)}
            aria-label={lang==='en'?`Open ${pin.product.name}`:`${pin.product.name} öffnen`}
          >
            <span className="dot"/>
            <span className="label">
              <span className="num">{pin.num} · {lang==='en'?(CAT_EN[pin.product.cat]||pin.product.cat):pin.product.cat}</span>
              <span className="nm">{pin.product.name}</span>
              <span className="go">{t('Ansehen')} →</span>
            </span>
          </button>
        ))}
      </div>
    </section>

    <section className="sect">
      <div className="sect-head">
        <div>
          <div className="eyebrow">{String(zenProducts.length).padStart(2,'0')} Pieces</div>
          <h2>{t('Die ZEN')} <span className="accent-word">{t('Kollektion.')}</span></h2>
        </div>
      </div>
      <div className="grid">
        {zenProducts.map(p => {
          const display = p.id === 'zen-dining' ? {...p, img: 'assets/lifestyle/zen-dining.jpg'} : p;
          return <ProductCard key={p.id} p={display} onOpen={openPDP} onAdd={quickAdd}/>;
        })}
      </div>
      <div style={{marginTop:64,padding:'40px',textAlign:'center',borderTop:'1px solid var(--line)'}}>
        <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>
    </section>
  </>;
};

Object.assign(window, { ZenCollection });