function Aliados() {
  // Render partner names as styled text wordmarks (avoid recreating their actual brand logos)
  const partners = [
    { name: 'Suzano',     weight: 800, letter: '-0.02em', size: 28, italic: false, accent: false },
    { name: 'Klabin',     weight: 700, letter: '0.03em',  size: 26, italic: false, accent: false },
    { name: 'Sylvamo',    weight: 500, letter: '-0.01em', size: 28, italic: true,  accent: false },
    { name: 'APP',        weight: 800, letter: '0',       size: 30, italic: false, accent: false, sub: 'sinarmas' },
    { name: 'Sun Paper',  weight: 700, letter: '0.04em',  size: 24, italic: false, accent: false, serif: true },
    { name: 'Fedrigoni',  weight: 500, letter: '0.10em',  size: 24, italic: false, accent: false },
    { name: 'Propal',     weight: 800, letter: '-0.01em', size: 28, italic: false, accent: false },
    { name: 'Smurfit Kappa', weight: 700, letter: '0', size: 22, italic: false, accent: false, sub: 'Cartón Colombia' },
  ];

  return (
    <section id="aliados" data-screen-label="Aliados" style={{
      padding: '60px 0',
      background: 'var(--navy)',
      borderTop: '1px solid rgba(255,255,255,0.08)',
      position: 'relative',
    }}>
      <div className="container">

        <div style={{
          textAlign: 'center',
          fontSize: 13,
          fontWeight: 700,
          letterSpacing: '0.22em',
          textTransform: 'uppercase',
          color: 'rgba(255,255,255,0.85)',
          marginBottom: 36,
        }}>Aliados que respaldan nuestra operación</div>

        <div className="aliados-row" style={{
          display: 'flex',
          flexWrap: 'wrap',
          justifyContent: 'center',
          alignItems: 'center',
          gap: '32px 56px',
        }}>
          {partners.map((p) => (
            <div key={p.name} style={{
              color: 'rgba(255,255,255,0.78)',
              display: 'flex',
              alignItems: 'baseline',
              gap: 6,
              transition: 'color .25s',
              cursor: 'default',
              fontFamily: p.serif ? 'Playfair Display, serif' : 'Montserrat, sans-serif',
            }}
            onMouseOver={(e) => e.currentTarget.style.color = 'white'}
            onMouseOut={(e) => e.currentTarget.style.color = 'rgba(255,255,255,0.78)'}
            >
              <span style={{
                fontSize: p.size,
                fontWeight: p.weight,
                letterSpacing: p.letter,
                fontStyle: p.italic ? 'italic' : 'normal',
              }}>{p.name}</span>
              {p.sub && (
                <span style={{
                  fontSize: 11,
                  fontWeight: 400,
                  letterSpacing: '0.05em',
                  opacity: 0.7,
                }}>{p.sub}</span>
              )}
            </div>
          ))}
        </div>
      </div>
    </section>
  );
}

window.Aliados = Aliados;