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

        <div style={{
          display: 'grid', gridTemplateColumns: '1fr 1.1fr',
          gap: 80, alignItems: 'start',
        }} className="sobre-grid">
          <div>
            <img src="fotos/picanha-mix.jpg" alt="Picanha com acompanhamentos" style={{
              width: '100%', height: 520, 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. 01</span>
              <span>{t.sobre.caption}</span>
            </div>
          </div>

          <div style={{ paddingTop: 20 }}>
            {t.sobre.paragrafos.map((p, i) => (
              <p key={i} style={{
                fontSize: 18, lineHeight: 1.65, color: 'var(--ink)', marginBottom: 28,
              }}>
                {i === 0 && <span className="title-font" style={{
                  float: 'left', fontSize: 80, lineHeight: 0.8,
                  marginRight: 14, marginTop: 6, color: 'var(--accent)',
                }}>{p.charAt(0)}</span>}
                {i === 0 ? p.slice(1) : p}
              </p>
            ))}

            <div className="sobre-stats" style={{
              marginTop: 48,
              display: 'grid', gridTemplateColumns: 'repeat(3, 1fr)',
              gap: 32,
              paddingTop: 32, borderTop: '1px solid var(--line)',
            }}>
              {t.sobre.stats.map(([n, l]) => (
                <div key={l}>
                  <div className="title-font sobre-stat-num" style={{
                    fontSize: 'clamp(32px, 4.2vw, 56px)',
                    lineHeight: 1, color: 'var(--ink)',
                    letterSpacing: '-0.02em',
                  }}>{n}</div>
                  <div style={{
                    fontFamily: "'JetBrains Mono', monospace", fontSize: 11,
                    letterSpacing: '0.1em', textTransform: 'uppercase',
                    color: 'var(--ink-soft)', marginTop: 8, lineHeight: 1.4,
                  }}>{l}</div>
                </div>
              ))}
            </div>
          </div>
        </div>

      </div>

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

window.Sobre = Sobre;