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

const MENU={
  kaffee:[
    {name:'Filterkaffee',description:'Hausröstung, Handfilter',note:'Vegan',price:'3,80 €'},
    {name:'Espresso',description:'Doppelt, aus der Siebträgermaschine',price:'2,60 €'},
    {name:'Flat White',description:'Vollmilch, Hafer oder Soja',price:'4,40 €'},
    {name:'Matcha Latte',description:'Ceremonial grade',note:'Saisonal',price:'5,40 €'}
  ],
  kuchen:[
    {name:'Zimtschnecke',description:'Frisch aus dem Ofen',price:'4,20 €'},
    {name:'Karottenkuchen',description:'Mit Frischkäsecreme',price:'4,60 €'},
    {name:'Mandelkeks',description:'Zwei Stück',note:'Vegan',price:'2,80 €'}
  ],
  fruehstueck:[
    {name:'Joghurt & Granola',description:'Hausgemachtes Granola, Saisonobst',price:'6,80 €'},
    {name:'Sauerteigbrot',description:'Butter und Salz — oder Avocado',price:'7,40 €'},
    {name:'Rührei',description:'Mit Kräutern aus dem Hinterhof',price:'8,20 €'}
  ]
};

function CafeScreen(){
  const [tab,setTab]=React.useState('kaffee');
  return (
    <main style={{padding:'72px var(--gutter-page-lg) 0'}}>
      <div style={{maxWidth:'var(--container-max)',margin:'0 auto',display:'grid',gridTemplateColumns:'1.15fr .85fr',gap:64,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={[{id:'kaffee',label:'Kaffee'},{id:'kuchen',label:'Kuchen'},{id:'fruehstueck',label:'Frühstück'}]} />
          <div>{MENU[tab].map(m=><MenuRow key={m.name} {...m} />)}</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});