const {Tabs,MenuRow,SectionHeader,Card,Tag,ImageFrame,Badge}=window.KlayKeramikAmpCafDesignSystem_6e7cc9;


function CafeScreen(){
  const gruppen=window.KLAY.karte.gruppen;
  const [tab,setTab]=React.useState(gruppen[0].id);
  const aktiv=gruppen.find(g=>g.id===tab)||gruppen[0];
  return (
    <main style={{padding:'clamp(36px,6vw,72px) var(--gutter-page-lg) 0'}}>
      <div className="klay-split" style={{maxWidth:'var(--container-max)',margin:'0 auto','--split':'1.15fr .85fr',alignItems:'start'}}>
        <div style={{display:'flex',flexDirection:'column',gap:'var(--space-6)'}}>
          <SectionHeader eyebrow="Café" title="Die Karte" intro="Alles wird auf Geschirr serviert, das in der Werkstatt entstanden ist." />
          <Tabs value={tab} onChange={setTab} items={gruppen.map(g=>({id:g.id,label:g.label}))} />
          <div>{aktiv.positionen.map(m=>
            <MenuRow key={m.name} name={m.name} description={m.beschreibung} note={m.hinweis} price={m.preis} />)}</div>
          <Badge status="open">Küche bis 15:30 · Kuchen solange vorrätig</Badge>
        </div>
        <div style={{display:'flex',flexDirection:'column',gap:'var(--space-5)'}}>
          <ImageFrame src="../../assets/imagery/cafe-shelves-evening.png" ratio="4 / 5" shape="soft" caption="Regale hinter der Theke" />
          <Card variant="outline" padding="var(--space-5)" style={{display:'flex',flexDirection:'column',gap:'var(--space-3)'}}>
            <span className="klay-label">Gut zu wissen</span>
            <p style={{fontFamily:'var(--font-body)',fontWeight:300,fontSize:'var(--text-sm)',lineHeight:'var(--leading-body)',color:'var(--text-body)',margin:0}}>
              Wir nehmen keine Tischreservierungen — außer für Gruppen ab sechs Personen. Hunde sind willkommen, Laptops bis 13:00.
            </p>
            <div style={{display:'flex',gap:'var(--space-2)',flexWrap:'wrap'}}>
              <Tag tone="greige">Hunde ok</Tag><Tag tone="greige">Kartenzahlung</Tag><Tag tone="clay">Geschirr im Laden</Tag>
            </div>
          </Card>
        </div>
      </div>
    </main>
  );
}
Object.assign(window,{CafeScreen});