const Integrations = () => {
  // 5 partners. Quando o usuário mandar os links/SVGs dos ícones, é só
  // preencher o campo `iconUrl` e renderizamos antes do nome.
  const partners = [
    { name: 'AdvBox', iconUrl: 'https://i.imgur.com/EXwY3LA.png' },
    { name: 'Advise', iconUrl: 'https://i.imgur.com/1lIbegI.png' },
    { name: 'Google Calendar', iconUrl: 'https://i.imgur.com/goxlbhZ.png' },
    { name: 'Meta', iconUrl: 'https://i.imgur.com/jbh35A2.png' },
    { name: 'Google Ads', iconUrl: 'https://i.imgur.com/dICJ2Fx.png' },
  ];

  return (
    <section className="section section-light section-dotted" id="integracoes" data-screen-label="09 Integrações">
      <DottedSurface />
      <div className="container">
        <div className="section-heading">
          <div className="eyebrow"><span className="dot"></span>INTEGRAÇÕES</div>
          <h2>Plugada onde<br/>você já trabalha.</h2>
          <p>A nossa IA integra facilmente com as plataformas mais utilizadas pelos advogados para oferecer novos recursos e funcionalidades.</p>
        </div>

        <div className="partners-row">
          {partners.map((p, i) => (
            <div key={i} className="partner partner-glass">
              {p.iconUrl ? (
                <img className="partner-icon" src={p.iconUrl} alt={p.name}/>
              ) : (
                <div className="partner-icon-placeholder" aria-hidden="true"/>
              )}
              <span className="partner-name">{p.name}</span>
            </div>
          ))}
        </div>

      </div>
    </section>
  );
};

window.Integrations = Integrations;