/* global React, ReactDOM */
const { useState, useMemo } = React;

const WORKS = [
  { id:'047', name:'Stele Taschenuhr', tag:'Serpentinit', cat:'Stelen', img:'/static/img/stele-pocketwatch.jpg', span:{c:5,r:36}},
  { id:'051', name:'Doppelgrab Welle', tag:'Granit Bahama', cat:'Doppelgrab', img:'/static/img/black-curve-double.jpg', span:{c:4,r:36}},
  { id:'053', name:'Säule Multicolor', tag:'Indischer Granit', cat:'Findlinge', img:'/static/img/granite-cube-pink.jpg', span:{c:3,r:36}},
  { id:'058', name:'Findling Heide', tag:'Diabas roh', cat:'Findlinge', img:'/static/img/cube-winter-heather.jpg', span:{c:4,r:28}},
  { id:'061', name:'Herzstein', tag:'Granit poliert', cat:'Stelen', img:'/static/img/heart-headstone.jpg', span:{c:4,r:28}},
  { id:'064', name:'Marmorbuch', tag:'Carrara', cat:'Liegeplatten', img:'/static/img/showroom-marble-book.jpg', span:{c:4,r:28}},
  { id:'066', name:'Liegeplatte 1977', tag:'Schwarzer Granit', cat:'Liegeplatten', img:'/static/img/flat-slab-1977.jpg', span:{c:5,r:30}},
  { id:'068', name:'Buchform Granit', tag:'Aurora', cat:'Liegeplatten', img:'/static/img/book-stone-1952.jpg', span:{c:3,r:30}},
  { id:'071', name:'Urnenherz', tag:'Granit poliert', cat:'Urnen', img:'/static/img/granite-heart-urn.jpg', span:{c:4,r:30}},
  { id:'073', name:'Findling Doppelgrab', tag:'Findling', cat:'Findlinge', img:'/static/img/grave-stelae-spurk.jpg', span:{c:6,r:36}},
  { id:'076', name:'Symbol-Relief', tag:'Sandstein', cat:'Skulpturen', img:'/static/img/carving-stairs.jpg', span:{c:3,r:36}},
  { id:'079', name:'Bogen mit Bepflanzung', tag:'Kalkstein', cat:'Gestaltung', img:'/static/img/grave-flowers-arch.jpg', span:{c:3,r:36}},
];
const CATS = ['Alle','Stelen','Liegeplatten','Findlinge','Doppelgrab','Urnen','Skulpturen','Gestaltung'];

function Gallery(){
  const [cat,setCat] = useState('Alle');
  const items = useMemo(()=> cat==='Alle' ? WORKS : WORKS.filter(w=>w.cat===cat),[cat]);
  return (<>
    <div className="gallery-controls">
      {CATS.map(c=>(
        <button key={c} className={'chip'+(c===cat?' is-on':'')} onClick={()=>setCat(c)}>{c}</button>
      ))}
    </div>
    <div className="gallery">
      {items.map(w=>(
        <figure key={w.id} className="tile" style={{gridColumn:`span ${w.span.c}`,gridRow:`span ${w.span.r}`}}>
          <img src={w.img} alt={w.name+' — '+w.tag}/>
          <div className="tile-shade"/>
          <figcaption className="tile-meta">
            <div className="tile-name">{w.name}</div>
            <div className="tile-tag">№ {w.id} · {w.tag}</div>
          </figcaption>
        </figure>
      ))}
    </div>
  </>);
}

ReactDOM.createRoot(document.getElementById('gallery-host')).render(<Gallery/>);