function Integrations() {
  const row1 = ["Outlook", "Gmail", "WhatsApp", "Teams", "Xero", "QuickBooks", "Sage"];
  const row2 = ["Procore", "Fieldwire", "Asta", "Bluebeam", "Dropbox", "Drive", "SharePoint"];

  // Duplicate each row so the marquee can loop seamlessly via translateX(-50%).
  const r1 = [...row1, ...row1];
  const r2 = [...row2, ...row2];

  return (
    <section className="nx-int" id="integrations">
      <div className="nx-int__bg" aria-hidden="true"></div>
      <div className="nx-int__inner">
        <div className="nx-int__head">
          <div className="nx-int__badge">
            <i data-lucide="plug-2" strokeWidth="1.75"></i>
            <span>Integrations</span>
          </div>
          <h2 className="nx-int__title">Works with the tools you already use.</h2>
          <p className="nx-int__sub">No new software for your team to learn. Norix plugs into your email, WhatsApp, accounts package, and project software &mdash; nothing to migrate, nothing to rip out.</p>
          <a href="#cta" className="nx-btn nx-btn--primary nx-btn--lg nx-int__cta">Book a discovery call</a>
        </div>

        <div className="nx-int__marquee">
          <div className="nx-int__row nx-int__row--left">
            {r1.map((t, i) => (
              <div key={"r1-" + i} className="nx-int__tile">{t}</div>
            ))}
          </div>
          <div className="nx-int__row nx-int__row--right">
            {r2.map((t, i) => (
              <div key={"r2-" + i} className="nx-int__tile">{t}</div>
            ))}
          </div>
          <div className="nx-int__fade nx-int__fade--left" aria-hidden="true"></div>
          <div className="nx-int__fade nx-int__fade--right" aria-hidden="true"></div>
        </div>
      </div>
    </section>
  );
}
window.Integrations = Integrations;