// Bestseller — ZEN, TAISHO & KINKO

const BestsellerCollection = () => {
  const { openPDP, quickAdd, go, lang, t } = useApp();
  const bestsellerProducts = getBestsellerProducts();

  return <>
    <section className="col-hero">
      <div className="eyebrow">{String(bestsellerProducts.length).padStart(2,'0')} Pieces · {t('Kollektion · Bestseller')}</div>
      <h1>{t('Die')} <span className="accent-word">{t('Bestseller')}</span> {t('Kollektion.')}</h1>
      <p>{t('Unsere meistverkauften Pieces: die komplette ZEN Kollektion plus TAISHO und KINKO. Kuratiert für Räume, die ruhig wirken und trotzdem Präsenz haben.')}</p>
      <div className="ctas" style={{marginTop:24,display:'flex',gap:12,flexWrap:'wrap'}}>
        <button className="btn" onClick={()=>go({page:'shop'})}>{t('Alle Pieces')} <Icon name="arrow"/></button>
        <button className="btn ghost" onClick={()=>go({page:'zen'})}>ZEN {t('Kollektion')}</button>
      </div>
    </section>

    <section className="sect">
      <div className="sect-head">
        <div>
          <div className="eyebrow">ZEN · TAISHO · KINKO</div>
          <h2>{t('Sechs Pieces.')} <span className="accent-word">{t('Am häufigsten gewählt.')}</span></h2>
        </div>
      </div>
      <div className="grid">
        {bestsellerProducts.map(p => <ProductCard key={p.id} p={p} onOpen={openPDP} onAdd={quickAdd}/>)}
      </div>
    </section>
  </>;
};

Object.assign(window, { BestsellerCollection });