function Menu() {
  const t = useT();
  const [active, setActive] = React.useState(t.menu.categorias[0].id);
  const cat = t.menu.categorias.find(c => c.id === active) || t.menu.categorias[0];

  return (
    <section id="menu" style={{ padding: '140px 0', background: 'var(--bg)' }}>
      <div className="wrap">
        <div className="section-head">
          <div>
            <div className="eyebrow" style={{ marginBottom: 20 }}>{t.menu.eyebrow}</div>
            <h2 className="title-font">
              {t.menu.title1}<br/>
              <span style={{ color: 'var(--accent)', fontStyle: 'italic' }}>{t.menu.title2}</span>{t.menu.title3}
            </h2>
          </div>
          <p className="lede">{t.menu.lede}</p>
        </div>

        <div style={{
          display: 'flex', gap: 0, borderBottom: '1px solid var(--line)',
          marginBottom: 48, flexWrap: 'wrap',
        }}>
          {t.menu.categorias.map(c => (
            <button
              key={c.id}
              onClick={() => setActive(c.id)}
              style={{
                background: 'transparent', border: 'none',
                borderBottom: active === c.id ? '2px solid var(--accent)' : '2px solid transparent',
                marginBottom: -1,
                padding: '16px 28px 16px 0', marginRight: 32,
                cursor: 'pointer',
                fontFamily: "'Inter', sans-serif",
                fontSize: 15,
                fontWeight: active === c.id ? 500 : 400,
                color: active === c.id ? 'var(--ink)' : 'var(--muted)',
                letterSpacing: '0.01em',
                transition: 'all .2s',
              }}
            >
              <span className="title-font" style={{ fontSize: 24, marginRight: 12 }}>{c.nome}</span>
              <span style={{
                fontFamily: "'JetBrains Mono', monospace", fontSize: 10,
                letterSpacing: '0.14em', textTransform: 'uppercase', color: 'var(--muted)',
              }}>{c.horario}</span>
            </button>
          ))}
        </div>

        <div style={{
          display: 'grid', gridTemplateColumns: '1fr 1.2fr', gap: 64,
          marginBottom: 64, alignItems: 'center',
        }} className="menu-feature">
          <img src="fotos/batata-premium.jpg" alt="Batata premium com costela" style={{
            width: '100%', height: 460, objectFit: 'cover', display: 'block',
            boxShadow: '0 20px 40px -20px rgba(0,0,0,.28)',
          }} />
          <div>
            <div className="mono" style={{
              fontSize: 11, letterSpacing: '0.14em', textTransform: 'uppercase',
              color: 'var(--accent)', marginBottom: 14,
            }}>Fig. 03 · destaque da casa</div>
            <h3 className="title-font" style={{ fontSize: 44, lineHeight: 1.05, color: 'var(--ink)', marginBottom: 18 }}>
              Feito com <span style={{ color: 'var(--accent)', fontStyle: 'italic' }}>tempo</span>, comido com fome.
            </h3>
            <p style={{ fontSize: 16, lineHeight: 1.6, color: 'var(--ink-soft)', maxWidth: '42ch' }}>
              Ingredientes que vêm de Minas quando é possível, e técnica que a gente não tem pressa de apressar. Fogão aceso desde cedo, panela grande, o cheiro que toma conta da rua.
            </p>
          </div>
        </div>

        <div style={{ display: 'grid', gridTemplateColumns: '1fr 1fr', gap: '48px 80px' }} className="menu-grid">
          {cat.itens.map((item, i) => (
            <div key={i} style={{ borderBottom: '1px dashed var(--line)', paddingBottom: 24 }}>
              <div style={{
                display: 'flex', justifyContent: 'space-between',
                alignItems: 'baseline', gap: 16, marginBottom: 6,
              }}>
                <h3 className="title-font" style={{
                  fontSize: 24, color: 'var(--ink)',
                  display: 'flex', alignItems: 'baseline', gap: 10, flexWrap: 'wrap',
                }}>
                  {item.nome}
                  {item.tag && (
                    <span style={{
                      fontFamily: "'JetBrains Mono', monospace", fontSize: 9,
                      letterSpacing: '0.14em', textTransform: 'uppercase',
                      color: 'var(--accent)', border: '1px solid var(--accent)',
                      padding: '3px 7px',
                    }}>{item.tag}</span>
                  )}
                </h3>
                <div style={{
                  flexGrow: 1, borderBottom: '1px dotted var(--line)',
                  margin: '0 6px', transform: 'translateY(-6px)',
                }} />
                <span className="mono" style={{
                  fontSize: 15, fontWeight: 500, color: 'var(--ink)', whiteSpace: 'nowrap',
                }}>{item.preco}</span>
              </div>
              <p style={{ fontSize: 14, lineHeight: 1.5, color: 'var(--ink-soft)' }}>{item.desc}</p>
            </div>
          ))}
        </div>

        <div style={{
          marginTop: 64, padding: '20px 24px',
          background: 'var(--paper)', border: '1px solid var(--line)',
          display: 'flex', justifyContent: 'space-between',
          alignItems: 'center', gap: 20, flexWrap: 'wrap',
          fontFamily: "'JetBrains Mono', monospace", fontSize: 11,
          letterSpacing: '0.1em', textTransform: 'uppercase', color: 'var(--ink-soft)',
        }}>
          <span>{t.menu.fineprint}</span>
          <a
            href={DATA_SHARED.menuPdf}
            target="_blank"
            rel="noopener noreferrer"
            style={{ color: 'var(--accent)', textDecoration: 'none' }}
          >{t.menu.pdfLink}</a>
        </div>
      </div>

      <style>{`
        @media (max-width: 820px) {
          .menu-grid { grid-template-columns: 1fr !important; gap: 32px !important; }
          .menu-feature { grid-template-columns: 1fr !important; gap: 32px !important; }
          .menu-feature img { height: 320px !important; }
        }
      `}</style>
    </section>
  );
}

window.Menu = Menu;