function Clients() {
  const clients = [
    'Hotmart', 'PicPay', 'Yamaha Motors', 'Coca-Cola', 'Sprite',
    'Pizza Hut', 'Vivo', 'Rexona', 'Sadia', 'FGV', 'Vale', 'Unilever',
  ];

  return (
    <section style={{
      background:'#EDE9E5', padding:'64px 56px',
      borderTop:'1px solid #DDD9D4',
      borderBottom:'1px solid #DDD9D4',
      overflow:'hidden',
    }}>
      <div style={{maxWidth:1280, margin:'0 auto'}}>
        <div data-reveal style={{
          display:'flex', alignItems:'center', gap:0, flexWrap:'wrap',
        }}>
          <span style={{
            fontFamily:'Helvetica,Arial,sans-serif', fontWeight:400, fontSize:10,
            letterSpacing:'.18em', textTransform:'uppercase', color:'#9A9A97',
            marginRight:40, whiteSpace:'nowrap', flexShrink:0,
          }}>Marcas atendidas</span>

          <div style={{
            display:'flex', flexWrap:'wrap', gap:'6px 0', alignItems:'center',
            flex:1,
          }}>
            {clients.map((c, i) => (
              <React.Fragment key={c}>
                <span style={{
                  fontFamily:'HelveticaCompressed,"Arial Narrow",Arial,sans-serif',
                  fontWeight:700, fontSize:'clamp(18px,2.2vw,28px)',
                  textTransform:'uppercase', color:'#1D1D1B', letterSpacing:'.01em',
                  whiteSpace:'nowrap',
                }}>{c}</span>
                {i < clients.length - 1 && (
                  <span style={{
                    color:'#C0BFBB', fontSize:20, margin:'0 16px', fontWeight:300,
                  }}>·</span>
                )}
              </React.Fragment>
            ))}
          </div>
        </div>
      </div>
    </section>
  );
}

Object.assign(window, { Clients });