function ValueRow() {
  const v = [
    {
      t: 'Transparência',
      d: 'Tudo o que o condomínio precisa enxergar, enxerga — sem ruído, sem hierarquia opaca.',
      grad: 'linear-gradient(180deg, #FFFFFF 0%, #E2F1F9 38%, #ADD5EB 100%)',
      fg: '#0A1330'
    },
    {
      t: 'Retidão',
      d: 'Decisões previsíveis, processos auditáveis. O dinheiro alheio é tratado como tal.',
      grad:
        'radial-gradient(80% 60% at 20% 0%, #2F4FA0 0%, rgba(47,79,160,0) 55%),' +
        'radial-gradient(70% 60% at 100% 100%, #0A1330 0%, rgba(10,19,48,0) 60%),' +
        'linear-gradient(160deg, #1B2D70 0%, #16265D 60%, #0A1330 100%)',
      fg: '#FFFFFF'
    },
    {
      t: 'Dinâmica',
      d: 'Tecnologia, hub de soluções, atendimento humano. Não somos só uma administradora.',
      grad:
        'radial-gradient(60% 50% at 80% 20%, #FFFFFF 0%, rgba(255,255,255,0) 60%),' +
        'radial-gradient(80% 60% at 20% 90%, #2F4FA0 0%, rgba(47,79,160,0) 60%),' +
        'linear-gradient(135deg, #ADD5EB 0%, #4F6FB5 100%)',
      fg: '#0A1330'
    }
  ];
  return (
    <section style={{ background: '#F6F6F8', padding: '120px 32px' }}>
      <div style={{ maxWidth: 1280, margin: '0 auto' }}>
        <div style={{ display: 'flex', alignItems: 'flex-end', justifyContent: 'space-between', marginBottom: 48, gap: 32, flexWrap: 'wrap' }}>
          <h2 style={{ fontFamily: 'Saira', fontWeight: 400, fontSize: 52, color: '#0A1330', margin: 0, letterSpacing: '-0.025em', maxWidth: 600 }}>Nossos valores.</h2>
          <span style={{ fontFamily: 'Inter', fontSize: 14, color: '#6C6C78', maxWidth: 380 }}>Os três gradientes da marca não são decoração — são o que defendemos.</span>
        </div>
        <div style={{ display: 'grid', gridTemplateColumns: 'repeat(3, 1fr)', gap: 16 }}>
          {v.map((x) => (
            <div key={x.t} style={{
              background: x.grad, height: 400, padding: 32, borderRadius: 28,
              color: x.fg, display: 'flex', flexDirection: 'column', justifyContent: 'space-between',
              position: 'relative', overflow: 'hidden'
            }}>
              <div style={{
                display: 'inline-flex', alignSelf: 'flex-start', padding: '6px 12px', borderRadius: 999,
                background: x.fg === '#FFFFFF' ? 'rgba(255,255,255,0.14)' : 'rgba(10,19,48,0.08)',
                border: `1px solid ${x.fg === '#FFFFFF' ? 'rgba(255,255,255,0.28)' : 'rgba(10,19,48,0.12)'}`,
                fontFamily: 'Inter', fontSize: 11, fontWeight: 600, letterSpacing: '0.12em', textTransform: 'uppercase'
              }}>Valor</div>
              <div>
                <h3 style={{ fontFamily: 'Saira', fontWeight: 400, fontSize: 40, margin: 0, letterSpacing: '-0.015em' }}>{x.t}</h3>
                <p style={{ fontFamily: 'Inter', fontSize: 15, lineHeight: 1.55, marginTop: 12, opacity: 0.85, maxWidth: 280 }}>{x.d}</p>
              </div>
            </div>
          ))}
        </div>
      </div>
    </section>
  );
}
window.SemogValueRow = ValueRow;