const {Button,Card,Tag,Tabs,SectionHeader,ClassCard,Notice,Divider}=window.KlayKeramikAmpCafDesignSystem_6e7cc9;

function KurseScreen({onBook}){
  const [tab,setTab]=React.useState('alle');
  const all=window.KLAY_COURSES;
  const list=tab==='alle'?all:all.filter(c=>c.level.toLowerCase().startsWith(tab.slice(0,4)));
  return (
    <main style={{padding:'72px var(--gutter-page-lg) 0'}}>
      <div style={{maxWidth:'var(--container-max)',margin:'0 auto',display:'flex',flexDirection:'column',gap:'var(--space-7)'}}>
        <SectionHeader eyebrow="Kurse" title="Drei Stunden, sechs Plätze"
          intro="Material, Brennen und Glasieren sind immer inklusive. Deine Stücke kannst du etwa drei Wochen später abholen." />
        <Tabs value={tab} onChange={setTab} items={[{id:'alle',label:'Alle'},{id:'anfänger',label:'Anfänger'},{id:'fortgeschritten',label:'Fortgeschritten'},{id:'kinder',label:'Kinder'}]} />
        <div style={{display:'grid',gridTemplateColumns:'repeat(3,1fr)',gap:'var(--space-6)'}}>
          {list.map(c=><ClassCard key={c.title} {...c} image={'../../assets/imagery/'+c.img} onBook={()=>onBook(c)} />)}
        </div>
        <Notice tone="info" title="Gruppen & Feiern">
          Ab acht Personen öffnen wir die Werkstatt auch außerhalb der Kurszeiten — schreib uns einfach, was du vorhast.
        </Notice>
      </div>
    </main>
  );
}
Object.assign(window,{KurseScreen});