/**
 * IntegraStrip — faixa de logos "integra com" logo na dobra (após o hero),
 * pra dar credibilidade de ecossistema antes do leitor entrar nos comparativos.
 * Os selos de compliance (LGPD/OAB) seguem no TrustStrip, perto do FAQ.
 */
const IntegraStrip = () => {
  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://www.vectorlogo.zone/logos/google_ads/google_ads-icon.svg' },
  ];

  return (
    <section className="integra-strip" data-screen-label="03 Integra com">
      <div className="container">
        <p className="integra-strip-kicker">Integra facilmente com as ferramentas que seu escritório já usa</p>
        <ul className="integra-strip-logos">
          {partners.map((p, i) => (
            <li key={i} className="integra-strip-logo" title={p.name}>
              <span className="integra-strip-logo-img"><img src={p.iconUrl} alt={p.name} loading="lazy"/></span>
              <span className="integra-strip-name">{p.name}</span>
            </li>
          ))}
        </ul>
      </div>
    </section>
  );
};

window.IntegraStrip = IntegraStrip;