function MenuSection() {
  const { MenuItem, Tag, Reveal } = window;
  const [active, setActive] = React.useState('cafe');
  const [shown, setShown] = React.useState('cafe');     // which group is rendered
  const [visible, setVisible] = React.useState(true);   // crossfade state
  const swapTimer = React.useRef(null);

  // Smooth category switch: fade the current list out, swap content, fade the
  // new list back in — instead of an instant hard swap.
  const switchTo = (c) => {
    if (c === active) return;
    setActive(c);
    setVisible(false);
    if (swapTimer.current) window.clearTimeout(swapTimer.current);
    swapTimer.current = window.setTimeout(() => {
      setShown(c);
      setVisible(true);
    }, 240);
  };
  React.useEffect(() => () => { if (swapTimer.current) window.clearTimeout(swapTimer.current); }, []);

  // Real Calmaeta menu content.
  const groups = {
    cafe: {
      label: 'Café',
      sections: [
        { title: null, items: [
          { name: 'Espresso Single', price: '1,70 €' },
          { name: 'Espresso Double', price: '2,00 €' },
          { name: 'Macchiato', price: '2,00 €' },
          { name: 'Americano', price: '2,10 €' },
          { name: 'Cortado', price: '2,20 €' },
          { name: 'Flat White', price: '2,70 €' },
          { name: 'Latte', price: '2,80 €' },
          { name: 'Cappuccino', price: '2,90 €' },
          { name: 'Choco Latte', price: '2,90 €' },
        ]},
        { title: 'Non Coffee', items: [
          { name: 'Matcha Latte', price: '3,50 €' },
          { name: 'Té de especialidad', price: '1,90 €' },
        ]},
      ],
    },
    frio: {
      label: 'Frío',
      sections: [
        { title: null, items: [
          { name: 'Iced Latte', price: '3,90 €' },
          { name: 'Iced Matcha Latte', price: '4,90 €' },
          { name: 'Iced Protein Latte', price: '5,90 €' },
          { name: 'Iced Protein Matcha Latte', price: '5,90 €' },
          { name: 'Espresso Tonic', price: '4,90 €' },
          { name: 'Iced Choco Latte', price: '3,90 €' },
        ]},
        { title: 'Extras', items: [
          { name: 'Caramel', price: '0,50 €' },
          { name: 'Vainilla', price: '0,50 €' },
          { name: 'Del tiempo', price: '0,20 €' },
          { name: 'Bebida de coco', price: '0,50 €' },
        ]},
      ],
    },
    picar: {
      label: 'Para picar',
      sections: [
        { title: 'Pastelería', items: [
          { name: 'Medialuna argentina', price: '2,95 €' },
          { name: 'Croissant', price: '2,45 €' },
          { name: 'Alfajores artesanales', price: '3,95 €' },
          { name: 'Cookies', price: '2,70 €' },
          { name: 'Budines artesanales', price: '2,95 €' },
          { name: 'Croissant jamón york y queso', price: '3,50 €' },
          { name: 'Medialuna jamón york y queso', price: '3,95 €' },
          { name: 'Croissant serrano, rúcula y brie', price: '3,95 €' },
          { name: 'Medialuna serrano, rúcula y brie', price: '4,95 €' },
        ]},
        { title: 'Tostas · pan de masa madre y cereales', items: [
          { name: 'Tosta Tomate y Aceite', description: 'Tomate, aceite y sal', price: '2,90 €' },
          { name: 'Tosta Mermelada y Mantequilla', price: '2,90 €' },
          { name: 'Tosta Cacahuete', description: 'Pasta de cacahuete, plátano, canela, miel y chía', price: '4,90 €' },
          { name: 'Tosta Aguacate', description: 'Queso crema, aguacate y huevo duro rallado', price: '4,90 €' },
        ]},
        { title: 'Focaccias y bagel', items: [
          { name: 'Focaccia Mortadella', description: 'Mortadella, mozzarella, rúcula y pesto alla genovese', price: '6,90 €' },
          { name: 'Focaccia Jamón Serrano', description: 'Jamón serrano, queso brie, rúcula y pesto rosso', price: '6,90 €' },
          { name: 'Bagel Jamón York', description: 'Jamón york, queso untable y rúcula', price: '5,90 €' },
        ]},
      ],
    },
    mas: {
      label: 'Más',
      sections: [
        { title: 'Soft drinks', items: [
          { name: 'Kombucha', price: '3,50 €' },
          { name: 'Agua', price: '1,80 €' },
          { name: 'Agua con gas', price: '2,40 €' },
          { name: 'Zumo', price: '2,40 €' },
          { name: 'Refresco', price: '2,40 €' },
          { name: 'Tercio', price: '2,40 €' },
        ]},
        { title: 'Specials', items: [
          { name: 'Cold Brew', price: '3,90 €' },
          { name: 'Filtrado V60 (1 persona)', price: '4,50 €' },
          { name: 'Filtrado V60 (2 personas)', price: '7,00 €' },
          { name: 'Vermut artesanal', price: '3,50 €' },
          { name: 'Copa de vino', price: '3,50 €' },
        ]},
      ],
    },
  };

  const cats = Object.keys(groups);
  const current = groups[shown];

  return (
    <section id="carta" style={{ background: 'var(--color-crema)', padding: '120px 0', position: 'relative', overflow: 'hidden' }}>
      <div className="calmaeta-container-tight" style={{ maxWidth: '980px', margin: '0 auto', position: 'relative' }}>

        <Reveal>
          <div style={{ marginBottom: '56px' }}>
            <div style={{
              fontFamily: 'var(--font-primary)', fontSize: '11px', fontWeight: 600,
              letterSpacing: '0.22em', textTransform: 'uppercase',
              color: 'var(--color-azul)', marginBottom: '4px',
            }}>La carta</div>

            <h2 style={{
              fontFamily: 'var(--font-primary)', fontSize: 'clamp(72px, 12vw, 140px)', fontWeight: 800,
              letterSpacing: '-0.03em', lineHeight: 0.85,
              color: 'var(--color-terracota)', margin: '0 0 20px 0',
              textTransform: 'uppercase',
            }}>Menu</h2>

            <p style={{
              fontFamily: 'var(--font-primary)', fontSize: '15px', fontWeight: 400,
              lineHeight: 1.6, color: 'var(--color-text-muted)', maxWidth: '460px', margin: '0 0 24px 0',
            }}>
              Café de especialidad, opciones frías, para picar y algún especial — nuestra carta completa, siempre a mano.
            </p>

            <div style={{ display: 'flex', gap: '10px', flexWrap: 'wrap' }}>
              {cats.map(c => (
                <Tag key={c} active={active === c} onClick={() => switchTo(c)}>{groups[c].label}</Tag>
              ))}
            </div>
          </div>
        </Reveal>

        <div className="calmaeta-menu-columns" style={{
          opacity: visible ? 1 : 0,
          transform: visible ? 'translateY(0)' : 'translateY(12px)',
          transition: 'opacity 240ms ease, transform 240ms cubic-bezier(0.16,1,0.3,1)',
        }}>
          {current.sections.map((sec, si) => (
            <div key={si} style={{ breakInside: 'avoid', marginBottom: '32px' }}>
              {sec.title && (
                <div style={{
                  fontFamily: 'var(--font-primary)', fontSize: '11px', fontWeight: 600,
                  letterSpacing: '0.16em', textTransform: 'uppercase',
                  color: 'var(--color-azul)', paddingBottom: '8px',
                  borderBottom: '1px solid rgba(35,31,32,0.12)', marginBottom: '4px',
                }}>{sec.title}</div>
              )}
              {sec.items.map((item, i) => (
                <MenuItem key={i} {...item} divider={i < sec.items.length - 1} />
              ))}
            </div>
          ))}
        </div>

        <p style={{
          fontFamily: 'var(--font-primary)', fontSize: '13px', fontWeight: 400,
          color: 'var(--color-text-muted)', marginTop: '40px',
        }}>
          Pregúntanos por las especialidades de hoy · Leche entera, sin lactosa o bebida vegetal de avena o coco · Haz tu pedido en la barra, gracias.
        </p>

        <Reveal delay={40}>
          <div className="calmaeta-menu-feature-card" style={{ display: 'flex', alignItems: 'center', background: 'var(--color-bg-card)', borderRadius: 'var(--radius-lg)', marginTop: '64px', boxShadow: 'var(--shadow-sm)' }}>
            <img src="assets/images/rebeldes-coffee-bag.png" alt="Café de Rebeldes Coffee Roasters" style={{ width: 'clamp(110px, 30vw, 160px)', height: 'clamp(150px, 42vw, 220px)', objectFit: 'cover', borderRadius: 'var(--radius-md)', flexShrink: 0 }} />
            <div>
              <div style={{ fontFamily: 'var(--font-primary)', fontSize: '11px', fontWeight: 600, letterSpacing: '0.22em', textTransform: 'uppercase', color: 'var(--color-terracota)', marginBottom: '10px' }}>Nuestro café</div>
              <div style={{ fontFamily: 'var(--font-primary)', fontSize: '20px', fontWeight: 600, color: 'var(--color-negro)', marginBottom: '10px' }}>Rebeldes Coffee Roasters</div>
              <p style={{ fontFamily: 'var(--font-primary)', fontSize: '15px', fontWeight: 400, lineHeight: 1.65, color: 'var(--color-text-muted)', margin: 0, maxWidth: '420px' }}>
                Trabajamos con Rebeldes Coffee Roasters, con distintos orígenes en cada taza — cada lote se elige y se tuesta con criterio, para que cada café tenga su propio carácter.
              </p>
            </div>
          </div>
        </Reveal>
      </div>
    </section>
  );
}

Object.assign(window, { MenuSection });