/* Café menu columns + the two party kids' menus. */
function Cafe(props) {
  const { SectionHead, MenuList, Card, Badge } = window.PE;
  const t = props.t;
  const C = window.PE_CONTENT;
  const colTitle = {hot: t.menu.cols.hot, cold: t.menu.cols.cold, sweet: t.menu.cols.sweet};
  return (
    <Section id="menu" alt>
      <SectionHead align="center" kicker={t.menu.kicker} title={t.menu.title} lead={t.menu.lead} />
      <div style={{display:'grid', gridTemplateColumns:'repeat(3, 1fr)', gap:'var(--gap-grid)'}}>
        {C.cafe.map(function (col) {
          return (
            <Card key={col.id} radius="lg">
              <MenuList title={colTitle[col.id]}
                items={col.items.map(function (it) { return {name: t.cafeItems[it.id], price: it.price, flags: it.flags}; })} />
            </Card>
          );
        })}
      </div>
      <h3 style={{margin:'var(--space-12) 0 var(--space-6)', font:'var(--type-h3)', color:'var(--text-strong)', textAlign:'center'}}>{t.menu.kids}</h3>
      <div style={{display:'grid', gridTemplateColumns:'repeat(2, 1fr)', gap:'var(--gap-card)'}}>
        {C.kidsMenus.map(function (m) {
          return (
            <Card key={m.id} radius="xl" style={{display:'flex', gap:'var(--space-6)', alignItems:'center'}}>
              <img src={m.img} alt={t.kidsMenuNames[m.id]} style={{width:150, height:150, objectFit:'cover', borderRadius:'var(--radius-lg)', flex:'0 0 auto'}} />
              <div style={{display:'grid', gap:'var(--space-3)'}}>
                <strong style={{font:'var(--type-h3)', color:'var(--brand-navy)'}}>{t.kidsMenuNames[m.id]}</strong>
                <div style={{display:'flex', gap:'var(--space-2)', flexWrap:'wrap'}}>
                  <Badge tone="navy" upper={false}>{t.menu.weekday} · {m.weekday}</Badge>
                  <Badge tone="magenta" upper={false}>{t.menu.weekend} · {m.weekend}</Badge>
                </div>
                <span style={{font:'var(--type-small)', color:'var(--text-muted)'}}>{t.menu.perChild}</span>
              </div>
            </Card>
          );
        })}
      </div>
      <p style={{marginTop:'var(--space-6)', textAlign:'center', font:'var(--type-small)', color:'var(--text-muted)'}}>{t.menu.note}</p>
    </Section>
  );
}

Object.assign(window, { Cafe });