/* global React */
const INT = [
  { name: "QuickBooks", cat: "Accounting" },
  { name: "Sage 50", cat: "Accounting" },
  { name: "Xero", cat: "Accounting" },
  { name: "Geotab", cat: "ELD" },
  { name: "Samsara", cat: "ELD" },
  { name: "Motive", cat: "ELD" },
  { name: "ISAAC", cat: "ELD" },
  { name: "Platform Science", cat: "ELD" },
  { name: "DAT", cat: "Load board" },
  { name: "Truckstop", cat: "Load board" },
  { name: "Loadlink", cat: "Load board · CA" },
  { name: "123Loadboard", cat: "Load board" },
  { name: "Google Maps", cat: "Mapping" },
  { name: "Mapbox", cat: "Mapping" },
  { name: "HERE", cat: "Mapping" },
  { name: "PC*Miler", cat: "Mapping" },
  { name: "BorderConnect", cat: "eManifest" },
  { name: "CBSA CARM", cat: "Customs" },
  { name: "Stripe", cat: "Payments" },
  { name: "Plaid", cat: "Banking" },
  { name: "Twilio", cat: "Comms" },
  { name: "WhatsApp Business", cat: "Comms" },
  { name: "HubSpot", cat: "CRM" },
  { name: "Slack", cat: "Comms" },
];

function Integrations() {
  return (
    <section className="section" id="integrations">
      <div className="section__top">
        <div className="section__num">06</div>
        <div className="section__label">
          <span className="eyebrow">Integrations · 40+ and counting</span>
          <h2 className="display h2">Plug in. Keep what works.</h2>
        </div>
      </div>
      <div className="integrations-grid">
        {INT.map((x, i) => (
          <div key={i} className="int-tile" data-cat={x.cat}>{x.name}</div>
        ))}
      </div>
      <Marquee items={["QuickBooks in CAD", "ELD-agnostic", "eManifest native", "WhatsApp-first", "HOS Canada aware", "IFTA-ready", "Driver app included", "Canadian HQ"]} />
    </section>
  );
}

Object.assign(window, { Integrations });