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

        <div style={{ display: 'grid', gridTemplateColumns: '1.1fr 0.9fr', gap: 80 }} className="ev-grid">
          <div>
            <img src="fotos/costela.jpg" alt="Costela com molho" style={{
              width: '100%', height: 540, objectFit: 'cover', display: 'block',
            }} />
            <div style={{
              marginTop: 16, display: 'flex', justifyContent: 'space-between',
              fontFamily: "'JetBrains Mono', monospace", fontSize: 11,
              letterSpacing: '0.1em', textTransform: 'uppercase', color: 'var(--ink-soft)',
            }}>
              <span>Fig. 02</span>
              <span>{t.eventos.caption}</span>
            </div>
          </div>

          <div>
            {t.eventos.pacotes.map((p, i) => (
              <div key={i} style={{
                padding: '28px 0',
                borderTop: i === 0 ? '1px solid var(--ink)' : '1px solid var(--line)',
                display: 'grid', gridTemplateColumns: '40px 1fr', gap: 20,
              }}>
                <div className="mono" style={{
                  fontSize: 11, letterSpacing: '0.1em', color: 'var(--accent)', paddingTop: 4,
                }}>0{i+1}</div>
                <div>
                  <div style={{
                    display: 'flex', justifyContent: 'space-between',
                    alignItems: 'baseline', gap: 20, marginBottom: 8, flexWrap: 'wrap',
                  }}>
                    <h3 className="title-font" style={{ fontSize: 32, color: 'var(--ink)' }}>{p.nome}</h3>
                    <span className="mono" style={{
                      fontSize: 11, letterSpacing: '0.1em', textTransform: 'uppercase', color: 'var(--ink-soft)',
                    }}>{p.min}</span>
                  </div>
                  <p style={{ color: 'var(--ink-soft)', lineHeight: 1.55, fontSize: 15 }}>{p.desc}</p>
                </div>
              </div>
            ))}

            <div style={{
              borderTop: '1px solid var(--line)',
              paddingTop: 28, marginTop: 8,
              display: 'flex', gap: 14, flexWrap: 'wrap',
            }}>
              <a href="#reservas" className="btn">{t.eventos.ctaOrcamento}</a>
              <a href={DATA_SHARED.whatsapp} target="_blank" rel="noopener noreferrer" className="btn btn-ghost">WhatsApp →</a>
            </div>
          </div>
        </div>
      </div>

      <style>{`
        @media (max-width: 900px) {
          .ev-grid { grid-template-columns: 1fr !important; gap: 48px !important; }
        }
      `}</style>
    </section>
  );
}

window.Eventos = Eventos;