/* Pōda Ksamil — a menu category block: section header + two-column item list */

function MenuSection({ category, items, registerRef, lang }) {
  const SH = window.KsamilMenuDesignSystem_d0403b.SectionHeader;
  const MI = window.KsamilMenuDesignSystem_d0403b.MenuItem;
  const PT = window.KsamilMenuDesignSystem_d0403b.PriceTag;
  const lc = (lang || 'EN').toLowerCase();

  // Section header (icon + title + blurb) shared by both layouts.
  const Header = (
    <React.Fragment>
      <div style={{ textAlign: 'center', marginBottom: 8, color: 'var(--sea-600)', display: 'flex', justifyContent: 'center' }}>
        <window.Icon name={category.icon} size={26} strokeWidth={1.3} color="var(--sea-600)" />
      </div>
      <SH eyebrow="Bar" title={category.title[lc]} />
      {category.blurb ? (
        <p style={{ textAlign: 'center', maxWidth: 460, margin: '14px auto 0', font: 'var(--weight-regular) 14px/1.6 var(--font-body)', color: 'var(--text-body)', fontStyle: 'italic' }}>{category.blurb[lc]}</p>
      ) : null}
    </React.Fragment>
  );

  // Simple price-list groups (cafeteria, soft drinks, beer, wine, spirits):
  // compact "name · dotted leader · price" rows, no photo or ingredient line.
  if (category.simple) {
    return (
      <section
        ref={(el) => registerRef && registerRef(category.id, el)}
        style={{ scrollMarginTop: 96, padding: '40px 0' }}
      >
        {Header}
        <div style={{
          marginTop: 26,
          display: 'grid',
          gridTemplateColumns: 'repeat(auto-fill, minmax(300px, 1fr))',
          columnGap: 44, rowGap: 0,
        }}>
          {items.map((it) => (
            <div key={it.name.en} style={{ display: 'flex', alignItems: 'baseline', gap: 10, borderBottom: '1px solid var(--border-subtle)', padding: '13px 0' }}>
              <span style={{
                font: 'var(--role-item-name)',
                color: 'var(--text-heading)',
                letterSpacing: 'var(--tracking-tight)',
              }}>{it.name[lc]}</span>
              <span style={{ flex: 1, borderBottom: '1px dotted var(--border-strong)', opacity: 0.4, transform: 'translateY(-4px)' }} aria-hidden="true" />
              <PT value={it.price} />
            </div>
          ))}
        </div>
      </section>
    );
  }

  return (
    <section
      ref={(el) => registerRef && registerRef(category.id, el)}
      style={{ scrollMarginTop: 96, padding: '46px 0' }}
    >
      {Header}

      <div style={{
        marginTop: 30,
        display: 'grid',
        gridTemplateColumns: 'repeat(auto-fill, minmax(320px, 1fr))',
        columnGap: 44, rowGap: 4,
      }}>
        {items.map((it, i) => (
          <div key={it.name.en} style={{ borderBottom: '1px solid var(--border-subtle)', padding: '4px 0' }}>
            <MI name={it.name[lc]} ingredients={it.ing[lc]} price={it.price} badge={it.badge ? it.badge[lc] : undefined} image={it.image} />
          </div>
        ))}
      </div>
    </section>
  );
}

window.MenuSection = MenuSection;