/* Section renderers for the Menu page. Exposed on window. */

function Band({ id, bg, children, first = false }) {
  return (
    <section
      id={id}
      style={{
        background: bg,
        padding: `${first ? 'var(--space-7)' : 'var(--space-section)'} var(--gutter) var(--space-section)`,
        scrollMarginTop: '160px',
      }}
    >
      <div style={{ maxWidth: 'var(--container-prose)', margin: '0 auto' }}>{children}</div>
    </section>
  );
}

function CourseTitle({ children }) {
  return (
    <h2 style={{ fontFamily: 'var(--font-display)', fontWeight: 400, fontSize: 'var(--text-h1)', color: 'var(--text-primary)', letterSpacing: 'var(--tracking-display)', textAlign: 'center', margin: '0 0 var(--space-6)' }}>
      {children}
    </h2>
  );
}

function SubLabel({ children }) {
  return (
    <div style={{ display: 'flex', alignItems: 'center', gap: '1rem', margin: 'var(--space-6) 0 var(--space-5)' }}>
      <span style={{ fontFamily: 'var(--font-sans)', fontSize: 'var(--text-eyebrow)', letterSpacing: 'var(--tracking-eyebrow)', textTransform: 'uppercase', color: 'var(--metal-gold)', whiteSpace: 'nowrap' }}>{children}</span>
      <span style={{ flex: 1, height: 1, background: 'var(--line-on-dark)' }} />
    </div>
  );
}

function Notes({ items }) {
  return (
    <div style={{ borderTop: '1px solid var(--line-on-dark)', marginTop: 'var(--space-7)', paddingTop: 'var(--space-6)', display: 'flex', flexDirection: 'column', gap: '1rem' }}>
      {items.map((t, i) => (
        <p key={i} style={{ fontFamily: 'var(--font-serif)', fontStyle: 'italic', color: 'var(--text-muted)', fontSize: 'var(--text-small)', lineHeight: 'var(--leading-relaxed)', margin: 0 }}>{t}</p>
      ))}
    </div>
  );
}

/* ---- À la carte ---- */
function AlaCarte({ data, band }) {
  const { MenuItem } = window.LoncinDesignSystem_6f2c51;
  const courses = [['vg', 'Voorgerechten'], ['hg', 'Hoofdgerechten']];
  const STRIPE = 'rgba(247, 242, 232, 0.045)';
  const prose = { maxWidth: 'var(--container-prose)', margin: '0 auto', padding: '0 var(--gutter)' };
  return (
    <div>
      {courses.map(([id, title], ci) => {
        const groups = Object.entries(data[title]);
        let row = 0;
        return (
          <section
            key={id}
            id={id}
            style={{
              background: band(ci),
              padding: `${ci === 0 ? 'var(--space-7)' : 'var(--space-section)'} 0 var(--space-section)`,
              scrollMarginTop: '160px',
            }}
          >
            <div style={prose}>
              <CourseTitle>{title}</CourseTitle>
            </div>
            {groups.map(([label, items]) => (
              <div key={label}>
                <div style={prose}>
                  <SubLabel>{label}</SubLabel>
                </div>
                <div>
                  {items.map(([nl, fr, price], i) => {
                    const tint = row++ % 2 === 1;
                    return (
                      <div
                        key={i}
                        style={{
                          background: tint ? STRIPE : 'transparent',
                          borderTop: '1px dotted var(--line-on-dark)',
                        }}
                      >
                        <div style={{ ...prose, padding: 'var(--space-5) var(--gutter)' }}>
                          <MenuItem name={nl} price={price} description={fr} />
                        </div>
                      </div>
                    );
                  })}
                </div>
              </div>
            ))}
          </section>
        );
      })}
      <Band id="ac-notes" bg={band(0)}>
        <Notes items={[
          'Onze sauzen worden allemaal à la minute gemaakt. Bent u gehaast? Kies dan voor één van onze menu’s.',
          'Hebt u last van een allergie? Geef ons een seintje, dan passen wij uw gerechten aan. Al onze gerechten kunnen alle allergenen bevatten.',
          'Wij werken uitsluitend met écht wild en zijn afhankelijk van wat de weidelijke jagers schieten — let bij wildgerechten op een eventuele hagelkorrel.',
        ]} />
      </Band>
    </div>
  );
}

/* ---- Menu's ---- */
function Menus({ menus, notes, band }) {
  return (
    <div>
      {menus.map((m, mi) => (
        <Band key={m.id} id={m.id} bg={band(mi)} first={mi === 0}>
          <div style={{ textAlign: 'center' }}>
            <h2 style={{ fontFamily: 'var(--font-display)', fontWeight: 400, fontSize: 'var(--text-h1)', color: 'var(--text-primary)', letterSpacing: 'var(--tracking-display)', margin: 0 }}>
              {m.title}
            </h2>
            <div style={{ marginTop: '0.8rem', display: 'flex', gap: '1.4rem', justifyContent: 'center', alignItems: 'baseline', flexWrap: 'wrap' }}>
              <span style={{ fontFamily: 'var(--font-display)', fontSize: 'var(--text-h2)', color: 'var(--metal-gold)', whiteSpace: 'nowrap' }}>{m.price}</span>
              {m.wine && <span style={{ fontFamily: 'var(--font-serif)', fontStyle: 'italic', color: 'var(--text-muted)' }}>{m.wine}</span>}
            </div>
          </div>

          {m.courses && (
            <div style={{ marginTop: 'var(--space-6)', display: 'flex', flexDirection: 'column' }}>
              {m.courses.map(([nl, fr], i) => (
                <div key={i} style={{ textAlign: 'center', padding: '0.9rem 0', borderTop: i === 0 ? 'none' : '1px solid var(--line-on-dark)' }}>
                  <div style={{ fontFamily: 'var(--font-display)', fontSize: 'var(--text-h4)', color: 'var(--text-primary)', fontWeight: 500 }}>{nl}</div>
                  <div style={{ fontFamily: 'var(--font-serif)', fontStyle: 'italic', color: 'var(--text-secondary)', marginTop: '0.2rem' }}>{fr}</div>
                </div>
              ))}
            </div>
          )}
          {m.note && (
            <p style={{ fontFamily: 'var(--font-serif)', color: 'var(--text-secondary)', lineHeight: 'var(--leading-relaxed)', textAlign: 'center', maxWidth: '54ch', margin: 'var(--space-5) auto 0' }}>{m.note}</p>
          )}
        </Band>
      ))}
      <Band id="menus-notes" bg={band(menus.length)}>
        <Notes items={notes} />
      </Band>
    </div>
  );
}

/* ---- Drankkaart ---- */
function Drankkaart({ groups, band }) {
  // Group consecutive groups by their `section`, preserving order
  const SECTION_ID = {
    'Aperitieven': 'aperitieven',
    'Bieren': 'bieren',
    'Koffie & thee': 'koffie',
    'Whisky': 'whisky',
    'Digestieven': 'digestieven',
  };
  const order = [];
  const bySection = {};
  groups.forEach((g) => {
    if (!bySection[g.section]) { bySection[g.section] = []; order.push(g.section); }
    bySection[g.section].push(g);
  });

  return (
    <div>
      {order.map((section, si) => (
        <Band key={section} id={SECTION_ID[section] || section} bg={band(si)} first={si === 0}>
          <CourseTitle>{section}</CourseTitle>
          {bySection[section].map((g, gi) => (
            <div key={gi}>
              {g.heading !== section && <SubLabel>{g.heading}</SubLabel>}
              <div style={{ display: 'flex', flexDirection: 'column' }}>
                {g.items.map(([name, price], i) => (
                  <div key={i} style={{ display: 'flex', alignItems: 'baseline', gap: '0.6rem', padding: '0.7rem 0.9rem', borderTop: '1px dotted var(--line-on-dark)', background: i % 2 === 1 ? 'rgba(247, 242, 232, 0.045)' : 'transparent' }}>
                    <span style={{ fontFamily: 'var(--font-serif)', fontSize: 'var(--text-body)', color: 'var(--text-primary)', lineHeight: 'var(--leading-snug)' }}>{name}</span>
                    <span style={{ flex: 1, borderBottom: '1px dotted var(--line-on-dark)', transform: 'translateY(-0.3em)' }} />
                    <span style={{ fontFamily: 'var(--font-display)', fontSize: 'var(--text-h4)', color: 'var(--metal-gold)', whiteSpace: 'nowrap' }}>{price}</span>
                  </div>
                ))}
              </div>
            </div>
          ))}
        </Band>
      ))}
    </div>
  );
}

/* ---- Wijnkaart (wordt volgende ronde aangevuld) ---- */
function Wijnkaart({ groups, band }) {
  const SECTION_ID = {
    'Champagne': 'wijn-champagne',
    'Per glas': 'wijn-glas',
    'Witte wijnen': 'wijn-wit',
    'Rosé': 'wijn-rose',
    'Rode wijnen': 'wijn-rood',
    'Halve flessen': 'wijn-half',
  };
  const order = [];
  const bySection = {};
  groups.forEach((g) => {
    if (!bySection[g.section]) { bySection[g.section] = []; order.push(g.section); }
    bySection[g.section].push(g);
  });

  return (
    <div>
      {order.map((section, si) => (
        <Band key={section} id={SECTION_ID[section] || section} bg={band(si)} first={si === 0}>
          <CourseTitle>{section}</CourseTitle>
          {bySection[section].map((g, gi) => (
            <div key={gi}>
              {g.heading !== section && <SubLabel>{g.heading}</SubLabel>}
              <div style={{ display: 'flex', flexDirection: 'column' }}>
                {g.items.map(([name, price], i) => (
                  <div key={i} style={{ display: 'flex', alignItems: 'baseline', gap: '0.6rem', padding: '0.7rem 0.9rem', borderTop: '1px dotted var(--line-on-dark)', background: i % 2 === 1 ? 'rgba(247, 242, 232, 0.045)' : 'transparent' }}>
                    <span style={{ fontFamily: 'var(--font-serif)', fontSize: 'var(--text-body)', color: 'var(--text-primary)', lineHeight: 'var(--leading-snug)' }}>{name}</span>
                    <span style={{ flex: 1, borderBottom: '1px dotted var(--line-on-dark)', transform: 'translateY(-0.3em)' }} />
                    <span style={{ fontFamily: 'var(--font-display)', fontSize: 'var(--text-h4)', color: 'var(--metal-gold)', whiteSpace: 'nowrap' }}>{price}</span>
                  </div>
                ))}
              </div>
            </div>
          ))}
        </Band>
      ))}
    </div>
  );
}

Object.assign(window, { Band, AlaCarte, Menus, Drankkaart, Wijnkaart });