function MenuSection() {
  const { MenuItem, Tag, Reveal, useLang } = window;
  const { t } = useLang();
  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); }, []);

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

  return (
    <section id="carta" className="calmaeta-section" style={{ background: 'var(--color-crema)', 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',
            }}>{t.menu.eyebrow}</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',
            }}>{t.menu.heading}</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',
            }}>
              {t.menu.intro}
            </p>

            <a
              href="https://www.instagram.com/calmaeta.coffee"
              target="_blank"
              rel="noreferrer"
              style={{
                display: 'inline-flex', alignItems: 'center', gap: '6px',
                fontFamily: 'var(--font-primary)', fontSize: '11px', fontWeight: 600,
                letterSpacing: '0.14em', textTransform: 'uppercase',
                color: 'var(--color-text-muted)', textDecoration: 'none',
                marginBottom: '24px',
                transition: 'color 150ms ease',
              }}
              onMouseEnter={e => e.currentTarget.style.color = 'var(--color-terracota)'}
              onMouseLeave={e => e.currentTarget.style.color = 'var(--color-text-muted)'}
            >
              <svg width="13" height="13" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.75" strokeLinecap="round" strokeLinejoin="round">
                <rect x="2" y="2" width="20" height="20" rx="5" ry="5" />
                <circle cx="12" cy="12" r="4" />
                <circle cx="17.5" cy="6.5" r="0.5" fill="currentColor" stroke="none" />
              </svg>
              @calmaeta.coffee
            </a>

            <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',
        }}>
          {t.menu.footnote}
        </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={t.menu.featureImageAlt} 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' }}>{t.menu.featureEyebrow}</div>
              <div style={{ fontFamily: 'var(--font-primary)', fontSize: '20px', fontWeight: 600, color: 'var(--color-negro)', marginBottom: '10px' }}>{t.menu.featureName}</div>
              <p style={{ fontFamily: 'var(--font-primary)', fontSize: '15px', fontWeight: 400, lineHeight: 1.65, color: 'var(--color-text-muted)', margin: 0, maxWidth: '420px' }}>
                {t.menu.featureDescription}
              </p>
            </div>
          </div>
        </Reveal>
      </div>
    </section>
  );
}

Object.assign(window, { MenuSection });