/* De Menu-pagina — vier categorieën (à la carte, menu's, wijnkaart, drankkaart),
   sticky snelnavigatie en paginabrede achtergrondschakeringen. */

/* Manual smooth scroll — the preview's native behavior:'smooth' and rAF are
   throttled here, so we tween with setTimeout (works standalone and in-preview). */
function smoothScrollTo(targetY, duration = 520) {
  const startY = window.scrollY;
  const dist = targetY - startY;
  if (Math.abs(dist) < 2) return;
  const reduce = window.matchMedia && window.matchMedia('(prefers-reduced-motion: reduce)').matches;
  if (reduce) { window.scrollTo(0, targetY); return; }
  const t0 = Date.now();
  const ease = (t) => (t < 0.5 ? 4 * t * t * t : 1 - Math.pow(-2 * t + 2, 3) / 2);
  const step = () => {
    const p = Math.min(1, (Date.now() - t0) / duration);
    window.scrollTo(0, Math.round(startY + dist * ease(p)));
    if (p < 1) setTimeout(step, 16);
  };
  step();
}

function KaartScreen() {
  const { MenuItem, Eyebrow, Ornament, Button } = window.LoncinDesignSystem_6f2c51;
  const { LINKS } = window;
  const D = window.LoncinMenuData;
  const W = window.LoncinWineData;
  const { AlaCarte, Menus, Wijnkaart, Drankkaart } = window;

  const CATS = [
    ['alacarte', 'À la carte'],
    ['menus', 'Menu’s'],
    ['wijnkaart', 'Wijnkaart'],
    ['drankkaart', 'Drankkaart'],
  ];
  const [cat, setCat] = React.useState('alacarte');
  const [navH, setNavH] = React.useState(118);
  const [subTop, setSubTop] = React.useState(118);
  const subRef = React.useRef(null);

  React.useEffect(() => {
    const measure = () => {
      const header = document.querySelector('header');
      setNavH(header ? header.offsetHeight : 118);
    };
    measure();
    window.addEventListener('resize', measure);
    return () => window.removeEventListener('resize', measure);
  }, []);

  // Keep the sticky sub-bar glued to the bottom edge of the main nav, even while
  // the nav animates up/down on scroll — so it never hangs with a gap above it.
  React.useEffect(() => {
    let raf, last = -1;
    const tick = () => {
      const header = document.querySelector('header');
      const b = header ? Math.max(0, Math.round(header.getBoundingClientRect().bottom)) : 0;
      if (b !== last) { last = b; setSubTop(b); }
      raf = requestAnimationFrame(tick);
    };
    raf = requestAnimationFrame(tick);
    return () => cancelAnimationFrame(raf);
  }, []);

  const jump = (id) => {
    const el = document.getElementById(id);
    if (!el) return;
    const subH = subRef.current ? subRef.current.offsetHeight : 64;
    const target = Math.max(0, el.getBoundingClientRect().top + window.scrollY - navH - subH - 20);
    smoothScrollTo(target);
  };

  const changeCat = (c) => {
    setCat(c);
    // Land at the top of the new category's content (right under the sticky
    // sub-bar) instead of springing all the way back to the page hero.
    setTimeout(() => {
      const main = document.querySelector('main');
      const head = main && main.children[0];
      const header = document.querySelector('header');
      if (!head) return;
      const headerH = header ? header.getBoundingClientRect().height : navH;
      const headBottom = head.getBoundingClientRect().bottom + window.scrollY;
      const target = Math.max(0, headBottom - headerH);
      smoothScrollTo(target, 360);
    }, 0);
  };

  // Quick-nav anchors for the active category
  const anchors =
    cat === 'alacarte' ? [['vg', 'Voorgerechten'], ['hg', 'Hoofdgerechten']]
    : cat === 'menus' ? D.menus.map((m) => [m.id, m.title.replace(/«|»/g, '').trim()])
    : cat === 'drankkaart' ? D.drankNav
    : cat === 'wijnkaart' ? W.wijnNav
    : [];

  const band = (i) => (i % 2 === 0 ? 'var(--surface-base)' : 'var(--surface-deep)');

  return (
    <main>
      {/* Page head */}
      <section style={{ textAlign: 'center', padding: 'var(--space-8) var(--gutter) var(--space-6)', maxWidth: 'var(--container-prose)', margin: '0 auto' }}>
        <Eyebrow align="center" rule>De kaart</Eyebrow>
        <h1 style={{ fontFamily: 'var(--font-display)', fontWeight: 400, fontSize: 'var(--text-display-m)', color: 'var(--text-primary)', margin: '1.3rem 0 0', letterSpacing: 'var(--tracking-display)', lineHeight: 'var(--leading-tight)' }}>
          Menu
        </h1>
        <blockquote style={{ fontFamily: 'var(--font-display)', fontStyle: 'italic', fontSize: 'var(--text-h3)', color: 'var(--metal-gold)', lineHeight: 'var(--leading-snug)', margin: '1.6rem auto 0', maxWidth: '34ch' }}>
          “Cuisiner est un art et créer de l’art exige de la patience.”
        </blockquote>
        <p style={{ fontFamily: 'var(--font-serif)', color: 'var(--text-secondary)', lineHeight: 'var(--leading-relaxed)', marginTop: '1.2rem' }}>
          Om u beter te bedienen vragen wij maximaal 3 voor- en 3 hoofdgerechten per tafel;<br />vanaf 7 personen kiest u een menu.
        </p>
      </section>

      {/* Sticky sub-bar: category buttons + quick-nav */}
      <div ref={subRef} style={{ position: 'sticky', top: subTop, zIndex: 18, background: 'rgba(17,15,13,0.92)', backdropFilter: 'blur(10px)', borderTop: '1px solid var(--line-on-dark)', borderBottom: '1px solid var(--line-on-dark)' }}>
        <div style={{ display: 'flex', gap: '0.6rem', justifyContent: 'center', flexWrap: 'wrap', padding: '0.85rem var(--gutter) 0.7rem' }}>
          {CATS.map(([id, label]) => (
            <button
              key={id}
              onClick={() => changeCat(id)}
              style={{
                cursor: 'pointer',
                fontFamily: 'var(--font-sans)',
                fontSize: 'var(--text-eyebrow)',
                letterSpacing: 'var(--tracking-caps)',
                textTransform: 'uppercase',
                whiteSpace: 'nowrap',
                padding: '0.55rem 1.3rem',
                borderRadius: 'var(--radius-pill)',
                border: '1px solid',
                borderColor: cat === id ? 'var(--metal-gold)' : 'var(--line-on-dark-strong)',
                background: cat === id ? 'var(--metal-gold)' : 'transparent',
                color: cat === id ? 'var(--text-on-metal)' : 'var(--text-secondary)',
                transition: 'all var(--dur-fast) var(--ease-standard)',
              }}
            >
              {label}
            </button>
          ))}
        </div>
        {anchors.length > 0 && (
          <div style={{ display: 'flex', gap: '0.4rem', justifyContent: 'center', flexWrap: 'wrap', padding: '0 var(--gutter) 0.75rem' }}>
            {anchors.map(([id, label]) => (
              <button
                key={id}
                onClick={() => jump(id)}
                style={{
                  cursor: 'pointer',
                  fontFamily: 'var(--font-sans)',
                  fontSize: 'var(--text-caption)',
                  letterSpacing: 'var(--tracking-wide)',
                  textTransform: 'uppercase',
                  whiteSpace: 'nowrap',
                  color: 'var(--text-muted)',
                  background: 'transparent',
                  border: 'none',
                  padding: '0.2rem 0.6rem',
                  borderBottom: '1px solid transparent',
                  transition: 'color var(--dur-fast) var(--ease-standard), border-color var(--dur-fast) var(--ease-standard)',
                }}
                onMouseOver={(e) => { e.currentTarget.style.color = 'var(--metal-gold)'; e.currentTarget.style.borderBottomColor = 'var(--metal-gold)'; }}
                onMouseOut={(e) => { e.currentTarget.style.color = 'var(--text-muted)'; e.currentTarget.style.borderBottomColor = 'transparent'; }}
              >
                {label}
              </button>
            ))}
          </div>
        )}
      </div>

      {/* Content */}
      {cat === 'alacarte' && <AlaCarte data={D.alacarte} band={band} />}
      {cat === 'menus' && <Menus menus={D.menus} notes={D.menusNotes} band={band} />}
      {cat === 'wijnkaart' && <Wijnkaart groups={W.wijnkaart} band={band} />}
      {cat === 'drankkaart' && <Drankkaart groups={D.drankkaart} band={band} />}
    </main>
  );
}

Object.assign(window, { KaartScreen });