function MenuSection() {
  const [activeTab, setActiveTab] = React.useState('todo');
  const tabs = [
    { id: 'todo', label: 'Todo' },
    { id: 'bebidas', label: 'Bebidas' },
    { id: 'comida', label: 'Comida' },
    { id: 'extras', label: 'Extras' },
  ];

  const bebidasCats = ['cafe','especiales','frios','tes','otros'];
  const comidaCats  = ['tostadas','vitrina'];
  const extrasCats  = ['extras'];

  let visibleCats;
  if (activeTab === 'bebidas') visibleCats = bebidasCats;
  else if (activeTab === 'comida') visibleCats = comidaCats;
  else if (activeTab === 'extras') visibleCats = extrasCats;
  else visibleCats = TAB_ORDER;

  return (
    <section className="bean-sec menu-section" id="menu">
      <Sparkle size={36} style={{ top: '6%', left: '8%', transform: 'rotate(15deg)' }} color="var(--orange)" />
      <Sparkle size={48} style={{ bottom: '6%', right: '6%' }} color="var(--orange)" />

      <div className="container">
        <div className="sec-head">
          <div>
            <div className="eyebrow" style={{ marginBottom: 14 }}>⟢ Carta</div>
            <h2>El menú,<br/>al grano.</h2>
          </div>
          <div className="menu-tabs">
            {tabs.map(t => (
              <button
                key={t.id}
                className={'menu-tab ' + (activeTab === t.id ? 'active' : '')}
                onClick={() => setActiveTab(t.id)}
              >
                {t.label}
              </button>
            ))}
          </div>
        </div>

        <div className="menu-grid">
          {visibleCats.map(catId => {
            const cat = MENU[catId];
            return (
              <div className="menu-card" key={catId}>
                <h3>
                  {cat.label}
                  <span className="cat-num">{cat.eyebrow}</span>
                </h3>
                <div className="menu-rows">
                  {cat.items.map((it, i) => (
                    <div className="menu-row" key={i}>
                      <div className="name">{it.name}</div>
                      <div className="price">{it.price}€</div>
                    </div>
                  ))}
                </div>
                {cat.foot && <div className="menu-foot">{cat.foot}</div>}
              </div>
            );
          })}
        </div>

        <div className="menu-note">
          <Sparkle size={26} color="var(--orange)" style={{ position: 'relative' }} />
          <span>
            <strong>Precios en euros, IVA incluido.</strong> Trabajamos con leche de avena y de competición. ¿Alérgenos o intolerancias? Avísanos en la barra y te ayudamos.
          </span>
        </div>
      </div>
    </section>
  );
}

Object.assign(window, { MenuSection });