// Menu item card: photo slot on top, then name / price / description / tags.
// The photo comes from the item's own `photo` file; the slot stays an
// <image-slot> so the client can still drop a replacement over it.
function MenuItemCard({ item, t, lang }) {
  const { Card, Tag } = window.TheCornerDesignSystem_28aa27;
  const loc = window.cornerItem(item, lang);
  const desc = loc.desc || t.menu.pendingDesc;
  return (
    <Card padded={false} style={{ display: 'flex', flexDirection: 'column', height: '100%', overflow: 'hidden' }}>
      <div style={{ width: '100%', aspectRatio: '4 / 3', background: 'var(--surface-sunken)' }}>
        <image-slot
          id={'menu-photo-' + item.id}
          shape="rect"
          fit="cover"
          src={item.photo || undefined}
          placeholder={t.menu.photoHint}
        ></image-slot>
      </div>
      <div style={{ display: 'flex', flexDirection: 'column', gap: 10, padding: 'var(--space-5)', flex: 1 }}>
        <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'flex-start', gap: 8 }}>
          <h4 style={{ margin: 0, font: 'var(--text-h4)', color: 'var(--text-primary)' }}>{loc.name}</h4>
          <Price value={item.price} lang={lang} size={20} />
        </div>
        {desc && (
          <p style={{
            margin: 0, font: 'var(--text-body-s)', flex: 1,
            color: loc.desc ? 'var(--text-secondary)' : 'var(--text-muted)',
            fontStyle: loc.desc ? 'normal' : 'italic',
          }}>
            {desc}
          </p>
        )}
        <div style={{ display: 'flex', gap: 6, flexWrap: 'wrap' }}>
          {item.tags.map((tag) => <Tag key={tag}>{t.tags[tag]}</Tag>)}
        </div>
      </div>
    </Card>
  );
}
window.MenuItemCard = MenuItemCard;

// Drinks are bought in and sold as they come: no photo, no ingredients, and a
// name that is the whole description. So they are a priced list under the
// sandwiches rather than a second grid of cards — one row per drink, two
// columns of rows on a wide screen, one when the column gets narrow.
function DrinksList({ items, t, lang }) {
  if (!items.length) return null;
  return (
    <div style={{ marginTop: 56 }}>
      <h3 style={{ font: 'var(--text-h2)', color: 'var(--text-primary)', margin: '0 0 20px' }}>
        {t.menu.sections.drinks}
      </h3>
      <div style={{
        display: 'grid', gridTemplateColumns: 'repeat(auto-fill, minmax(320px, 1fr))',
        columnGap: 40,
      }}>
        {items.map((item) => (
          <div key={item.id} style={{
            display: 'flex', alignItems: 'baseline', justifyContent: 'space-between',
            gap: 16, padding: '12px 0',
            borderBottom: 'var(--border-width-hairline) solid var(--border-default)',
          }}>
            <span style={{ font: 'var(--text-body)', color: 'var(--text-primary)' }}>
              {window.cornerItem(item, lang).name}
            </span>
            <Price value={item.price} lang={lang} size={16} />
          </div>
        ))}
      </div>
    </div>
  );
}
window.DrinksList = DrinksList;

// Full menu screen: the sandwich cards, then the drinks list beneath them.
function MenuScreen({ t, lang }) {
  const sandwiches = window.CORNER_MENU.filter((i) => i.category === 'sandwiches');
  const drinks = window.CORNER_MENU.filter((i) => i.category === 'drinks');
  return (
    <section style={{ padding: '48px var(--page-gutter) 80px', background: 'var(--surface-alt)', minHeight: '60vh' }}>
      {/* Title and the PDF download share a baseline row; the button removes
          itself when no PDF has been supplied, and the row simply closes up. */}
      <div className="c-menu-head" style={{
        display: 'flex', alignItems: 'center', justifyContent: 'space-between',
        gap: 24, flexWrap: 'wrap', margin: '0 0 32px',
      }}>
        <h2 className="c-page-title" style={{ font: 'var(--text-h1)', color: 'var(--text-primary)', margin: 0 }}>{t.menu.title}</h2>
        <MenuPdfButton t={t} />
      </div>
      <div style={{ display: 'grid', gridTemplateColumns: 'repeat(auto-fill, minmax(240px, 1fr))', gap: 20 }}>
        {sandwiches.map((item) => <MenuItemCard key={item.id} item={item} t={t} lang={lang} />)}
      </div>
      <DrinksList items={drinks} t={t} lang={lang} />
    </section>
  );
}
window.MenuScreen = MenuScreen;