/* global React */
function CategoryGrid({ onSelect }) {
  const cats = [
    { id: 'Hygiene', name: 'Hygiene & Pflege', count: 42, img: 'cat-Hygiene.png' },
    { id: 'Spielzeug', name: 'Spielzeug', count: 28, img: 'cat-Spielzeug.png' },
    { id: 'Bastelartikel', name: 'Bastelartikel', count: 17, img: 'cat-Bastelartikel.png' },
    { id: 'Heim-Garten', name: 'Heim & Garten', count: 63, img: 'cat-Heim-Garten.png' },
    { id: 'Geraete', name: 'Geräte', count: 19, img: 'cat-Geraete.png' },
    { id: 'Textilien', name: 'Textilien', count: 35, img: 'cat-Textilien.png' },
    { id: 'Lebensmittel', name: 'Lebensmittel', count: 21, img: 'cat-Lebensmittel.png' },
    { id: 'Sonstiges', name: 'Sonstiges', count: 47, img: 'cat-Sonstiges.png' },
  ];
  const handleClick = (id) => {
    window.dispatchEvent(new CustomEvent('dp:filter', { detail: id }));
    onSelect?.(id);
  };
  return (
    <section className="dp-section" id="kategorien">
      <div className="dp-container">
        <div className="dp-section-head dp-section-head--row">
          <div>
            <span className="dp-eyebrow">Sortiment</span>
            <h2 className="dp-h2" style={{ marginTop: 12 }}>Stöbern nach Kategorie.</h2>
          </div>
          <button className="dp-btn dp-btn--outline" onClick={() => handleClick('Alle')}>Alle Kategorien</button>
        </div>
        <div className="dp-cats__grid">
          {cats.map(c => (
            <a className="dp-cat" key={c.id} onClick={(e) => { e.preventDefault(); handleClick(c.id); }} href="#">
              <img src={`assets/${c.img}`} alt={c.name} />
              <div className="dp-cat__name">{c.name}</div>
              <div className="dp-cat__count">{c.count} Artikel</div>
            </a>
          ))}
        </div>
      </div>
    </section>
  );
}
window.CategoryGrid = CategoryGrid;