// TUKKON Kollektion — eigene Seite

const TukkonCollection = () => {
  const { openPDP, quickAdd, go, lang, t } = useApp();
  const tukkonProducts = PRODUCTS.filter(p => p.name.startsWith('TUKKON'));

  const pins = [
    { id:'tukkon', x:38, y:65, labelDir:'right', num:'01' },
    { id:'tukkon-console', x:44, y:42, labelDir:'right', num:'02' },
    { id:'reflexion', x:64, y:29, labelDir:'left', num:'03' },
  ].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':''}`}>
        <img src="assets/lifestyle/tukkon-hero.jpg" alt="TUKKON Kollektion im Showroom"/>
        <div className="head tukkon-head">
          <div/>
          <div style={{textAlign:'right'}}>
            <h2 style={{display:'flex',flexDirection:'column',alignItems:'flex-end',gap:0,lineHeight:0.9,textTransform:'uppercase'}}><span>EXCLUSIVE</span><span>COLLECTION</span><span>FOR VOGUE</span></h2>
          </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>
        ))}

        {pins.map(pin => (
          <div
            key={'card-'+pin.id}
            className={`pin-card dir-${pin.labelDir} ${active===pin.id?'visible':''}`}
            style={{ left: pin.x+'%', top: pin.y+'%' }}
            onMouseEnter={()=>setActive(pin.id)}
            onMouseLeave={()=>setActive(null)}
            onClick={()=>openPDP(pin.product)}
          >
            <div className="pin-card-img">
              <img src={pin.product.img} alt={pin.product.name}/>
            </div>
            <div className="pin-card-body">
              <div className="pin-card-cat">{lang==='en'?(CAT_EN[pin.product.cat]||pin.product.cat):pin.product.cat}</div>
              <div className="pin-card-name">{pin.product.name}</div>
              <div className="pin-card-swatches">{pin.product.tones.slice(0,4).map((tn,i)=><Swatch key={i} c={tn}/>)}</div>
              <div className="pin-card-price">{pin.product.price ? (pin.product.priceMax ? t('ab')+' '+fmt(pin.product.price) : fmt(pin.product.price)) : t('Auf Anfrage')}</div>
              <div className="pin-card-cta">{t('Ansehen')} →</div>
            </div>
          </div>
        ))}
      </div>
    </section>

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

    <section className="tukkon-lifestyle">
      <div className="tukkon-lifestyle-head">
        <div className="eyebrow">{t('Design mit Kante')}</div>
        <h2>TUKKON COLLECTION</h2>
      </div>
      <div className="tukkon-lifestyle-grid">
        <div className="tukkon-lifestyle-img"><img src="assets/lifestyle/tukkon-konsole.jpg" alt="TUKKON Console Editorial"/></div>
        <div className="tukkon-lifestyle-img"><img src="assets/lifestyle/tukkon-console.jpg" alt="TUKKON Console Editorial"/></div>
      </div>
    </section>

    <section className="tukkon-vogue">
      <div className="tukkon-vogue-img">
        <img src="assets/lifestyle/tukkon-vogue.jpg" alt="VOGUE · TUKKON"/>
      </div>
      <div className="tukkon-vogue-txt">
        <div className="eyebrow">{t('Perfected in Form. Pure. TUKKON.')}</div>
        <p>{t('Die Kollektion vereint kraftvolles Metalldesign mit fließender Eleganz. Jedes Piece ist eine Skulptur für den Raum: architektonisch, sinnlich und einzigartig in Form und Farbe. Die Burnierung und Oberflächenbehandlung verleihen den Möbeln Tiefe und Nuance, fangen Licht und Schatten in einem faszinierenden Zusammenspiel ein. Handgefertigte Details machen jedes Objekt zu einem Unikat, in dem Design, Materialität und Funktion eine harmonische Symbiose eingehen. Inszeniert für Vogue, entfaltet die Kollektion ihre Präsenz in jedem Interior und zeigt, wie Möbel einen Raum formen und zugleich als Kunstwerk bestehen können.')}</p>
      </div>
    </section>

    <section className="tukkon-character">
      <div className="tukkon-character-txt">
        <div className="eyebrow">{t('Design mit Charakter')}</div>
        <p>{t('Feines Messing oder moderner Edelstahl: Unsere Designstücke werden aus erstklassigen Materialien mit Charakter gefertigt. Für stilvolle Akzente mit Persönlichkeit.')}</p>
      </div>
      <div className="tukkon-character-img">
        <img src="assets/lifestyle/tukkon-kollektion.jpg" alt="TUKKON Kollektion Editorial"/>
      </div>
    </section>

    <section className="tukkon-brass">
      <div className="tukkon-brass-head">
        <div className="eyebrow">{t('Messing')}</div>
        <h2>{t('Brillanz in Messing, warm wie Sonnenlicht')}</h2>
      </div>
      <div className="tukkon-brass-grid">
        <div className="tukkon-brass-img"><img src="assets/lifestyle/tukkon-detail.jpg" alt="TUKKON Messing Detail"/></div>
        <div className="tukkon-brass-img"><img src="assets/lifestyle/tukkon-console-4.jpg" alt="TUKKON Messing Detail"/></div>
        <div className="tukkon-brass-img"><img src="assets/lifestyle/tukkon-console-2.jpg" alt="TUKKON Console Detail"/></div>
      </div>
    </section>

    <section className="tukkon-values">
      <div className="inner">
        <div className="tukkon-values-head">
          <div className="eyebrow">{t('Table, Console & Chair')}</div>
          <h2>TUKKON COLLECTION</h2>
        </div>
        <div className="cols">
          <div><Icon name="hand"/><h4>{t('Einzeln gefertigt')}</h4><p>{t('Jedes Piece wird einzeln in unserer Werkstatt hergestellt. Keine Serie, kein Fließband.')}</p></div>
          <div><Icon name="shield"/><h4>{t('Made in Germany')}</h4><p>{t('Regionale Herstellung mit höchstem Qualitätsanspruch.')}</p></div>
          <div><Icon name="return"/><h4>{t('Echte Handarbeit')}</h4><p>{t('Jedes Stück ein Unikat, mit Sorgfalt gefertigt.')}</p></div>
        </div>
      </div>
    </section>

    <section className="tukkon-cta">
      <div className="eyebrow">{t('Nicht das Richtige dabei?')}</div>
      <div className="serif" style={{fontSize:'clamp(28px,3vw,40px)',marginTop:14}}>{t('Wir fertigen')} <span className="accent-word">{t('maßgeschneidert.')}</span></div>
      <p style={{color:'var(--ink-2)',maxWidth:'36em',margin:'20px auto 0'}}>{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:24}}>{t('Auftragsarbeit anfragen')} <Icon name="arrow"/></button>
    </section>
  </>;
};

Object.assign(window, { TukkonCollection });